feat: global platform v2 update
This commit is contained in:
ivannoskov
525
API_DOCS.md
Normal file
525
API_DOCS.md
Normal file
@@ -0,0 +1,525 @@
|
||||
# TGEX Backend API v2
|
||||
|
||||
## Аутентификация
|
||||
|
||||
**JWT Bearer Token** в заголовке `Authorization: Bearer <token>`
|
||||
|
||||
### Получение токена через Telegram Bot
|
||||
|
||||
Логика точно такая же как и раньше
|
||||
|
||||
### Эндпоинты
|
||||
|
||||
| Метод | Эндпоинт | Описание | Auth |
|
||||
|-------|----------|----------|------|
|
||||
| `GET` | `/auth/complete` | Обмен временного токена на JWT | ❌ |
|
||||
| `GET` | `/auth/me` | Получить текущего пользователя | ✅ |
|
||||
|
||||
**Response** `/auth/me`:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"telegram_id": 123456789,
|
||||
"username": "string | null"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Workspaces (Рабочие пространства)
|
||||
|
||||
Воркспейсы - изолированные пространства для команд. У пользователя может быть несколько воркспейсов.
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces` | Список воркспейсов пользователя (пагинация) |
|
||||
| `POST` | `/workspaces` | Создать воркспейс |
|
||||
| `PATCH` | `/workspaces/{workspace_id}` | Обновить название |
|
||||
| `DELETE` | `/workspaces/{workspace_id}` | Удалить воркспейс |
|
||||
|
||||
**Body** `POST /workspaces`:
|
||||
```json
|
||||
{
|
||||
"name": "string"
|
||||
}
|
||||
```
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"name": "string"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Workspace Members (Участники воркспейса)
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{workspace_id}/members` | Список участников (пагинация) |
|
||||
| `PUT` | `/workspaces/{workspace_id}/members/{user_id}/permissions` | Обновить права участника |
|
||||
|
||||
**Права доступа** (`PermissionKey`):
|
||||
- `admin_full` - полный доступ
|
||||
- `projects_read` - чтение проектов
|
||||
- `projects_write` - запись проектов
|
||||
- `placements_read` - чтение размещений
|
||||
- `placements_write` - запись размещений
|
||||
- `analytics_read` - чтение аналитики
|
||||
|
||||
**Scope types**: `project` (ограничение прав на конкретный проект)
|
||||
|
||||
**Body** `PUT permissions`:
|
||||
```json
|
||||
{
|
||||
"permissions": [
|
||||
{
|
||||
"key": "admin_full"
|
||||
},
|
||||
{
|
||||
"key": "projects_write",
|
||||
"scopes": [
|
||||
{"type": "project", "id": "project-uuid"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Workspace Invites (Приглашения)
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{workspace_id}/invites` | Список приглашений (пагинация) |
|
||||
| `POST` | `/workspaces/{workspace_id}/invites` | Создать приглашение |
|
||||
|
||||
**Body** `POST /invites`:
|
||||
```json
|
||||
{
|
||||
"username": "telegram_username" // без @
|
||||
}
|
||||
```
|
||||
|
||||
**Статусы приглашения**: `PENDING`, `ACCEPTED`, `REJECTED`
|
||||
|
||||
---
|
||||
|
||||
## Projects (Проекты / Целевые каналы)
|
||||
|
||||
Проекты = целевые Telegram каналы, которые продвигаются. Создаются через Telegram бота.
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{workspace_id}/projects` | Список проектов (пагинация) |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"telegram_id": -1001234567890,
|
||||
"title": "string",
|
||||
"username": "string | null",
|
||||
"status": "ACTIVE | INACTIVE | ARCHIVED"
|
||||
}
|
||||
```
|
||||
|
||||
**Управление проектами**: через Telegram бота (добавить/удалить канал)
|
||||
|
||||
---
|
||||
|
||||
## Channels (Каналы для размещений)
|
||||
|
||||
Каталог Telegram каналов, где можно размещать рекламу.
|
||||
|
||||
| Метод | Эндпоинт | Описание | Фильтры |
|
||||
|-------|----------|----------|---------|
|
||||
| `GET` | `/channels` | Список каналов (пагинация) | `?username=...` |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"telegram_id": -1002345678901,
|
||||
"title": "string",
|
||||
"username": "string | null",
|
||||
"description": "string | null",
|
||||
"subscribers_count": 15000
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Purchase Plan (План закупа)
|
||||
|
||||
План закупа - список каналов для покупки рекламы в рамках проекта.
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{ws}/projects/{proj}/purchase-plan/channels` | Список каналов плана (пагинация) |
|
||||
| `POST` | `/workspaces/{ws}/projects/{proj}/purchase-plan/channels` | Добавить канал в план |
|
||||
| `PATCH` | `/workspaces/{ws}/projects/{proj}/purchase-plan/channels/{id}` | Обновить параметры канала |
|
||||
| `DELETE` | `/workspaces/{ws}/projects/{proj}/purchase-plan/channels/{id}` | Удалить из плана |
|
||||
|
||||
**Body** `POST`:
|
||||
```json
|
||||
{
|
||||
"channel_id": "uuid",
|
||||
"planned_date": "2025-01-15T12:00:00Z", // optional
|
||||
"price": 5000.50, // optional
|
||||
"comment": "string" // optional
|
||||
}
|
||||
```
|
||||
|
||||
**Body** `PATCH`:
|
||||
```json
|
||||
{
|
||||
"planned_date": "2025-01-15T12:00:00Z", // optional
|
||||
"price": 5000.50, // optional
|
||||
"comment": "string" // optional
|
||||
}
|
||||
```
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"status": "PLANNED | COMPLETED | CANCELLED",
|
||||
"planned_date": "2025-01-15T12:00:00Z | null",
|
||||
"price": 5000.50,
|
||||
"comment": "string | null",
|
||||
"channel": {
|
||||
"id": "uuid",
|
||||
"title": "string",
|
||||
"username": "string | null",
|
||||
"subscribers_count": 15000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Creatives (Креативы)
|
||||
|
||||
Креативы = рекламные материалы (текст с пригласительной ссылкой).
|
||||
|
||||
| Метод | Эндпоинт | Описание | Фильтры |
|
||||
|-------|----------|----------|---------|
|
||||
| `GET` | `/workspaces/{ws}/creatives` | Список креативов (пагинация) | `?project_id=...&include_archived=false` |
|
||||
| `GET` | `/workspaces/{ws}/creatives/{id}` | Один креатив | |
|
||||
| `POST` | `/workspaces/{ws}/creatives?project_id=...` | Создать креатив | |
|
||||
| `PATCH` | `/workspaces/{ws}/creatives/{id}` | Обновить креатив | |
|
||||
| `DELETE` | `/workspaces/{ws}/creatives/{id}` | Удалить (архивировать) | |
|
||||
|
||||
**Body** `POST/PATCH`:
|
||||
```json
|
||||
{
|
||||
"name": "string",
|
||||
"text": "Текст с {invite_link} тегом"
|
||||
}
|
||||
```
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"name": "string",
|
||||
"text": "string",
|
||||
"status": "ACTIVE | ARCHIVED",
|
||||
"placements_count": 5
|
||||
}
|
||||
```
|
||||
|
||||
**Важно**: `{invite_link}` в тексте заменяется на уникальную ссылку при создании размещения.
|
||||
|
||||
---
|
||||
|
||||
## Placements (Размещения)
|
||||
|
||||
Размещения = факт размещения креатива в канале.
|
||||
|
||||
| Метод | Эндпоинт | Описание | Фильтры |
|
||||
|-------|----------|----------|---------|
|
||||
| `GET` | `/workspaces/{ws}/placements` | Список размещений (пагинация) | `?project_id=...&placement_channel_id=...&creative_id=...&include_archived=false` |
|
||||
| `GET` | `/workspaces/{ws}/placements/{id}` | Одно размещение | |
|
||||
| `POST` | `/workspaces/{ws}/placements` | Создать размещение | |
|
||||
| `PATCH` | `/workspaces/{ws}/placements/{id}` | Обновить размещение | |
|
||||
| `DELETE` | `/workspaces/{ws}/placements/{id}` | Удалить (архивировать) | |
|
||||
|
||||
**Body** `POST`:
|
||||
```json
|
||||
{
|
||||
"project_id": "uuid",
|
||||
"placement_channel_id": "uuid",
|
||||
"creative_id": "uuid",
|
||||
"placement_date": "2025-01-15T12:00:00Z",
|
||||
"cost": 5000.50, // optional
|
||||
"comment": "string", // optional
|
||||
"ad_post_url": "https://t.me/channel/123", // optional
|
||||
"invite_link_type": "PUBLIC | APPROVAL"
|
||||
}
|
||||
```
|
||||
|
||||
**Body** `PATCH`:
|
||||
```json
|
||||
{
|
||||
"placement_date": "2025-01-15T12:00:00Z", // optional
|
||||
"cost": 5000.50, // optional
|
||||
"comment": "string", // optional
|
||||
"ad_post_url": "https://t.me/channel/123" // optional
|
||||
}
|
||||
```
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"placement_date": "2025-01-15T12:00:00Z",
|
||||
"cost": 5000.50,
|
||||
"comment": "string | null",
|
||||
"ad_post_url": "string | null",
|
||||
"invite_link_type": "PUBLIC | APPROVAL",
|
||||
"invite_link": "https://t.me/+UniqueCode",
|
||||
"status": "ACTIVE | ARCHIVED",
|
||||
"subscriptions_count": 42,
|
||||
"views_count": 1850,
|
||||
"views_availability": "UNKNOWN | AVAILABLE | UNAVAILABLE | MANUAL",
|
||||
"last_views_fetch_at": "2025-01-15T14:30:00Z",
|
||||
"project": {
|
||||
"id": "uuid",
|
||||
"title": "string",
|
||||
"username": "string | null"
|
||||
},
|
||||
"placement_channel": {
|
||||
"id": "uuid",
|
||||
"title": "string",
|
||||
"username": "string | null",
|
||||
"subscribers_count": 15000
|
||||
},
|
||||
"creative": {
|
||||
"id": "uuid",
|
||||
"name": "string"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Типы пригласительных ссылок**:
|
||||
- `PUBLIC` - открытая ссылка
|
||||
- `APPROVAL` - с одобрением через бота
|
||||
|
||||
**Статус просмотров**:
|
||||
- `UNKNOWN` - еще не проверялось
|
||||
- `AVAILABLE` - просмотры доступны (автообновление)
|
||||
- `UNAVAILABLE` - нет доступа к просмотрам
|
||||
- `MANUAL` - ручной ввод
|
||||
|
||||
---
|
||||
|
||||
## Views History (История просмотров)
|
||||
|
||||
| Метод | Эндпоинт | Описание | Фильтры |
|
||||
|-------|----------|----------|---------|
|
||||
| `GET` | `/workspaces/{ws}/placements/{id}/views/history` | История просмотров (пагинация) | `?from_date=...&to_date=...` |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"views_count": 1850,
|
||||
"fetched_at": "2025-01-15T14:30:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Analytics (Аналитика)
|
||||
|
||||
Все эндпоинты поддерживают фильтр `?project_id=...` для конкретного проекта.
|
||||
|
||||
### Аналитика размещений
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{ws}/analytics/placements` | Аналитика по размещениям (пагинация) |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"placement_id": "uuid",
|
||||
"placement_channel_title": "string",
|
||||
"placement_channel_username": "string | null",
|
||||
"creative_name": "string",
|
||||
"placement_date": "2025-01-15T12:00:00Z",
|
||||
"cost": 5000.50,
|
||||
"subscriptions_count": 42,
|
||||
"views_count": 1850,
|
||||
"cps": 119.05, // cost per subscription
|
||||
"cpm": 2702.70 // cost per mille views
|
||||
}
|
||||
```
|
||||
|
||||
### Аналитика креативов
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{ws}/analytics/creatives` | Аналитика по креативам (пагинация) |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"creative_id": "uuid",
|
||||
"creative_name": "string",
|
||||
"placements_count": 5,
|
||||
"total_cost": 25000.00,
|
||||
"total_subscriptions": 210,
|
||||
"total_views": 9250,
|
||||
"avg_cps": 119.05,
|
||||
"avg_cpm": 2702.70
|
||||
}
|
||||
```
|
||||
|
||||
### Аналитика каналов
|
||||
|
||||
| Метод | Эндпоинт | Описание |
|
||||
|-------|----------|----------|
|
||||
| `GET` | `/workspaces/{ws}/analytics/channels` | Аналитика по каналам (пагинация) |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"channel_id": "uuid",
|
||||
"channel_title": "string",
|
||||
"channel_username": "string | null",
|
||||
"placements_count": 3,
|
||||
"total_cost": 15000.00,
|
||||
"total_subscriptions": 126,
|
||||
"total_views": 5550,
|
||||
"avg_cps": 119.05,
|
||||
"avg_cpm": 2702.70
|
||||
}
|
||||
```
|
||||
|
||||
### Аналитика расходов
|
||||
|
||||
| Метод | Эндпоинт | Описание | Фильтры |
|
||||
|-------|----------|----------|---------|
|
||||
| `GET` | `/workspaces/{ws}/analytics/spending` | Динамика расходов | `?date_from=...&date_to=...&grouping=DAY\|WEEK\|MONTH` |
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"items": [
|
||||
{
|
||||
"date": "2025-01-15",
|
||||
"cost": 5000.50,
|
||||
"subscriptions": 42,
|
||||
"views": 1850
|
||||
}
|
||||
],
|
||||
"total_cost": 25000.00,
|
||||
"total_subscriptions": 210,
|
||||
"total_views": 9250
|
||||
}
|
||||
```
|
||||
|
||||
**Группировка** (`DateGrouping`): `DAY`, `WEEK`, `MONTH`
|
||||
|
||||
---
|
||||
|
||||
## Пагинация
|
||||
|
||||
Все эндпоинты с пагинацией возвращают:
|
||||
|
||||
```json
|
||||
{
|
||||
"items": [...],
|
||||
"total": 42,
|
||||
"page": 1,
|
||||
"size": 50,
|
||||
"pages": 1
|
||||
}
|
||||
```
|
||||
|
||||
**Query параметры**: `?page=1&size=50`
|
||||
|
||||
---
|
||||
|
||||
## Статусы и Enum
|
||||
|
||||
### WorkspaceUserStatus
|
||||
- `ACTIVE` - активный участник
|
||||
- `INVITED` - приглашён, но не принял
|
||||
|
||||
### WorkspaceInviteStatus
|
||||
- `PENDING` - ожидает принятия
|
||||
- `ACCEPTED` - принято
|
||||
- `REJECTED` - отклонено
|
||||
|
||||
### ProjectStatus / ChannelStatus
|
||||
- `ACTIVE` - активен
|
||||
- `INACTIVE` - неактивен
|
||||
- `ARCHIVED` - архивирован
|
||||
|
||||
### CreativeStatus / PlacementStatus
|
||||
- `ACTIVE` - активен
|
||||
- `ARCHIVED` - архивирован
|
||||
|
||||
### PurchasePlanStatus
|
||||
- `PLANNED` - запланирован
|
||||
- `COMPLETED` - завершён
|
||||
- `CANCELLED` - отменён
|
||||
|
||||
### InviteLinkType
|
||||
- `PUBLIC` - открытая ссылка
|
||||
- `APPROVAL` - с одобрением бота
|
||||
|
||||
### PostViewsAvailability
|
||||
- `UNKNOWN` - неизвестно (ещё не проверялось)
|
||||
- `AVAILABLE` - доступны (автообновление)
|
||||
- `UNAVAILABLE` - недоступны
|
||||
- `MANUAL` - ручной ввод
|
||||
|
||||
---
|
||||
|
||||
## Коды ошибок HTTP
|
||||
|
||||
- `200` - OK
|
||||
- `201` - Created
|
||||
- `204` - No Content (успешное удаление)
|
||||
- `400` - Bad Request (валидация)
|
||||
- `401` - Unauthorized (нет токена)
|
||||
- `403` - Forbidden (нет прав)
|
||||
- `404` - Not Found
|
||||
- `500` - Internal Server Error
|
||||
|
||||
**Формат ошибки**:
|
||||
```json
|
||||
{
|
||||
"detail": "Error message"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Особенности
|
||||
|
||||
1. **Все UUID в формате**: `xxxxxxxx-xxxx-4xxx-xxxx-xxxxxxxxxxxx`
|
||||
2. **Даты в ISO 8601**: `2025-01-15T12:00:00Z` (UTC)
|
||||
3. **Метрики автообновляются**: просмотры обновляются воркером каждые 60 секунд (если `views_availability = AVAILABLE`)
|
||||
4. **Подписки отслеживаются**: через Telegram бота при присоединении по invite_link
|
||||
5. **Права проверяются**: все эндпоинты под воркспейсами требуют соответствующих прав
|
||||
6. **Soft delete**: удаление = архивирование (статус `ARCHIVED`)
|
||||
|
||||
---
|
||||
|
||||
## Telegram Bot Integration
|
||||
|
||||
- Создание проектов (добавление целевых каналов)
|
||||
- Создание креативов через диалог
|
||||
- Приглашения в воркспейсы
|
||||
- Отслеживание подписок через invite links
|
||||
- Начальная аутентификация (`/start` → временный токен)
|
||||
|
||||
@@ -1,286 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Analytics Costs Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { analyticsApi } from "@/lib/api";
|
||||
import { formatCurrency, formatNumber } from "@/lib/utils/format";
|
||||
import { Loader2, AlertCircle, DollarSign } from "lucide-react";
|
||||
import type { SpendingAnalytics, DateGrouping } from "@/lib/types/api";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
export default function AnalyticsCostsPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [report, setReport] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [grouping, setGrouping] = useState<DateGrouping>("week");
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadData();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [grouping, selectedChannel]);
|
||||
|
||||
const loadData = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const reportData = await analyticsApi.spending({
|
||||
grouping,
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
setReport(reportData);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки аналитики");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Аналитика", href: "/analytics" },
|
||||
{ label: "Затраты" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Затраты на рекламу
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Динамика расходов по периодам
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Фильтры</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Период группировки
|
||||
</label>
|
||||
<Select
|
||||
value={grouping}
|
||||
onValueChange={(value: DateGrouping) => setGrouping(value)}
|
||||
>
|
||||
<SelectTrigger className="max-w-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="day">По дням</SelectItem>
|
||||
<SelectItem value="week">По неделям</SelectItem>
|
||||
<SelectItem value="month">По месяцам</SelectItem>
|
||||
<SelectItem value="quarter">По кварталам</SelectItem>
|
||||
<SelectItem value="year">По годам</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{loading ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : report ? (
|
||||
<>
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего затрат
|
||||
</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(report.total_cost)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
За выбранный период
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Подписчики
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(report.total_subscriptions)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Всего привлечено
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Просмотры
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(report.total_views)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Всего просмотров
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Средний CPF
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{report.avg_cpf ? formatCurrency(report.avg_cpf) : "—"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
В среднем за период
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>График затрат</CardTitle>
|
||||
<CardDescription>Динамика расходов на рекламу</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={350}>
|
||||
<BarChart data={report.chart_data}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
className="stroke-muted"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="period"
|
||||
className="text-xs"
|
||||
tick={{ fill: "hsl(var(--muted-foreground))" }}
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
tick={{ fill: "hsl(var(--muted-foreground))" }}
|
||||
tickFormatter={(value) => `₽${formatNumber(value)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
formatter={(value: any) => [
|
||||
`₽${formatNumber(value)}`,
|
||||
"Затраты",
|
||||
]}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="cost"
|
||||
name="Затраты"
|
||||
fill="hsl(var(--primary))"
|
||||
radius={[8, 8, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Детализация по периодам</CardTitle>
|
||||
<CardDescription>Затраты и количество закупов</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{report.chart_data.map((period) => (
|
||||
<div
|
||||
key={period.period}
|
||||
className="flex items-center justify-between p-3 rounded-lg border"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium">{period.period}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{formatNumber(period.subscriptions)} подписок • {formatNumber(period.views)} просмотров
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-bold">
|
||||
{formatCurrency(period.cost)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{period.cpf ? `CPF: ${formatCurrency(period.cpf)}` : "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,606 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import { ru } from "date-fns/locale";
|
||||
import { channelsApi, analyticsApi } from "@/lib/api";
|
||||
import { formatCurrency, formatNumber } from "@/lib/utils/format";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
CalendarIcon,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
import type { TargetChannel, CreativeAnalytics } from "@/lib/types/api";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
type SortField =
|
||||
| "name"
|
||||
| "placements_count"
|
||||
| "total_cost"
|
||||
| "total_subscriptions"
|
||||
| "total_views"
|
||||
| "avg_cpf"
|
||||
| "avg_cpm"
|
||||
| null;
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
export default function CreativesAnalyticsPage() {
|
||||
const [channels, setChannels] = useState<TargetChannel[]>([]);
|
||||
const [selectedChannelId, setSelectedChannelId] = useState<string>("");
|
||||
const [dateFrom, setDateFrom] = useState<Date | undefined>();
|
||||
const [dateTo, setDateTo] = useState<Date | undefined>();
|
||||
const [creatives, setCreatives] = useState<CreativeAnalytics[]>([]);
|
||||
const [filteredCreatives, setFilteredCreatives] = useState<
|
||||
CreativeAnalytics[]
|
||||
>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingData, setLoadingData] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [sortField, setSortField] = useState<SortField>(null);
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadChannels();
|
||||
}, []);
|
||||
|
||||
const loadChannels = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await channelsApi.list();
|
||||
const activeChannels = response.target_channels.filter((c) => c.is_active);
|
||||
setChannels(activeChannels);
|
||||
if (activeChannels.length > 0) {
|
||||
setSelectedChannelId(activeChannels[0].id);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки каналов");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCreativesData = async () => {
|
||||
if (!selectedChannelId) return;
|
||||
|
||||
try {
|
||||
setLoadingData(true);
|
||||
const response = await analyticsApi.creatives({
|
||||
target_channel_id: selectedChannelId,
|
||||
});
|
||||
setCreatives(response.creatives);
|
||||
setFilteredCreatives(response.creatives);
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка загрузки данных");
|
||||
} finally {
|
||||
setLoadingData(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Сортировка
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortDirection === "asc") {
|
||||
setSortDirection("desc");
|
||||
} else if (sortDirection === "desc") {
|
||||
setSortField(null);
|
||||
setSortDirection(null);
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
return <ArrowDown className="ml-2 h-4 w-4 inline" />;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!sortField || !sortDirection) {
|
||||
setFilteredCreatives([...creatives]);
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = [...creatives].sort((a, b) => {
|
||||
let aValue: string | number | null = 0;
|
||||
let bValue: string | number | null = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "name":
|
||||
aValue = a.name;
|
||||
bValue = b.name;
|
||||
break;
|
||||
case "placements_count":
|
||||
aValue = a.placements_count;
|
||||
bValue = b.placements_count;
|
||||
break;
|
||||
case "total_cost":
|
||||
aValue = a.total_cost;
|
||||
bValue = b.total_cost;
|
||||
break;
|
||||
case "total_subscriptions":
|
||||
aValue = a.total_subscriptions;
|
||||
bValue = b.total_subscriptions;
|
||||
break;
|
||||
case "total_views":
|
||||
aValue = a.total_views;
|
||||
bValue = b.total_views;
|
||||
break;
|
||||
case "avg_cpf":
|
||||
aValue = a.avg_cpf || 0;
|
||||
bValue = b.avg_cpf || 0;
|
||||
break;
|
||||
case "avg_cpm":
|
||||
aValue = a.avg_cpm || 0;
|
||||
bValue = b.avg_cpm || 0;
|
||||
break;
|
||||
}
|
||||
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortDirection === "asc"
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
}
|
||||
|
||||
if (typeof aValue === "number" && typeof bValue === "number") {
|
||||
return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
setFilteredCreatives(sorted);
|
||||
}, [sortField, sortDirection, creatives]);
|
||||
|
||||
// Экспорт
|
||||
const exportToExcel = () => {
|
||||
const data = filteredCreatives.map((creative) => ({
|
||||
Название: creative.name,
|
||||
Размещений: creative.placements_count,
|
||||
"Общая стоимость": creative.total_cost,
|
||||
Подписки: creative.total_subscriptions,
|
||||
Просмотры: creative.total_views,
|
||||
"Средний CPF": creative.avg_cpf || 0,
|
||||
"Средний CPM": creative.avg_cpm || 0,
|
||||
}));
|
||||
|
||||
const ws = XLSX.utils.json_to_sheet(data);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Креативы");
|
||||
|
||||
const colWidths = [
|
||||
{ wch: 30 },
|
||||
{ wch: 12 },
|
||||
{ wch: 15 },
|
||||
{ wch: 12 },
|
||||
{ wch: 12 },
|
||||
{ wch: 12 },
|
||||
{ wch: 12 },
|
||||
];
|
||||
ws["!cols"] = colWidths;
|
||||
|
||||
XLSX.writeFile(
|
||||
wb,
|
||||
`Креативы_Аналитика_${new Date().toISOString().split("T")[0]}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
const exportToCSV = () => {
|
||||
const data = filteredCreatives.map((creative) => ({
|
||||
Название: creative.name,
|
||||
Размещений: creative.placements_count,
|
||||
"Общая стоимость": creative.total_cost,
|
||||
Подписки: creative.total_subscriptions,
|
||||
Просмотры: creative.total_views,
|
||||
"Средний CPF": creative.avg_cpf || 0,
|
||||
"Средний CPM": creative.avg_cpm || 0,
|
||||
}));
|
||||
|
||||
const headers = Object.keys(data[0]);
|
||||
const csvContent = [
|
||||
headers.join(","),
|
||||
...data.map((row) =>
|
||||
headers
|
||||
.map((header) => {
|
||||
const value = row[header as keyof typeof row];
|
||||
return value !== null && value !== undefined ? value : "";
|
||||
})
|
||||
.join(",")
|
||||
),
|
||||
].join("\n");
|
||||
|
||||
const blob = new Blob(["\ufeff" + csvContent], {
|
||||
type: "text/csv;charset=utf-8;",
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `Креативы_Аналитика_${new Date().toISOString().split("T")[0]}.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
};
|
||||
|
||||
const exportToTXT = () => {
|
||||
const data = filteredCreatives.map((creative) => ({
|
||||
Название: creative.name,
|
||||
Размещений: creative.placements_count,
|
||||
"Общая стоимость": creative.total_cost,
|
||||
Подписки: creative.total_subscriptions,
|
||||
Просмотры: creative.total_views,
|
||||
"Средний CPF": creative.avg_cpf || 0,
|
||||
"Средний CPM": creative.avg_cpm || 0,
|
||||
}));
|
||||
|
||||
const headers = Object.keys(data[0]);
|
||||
const columnWidths = headers.map((header) => {
|
||||
const maxLength = Math.max(
|
||||
header.length,
|
||||
...data.map((row) =>
|
||||
String(row[header as keyof typeof row] || "").length
|
||||
)
|
||||
);
|
||||
return Math.min(maxLength + 2, 30);
|
||||
});
|
||||
|
||||
const txtContent = [
|
||||
headers.map((header, i) => header.padEnd(columnWidths[i])).join(" | "),
|
||||
columnWidths.map((width) => "-".repeat(width)).join("-+-"),
|
||||
...data.map((row) =>
|
||||
headers
|
||||
.map((header, i) =>
|
||||
String(row[header as keyof typeof row] || "").padEnd(columnWidths[i])
|
||||
)
|
||||
.join(" | ")
|
||||
),
|
||||
].join("\n");
|
||||
|
||||
const blob = new Blob([txtContent], { type: "text/plain;charset=utf-8" });
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `Креативы_Аналитика_${new Date().toISOString().split("T")[0]}.txt`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Аналитика", href: "/analytics" },
|
||||
{ label: "Креативы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Аналитика", href: "/analytics" },
|
||||
{ label: "Креативы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Аналитика креативов
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Производительность рекламных креативов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{channels.length === 0 ? (
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Нет активных целевых каналов. Добавьте канал для начала работы с
|
||||
аналитикой.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
{/* Фильтры */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Фильтры</CardTitle>
|
||||
<CardDescription>
|
||||
Настройте параметры для отображения данных
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Целевой канал</Label>
|
||||
<Select
|
||||
value={selectedChannelId}
|
||||
onValueChange={setSelectedChannelId}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{channels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
{channel.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Дата от</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!dateFrom && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{dateFrom ? (
|
||||
format(dateFrom, "d MMM yyyy", { locale: ru })
|
||||
) : (
|
||||
<span>Выберите дату</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={dateFrom}
|
||||
onSelect={setDateFrom}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Дата до</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!dateTo && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{dateTo ? (
|
||||
format(dateTo, "d MMM yyyy", { locale: ru })
|
||||
) : (
|
||||
<span>Выберите дату</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={dateTo}
|
||||
onSelect={setDateTo}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={loadCreativesData} disabled={!selectedChannelId}>
|
||||
Применить фильтры
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Таблица */}
|
||||
{loadingData ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : filteredCreatives.length > 0 ? (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row justify-between">
|
||||
<div>
|
||||
<CardTitle>Креативы</CardTitle>
|
||||
<CardDescription>
|
||||
Показатели производительности креативов
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Экспорт
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={exportToExcel}>
|
||||
Экспорт в Excel (.xlsx)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={exportToCSV}>
|
||||
Экспорт в CSV (.csv)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={exportToTXT}>
|
||||
Экспорт в TXT (.txt)
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("name")}
|
||||
>
|
||||
Название
|
||||
{getSortIcon("name")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("placements_count")}
|
||||
>
|
||||
Размещений
|
||||
{getSortIcon("placements_count")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("total_cost")}
|
||||
>
|
||||
Общая стоимость
|
||||
{getSortIcon("total_cost")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("total_subscriptions")}
|
||||
>
|
||||
Подписки
|
||||
{getSortIcon("total_subscriptions")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("total_views")}
|
||||
>
|
||||
Просмотры
|
||||
{getSortIcon("total_views")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("avg_cpf")}
|
||||
>
|
||||
Средний CPF
|
||||
{getSortIcon("avg_cpf")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("avg_cpm")}
|
||||
>
|
||||
Средний CPM
|
||||
{getSortIcon("avg_cpm")}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredCreatives.map((creative) => (
|
||||
<TableRow key={creative.id}>
|
||||
<TableCell className="font-medium">
|
||||
{creative.name}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(creative.placements_count)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(creative.total_cost)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(creative.total_subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(creative.total_views)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{creative.avg_cpf !== null
|
||||
? formatCurrency(creative.avg_cpf)
|
||||
: "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{creative.avg_cpm !== null
|
||||
? formatCurrency(creative.avg_cpm)
|
||||
: "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
creatives.length === 0 &&
|
||||
!loadingData && (
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Нет данных по креативам. Примените фильтры для отображения
|
||||
данных.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,242 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Analytics Overview Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { analyticsApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
BarChart3,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Users,
|
||||
ShoppingCart,
|
||||
DollarSign,
|
||||
} from "lucide-react";
|
||||
import type { SpendingAnalytics } from "@/lib/types/api";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadData();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedChannel]);
|
||||
|
||||
const loadData = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await analyticsApi.spending({
|
||||
grouping: "week",
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
setSpending(data);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки аналитики");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Аналитика" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !spending) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Аналитика" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{error || "Не удалось загрузить аналитику"}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Аналитика" },
|
||||
{ label: "Обзор" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Аналитика</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Сводная статистика за последний месяц
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего затрат
|
||||
</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(spending.total_cost)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
За выбранный период
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего подписчиков
|
||||
</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending.total_subscriptions)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Всего привлечено
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Средний CPF</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{spending.avg_cpf ? `₽${formatMetric(spending.avg_cpf)}` : "—"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Стоимость подписки
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Средний CPM</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{spending.avg_cpm ? `₽${formatMetric(spending.avg_cpm)}` : "—"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
За 1000 просмотров
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Динамика затрат</CardTitle>
|
||||
<CardDescription>Расходы по периодам</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={spending.chart_data}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="period"
|
||||
className="text-xs"
|
||||
tick={{ fill: "hsl(var(--muted-foreground))" }}
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
tick={{ fill: "hsl(var(--muted-foreground))" }}
|
||||
tickFormatter={(value) => `₽${formatNumber(value)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="cost"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2}
|
||||
name="Затраты"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,476 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { ChartConfigPanel } from "@/components/analytics/chart-config-panel";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { channelsApi, analyticsApi } from "@/lib/api";
|
||||
import { formatCurrency, formatNumber } from "@/lib/utils/format";
|
||||
import { Plus, Loader2, AlertCircle, TrendingUp } from "lucide-react";
|
||||
import type {
|
||||
TargetChannel,
|
||||
SpendingAnalytics,
|
||||
AnalyticsMetric,
|
||||
DateGrouping,
|
||||
SpendingDataPoint,
|
||||
} from "@/lib/types/api";
|
||||
import { format } from "date-fns";
|
||||
|
||||
interface ChartData {
|
||||
id: string;
|
||||
config: {
|
||||
targetChannelIds: string[];
|
||||
metrics: AnalyticsMetric[];
|
||||
dateFrom: Date | null;
|
||||
dateTo: Date | null;
|
||||
grouping: DateGrouping;
|
||||
};
|
||||
data: SpendingAnalytics | null;
|
||||
loading: boolean;
|
||||
width: "full" | "half";
|
||||
}
|
||||
|
||||
// Компонент для sortable item
|
||||
interface SortableChartItemProps {
|
||||
chart: ChartData;
|
||||
index: number;
|
||||
channels: TargetChannel[];
|
||||
chartsLength: number;
|
||||
onBuild: (chartId: string, config: ChartData["config"]) => void;
|
||||
onRemove: (chartId: string) => void;
|
||||
onWidthChange: (chartId: string, width: "full" | "half") => void;
|
||||
}
|
||||
|
||||
const SortableChartItem: React.FC<SortableChartItemProps> = ({
|
||||
chart,
|
||||
index,
|
||||
channels,
|
||||
chartsLength,
|
||||
onBuild,
|
||||
onRemove,
|
||||
onWidthChange,
|
||||
}) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: chart.id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className={chart.width === "half" ? "" : "col-span-full"}>
|
||||
<ChartConfigPanel
|
||||
channels={channels}
|
||||
data={chart.data}
|
||||
loading={chart.loading}
|
||||
width={chart.width}
|
||||
onBuild={(config) => onBuild(chart.id, config)}
|
||||
onRemove={chartsLength > 1 ? () => onRemove(chart.id) : undefined}
|
||||
onWidthChange={(width) => onWidthChange(chart.id, width)}
|
||||
showRemoveButton={chartsLength > 1}
|
||||
chartNumber={index + 1}
|
||||
dragHandleProps={{ ...attributes, ...listeners }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TargetChannelsAnalyticsPage() {
|
||||
const [channels, setChannels] = useState<TargetChannel[]>([]);
|
||||
const [charts, setCharts] = useState<ChartData[]>([
|
||||
{
|
||||
id: "chart-1",
|
||||
config: {
|
||||
targetChannelIds: [],
|
||||
metrics: [],
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
grouping: "day",
|
||||
},
|
||||
data: null,
|
||||
loading: false,
|
||||
width: "full",
|
||||
},
|
||||
]);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadChannels();
|
||||
}, []);
|
||||
|
||||
const loadChannels = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await channelsApi.list();
|
||||
const activeChannels = response.target_channels.filter((c) => c.is_active);
|
||||
setChannels(activeChannels);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки каналов");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBuildChart = async (
|
||||
chartId: string,
|
||||
config: ChartData["config"]
|
||||
) => {
|
||||
const chartIndex = charts.findIndex((c) => c.id === chartId);
|
||||
if (chartIndex === -1) return;
|
||||
|
||||
// Обновляем состояние графика
|
||||
const updatedCharts = [...charts];
|
||||
updatedCharts[chartIndex].loading = true;
|
||||
updatedCharts[chartIndex].config = config;
|
||||
setCharts(updatedCharts);
|
||||
|
||||
try {
|
||||
// Загружаем данные для каждого канала
|
||||
const promises = config.targetChannelIds.map((channelId) =>
|
||||
analyticsApi.spending({
|
||||
target_channel_id: channelId,
|
||||
date_from: config.dateFrom
|
||||
? format(config.dateFrom, "yyyy-MM-dd'T'HH:mm:ss'Z'")
|
||||
: undefined,
|
||||
date_to: config.dateTo
|
||||
? format(config.dateTo, "yyyy-MM-dd'T'HH:mm:ss'Z'")
|
||||
: undefined,
|
||||
grouping: config.grouping,
|
||||
})
|
||||
);
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
|
||||
// Объединяем данные (если несколько каналов)
|
||||
const combinedData: SpendingAnalytics = results.reduce(
|
||||
(acc, result) => {
|
||||
acc.total_cost += result.total_cost;
|
||||
acc.total_subscriptions += result.total_subscriptions;
|
||||
acc.total_views += result.total_views;
|
||||
|
||||
// Объединяем chart_data по периодам
|
||||
result.chart_data.forEach((dataPoint) => {
|
||||
const existing = acc.chart_data.find(
|
||||
(d) => d.period === dataPoint.period
|
||||
);
|
||||
if (existing) {
|
||||
existing.cost += dataPoint.cost;
|
||||
existing.subscriptions += dataPoint.subscriptions;
|
||||
existing.views += dataPoint.views;
|
||||
// CPF и CPM пересчитаем после
|
||||
} else {
|
||||
acc.chart_data.push({ ...dataPoint });
|
||||
}
|
||||
});
|
||||
|
||||
return acc;
|
||||
},
|
||||
{
|
||||
total_cost: 0,
|
||||
total_subscriptions: 0,
|
||||
total_views: 0,
|
||||
avg_cpf: null,
|
||||
avg_cpm: null,
|
||||
chart_data: [] as SpendingDataPoint[],
|
||||
}
|
||||
);
|
||||
|
||||
// Пересчитываем CPF и CPM для каждого периода
|
||||
combinedData.chart_data.forEach((dataPoint) => {
|
||||
dataPoint.cpf =
|
||||
dataPoint.subscriptions > 0
|
||||
? dataPoint.cost / dataPoint.subscriptions
|
||||
: null;
|
||||
dataPoint.cpm =
|
||||
dataPoint.views > 0 ? (dataPoint.cost / dataPoint.views) * 1000 : null;
|
||||
});
|
||||
|
||||
// Пересчитываем средние значения
|
||||
combinedData.avg_cpf =
|
||||
combinedData.total_subscriptions > 0
|
||||
? combinedData.total_cost / combinedData.total_subscriptions
|
||||
: null;
|
||||
combinedData.avg_cpm =
|
||||
combinedData.total_views > 0
|
||||
? (combinedData.total_cost / combinedData.total_views) * 1000
|
||||
: null;
|
||||
|
||||
// Сортируем по периодам
|
||||
combinedData.chart_data.sort((a, b) =>
|
||||
a.period.localeCompare(b.period)
|
||||
);
|
||||
|
||||
// Обновляем данные графика
|
||||
const finalCharts = [...updatedCharts];
|
||||
finalCharts[chartIndex].data = combinedData;
|
||||
finalCharts[chartIndex].loading = false;
|
||||
setCharts(finalCharts);
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка загрузки данных");
|
||||
const finalCharts = [...updatedCharts];
|
||||
finalCharts[chartIndex].loading = false;
|
||||
setCharts(finalCharts);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddChart = () => {
|
||||
setCharts([
|
||||
...charts,
|
||||
{
|
||||
id: `chart-${Date.now()}`,
|
||||
config: {
|
||||
targetChannelIds: [],
|
||||
metrics: [],
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
grouping: "day",
|
||||
},
|
||||
data: null,
|
||||
loading: false,
|
||||
width: "full",
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleRemoveChart = (chartId: string) => {
|
||||
if (charts.length === 1) {
|
||||
alert("Должен остаться хотя бы один график");
|
||||
return;
|
||||
}
|
||||
setCharts(charts.filter((c) => c.id !== chartId));
|
||||
};
|
||||
|
||||
const handleWidthChange = (chartId: string, width: "full" | "half") => {
|
||||
setCharts(
|
||||
charts.map((chart) =>
|
||||
chart.id === chartId ? { ...chart, width } : chart
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
setCharts((items) => {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||
|
||||
return arrayMove(items, oldIndex, newIndex);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Собираем все данные для таблицы
|
||||
const getAllTableData = (): SpendingDataPoint[] => {
|
||||
const allData: SpendingDataPoint[] = [];
|
||||
const periodMap = new Map<string, SpendingDataPoint>();
|
||||
|
||||
charts.forEach((chart) => {
|
||||
if (!chart.data) return;
|
||||
chart.data.chart_data.forEach((dataPoint) => {
|
||||
const existing = periodMap.get(dataPoint.period);
|
||||
if (existing) {
|
||||
existing.cost += dataPoint.cost;
|
||||
existing.subscriptions += dataPoint.subscriptions;
|
||||
existing.views += dataPoint.views;
|
||||
// Пересчитываем CPF и CPM
|
||||
existing.cpf =
|
||||
existing.subscriptions > 0
|
||||
? existing.cost / existing.subscriptions
|
||||
: null;
|
||||
existing.cpm =
|
||||
existing.views > 0 ? (existing.cost / existing.views) * 1000 : null;
|
||||
} else {
|
||||
periodMap.set(dataPoint.period, { ...dataPoint });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return Array.from(periodMap.values()).sort((a, b) =>
|
||||
a.period.localeCompare(b.period)
|
||||
);
|
||||
};
|
||||
|
||||
const tableData = getAllTableData();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Аналитика", href: "/analytics" },
|
||||
{ label: "Целевые каналы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Аналитика", href: "/analytics" },
|
||||
{ label: "Целевые каналы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Аналитика целевых каналов
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Создайте графики для анализа показателей
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAddChart}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Добавить график
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{channels.length === 0 ? (
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Нет активных целевых каналов. Добавьте канал для начала работы с
|
||||
аналитикой.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
{/* Графики */}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={charts.map((c) => c.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{charts.map((chart, index) => (
|
||||
<SortableChartItem
|
||||
key={chart.id}
|
||||
chart={chart}
|
||||
index={index}
|
||||
channels={channels}
|
||||
chartsLength={charts.length}
|
||||
onBuild={handleBuildChart}
|
||||
onRemove={handleRemoveChart}
|
||||
onWidthChange={handleWidthChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
|
||||
{/* Таблица */}
|
||||
{tableData.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Табличное представление</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Период</TableHead>
|
||||
<TableHead className="text-right">Расходы</TableHead>
|
||||
<TableHead className="text-right">Подписки</TableHead>
|
||||
<TableHead className="text-right">Просмотры</TableHead>
|
||||
<TableHead className="text-right">CPF</TableHead>
|
||||
<TableHead className="text-right">CPM</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{tableData.map((row) => (
|
||||
<TableRow key={row.period}>
|
||||
<TableCell className="font-medium">
|
||||
{row.period}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(row.cost)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(row.subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(row.views)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{row.cpf !== null ? formatCurrency(row.cpf) : "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{row.cpm !== null ? formatCurrency(row.cpm) : "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Target Channel Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { use } from "react";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default function ChannelDetailPage({ params }: PageProps) {
|
||||
const router = useRouter();
|
||||
const resolvedParams = use(params);
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect back to channels list
|
||||
// Detail page functionality not yet implemented in backend API
|
||||
router.push("/channels");
|
||||
}, [router, resolvedParams.id]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,249 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Target Channels List Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { channelsApi } from "@/lib/api";
|
||||
import { formatNumber, formatMetric, formatUsername } from "@/lib/utils/format";
|
||||
import {
|
||||
Target,
|
||||
Users,
|
||||
TrendingUp,
|
||||
ExternalLink as ExternalLinkIcon,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Plus,
|
||||
Eye,
|
||||
} from "lucide-react";
|
||||
import type { TargetChannel } from "@/lib/types/api";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
export default function ChannelsPage() {
|
||||
const [channels, setChannels] = useState<TargetChannel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<"all" | "active" | "inactive">(
|
||||
"all"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const loadChannels = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await channelsApi.list();
|
||||
setChannels(response.target_channels);
|
||||
} catch (err: any) {
|
||||
setError(
|
||||
err?.error?.message || err?.detail || "Ошибка загрузки каналов"
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadChannels();
|
||||
}, []);
|
||||
|
||||
const filteredChannels = channels.filter((channel) => {
|
||||
if (activeTab === "active") return channel.is_active;
|
||||
if (activeTab === "inactive") return !channel.is_active;
|
||||
return true;
|
||||
});
|
||||
|
||||
const handleDisconnect = async (id: string, title: string) => {
|
||||
if (!confirm(`Вы уверены, что хотите отключить канал "${title}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await channelsApi.delete(id);
|
||||
setChannels((prev) => prev.filter((ch) => ch.id !== id));
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || err?.detail || "Ошибка отключения канала");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Целевые каналы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Целевые каналы
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Каналы, в которые вы приводите подписчиков
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Подключение нового канала</CardTitle>
|
||||
<CardDescription>
|
||||
Добавьте бота в свой Telegram-канал с правами администратора
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<a
|
||||
href="https://t.me/tgex_bot?startgroup=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Подключить канал
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border bg-muted/50 p-4">
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm">
|
||||
<li>Откройте свой Telegram-канал</li>
|
||||
<li>Добавьте @tgex_bot в администраторы канала</li>
|
||||
<li>
|
||||
Предоставьте боту права:{" "}
|
||||
<strong>создавать инвайт-ссылки</strong> и{" "}
|
||||
<strong>видеть вступления</strong>
|
||||
</li>
|
||||
<li>Канал автоматически появится в списке ниже</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as any)}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">Все ({channels.length})</TabsTrigger>
|
||||
<TabsTrigger value="active">
|
||||
Активные ({channels.filter((c) => c.is_active).length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="inactive">
|
||||
Отключенные ({channels.filter((c) => !c.is_active).length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={activeTab} className="mt-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredChannels.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center p-12">
|
||||
<Target className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
{activeTab === "all" && "Нет подключенных каналов"}
|
||||
{activeTab === "active" && "Нет активных каналов"}
|
||||
{activeTab === "inactive" && "Нет отключенных каналов"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Добавьте бота в свой канал, чтобы начать работу
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredChannels.map((channel) => (
|
||||
<Card
|
||||
key={channel.id}
|
||||
className="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="truncate flex items-center gap-2">
|
||||
<Target className="h-4 w-4 shrink-0" />
|
||||
{channel.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="truncate mt-1">
|
||||
{channel.username ? (
|
||||
<a
|
||||
href={`https://t.me/${channel.username.replace(
|
||||
"@",
|
||||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline"
|
||||
>
|
||||
{formatUsername(channel.username)}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
Приватный канал
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge
|
||||
variant={channel.is_active ? "default" : "secondary"}
|
||||
>
|
||||
{channel.is_active ? "Активен" : "Отключен"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Telegram ID:{" "}
|
||||
<code className="text-xs bg-muted px-1 rounded">
|
||||
{channel.telegram_id}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDisconnect(channel.id, channel.title)
|
||||
}
|
||||
className="flex-1"
|
||||
>
|
||||
Отключить канал
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,286 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Creative Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { use } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { creativesApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
Folder,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Archive,
|
||||
Trash2,
|
||||
BarChart3,
|
||||
Users,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import type { Creative } from "@/lib/types/api";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default function CreativeDetailPage({ params }: PageProps) {
|
||||
const resolvedParams = use(params);
|
||||
const router = useRouter();
|
||||
const [creative, setCreative] = useState<Creative | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCreative = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await creativesApi.get(resolvedParams.id);
|
||||
setCreative(data);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки креатива");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadCreative();
|
||||
}, [resolvedParams.id]);
|
||||
|
||||
const handleArchive = async () => {
|
||||
if (!creative) return;
|
||||
|
||||
try {
|
||||
await creativesApi.update(creative.id, {
|
||||
status: creative.status === "active" ? "archived" : "active",
|
||||
});
|
||||
setCreative({
|
||||
...creative,
|
||||
status: creative.status === "active" ? "archived" : "active",
|
||||
});
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка обновления креатива");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!creative) return;
|
||||
if (!confirm(`Удалить креатив "${creative.name}"?`)) return;
|
||||
|
||||
try {
|
||||
await creativesApi.delete(creative.id);
|
||||
router.push("/creatives");
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка удаления креатива");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Креативы", href: "/creatives" },
|
||||
{ label: "Загрузка..." },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !creative) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Креативы", href: "/creatives" },
|
||||
{ label: "Ошибка" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error || "Креатив не найден"}</AlertDescription>
|
||||
</Alert>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/creatives">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Вернуться к креативам
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const previewText = creative.text.replace(
|
||||
"{link}",
|
||||
"https://t.me/+InviteLinkExample"
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Креативы", href: "/creatives" },
|
||||
{ label: creative.name },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Folder className="h-6 w-6" />
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
{creative.name}
|
||||
</h1>
|
||||
{creative.status === "archived" && (
|
||||
<Badge variant="secondary">Архив</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Целевой канал: {creative.target_channel_title}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleArchive}>
|
||||
<Archive className="mr-2 h-4 w-4" />
|
||||
{creative.status === "archived"
|
||||
? "Разархивировать"
|
||||
: "Архивировать"}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего закупов
|
||||
</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(creative.placements_count)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Всего размещений
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Целевой канал
|
||||
</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-lg font-medium">
|
||||
{creative.target_channel_title}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Канал для рекламы
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Текст креатива</CardTitle>
|
||||
<CardDescription>Шаблон с переменной {"{link}"}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border bg-muted/50 p-4">
|
||||
<pre className="text-sm whitespace-pre-wrap font-sans">
|
||||
{creative.text}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Предпросмотр</CardTitle>
|
||||
<CardDescription>
|
||||
С подставленной пригласительной ссылкой
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border bg-muted/50 p-4">
|
||||
<p className="text-sm whitespace-pre-wrap">{previewText}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Информация о размещениях</CardTitle>
|
||||
<CardDescription>Статистика использования креатива</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Всего размещений:</h4>
|
||||
<p className="text-2xl font-bold">
|
||||
{creative.placements_count}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Создан:</h4>
|
||||
<p className="text-sm">{formatDate(creative.created_at)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
<Link href={`/purchases?creative_id=${creative.id}`}>
|
||||
Посмотреть все размещения
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,227 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Create Creative Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { creativesApi, channelsApi } from "@/lib/api";
|
||||
import { AlertCircle, Loader2, ArrowLeft, Info } from "lucide-react";
|
||||
import type { TargetChannel } from "@/lib/types/api";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
|
||||
export default function CreateCreativePage() {
|
||||
const router = useRouter();
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
text: "",
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
// Validation
|
||||
if (!formData.name.trim()) {
|
||||
setError("Введите название креатива");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.text.trim()) {
|
||||
setError("Введите текст креатива");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.text.includes("{link}")) {
|
||||
setError("Текст должен содержать переменную {link} для вставки ссылки");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedChannel) {
|
||||
setError("Выберите целевой канал в верхнем меню");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await creativesApi.create({
|
||||
...formData,
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
router.push("/creatives");
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка создания креатива");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const previewText = formData.text.replace(
|
||||
"{link}",
|
||||
"https://t.me/+InviteLinkExample"
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Креативы", href: "/creatives" },
|
||||
{ label: "Создание" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-4xl mx-auto w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Создать креатив
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Новый шаблон рекламного сообщения
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<a href="/creatives">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Назад
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Основная информация</CardTitle>
|
||||
<CardDescription>
|
||||
Название и целевой канал креатива
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Название креатива *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
placeholder='Например: Креатив "Присоединяйся"'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedChannel && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Креатив будет создан для канала: <strong>{selectedChannel.title}</strong>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Текст сообщения</CardTitle>
|
||||
<CardDescription>
|
||||
Используйте переменную {"{link}"} для вставки ссылки
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="text">Текст креатива *</Label>
|
||||
<Textarea
|
||||
id="text"
|
||||
value={formData.text}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, text: e.target.value })
|
||||
}
|
||||
placeholder="🔥 Присоединяйся к нашему сообществу! Узнавай первым о новых возможностях. 👉 {link}"
|
||||
rows={8}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription className="text-sm">
|
||||
<strong>Обязательно</strong> включите переменную {"{link}"} в
|
||||
текст. На её место будет подставлена пригласительная ссылка в
|
||||
целевой канал.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{formData.text && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Предпросмотр</CardTitle>
|
||||
<CardDescription>
|
||||
Так будет выглядеть сообщение для размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border bg-muted/50 p-4">
|
||||
<p className="text-sm whitespace-pre-wrap">{previewText}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.push("/creatives")}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
"Создать креатив"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,266 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Creatives List Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { creativesApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
truncate,
|
||||
formatDate,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
Folder,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Plus,
|
||||
Eye,
|
||||
Pencil,
|
||||
Archive,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import type { Creative } from "@/lib/types/api";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
|
||||
export default function CreativesPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<"all" | "active" | "archived">(
|
||||
"active"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadCreatives();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedChannel]);
|
||||
|
||||
const loadCreatives = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await creativesApi.list({
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
setCreatives(response.creatives);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки креативов");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchive = async (
|
||||
id: string,
|
||||
currentStatus: "active" | "archived"
|
||||
) => {
|
||||
try {
|
||||
const newStatus = currentStatus === "active" ? "archived" : "active";
|
||||
await creativesApi.update(id, { status: newStatus });
|
||||
loadCreatives();
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка обновления креатива");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Удалить креатив "${name}"?`)) return;
|
||||
|
||||
try {
|
||||
await creativesApi.delete(id);
|
||||
loadCreatives();
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка удаления креатива");
|
||||
}
|
||||
};
|
||||
|
||||
const filteredCreatives = creatives.filter((creative) => {
|
||||
if (activeTab === "active") return creative.status === "active";
|
||||
if (activeTab === "archived") return creative.status === "archived";
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[{ label: "Главная", href: "/" }, { label: "Креативы" }]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Креативы</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Шаблоны рекламных сообщений
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link href="/creatives/new">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Создать креатив
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as any)}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="active">
|
||||
Активные ({creatives.filter((c) => c.status === "active").length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="archived">
|
||||
Архив ({creatives.filter((c) => c.status === "archived").length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="all">Все ({creatives.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={activeTab} className="mt-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredCreatives.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center p-12">
|
||||
<Folder className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
{activeTab === "all" && "Нет креативов"}
|
||||
{activeTab === "active" && "Нет активных креативов"}
|
||||
{activeTab === "archived" && "Нет архивных креативов"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Создайте первый креатив для рекламных сообщений
|
||||
</p>
|
||||
{activeTab === "active" && (
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/creatives/new">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Создать креатив
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredCreatives.map((creative) => (
|
||||
<Card
|
||||
key={creative.id}
|
||||
className="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<CardTitle className="truncate text-base">
|
||||
{creative.name}
|
||||
</CardTitle>
|
||||
{creative.status === "archived" && (
|
||||
<Badge variant="secondary">Архив</Badge>
|
||||
)}
|
||||
</div>
|
||||
<CardDescription className="text-xs">
|
||||
{creative.target_channel_title}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Folder className="h-5 w-5 text-muted-foreground shrink-0" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="rounded-lg border bg-muted/50 p-3">
|
||||
<p className="text-sm whitespace-pre-wrap line-clamp-4">
|
||||
{creative.text}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-center">
|
||||
<div className="rounded-lg border bg-muted/50 p-2">
|
||||
<div className="text-sm font-medium">
|
||||
{formatNumber(creative.placements_count)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Размещений
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-muted/50 p-2">
|
||||
<div className="text-xs font-medium">
|
||||
{formatDate(creative.created_at)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Создан
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
asChild
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
>
|
||||
<Link href={`/creatives/${creative.id}`}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
Открыть
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleArchive(creative.id, creative.status)
|
||||
}
|
||||
>
|
||||
<Archive className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDelete(creative.id, creative.name)
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// External Channel Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { use } from "react";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default function ExternalChannelDetailPage({ params }: PageProps) {
|
||||
const router = useRouter();
|
||||
const resolvedParams = use(params);
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect back to external channels list
|
||||
// Detail page functionality not yet implemented in backend API
|
||||
router.push("/external-channels");
|
||||
}, [router, resolvedParams.id]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,527 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// External Channels Import Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { externalChannelsApi, channelsApi } from "@/lib/api";
|
||||
import {
|
||||
parseChannelsFile,
|
||||
downloadTemplate,
|
||||
type ParsedChannel,
|
||||
} from "@/lib/utils/file-parser";
|
||||
import {
|
||||
FileUp,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
Download,
|
||||
ArrowLeft,
|
||||
X,
|
||||
FileSpreadsheet,
|
||||
} from "lucide-react";
|
||||
import type { TargetChannel } from "@/lib/types/api";
|
||||
|
||||
interface ImportResult {
|
||||
total: number;
|
||||
successful: number;
|
||||
failed: number;
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
export default function ImportExternalChannelsPage() {
|
||||
const router = useRouter();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [parsedChannels, setParsedChannels] = useState<ParsedChannel[]>([]);
|
||||
const [parseErrors, setParseErrors] = useState<string[]>([]);
|
||||
const [importResult, setImportResult] = useState<ImportResult | null>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [currentChannel, setCurrentChannel] = useState<string>("");
|
||||
const [targetChannels, setTargetChannels] = useState<TargetChannel[]>([]);
|
||||
const [selectedTargetChannel, setSelectedTargetChannel] =
|
||||
useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
loadTargetChannels();
|
||||
}, []);
|
||||
|
||||
const loadTargetChannels = async () => {
|
||||
try {
|
||||
const response = await channelsApi.list();
|
||||
setTargetChannels(response.target_channels);
|
||||
if (response.target_channels.length > 0) {
|
||||
setSelectedTargetChannel(response.target_channels[0].id);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error loading target channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
|
||||
const droppedFile = e.dataTransfer.files[0];
|
||||
if (droppedFile) {
|
||||
handleFileSelect(droppedFile);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileSelect = async (selectedFile: File) => {
|
||||
if (!selectedFile.name.match(/\.(xlsx|xls|csv)$/i)) {
|
||||
setParseErrors(["Пожалуйста, выберите файл Excel (.xlsx, .xls) или CSV"]);
|
||||
return;
|
||||
}
|
||||
|
||||
setFile(selectedFile);
|
||||
setParseErrors([]);
|
||||
setParsedChannels([]);
|
||||
setImportResult(null);
|
||||
|
||||
// Парсим файл
|
||||
try {
|
||||
const result = await parseChannelsFile(selectedFile);
|
||||
setParsedChannels(result.channels);
|
||||
setParseErrors(result.errors);
|
||||
} catch (err) {
|
||||
setParseErrors([
|
||||
`Ошибка парсинга файла: ${
|
||||
err instanceof Error ? err.message : "неизвестная ошибка"
|
||||
}`,
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0];
|
||||
if (selectedFile) {
|
||||
handleFileSelect(selectedFile);
|
||||
}
|
||||
};
|
||||
|
||||
const delay = (ms: number) =>
|
||||
new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!selectedTargetChannel || parsedChannels.length === 0) return;
|
||||
|
||||
setIsUploading(true);
|
||||
setImportResult(null);
|
||||
setProgress(0);
|
||||
setCurrentChannel("");
|
||||
|
||||
const result: ImportResult = {
|
||||
total: parsedChannels.length,
|
||||
successful: 0,
|
||||
failed: 0,
|
||||
errors: [],
|
||||
};
|
||||
|
||||
for (let i = 0; i < parsedChannels.length; i++) {
|
||||
const channel = parsedChannels[i];
|
||||
setCurrentChannel(channel.title);
|
||||
setProgress(((i + 1) / parsedChannels.length) * 100);
|
||||
|
||||
try {
|
||||
await externalChannelsApi.create({
|
||||
telegram_id: channel.telegram_id || 0,
|
||||
title: channel.title,
|
||||
username: channel.username || null,
|
||||
description: channel.description || null,
|
||||
subscribers_count: channel.subscribers_count || null,
|
||||
target_channel_ids: [selectedTargetChannel],
|
||||
});
|
||||
|
||||
result.successful++;
|
||||
} catch (err: any) {
|
||||
result.failed++;
|
||||
const errorMsg =
|
||||
err?.detail || err?.error?.message || "Неизвестная ошибка";
|
||||
result.errors.push(
|
||||
`Строка ${channel.row} (${channel.title}): ${errorMsg}`
|
||||
);
|
||||
}
|
||||
|
||||
// Задержка между запросами (300ms)
|
||||
if (i < parsedChannels.length - 1) {
|
||||
await delay(300);
|
||||
}
|
||||
}
|
||||
|
||||
setImportResult(result);
|
||||
setIsUploading(false);
|
||||
setCurrentChannel("");
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFile(null);
|
||||
setParsedChannels([]);
|
||||
setParseErrors([]);
|
||||
setImportResult(null);
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Внешние каналы", href: "/external-channels" },
|
||||
{ label: "Импорт" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-4xl mx-auto w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Импорт внешних каналов
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Загрузите файл Excel или CSV с данными каналов
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/external-channels">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Назад
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Выбор целевого канала */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Целевой канал</CardTitle>
|
||||
<CardDescription>
|
||||
Выберите целевой канал для привязки импортируемых каналов
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select
|
||||
value={selectedTargetChannel}
|
||||
onValueChange={setSelectedTargetChannel}
|
||||
disabled={isUploading || targetChannels.length === 0}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите целевой канал" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{targetChannels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
{channel.title}
|
||||
{channel.username && ` (@${channel.username})`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Шаблоны */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Скачать шаблон</CardTitle>
|
||||
<CardDescription>
|
||||
Используйте шаблон для правильного заполнения данных
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => downloadTemplate("xlsx")}
|
||||
disabled={isUploading}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Шаблон Excel
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => downloadTemplate("csv")}
|
||||
disabled={isUploading}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Шаблон CSV
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Загрузка файла */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Загрузка файла</CardTitle>
|
||||
<CardDescription>
|
||||
Перетащите файл или нажмите для выбора
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`relative border-2 border-dashed rounded-lg p-12 text-center transition-colors ${
|
||||
isDragging
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-muted-foreground/25 hover:border-muted-foreground/50"
|
||||
} ${isUploading ? "opacity-50 pointer-events-none" : ""}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="file-upload"
|
||||
className="hidden"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
onChange={handleFileInputChange}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className="cursor-pointer flex flex-col items-center"
|
||||
>
|
||||
<FileUp className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
{file ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{(file.size / 1024).toFixed(2)} KB
|
||||
</p>
|
||||
{!isUploading && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleReset();
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Удалить
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Перетащите файл сюда или нажмите для выбора
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Поддерживаются форматы: .xlsx, .xls, .csv
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Результаты парсинга */}
|
||||
{parsedChannels.length > 0 && !importResult && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Результаты парсинга</CardTitle>
|
||||
<CardDescription>
|
||||
Найдено каналов: {parsedChannels.length}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{parseErrors.length > 0 && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>Ошибки при парсинге:</strong>
|
||||
<ul className="list-disc list-inside mt-2">
|
||||
{parseErrors.slice(0, 5).map((error, i) => (
|
||||
<li key={i} className="text-sm">
|
||||
{error}
|
||||
</li>
|
||||
))}
|
||||
{parseErrors.length > 5 && (
|
||||
<li className="text-sm">
|
||||
...и еще {parseErrors.length - 5}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={
|
||||
isUploading ||
|
||||
!selectedTargetChannel ||
|
||||
parsedChannels.length === 0
|
||||
}
|
||||
className="flex-1"
|
||||
>
|
||||
<FileSpreadsheet className="mr-2 h-4 w-4" />
|
||||
Импортировать {parsedChannels.length} каналов
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleReset}
|
||||
disabled={isUploading}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Прогресс импорта */}
|
||||
{isUploading && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Импорт в процессе</CardTitle>
|
||||
<CardDescription>
|
||||
{currentChannel && `Импортируется: ${currentChannel}`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Progress value={progress} className="w-full" />
|
||||
<p className="text-sm text-center text-muted-foreground">
|
||||
{Math.round(progress)}% завершено
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Результаты импорта */}
|
||||
{importResult && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Результаты импорта</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4 text-center">
|
||||
<div className="p-4 border rounded-lg">
|
||||
<div className="text-2xl font-bold">{importResult.total}</div>
|
||||
<div className="text-xs text-muted-foreground">Всего</div>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950">
|
||||
<div className="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||
{importResult.successful}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Успешно</div>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950">
|
||||
<div className="text-2xl font-bold text-red-600 dark:text-red-400">
|
||||
{importResult.failed}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Ошибок</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{importResult.errors.length > 0 && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>Ошибки импорта:</strong>
|
||||
<ul className="list-disc list-inside mt-2 max-h-60 overflow-y-auto">
|
||||
{importResult.errors.map((error, i) => (
|
||||
<li key={i} className="text-sm">
|
||||
{error}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{importResult.successful > 0 && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Успешно импортировано каналов: {importResult.successful}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => router.push("/external-channels")}
|
||||
className="flex-1"
|
||||
>
|
||||
Перейти к списку каналов
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleReset}>
|
||||
Импортировать еще
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Инструкция */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Формат файла</CardTitle>
|
||||
<CardDescription>Требования к структуре файла</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p>
|
||||
<strong>Колонки (в порядке):</strong>
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-1 ml-2">
|
||||
<li>
|
||||
<strong>Название канала*</strong> - обязательное поле
|
||||
</li>
|
||||
<li>
|
||||
<strong>Username</strong> - без символа @ (опционально)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Telegram ID</strong> - числовой ID канала
|
||||
(опционально)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Подписчиков</strong> - количество подписчиков
|
||||
(опционально)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Описание</strong> - описание канала (опционально)
|
||||
</li>
|
||||
</ol>
|
||||
<p className="text-muted-foreground mt-4">
|
||||
* Первая строка файла должна содержать заголовки и будет
|
||||
пропущена при импорте
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,617 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// External Channels List Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { externalChannelsApi, channelsApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatUsername,
|
||||
formatCompactNumber,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
ExternalLink as ExternalLinkIcon,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Plus,
|
||||
Search,
|
||||
FileUp,
|
||||
Eye,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Users,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
LayoutGrid,
|
||||
Table2,
|
||||
} from "lucide-react";
|
||||
import type { ExternalChannel } from "@/lib/types/api";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
|
||||
type ViewMode = "table" | "grid";
|
||||
type SortField =
|
||||
| "title"
|
||||
| "username"
|
||||
| "subscribers_count"
|
||||
| "telegram_id"
|
||||
| null;
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
export default function ExternalChannelsPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [channels, setChannels] = useState<ExternalChannel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("table");
|
||||
const [sortField, setSortField] = useState<SortField>(null);
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
title: "",
|
||||
username: "",
|
||||
link: "",
|
||||
subscribers_count: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadChannels();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedChannel]);
|
||||
|
||||
const loadChannels = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await externalChannelsApi.list(selectedChannel.id);
|
||||
setChannels(response.external_channels);
|
||||
} catch (err: any) {
|
||||
const errorMsg =
|
||||
typeof err?.detail === "string"
|
||||
? err.detail
|
||||
: err?.error?.message || "Ошибка загрузки каналов";
|
||||
setError(errorMsg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
setIsCreating(true);
|
||||
// Получаем первый доступный target channel
|
||||
const targetChannelsRes = await channelsApi.list();
|
||||
if (targetChannelsRes.target_channels.length === 0) {
|
||||
alert("Добавьте сначала целевой канал");
|
||||
setIsCreating(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await externalChannelsApi.create({
|
||||
telegram_id: 0, // Временно, пока не получим реальный ID
|
||||
title: formData.title,
|
||||
username: formData.username || null,
|
||||
subscribers_count: formData.subscribers_count
|
||||
? parseInt(formData.subscribers_count)
|
||||
: null,
|
||||
description: formData.description || null,
|
||||
target_channel_ids: [targetChannelsRes.target_channels[0].id],
|
||||
});
|
||||
setIsCreateDialogOpen(false);
|
||||
setFormData({
|
||||
title: "",
|
||||
username: "",
|
||||
link: "",
|
||||
subscribers_count: "",
|
||||
description: "",
|
||||
});
|
||||
loadChannels();
|
||||
} catch (err: any) {
|
||||
const errorMsg =
|
||||
typeof err?.detail === "string"
|
||||
? err.detail
|
||||
: err?.error?.message || "Ошибка создания канала";
|
||||
alert(errorMsg);
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string, title: string) => {
|
||||
if (!confirm(`Удалить канал "${title}"?`)) return;
|
||||
|
||||
try {
|
||||
await externalChannelsApi.delete(id);
|
||||
loadChannels();
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка удаления канала");
|
||||
}
|
||||
};
|
||||
|
||||
// Обработка сортировки
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
// Переключение: asc -> desc -> null -> asc
|
||||
if (sortDirection === "asc") {
|
||||
setSortDirection("desc");
|
||||
} else if (sortDirection === "desc") {
|
||||
setSortField(null);
|
||||
setSortDirection(null);
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
return <ArrowDown className="ml-2 h-4 w-4 inline" />;
|
||||
};
|
||||
|
||||
const filteredChannels = channels
|
||||
.filter(
|
||||
(channel) =>
|
||||
channel.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
channel.username?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (!sortField || !sortDirection) return 0;
|
||||
|
||||
let aValue: string | number | null = "";
|
||||
let bValue: string | number | null = "";
|
||||
|
||||
switch (sortField) {
|
||||
case "title":
|
||||
aValue = a.title;
|
||||
bValue = b.title;
|
||||
break;
|
||||
case "username":
|
||||
aValue = a.username || "";
|
||||
bValue = b.username || "";
|
||||
break;
|
||||
case "subscribers_count":
|
||||
aValue = a.subscribers_count || 0;
|
||||
bValue = b.subscribers_count || 0;
|
||||
break;
|
||||
case "telegram_id":
|
||||
aValue = a.telegram_id;
|
||||
bValue = b.telegram_id;
|
||||
break;
|
||||
}
|
||||
|
||||
// Сравнение строк
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortDirection === "asc"
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
}
|
||||
|
||||
// Сравнение чисел
|
||||
if (typeof aValue === "number" && typeof bValue === "number") {
|
||||
return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Внешние каналы" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Внешние каналы
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Каналы, в которых покупаете рекламу
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/external-channels/import">
|
||||
<FileUp className="mr-2 h-4 w-4" />
|
||||
Импорт из Excel
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
open={isCreateDialogOpen}
|
||||
onOpenChange={setIsCreateDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Добавить канал
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Добавить внешний канал</DialogTitle>
|
||||
<DialogDescription>
|
||||
Добавьте канал, в котором планируете покупать рекламу
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="title">Название *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={formData.title}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, title: e.target.value })
|
||||
}
|
||||
placeholder="Название канала"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="link">Ссылка *</Label>
|
||||
<Input
|
||||
id="link"
|
||||
value={formData.link}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, link: e.target.value })
|
||||
}
|
||||
placeholder="https://t.me/channel_name"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={formData.username}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, username: e.target.value })
|
||||
}
|
||||
placeholder="@channel_name"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="subscribers">Количество подписчиков</Label>
|
||||
<Input
|
||||
id="subscribers"
|
||||
type="number"
|
||||
value={formData.subscribers_count}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
subscribers_count: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="50000"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="description">Описание</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Краткое описание канала"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={isCreating}>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
"Создать"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по названию или username..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<Badge variant="secondary">
|
||||
Всего: {formatNumber(filteredChannels.length)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border rounded-md">
|
||||
<Button
|
||||
variant={viewMode === "table" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("table")}
|
||||
className="rounded-r-none"
|
||||
>
|
||||
<Table2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
className="rounded-l-none"
|
||||
>
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredChannels.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center p-12">
|
||||
<ExternalLinkIcon className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
{searchQuery ? "Каналы не найдены" : "Нет внешних каналов"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{searchQuery
|
||||
? "Попробуйте изменить поисковый запрос"
|
||||
: "Добавьте каналы вручную или импортируйте из Excel"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredChannels.map((channel) => (
|
||||
<Card
|
||||
key={channel.id}
|
||||
className="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="truncate flex items-center gap-2">
|
||||
<ExternalLinkIcon className="h-4 w-4 shrink-0" />
|
||||
{channel.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="truncate mt-1">
|
||||
{channel.username ? (
|
||||
<a
|
||||
href={`https://t.me/${channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline"
|
||||
>
|
||||
{formatUsername(channel.username)}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-xs">
|
||||
ID: {channel.telegram_id}
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{channel.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{channel.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 rounded-lg border bg-muted/50 p-2">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Users className="h-3 w-3 text-muted-foreground" />
|
||||
<div className="text-sm font-medium">
|
||||
{channel.subscribers_count
|
||||
? formatCompactNumber(channel.subscribers_count)
|
||||
: "—"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
Подписчики
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => handleDelete(channel.id, channel.title)}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Список внешних каналов</CardTitle>
|
||||
<CardDescription>
|
||||
Каналы, в которых покупаете рекламу
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("title")}
|
||||
>
|
||||
Название
|
||||
{getSortIcon("title")}
|
||||
</TableHead>
|
||||
<TableHead className="cursor-pointer hover:bg-muted/50">
|
||||
Username
|
||||
</TableHead>
|
||||
<TableHead>Описание</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("subscribers_count")}
|
||||
>
|
||||
Подписчики
|
||||
{getSortIcon("subscribers_count")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right cursor-pointer hover:bg-muted/50">
|
||||
Telegram ID
|
||||
</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredChannels.map((channel) => (
|
||||
<TableRow key={channel.id}>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href={`https://t.me/${channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 hover:underline text-primary whitespace-nowrap"
|
||||
tabIndex={0}
|
||||
aria-label={`Открыть канал ${channel.title} в Telegram`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
window.open(
|
||||
`https://t.me/${channel.username}`,
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span>{channel.title}</span>
|
||||
<ExternalLinkIcon className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{channel.username ? (
|
||||
<div>{formatUsername(channel.username)}</div>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-[300px] truncate text-muted-foreground">
|
||||
{channel.description || "—"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{channel.subscribers_count
|
||||
? formatNumber(channel.subscribers_count)
|
||||
: "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{channel.telegram_id}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDelete(channel.id, channel.title)
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// ============================================================================
|
||||
// Dashboard Layout
|
||||
// ============================================================================
|
||||
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||
import { ProtectedRoute } from "@/components/auth/protected-route";
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>{children}</SidebarInset>
|
||||
</SidebarProvider>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
@@ -1,365 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Dashboard Home Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { analyticsApi, channelsApi } from "@/lib/api";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatPercent,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Users,
|
||||
ShoppingCart,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
} from "lucide-react";
|
||||
import type { SpendingAnalytics } from "@/lib/types/api";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
import { BOT_USERNAME } from "@/lib/utils/constants";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const {
|
||||
selectedChannel,
|
||||
channels,
|
||||
isLoading: channelsLoading,
|
||||
} = useTargetChannel();
|
||||
const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Для модального окна добавления канала
|
||||
const [showAddChannelDialog, setShowAddChannelDialog] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [initialChannelCount, setInitialChannelCount] = useState(0);
|
||||
const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Показываем модальное окно, если нет каналов
|
||||
useEffect(() => {
|
||||
if (!channelsLoading && channels.length === 0) {
|
||||
setShowAddChannelDialog(true);
|
||||
setInitialChannelCount(0);
|
||||
}
|
||||
}, [channelsLoading, channels]);
|
||||
|
||||
// Автоматический polling при открытом окне
|
||||
useEffect(() => {
|
||||
if (showAddChannelDialog && !isSuccess && initialChannelCount === 0) {
|
||||
pollingIntervalRef.current = setInterval(() => {
|
||||
checkForNewChannels();
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
pollingIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [showAddChannelDialog, isSuccess, initialChannelCount]);
|
||||
|
||||
// Очистка при размонтировании
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const checkForNewChannels = async () => {
|
||||
try {
|
||||
const response = await channelsApi.list();
|
||||
const activeChannels = response.target_channels.filter(
|
||||
(c) => c.is_active
|
||||
);
|
||||
|
||||
if (activeChannels.length > initialChannelCount) {
|
||||
setIsSuccess(true);
|
||||
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
pollingIntervalRef.current = null;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setShowAddChannelDialog(false);
|
||||
setIsSuccess(false);
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error polling channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedChannel) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await analyticsApi.spending({
|
||||
grouping: "week",
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
setSpending(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading spending data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [selectedChannel]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
|
||||
|
||||
{/* Модальное окно добавления первого канала */}
|
||||
<Dialog open={showAddChannelDialog} onOpenChange={() => {}}>
|
||||
<DialogContent
|
||||
className="sm:max-w-md"
|
||||
onInteractOutside={(e) => e.preventDefault()}
|
||||
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Добро пожаловать!</DialogTitle>
|
||||
<DialogDescription>
|
||||
Для начала работы добавьте ваш первый целевой канал
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{isSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 space-y-4">
|
||||
<div className="rounded-full bg-green-100 dark:bg-green-900 p-3">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Канал успешно добавлен!
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Страница обновится автоматически...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<Alert>
|
||||
<AlertDescription className="space-y-2">
|
||||
<p className="font-medium">Шаги для добавления канала:</p>
|
||||
<ol className="list-decimal list-inside space-y-1.5 text-sm">
|
||||
<li>Откройте свой Telegram канал</li>
|
||||
<li>Перейдите в настройки канала → Администраторы</li>
|
||||
<li>
|
||||
Добавьте бота{" "}
|
||||
<a
|
||||
href={`https://t.me/${BOT_USERNAME}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
@{BOT_USERNAME}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>{" "}
|
||||
как администратора
|
||||
</li>
|
||||
<li>
|
||||
Предоставьте боту права:{" "}
|
||||
<span className="font-medium">
|
||||
Публикация сообщений, Удаление сообщений
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex flex-col items-center justify-center py-6 space-y-3">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Ждем добавления бота...
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
Как только вы добавите бота, канал автоматически появится
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{!selectedChannel ? (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold mb-2">
|
||||
Выберите целевой канал
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Для начала работы выберите целевой канал в верхнем меню
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего закупов
|
||||
</CardTitle>
|
||||
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending?.total_cost)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatNumber(0 || 0, true)} за прошлый месяц
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Подписчиков привлечено
|
||||
</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending?.total_subscriptions)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatNumber(0 || 0, true)} за прошлый месяц
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Средний CPF
|
||||
</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-2xl font-bold">
|
||||
₽{formatMetric(spending?.avg_cpf)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPercent(0 || 0, true)} от прошлого месяца
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Средний CPM
|
||||
</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-2xl font-bold">
|
||||
₽{formatMetric(spending?.avg_cpm)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPercent(0 || 0, true)} от прошлого месяца
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-1">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Быстрый старт</CardTitle>
|
||||
<CardDescription>Начните с основных действий</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<a
|
||||
href="/purchases/new"
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Создать новый закуп
|
||||
</a>
|
||||
<a
|
||||
href="/creatives/new"
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Создать креатив
|
||||
</a>
|
||||
<a
|
||||
href="/external-channels/import"
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Импортировать каналы
|
||||
</a>
|
||||
<a
|
||||
href="/analytics"
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Посмотреть аналитику
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,400 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Purchase Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { use } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { purchasesApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
formatPercent,
|
||||
formatUsername,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
ShoppingCart,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Archive,
|
||||
Trash2,
|
||||
BarChart3,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Eye,
|
||||
Copy,
|
||||
ExternalLink as ExternalLinkIcon,
|
||||
Check,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import type { Placement } from "@/lib/types/api";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default function PurchaseDetailPage({ params }: PageProps) {
|
||||
const resolvedParams = use(params);
|
||||
const router = useRouter();
|
||||
const [purchase, setPurchase] = useState<Placement | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadPurchase = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await purchasesApi.get(resolvedParams.id);
|
||||
setPurchase(data);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки закупа");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadPurchase();
|
||||
}, [resolvedParams.id]);
|
||||
|
||||
const handleArchive = async () => {
|
||||
if (!purchase) return;
|
||||
|
||||
try {
|
||||
await purchasesApi.update(purchase.id, {
|
||||
status: purchase.status === "active" ? "archived" : "active",
|
||||
});
|
||||
setPurchase({
|
||||
...purchase,
|
||||
status: purchase.status === "active" ? "archived" : "active",
|
||||
});
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка обновления закупа");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!purchase) return;
|
||||
if (!confirm("Удалить закуп?")) return;
|
||||
|
||||
try {
|
||||
await purchasesApi.delete(purchase.id);
|
||||
router.push("/purchases");
|
||||
} catch (err: any) {
|
||||
alert(err?.error?.message || "Ошибка удаления закупа");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyLink = () => {
|
||||
if (!purchase) return;
|
||||
navigator.clipboard.writeText(purchase.invite_link);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Закупы", href: "/purchases" },
|
||||
{ label: "Загрузка..." },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !purchase) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Закупы", href: "/purchases" },
|
||||
{ label: "Ошибка" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error || "Закуп не найден"}</AlertDescription>
|
||||
</Alert>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/purchases">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Вернуться к закупам
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Remove message text generation as we don't have creative.text in Placement
|
||||
const messageText = `Текст сообщения с ссылкой: ${purchase.invite_link}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Закупы", href: "/purchases" },
|
||||
{ label: `Закуп #${purchase.id.slice(0, 8)}` },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<ShoppingCart className="h-6 w-6" />
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
{purchase.external_channel_title}
|
||||
</h1>
|
||||
{purchase.status === "archived" ? (
|
||||
<Badge variant="secondary">Архив</Badge>
|
||||
) : (
|
||||
<Badge variant="default">
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
Активно
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
|
||||
<span>
|
||||
Целевой канал:{" "}
|
||||
<Link
|
||||
href={`/channels`}
|
||||
className="hover:underline font-medium"
|
||||
>
|
||||
{purchase.target_channel_title}
|
||||
</Link>
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
Креатив:{" "}
|
||||
<Link
|
||||
href={`/creatives`}
|
||||
className="hover:underline font-medium"
|
||||
>
|
||||
{purchase.creative_name}
|
||||
</Link>
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
Дата размещения: {formatDate(purchase.placement_date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleArchive}>
|
||||
<Archive className="mr-2 h-4 w-4" />
|
||||
{purchase.status === "archived"
|
||||
? "Разархивировать"
|
||||
: "Архивировать"}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Стоимость</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(purchase.cost)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Подписчики</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(purchase.subscriptions_count)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Просмотры</CardTitle>
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{purchase.views_count
|
||||
? formatNumber(purchase.views_count)
|
||||
: "—"}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Статус просмотров
|
||||
</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-lg font-medium">
|
||||
{purchase.views_availability === "available"
|
||||
? "Доступны"
|
||||
: purchase.views_availability === "manual"
|
||||
? "Вручную"
|
||||
: purchase.views_availability === "unavailable"
|
||||
? "Недоступны"
|
||||
: "Неизвестно"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{purchase.last_views_fetch_at
|
||||
? `Обновлено: ${formatDate(purchase.last_views_fetch_at)}`
|
||||
: "Еще не обновлялись"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Тип ссылки</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-lg font-medium">
|
||||
{purchase.invite_link_type === "approval"
|
||||
? "С одобрением"
|
||||
: "Публичная"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{purchase.invite_link_type === "approval"
|
||||
? "Отслеживание подписчиков"
|
||||
: "Без отслеживания"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Пригласительная ссылка</CardTitle>
|
||||
<CardDescription>
|
||||
Используется для отслеживания подписок
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<code className="flex-1 p-2 bg-muted rounded text-sm break-all">
|
||||
{purchase.invite_link}
|
||||
</code>
|
||||
<Button onClick={handleCopyLink} variant="outline" size="icon">
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{purchase.ad_post_url && (
|
||||
<div className="pt-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
Ссылка на рекламный пост:
|
||||
</Label>
|
||||
<a
|
||||
href={purchase.ad_post_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-sm hover:underline mt-1"
|
||||
>
|
||||
{purchase.ad_post_url}
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Рекламное сообщение</CardTitle>
|
||||
<CardDescription>Текст для размещения</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border bg-muted/50 p-4">
|
||||
<p className="text-sm whitespace-pre-wrap">{messageText}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{purchase.comment && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Комментарий</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{purchase.comment}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Заметка</CardTitle>
|
||||
<CardDescription>
|
||||
Детальная информация о размещении доступна через раздел "Подписки"
|
||||
в главном меню
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Для просмотра списка подписчиков и истории просмотров используйте
|
||||
соответствующие разделы в главном меню.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Label({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return <div className={className}>{children}</div>;
|
||||
}
|
||||
@@ -1,478 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Create Purchase Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
purchasesApi,
|
||||
channelsApi,
|
||||
externalChannelsApi,
|
||||
creativesApi,
|
||||
} from "@/lib/api";
|
||||
import {
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
Info,
|
||||
Copy,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import type { ExternalChannel, Creative } from "@/lib/types/api";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
|
||||
export default function CreatePurchasePage() {
|
||||
const router = useRouter();
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [externalChannels, setExternalChannels] = useState<ExternalChannel[]>(
|
||||
[]
|
||||
);
|
||||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [inviteLink, setInviteLink] = useState<string>("");
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
external_channel_id: "",
|
||||
creative_id: "",
|
||||
placement_date: "",
|
||||
cost: "",
|
||||
comment: "",
|
||||
post_link: "",
|
||||
invite_link_type: "public" as "public" | "approval",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadData();
|
||||
}
|
||||
}, [selectedChannel]);
|
||||
|
||||
const loadData = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
const [externalChannelsRes, creativesRes] = await Promise.all([
|
||||
externalChannelsApi.list(selectedChannel.id),
|
||||
creativesApi.list({ target_channel_id: selectedChannel.id }),
|
||||
]);
|
||||
setExternalChannels(externalChannelsRes.external_channels);
|
||||
setCreatives(
|
||||
creativesRes.creatives.filter((c) => c.status === "active")
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("Error loading data:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedCreative = creatives.find((c) => c.id === formData.creative_id);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
// Validation
|
||||
if (!selectedChannel) {
|
||||
setError("Выберите целевой канал в верхнем меню");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.external_channel_id) {
|
||||
setError("Выберите внешний канал");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.creative_id) {
|
||||
setError("Выберите креатив");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.placement_date) {
|
||||
setError("Укажите дату размещения");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.cost || parseFloat(formData.cost) <= 0) {
|
||||
setError("Укажите корректную стоимость");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const result = await purchasesApi.create({
|
||||
target_channel_id: selectedChannel.id,
|
||||
external_channel_id: formData.external_channel_id,
|
||||
creative_id: formData.creative_id,
|
||||
placement_date: formData.placement_date,
|
||||
cost: parseFloat(formData.cost),
|
||||
comment: formData.comment || undefined,
|
||||
ad_post_url: formData.post_link || undefined,
|
||||
invite_link_type: formData.invite_link_type,
|
||||
});
|
||||
|
||||
// Показываем сгенерированную ссылку
|
||||
setInviteLink(result.invite_link);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка создания закупа");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyLink = () => {
|
||||
navigator.clipboard.writeText(inviteLink);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleCopyMessage = () => {
|
||||
if (!selectedCreative) return;
|
||||
const message = selectedCreative.text.replace("{link}", inviteLink);
|
||||
navigator.clipboard.writeText(message);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
if (inviteLink) {
|
||||
const messageText = selectedCreative
|
||||
? selectedCreative.text.replace("{link}", inviteLink)
|
||||
: "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Закупы", href: "/purchases" },
|
||||
{ label: "Создание" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-4xl mx-auto w-full">
|
||||
<Card className="border-green-500">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<Check className="h-5 w-5" />
|
||||
Закуп успешно создан!
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Используйте ссылку и готовое сообщение для размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Пригласительная ссылка</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input value={inviteLink} readOnly className="font-mono" />
|
||||
<Button onClick={handleCopyLink} variant="outline">
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Готовое сообщение для размещения</Label>
|
||||
<div className="relative">
|
||||
<Textarea
|
||||
value={messageText}
|
||||
readOnly
|
||||
rows={8}
|
||||
className="pr-12"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCopyMessage}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Скопируйте готовое сообщение и разместите его во внешнем
|
||||
канале. Все переходы по ссылке будут автоматически
|
||||
отслеживаться.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button asChild>
|
||||
<Link href="/purchases">Перейти к закупам</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setInviteLink("");
|
||||
setFormData({
|
||||
external_channel_id: "",
|
||||
creative_id: "",
|
||||
placement_date: "",
|
||||
cost: "",
|
||||
comment: "",
|
||||
post_link: "",
|
||||
invite_link_type: "public",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Создать еще
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: "/" },
|
||||
{ label: "Закупы", href: "/purchases" },
|
||||
{ label: "Создание" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-4xl mx-auto w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Создать закуп</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Новое рекламное размещение
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/purchases">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Назад
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Основная информация</CardTitle>
|
||||
<CardDescription>
|
||||
Выберите каналы и креатив для размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{selectedChannel && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Размещение будет создано для канала: <strong>{selectedChannel.title}</strong>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="external_channel_id">Внешний канал *</Label>
|
||||
<Select
|
||||
value={formData.external_channel_id}
|
||||
onValueChange={(value) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
external_channel_id: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите внешний канал" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{externalChannels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
{channel.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="creative_id">Креатив *</Label>
|
||||
<Select
|
||||
value={formData.creative_id}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, creative_id: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите креатив" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{creatives.map((creative) => (
|
||||
<SelectItem key={creative.id} value={creative.id}>
|
||||
{creative.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Детали размещения</CardTitle>
|
||||
<CardDescription>
|
||||
Стоимость, дата и параметры ссылки
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="placement_date">Дата размещения *</Label>
|
||||
<Input
|
||||
id="placement_date"
|
||||
type="datetime-local"
|
||||
value={formData.placement_date}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
placement_date: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cost">Стоимость (₽) *</Label>
|
||||
<Input
|
||||
id="cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.cost}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, cost: e.target.value })
|
||||
}
|
||||
placeholder="1000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="post_link">Ссылка на рекламное сообщение</Label>
|
||||
<Input
|
||||
id="post_link"
|
||||
type="url"
|
||||
value={formData.post_link}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, post_link: e.target.value })
|
||||
}
|
||||
placeholder="https://t.me/channel/123"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Для автоматического отслеживания просмотров
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Тип пригласительной ссылки *</Label>
|
||||
<RadioGroup
|
||||
value={formData.invite_link_type}
|
||||
onValueChange={(value: "public" | "approval") =>
|
||||
setFormData({ ...formData, invite_link_type: value })
|
||||
}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="public" id="public" />
|
||||
<Label htmlFor="public" className="font-normal">
|
||||
Открытая (пользователь сразу вступает в канал)
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="approval" id="approval" />
|
||||
<Label htmlFor="approval" className="font-normal">
|
||||
С одобрением (запрос на вступление через бота)
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="comment">Комментарий</Label>
|
||||
<Textarea
|
||||
id="comment"
|
||||
value={formData.comment}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, comment: e.target.value })
|
||||
}
|
||||
placeholder="Дополнительные заметки о закупе"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.push("/purchases")}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
"Создать закуп"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,964 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Purchases List Page
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableFooter,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { purchasesApi, channelsApi } from "@/lib/api";
|
||||
import {
|
||||
formatNumber,
|
||||
formatMetric,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
formatPercent,
|
||||
} from "@/lib/utils/format";
|
||||
import {
|
||||
ShoppingCart,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
Eye,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Archive,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
import type { Purchase } from "@/lib/types/api";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
type SortField =
|
||||
| "status"
|
||||
| "placement_date"
|
||||
| "cost"
|
||||
| "subscriptions_count"
|
||||
| "views_count"
|
||||
| "cpm"
|
||||
| "cpl"
|
||||
| null;
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
type AggregateFunction = "sum" | "avg" | "median" | "max" | "min";
|
||||
|
||||
type AggregateConfig = {
|
||||
cost: AggregateFunction;
|
||||
subscriptions_count: AggregateFunction;
|
||||
views_count: AggregateFunction;
|
||||
cpm: AggregateFunction;
|
||||
cpl: AggregateFunction;
|
||||
};
|
||||
|
||||
export default function PurchasesPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [purchases, setPurchases] = useState<Purchase[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filterStatus, setFilterStatus] = useState<string>("all");
|
||||
const [sortField, setSortField] = useState<SortField>(null);
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||||
const [aggregateConfig, setAggregateConfig] = useState<AggregateConfig>({
|
||||
cost: "sum",
|
||||
subscriptions_count: "sum",
|
||||
views_count: "sum",
|
||||
cpm: "avg",
|
||||
cpl: "avg",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannel) {
|
||||
loadData();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedChannel]);
|
||||
|
||||
const loadData = async () => {
|
||||
if (!selectedChannel) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const purchasesRes = await purchasesApi.list({
|
||||
target_channel_id: selectedChannel.id,
|
||||
});
|
||||
setPurchases(purchasesRes.placements);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки данных");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Вычисление метрик
|
||||
const calculateCPM = (purchase: Purchase): number | null => {
|
||||
if (!purchase.cost || !purchase.views_count || purchase.views_count === 0)
|
||||
return null;
|
||||
return (purchase.cost / purchase.views_count) * 1000;
|
||||
};
|
||||
|
||||
const calculateCPL = (purchase: Purchase): number | null => {
|
||||
if (
|
||||
!purchase.cost ||
|
||||
!purchase.subscriptions_count ||
|
||||
purchase.subscriptions_count === 0
|
||||
)
|
||||
return null;
|
||||
return purchase.cost / purchase.subscriptions_count;
|
||||
};
|
||||
|
||||
// Функции агрегации
|
||||
const calculateAggregate = (
|
||||
values: (number | null)[],
|
||||
func: AggregateFunction
|
||||
): number | null => {
|
||||
const filtered = values.filter((v) => v !== null) as number[];
|
||||
if (filtered.length === 0) return null;
|
||||
|
||||
switch (func) {
|
||||
case "sum":
|
||||
return filtered.reduce((sum, val) => sum + val, 0);
|
||||
case "avg":
|
||||
return filtered.reduce((sum, val) => sum + val, 0) / filtered.length;
|
||||
case "median":
|
||||
const sorted = [...filtered].sort((a, b) => a - b);
|
||||
const mid = Math.floor(sorted.length / 2);
|
||||
return sorted.length % 2 === 0
|
||||
? (sorted[mid - 1] + sorted[mid]) / 2
|
||||
: sorted[mid];
|
||||
case "max":
|
||||
return Math.max(...filtered);
|
||||
case "min":
|
||||
return Math.min(...filtered);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getAggregateFunctionLabel = (func: AggregateFunction): string => {
|
||||
switch (func) {
|
||||
case "sum":
|
||||
return "Сумма";
|
||||
case "avg":
|
||||
return "Среднее";
|
||||
case "median":
|
||||
return "Медиана";
|
||||
case "max":
|
||||
return "Наибольшее";
|
||||
case "min":
|
||||
return "Наименьшее";
|
||||
}
|
||||
};
|
||||
|
||||
// Функции экспорта
|
||||
const getExportData = () => {
|
||||
return filteredPurchases.map((purchase) => {
|
||||
const cpm = calculateCPM(purchase);
|
||||
const cpl = calculateCPL(purchase);
|
||||
|
||||
return {
|
||||
Статус: purchase.status === "archived" ? "Архив" : "Активно",
|
||||
"Целевой канал": purchase.target_channel_title,
|
||||
"Внешний канал": purchase.external_channel_title,
|
||||
Креатив: purchase.creative_name,
|
||||
Дата: formatDate(purchase.placement_date),
|
||||
Стоимость: purchase.cost,
|
||||
Подписки: purchase.subscriptions_count,
|
||||
Просмотры: purchase.views_count || 0,
|
||||
CPM: cpm !== null ? Number(cpm.toFixed(2)) : null,
|
||||
CPL: cpl !== null ? Number(cpl.toFixed(2)) : null,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const getExportTotals = () => {
|
||||
return {
|
||||
Статус: "",
|
||||
"Целевой канал": "",
|
||||
"Внешний канал": "",
|
||||
Креатив: "",
|
||||
Дата: "Итого",
|
||||
Стоимость:
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.cost),
|
||||
aggregateConfig.cost
|
||||
) || 0,
|
||||
Подписки:
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.subscriptions_count),
|
||||
aggregateConfig.subscriptions_count
|
||||
) || 0,
|
||||
Просмотры:
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.views_count),
|
||||
aggregateConfig.views_count
|
||||
) || 0,
|
||||
CPM:
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => calculateCPM(p)),
|
||||
aggregateConfig.cpm
|
||||
) || 0,
|
||||
CPL:
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => calculateCPL(p)),
|
||||
aggregateConfig.cpl
|
||||
) || 0,
|
||||
};
|
||||
};
|
||||
|
||||
const exportToExcel = () => {
|
||||
const data = getExportData();
|
||||
const totals = getExportTotals();
|
||||
const exportData = [...data, totals];
|
||||
|
||||
const ws = XLSX.utils.json_to_sheet(exportData);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Закупы");
|
||||
|
||||
// Форматирование ширины столбцов
|
||||
const colWidths = [
|
||||
{ wch: 10 }, // Статус
|
||||
{ wch: 25 }, // Целевой канал
|
||||
{ wch: 25 }, // Внешний канал
|
||||
{ wch: 30 }, // Креатив
|
||||
{ wch: 12 }, // Дата
|
||||
{ wch: 12 }, // Стоимость
|
||||
{ wch: 10 }, // Подписки
|
||||
{ wch: 12 }, // Просмотры
|
||||
{ wch: 10 }, // CPM
|
||||
{ wch: 10 }, // CPL
|
||||
];
|
||||
ws["!cols"] = colWidths;
|
||||
|
||||
XLSX.writeFile(wb, `Закупы_${new Date().toISOString().split("T")[0]}.xlsx`);
|
||||
};
|
||||
|
||||
const exportToCSV = () => {
|
||||
const data = getExportData();
|
||||
const totals = getExportTotals();
|
||||
const exportData = [...data, totals];
|
||||
|
||||
// Заголовки
|
||||
const headers = Object.keys(exportData[0]);
|
||||
const csvContent = [
|
||||
headers.join(","),
|
||||
...exportData.map((row) =>
|
||||
headers
|
||||
.map((header) => {
|
||||
const value = row[header as keyof typeof row];
|
||||
// Обработка значений с запятыми или кавычками
|
||||
if (
|
||||
value === null ||
|
||||
value === undefined ||
|
||||
value === "" ||
|
||||
value === 0
|
||||
) {
|
||||
return value === null ? "" : value;
|
||||
}
|
||||
const stringValue = String(value);
|
||||
if (stringValue.includes(",") || stringValue.includes('"')) {
|
||||
return `"${stringValue.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return stringValue;
|
||||
})
|
||||
.join(",")
|
||||
),
|
||||
].join("\n");
|
||||
|
||||
const blob = new Blob(["\ufeff" + csvContent], {
|
||||
type: "text/csv;charset=utf-8;",
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `Закупы_${new Date().toISOString().split("T")[0]}.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
};
|
||||
|
||||
const exportToTXT = () => {
|
||||
const data = getExportData();
|
||||
const totals = getExportTotals();
|
||||
const exportData = [...data, totals];
|
||||
|
||||
const headers = Object.keys(exportData[0]);
|
||||
const columnWidths = headers.map((header) => {
|
||||
const maxLength = Math.max(
|
||||
header.length,
|
||||
...exportData.map((row) => {
|
||||
const value = row[header as keyof typeof row];
|
||||
return String(value || "").length;
|
||||
})
|
||||
);
|
||||
return Math.min(maxLength + 2, 30);
|
||||
});
|
||||
|
||||
const txtContent = [
|
||||
// Заголовки
|
||||
headers.map((header, i) => header.padEnd(columnWidths[i])).join(" | "),
|
||||
// Разделитель
|
||||
columnWidths.map((width) => "-".repeat(width)).join("-+-"),
|
||||
// Данные
|
||||
...exportData.map((row) =>
|
||||
headers
|
||||
.map((header, i) => {
|
||||
const value = row[header as keyof typeof row];
|
||||
return String(value || "").padEnd(columnWidths[i]);
|
||||
})
|
||||
.join(" | ")
|
||||
),
|
||||
].join("\n");
|
||||
|
||||
const blob = new Blob([txtContent], { type: "text/plain;charset=utf-8" });
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `Закупы_${new Date().toISOString().split("T")[0]}.txt`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
};
|
||||
|
||||
// Обработка сортировки
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
// Переключение: asc -> desc -> null -> asc
|
||||
if (sortDirection === "asc") {
|
||||
setSortDirection("desc");
|
||||
} else if (sortDirection === "desc") {
|
||||
setSortField(null);
|
||||
setSortDirection(null);
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
return <ArrowDown className="ml-2 h-4 w-4 inline" />;
|
||||
};
|
||||
|
||||
const filteredPurchases = purchases
|
||||
.filter((purchase) => {
|
||||
// Поиск
|
||||
const matchesSearch =
|
||||
purchase.external_channel_title
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
purchase.creative_name
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase());
|
||||
|
||||
// Фильтр по статусу
|
||||
let matchesStatus = true;
|
||||
if (filterStatus === "archived") {
|
||||
matchesStatus = purchase.status === "archived";
|
||||
} else if (filterStatus === "active") {
|
||||
matchesStatus = purchase.status === "active";
|
||||
}
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (!sortField || !sortDirection) return 0;
|
||||
|
||||
let aValue: number | string | null = 0;
|
||||
let bValue: number | string | null = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "status":
|
||||
aValue = a.status;
|
||||
bValue = b.status;
|
||||
// Сравниваем строки
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortDirection === "asc"
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
}
|
||||
return 0;
|
||||
case "placement_date":
|
||||
aValue = new Date(a.placement_date).getTime();
|
||||
bValue = new Date(b.placement_date).getTime();
|
||||
break;
|
||||
case "cost":
|
||||
aValue = a.cost;
|
||||
bValue = b.cost;
|
||||
break;
|
||||
case "subscriptions_count":
|
||||
aValue = a.subscriptions_count;
|
||||
bValue = b.subscriptions_count;
|
||||
break;
|
||||
case "views_count":
|
||||
aValue = a.views_count || 0;
|
||||
bValue = b.views_count || 0;
|
||||
break;
|
||||
case "cpm":
|
||||
aValue = calculateCPM(a);
|
||||
bValue = calculateCPM(b);
|
||||
break;
|
||||
case "cpl":
|
||||
aValue = calculateCPL(a);
|
||||
bValue = calculateCPL(b);
|
||||
break;
|
||||
}
|
||||
|
||||
// Обработка null значений для чисел
|
||||
if (typeof aValue === "number" && typeof bValue === "number") {
|
||||
if (aValue === null && bValue === null) return 0;
|
||||
if (aValue === null) return 1;
|
||||
if (bValue === null) return -1;
|
||||
|
||||
if (sortDirection === "asc") {
|
||||
return aValue - bValue;
|
||||
} else {
|
||||
return bValue - aValue;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Статистика
|
||||
const stats = {
|
||||
total: purchases.length,
|
||||
active: purchases.filter((p) => p.status === "active").length,
|
||||
archived: purchases.filter((p) => p.status === "archived").length,
|
||||
totalCost: purchases.reduce((sum, p) => sum + (p.cost || 0), 0),
|
||||
totalSubscriptions: purchases.reduce(
|
||||
(sum, p) => sum + p.subscriptions_count,
|
||||
0
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[{ label: "Главная", href: "/" }, { label: "Закупы" }]}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Закупы</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Рекламные размещения во внешних каналах
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild>
|
||||
<Link href="/purchases/new">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Создать закуп
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardContent className="justify-between flex flex-row">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по названию..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={filterStatus} onValueChange={setFilterStatus}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Статус" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Все статусы</SelectItem>
|
||||
<SelectItem value="completed">Завершено</SelectItem>
|
||||
<SelectItem value="scheduled">Запланировано</SelectItem>
|
||||
<SelectItem value="archived">Архив</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary">
|
||||
Найдено: {formatNumber(filteredPurchases.length)}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row justify-between">
|
||||
<div className="">
|
||||
<CardTitle>Список закупов</CardTitle>
|
||||
<CardDescription>Все рекламные размещения</CardDescription>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Экспорт
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={exportToExcel}>
|
||||
Экспорт в Excel (.xlsx)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={exportToCSV}>
|
||||
Экспорт в CSV (.csv)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={exportToTXT}>
|
||||
Экспорт в TXT (.txt)
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredPurchases.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<ShoppingCart className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
{searchQuery || filterStatus !== "all"
|
||||
? "Закупы не найдены"
|
||||
: "Нет закупов"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{searchQuery || filterStatus !== "all"
|
||||
? "Попробуйте изменить фильтры"
|
||||
: "Создайте первый закуп"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("status")}
|
||||
>
|
||||
Статус
|
||||
{getSortIcon("status")}
|
||||
</TableHead>
|
||||
<TableHead>Целевой канал</TableHead>
|
||||
<TableHead>Внешний канал</TableHead>
|
||||
<TableHead>Креатив</TableHead>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("placement_date")}
|
||||
>
|
||||
Дата
|
||||
{getSortIcon("placement_date")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("cost")}
|
||||
>
|
||||
Стоимость
|
||||
{getSortIcon("cost")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("subscriptions_count")}
|
||||
>
|
||||
Подписки
|
||||
{getSortIcon("subscriptions_count")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("views_count")}
|
||||
>
|
||||
Просмотры
|
||||
{getSortIcon("views_count")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("cpm")}
|
||||
>
|
||||
CPM
|
||||
{getSortIcon("cpm")}
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("cpl")}
|
||||
>
|
||||
CPL
|
||||
{getSortIcon("cpl")}
|
||||
</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredPurchases.map((purchase) => {
|
||||
const cpm = calculateCPM(purchase);
|
||||
const cpl = calculateCPL(purchase);
|
||||
|
||||
return (
|
||||
<TableRow key={purchase.id}>
|
||||
<TableCell>
|
||||
{purchase.status === "archived" ? (
|
||||
<Badge variant="secondary">
|
||||
<Archive className="h-3 w-3 mr-1" />
|
||||
Архив
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="default">
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
Активно
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{purchase.target_channel_title}
|
||||
</TableCell>
|
||||
<TableCell>{purchase.external_channel_title}</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate">
|
||||
{purchase.creative_name}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{formatDate(purchase.placement_date)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(purchase.cost)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(purchase.subscriptions_count)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{purchase.views_count
|
||||
? formatNumber(purchase.views_count)
|
||||
: "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{cpm !== null ? formatCurrency(cpm) : "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{cpl !== null ? formatCurrency(cpl) : "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link href={`/purchases/${purchase.id}`}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="font-semibold">
|
||||
Итого
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<span className="text-xs">ƒ</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{(
|
||||
[
|
||||
"sum",
|
||||
"avg",
|
||||
"median",
|
||||
"max",
|
||||
"min",
|
||||
] as AggregateFunction[]
|
||||
).map((func) => (
|
||||
<DropdownMenuItem
|
||||
key={func}
|
||||
onClick={() =>
|
||||
setAggregateConfig({
|
||||
...aggregateConfig,
|
||||
cost: func,
|
||||
})
|
||||
}
|
||||
className={
|
||||
aggregateConfig.cost === func
|
||||
? "bg-accent"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{getAggregateFunctionLabel(func)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{formatCurrency(
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.cost),
|
||||
aggregateConfig.cost
|
||||
) || 0
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<span className="text-xs">ƒ</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{(
|
||||
[
|
||||
"sum",
|
||||
"avg",
|
||||
"median",
|
||||
"max",
|
||||
"min",
|
||||
] as AggregateFunction[]
|
||||
).map((func) => (
|
||||
<DropdownMenuItem
|
||||
key={func}
|
||||
onClick={() =>
|
||||
setAggregateConfig({
|
||||
...aggregateConfig,
|
||||
subscriptions_count: func,
|
||||
})
|
||||
}
|
||||
className={
|
||||
aggregateConfig.subscriptions_count === func
|
||||
? "bg-accent"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{getAggregateFunctionLabel(func)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{formatNumber(
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.subscriptions_count),
|
||||
aggregateConfig.subscriptions_count
|
||||
) || 0
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<span className="text-xs">ƒ</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{(
|
||||
[
|
||||
"sum",
|
||||
"avg",
|
||||
"median",
|
||||
"max",
|
||||
"min",
|
||||
] as AggregateFunction[]
|
||||
).map((func) => (
|
||||
<DropdownMenuItem
|
||||
key={func}
|
||||
onClick={() =>
|
||||
setAggregateConfig({
|
||||
...aggregateConfig,
|
||||
views_count: func,
|
||||
})
|
||||
}
|
||||
className={
|
||||
aggregateConfig.views_count === func
|
||||
? "bg-accent"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{getAggregateFunctionLabel(func)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{formatNumber(
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => p.views_count),
|
||||
aggregateConfig.views_count
|
||||
) || 0
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<span className="text-xs">ƒ</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{(
|
||||
[
|
||||
"sum",
|
||||
"avg",
|
||||
"median",
|
||||
"max",
|
||||
"min",
|
||||
] as AggregateFunction[]
|
||||
).map((func) => (
|
||||
<DropdownMenuItem
|
||||
key={func}
|
||||
onClick={() =>
|
||||
setAggregateConfig({
|
||||
...aggregateConfig,
|
||||
cpm: func,
|
||||
})
|
||||
}
|
||||
className={
|
||||
aggregateConfig.cpm === func
|
||||
? "bg-accent"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{getAggregateFunctionLabel(func)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{formatCurrency(
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => calculateCPM(p)),
|
||||
aggregateConfig.cpm
|
||||
) || 0
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<span className="text-xs">ƒ</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{(
|
||||
[
|
||||
"sum",
|
||||
"avg",
|
||||
"median",
|
||||
"max",
|
||||
"min",
|
||||
] as AggregateFunction[]
|
||||
).map((func) => (
|
||||
<DropdownMenuItem
|
||||
key={func}
|
||||
onClick={() =>
|
||||
setAggregateConfig({
|
||||
...aggregateConfig,
|
||||
cpl: func,
|
||||
})
|
||||
}
|
||||
className={
|
||||
aggregateConfig.cpl === func
|
||||
? "bg-accent"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{getAggregateFunctionLabel(func)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{formatCurrency(
|
||||
calculateAggregate(
|
||||
filteredPurchases.map((p) => calculateCPL(p)),
|
||||
aggregateConfig.cpl
|
||||
) || 0
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
302
app/dashboard/[workspaceId]/analytics/channels/page.tsx
Normal file
302
app/dashboard/[workspaceId]/analytics/channels/page.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Channels Analytics Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import {
|
||||
Loader2,
|
||||
Building2,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { ChannelAnalyticsItem } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
type SortField =
|
||||
| "placements"
|
||||
| "cost"
|
||||
| "subscriptions"
|
||||
| "views"
|
||||
| "cps"
|
||||
| "cpm";
|
||||
type SortOrder = "asc" | "desc" | null;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function ChannelsAnalyticsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { getProjectFilterId } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
const [channels, setChannels] = useState<ChannelAnalyticsItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sortField, setSortField] = useState<SortField | null>("cost");
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [workspaceId, projectFilterId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await demoAwareAnalyticsApi.channels(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
size: 100,
|
||||
});
|
||||
setChannels(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load channels analytics:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Sort handler
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortOrder === "asc") setSortOrder("desc");
|
||||
else if (sortOrder === "desc") {
|
||||
setSortField(null);
|
||||
setSortOrder(null);
|
||||
} else setSortOrder("asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("desc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "asc") return <ArrowUp className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "desc") return <ArrowDown className="h-4 w-4 ml-1" />;
|
||||
return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
};
|
||||
|
||||
// Sort data
|
||||
const sortedChannels = [...channels].sort((a, b) => {
|
||||
if (!sortField || !sortOrder) return 0;
|
||||
|
||||
let aVal = 0;
|
||||
let bVal = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "placements":
|
||||
aVal = a.placements_count;
|
||||
bVal = b.placements_count;
|
||||
break;
|
||||
case "cost":
|
||||
aVal = a.total_cost;
|
||||
bVal = b.total_cost;
|
||||
break;
|
||||
case "subscriptions":
|
||||
aVal = a.total_subscriptions;
|
||||
bVal = b.total_subscriptions;
|
||||
break;
|
||||
case "views":
|
||||
aVal = a.total_views;
|
||||
bVal = b.total_views;
|
||||
break;
|
||||
case "cps":
|
||||
aVal = a.avg_cps ?? 0;
|
||||
bVal = b.avg_cps ?? 0;
|
||||
break;
|
||||
case "cpm":
|
||||
aVal = a.avg_cpm ?? 0;
|
||||
bVal = b.avg_cpm ?? 0;
|
||||
break;
|
||||
}
|
||||
|
||||
return sortOrder === "asc" ? aVal - bVal : bVal - aVal;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Аналитика", href: `/dashboard/${workspaceId}/analytics` },
|
||||
{ label: "Каналы" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
Аналитика по каналам
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Эффективность каналов размещения
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : sortedChannels.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Building2 className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет данных</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
Создайте размещения для отображения статистики по каналам
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Каналы размещения</CardTitle>
|
||||
<CardDescription>{sortedChannels.length} каналов</CardDescription>
|
||||
</CardHeader>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Канал</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("placements")}
|
||||
>
|
||||
Размещений
|
||||
{getSortIcon("placements")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cost")}
|
||||
>
|
||||
Расходы
|
||||
{getSortIcon("cost")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("subscriptions")}
|
||||
>
|
||||
Подписчики
|
||||
{getSortIcon("subscriptions")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("views")}
|
||||
>
|
||||
Просмотры
|
||||
{getSortIcon("views")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cps")}
|
||||
>
|
||||
Ср. CPS
|
||||
{getSortIcon("cps")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cpm")}
|
||||
>
|
||||
Ср. CPM
|
||||
{getSortIcon("cpm")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedChannels.map((channel) => (
|
||||
<TableRow key={channel.channel_id}>
|
||||
<TableCell>
|
||||
<div className="font-medium">{channel.channel_title}</div>
|
||||
{channel.channel_username && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@{channel.channel_username}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{channel.placements_count}</TableCell>
|
||||
<TableCell>{formatCurrency(channel.total_cost)}</TableCell>
|
||||
<TableCell>
|
||||
{formatNumber(channel.total_subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell>{formatNumber(channel.total_views)}</TableCell>
|
||||
<TableCell>{formatCurrency(channel.avg_cps)}</TableCell>
|
||||
<TableCell>{formatCurrency(channel.avg_cpm)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
305
app/dashboard/[workspaceId]/analytics/creatives/page.tsx
Normal file
305
app/dashboard/[workspaceId]/analytics/creatives/page.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Creatives Analytics Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Folder,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { CreativeAnalyticsItem } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
type SortField =
|
||||
| "placements"
|
||||
| "cost"
|
||||
| "subscriptions"
|
||||
| "views"
|
||||
| "cps"
|
||||
| "cpm";
|
||||
type SortOrder = "asc" | "desc" | null;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function CreativesAnalyticsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { getProjectFilterId } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
const [creatives, setCreatives] = useState<CreativeAnalyticsItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sortField, setSortField] = useState<SortField | null>("cost");
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [workspaceId, projectFilterId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await demoAwareAnalyticsApi.creatives(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
size: 100,
|
||||
});
|
||||
setCreatives(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load creatives analytics:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Sort handler
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortOrder === "asc") setSortOrder("desc");
|
||||
else if (sortOrder === "desc") {
|
||||
setSortField(null);
|
||||
setSortOrder(null);
|
||||
} else setSortOrder("asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("desc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "asc") return <ArrowUp className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "desc") return <ArrowDown className="h-4 w-4 ml-1" />;
|
||||
return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
};
|
||||
|
||||
// Sort data
|
||||
const sortedCreatives = [...creatives].sort((a, b) => {
|
||||
if (!sortField || !sortOrder) return 0;
|
||||
|
||||
let aVal = 0;
|
||||
let bVal = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "placements":
|
||||
aVal = a.placements_count;
|
||||
bVal = b.placements_count;
|
||||
break;
|
||||
case "cost":
|
||||
aVal = a.total_cost;
|
||||
bVal = b.total_cost;
|
||||
break;
|
||||
case "subscriptions":
|
||||
aVal = a.total_subscriptions;
|
||||
bVal = b.total_subscriptions;
|
||||
break;
|
||||
case "views":
|
||||
aVal = a.total_views;
|
||||
bVal = b.total_views;
|
||||
break;
|
||||
case "cps":
|
||||
aVal = a.avg_cpf ?? 0;
|
||||
bVal = b.avg_cpf ?? 0;
|
||||
break;
|
||||
case "cpm":
|
||||
aVal = a.avg_cpm ?? 0;
|
||||
bVal = b.avg_cpm ?? 0;
|
||||
break;
|
||||
}
|
||||
|
||||
return sortOrder === "asc" ? aVal - bVal : bVal - aVal;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Аналитика", href: `/dashboard/${workspaceId}/analytics` },
|
||||
{ label: "Креативы" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
Аналитика по креативам
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Сравнение эффективности рекламных материалов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : sortedCreatives.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Folder className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет данных</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
Создайте размещения для отображения статистики по креативам
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Креативы</CardTitle>
|
||||
<CardDescription>
|
||||
{sortedCreatives.length} креативов с размещениями
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Креатив</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("placements")}
|
||||
>
|
||||
Размещений
|
||||
{getSortIcon("placements")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cost")}
|
||||
>
|
||||
Расходы
|
||||
{getSortIcon("cost")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("subscriptions")}
|
||||
>
|
||||
Подписчики
|
||||
{getSortIcon("subscriptions")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("views")}
|
||||
>
|
||||
Просмотры
|
||||
{getSortIcon("views")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cps")}
|
||||
>
|
||||
Ср. CPS
|
||||
{getSortIcon("cps")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cpm")}
|
||||
>
|
||||
Ср. CPM
|
||||
{getSortIcon("cpm")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedCreatives.map((creative) => (
|
||||
<TableRow key={creative.id}>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{creative.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{creative.placements_count}</TableCell>
|
||||
<TableCell>{formatCurrency(creative.total_cost)}</TableCell>
|
||||
<TableCell>
|
||||
{formatNumber(creative.total_subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell>{formatNumber(creative.total_views)}</TableCell>
|
||||
<TableCell>{formatCurrency(creative.avg_cpf)}</TableCell>
|
||||
<TableCell>{formatCurrency(creative.avg_cpm)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
291
app/dashboard/[workspaceId]/analytics/page.tsx
Normal file
291
app/dashboard/[workspaceId]/analytics/page.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Analytics Overview Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Users,
|
||||
Eye,
|
||||
DollarSign,
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import type { SpendingAnalytics } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const {
|
||||
selectedProjects,
|
||||
getProjectFilterId,
|
||||
allProjectsSelected,
|
||||
projects
|
||||
} = useWorkspace();
|
||||
|
||||
const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
useEffect(() => {
|
||||
loadAnalytics();
|
||||
}, [workspaceId, projectFilterId]);
|
||||
|
||||
const loadAnalytics = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await demoAwareAnalyticsApi.spending(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
grouping: "month",
|
||||
});
|
||||
setSpending(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load analytics:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate averages
|
||||
const avgCps =
|
||||
spending && spending.total_subscriptions > 0
|
||||
? spending.total_cost / spending.total_subscriptions
|
||||
: null;
|
||||
const avgCpm =
|
||||
spending && spending.total_views > 0
|
||||
? (spending.total_cost / spending.total_views) * 1000
|
||||
: null;
|
||||
|
||||
// Selection info text
|
||||
const selectionText = allProjectsSelected
|
||||
? "Все проекты"
|
||||
: selectedProjects.length === 1
|
||||
? selectedProjects[0].title
|
||||
: `${selectedProjects.length} проекта`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Аналитика" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Аналитика</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Обзор эффективности рекламных размещений
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{selectionText}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{selectedProjects.length > 1 && !allProjectsSelected && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Выбрано {selectedProjects.length} проекта: {selectedProjects.map(p => p.title).join(", ")}.
|
||||
Показана суммарная аналитика по всем выбранным проектам.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Summary Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Всего потрачено
|
||||
</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(spending?.total_cost ?? 0)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Подписчиков
|
||||
</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending?.total_subscriptions ?? 0)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Средний CPS: {avgCps ? formatCurrency(avgCps) : "—"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Просмотров</CardTitle>
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending?.total_views ?? 0)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Средний CPM: {avgCpm ? formatCurrency(avgCpm) : "—"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Периодов данных
|
||||
</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{spending?.chart_data?.length ?? 0}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">месяцев</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card className="hover:bg-muted/50 transition-colors">
|
||||
<Link href={`/dashboard/${workspaceId}/analytics/spending`}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Динамика расходов
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
График расходов по времени с группировкой
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:bg-muted/50 transition-colors">
|
||||
<Link href={`/dashboard/${workspaceId}/analytics/channels`}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Аналитика по каналам
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Эффективность каналов размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:bg-muted/50 transition-colors">
|
||||
<Link href={`/dashboard/${workspaceId}/analytics/creatives`}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Аналитика по креативам
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Сравнение эффективности креативов
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
{spending && spending.chart_data && spending.chart_data.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Последние периоды</CardTitle>
|
||||
<CardDescription>Динамика по периодам</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{spending.chart_data.slice(0, 6).map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">{item.period}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{formatNumber(item.subscriptions)} подписчиков •{" "}
|
||||
{formatNumber(item.views)} просмотров
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-medium">
|
||||
{formatCurrency(item.cost)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
501
app/dashboard/[workspaceId]/analytics/spending/page.tsx
Normal file
501
app/dashboard/[workspaceId]/analytics/spending/page.tsx
Normal file
@@ -0,0 +1,501 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Spending Analytics Page - Enhanced with Charts
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Loader2, TrendingUp, BarChart3, LineChart as LineChartIcon, Info } from "lucide-react";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
LabelList,
|
||||
} from "recharts";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
type ChartConfig,
|
||||
} from "@/components/ui/chart";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { SpendingAnalytics, DateGrouping } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
const formatShortCurrency = (value: number) => {
|
||||
if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
|
||||
if (value >= 1000) return `${(value / 1000).toFixed(0)}K`;
|
||||
return value.toString();
|
||||
};
|
||||
|
||||
const formatDateLabel = (date: string, grouping: DateGrouping) => {
|
||||
const d = new Date(date);
|
||||
const g = grouping.toLowerCase();
|
||||
if (g === "day") {
|
||||
return d.toLocaleDateString("ru-RU", { day: "numeric", month: "short" });
|
||||
} else if (g === "week") {
|
||||
return `Нед. ${d.toLocaleDateString("ru-RU", { day: "numeric", month: "short" })}`;
|
||||
} else {
|
||||
return d.toLocaleDateString("ru-RU", { month: "short", year: "2-digit" });
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Chart Types
|
||||
// ============================================================================
|
||||
|
||||
type ChartType = "line" | "bar";
|
||||
type MetricKey = "cost" | "subscriptions" | "views";
|
||||
|
||||
// ============================================================================
|
||||
// Chart Configurations
|
||||
// ============================================================================
|
||||
|
||||
const chartConfig: ChartConfig = {
|
||||
cost: {
|
||||
label: "Расходы",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
subscriptions: {
|
||||
label: "Подписчики",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
views: {
|
||||
label: "Просмотры",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function SpendingAnalyticsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { selectedProjects, getProjectFilterId, allProjectsSelected } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [grouping, setGrouping] = useState<DateGrouping>("month");
|
||||
|
||||
// Chart settings
|
||||
const [chartType, setChartType] = useState<ChartType>("line");
|
||||
const [showLabels, setShowLabels] = useState(false);
|
||||
const [selectedMetrics, setSelectedMetrics] = useState<MetricKey[]>(["cost", "subscriptions"]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [workspaceId, projectFilterId, grouping]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await demoAwareAnalyticsApi.spending(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
grouping,
|
||||
});
|
||||
setSpending(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load spending:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Format chart data
|
||||
const chartData = useMemo(() => {
|
||||
if (!spending?.chart_data) return [];
|
||||
return spending.chart_data.map((item) => ({
|
||||
period: item.period,
|
||||
dateLabel: formatDateLabel(item.period, grouping),
|
||||
cost: item.cost,
|
||||
subscriptions: item.subscriptions,
|
||||
views: item.views,
|
||||
}));
|
||||
}, [spending, grouping]);
|
||||
|
||||
// Toggle metric
|
||||
const handleToggleMetric = (metric: MetricKey) => {
|
||||
if (selectedMetrics.includes(metric)) {
|
||||
if (selectedMetrics.length > 1) {
|
||||
setSelectedMetrics(selectedMetrics.filter((m) => m !== metric));
|
||||
}
|
||||
} else {
|
||||
setSelectedMetrics([...selectedMetrics, metric]);
|
||||
}
|
||||
};
|
||||
|
||||
// Render chart
|
||||
const renderChart = () => {
|
||||
if (chartData.length === 0) return null;
|
||||
|
||||
const ChartComponent = chartType === "line" ? LineChart : BarChart;
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">
|
||||
<ChartComponent
|
||||
data={chartData}
|
||||
margin={{ left: 12, right: 12, top: showLabels ? 20 : 12, bottom: 12 }}
|
||||
>
|
||||
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="dateLabel"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={formatShortCurrency}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(_, payload) => {
|
||||
if (payload && payload[0]) {
|
||||
return payload[0].payload.period;
|
||||
}
|
||||
return "";
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
|
||||
{selectedMetrics.map((metric) =>
|
||||
chartType === "line" ? (
|
||||
<Line
|
||||
key={metric}
|
||||
dataKey={metric}
|
||||
type="monotone"
|
||||
stroke={`var(--color-${metric})`}
|
||||
strokeWidth={2}
|
||||
dot={{ r: 4 }}
|
||||
activeDot={{ r: 6 }}
|
||||
>
|
||||
{showLabels && (
|
||||
<LabelList
|
||||
dataKey={metric}
|
||||
position="top"
|
||||
formatter={(value: number) =>
|
||||
metric === "cost" ? formatShortCurrency(value) : formatNumber(value)
|
||||
}
|
||||
className="fill-foreground text-[10px]"
|
||||
/>
|
||||
)}
|
||||
</Line>
|
||||
) : (
|
||||
<Bar
|
||||
key={metric}
|
||||
dataKey={metric}
|
||||
fill={`var(--color-${metric})`}
|
||||
radius={[4, 4, 0, 0]}
|
||||
>
|
||||
{showLabels && (
|
||||
<LabelList
|
||||
dataKey={metric}
|
||||
position="top"
|
||||
formatter={(value: number) =>
|
||||
metric === "cost" ? formatShortCurrency(value) : formatNumber(value)
|
||||
}
|
||||
className="fill-foreground text-[10px]"
|
||||
/>
|
||||
)}
|
||||
</Bar>
|
||||
)
|
||||
)}
|
||||
</ChartComponent>
|
||||
</ChartContainer>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Аналитика", href: `/dashboard/${workspaceId}/analytics` },
|
||||
{ label: "Расходы" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Динамика расходов</h1>
|
||||
<p className="text-muted-foreground">Анализ расходов по периодам</p>
|
||||
</div>
|
||||
<Select value={grouping} onValueChange={(v) => setGrouping(v as DateGrouping)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="day">По дням</SelectItem>
|
||||
<SelectItem value="week">По неделям</SelectItem>
|
||||
<SelectItem value="month">По месяцам</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : spending ? (
|
||||
<>
|
||||
{/* Summary Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Всего потрачено</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{formatCurrency(spending.total_cost)}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Подписчиков</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(spending.total_subscriptions)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Просмотров</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{formatNumber(spending.total_views)}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Chart with Settings */}
|
||||
{chartData.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>График динамики</CardTitle>
|
||||
<CardDescription>
|
||||
Визуализация данных по выбранным метрикам
|
||||
</CardDescription>
|
||||
</div>
|
||||
{/* Chart Settings */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Chart Type Toggle */}
|
||||
<div className="flex items-center gap-1 border rounded-lg p-1">
|
||||
<Button
|
||||
variant={chartType === "line" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setChartType("line")}
|
||||
aria-label="Линейный график"
|
||||
>
|
||||
<LineChartIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={chartType === "bar" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setChartType("bar")}
|
||||
aria-label="Столбчатая диаграмма"
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Labels Toggle */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="show-labels"
|
||||
checked={showLabels}
|
||||
onCheckedChange={(checked) => setShowLabels(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="show-labels" className="text-sm cursor-pointer">
|
||||
Подписи
|
||||
</Label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Показывать значения на точках графика
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics Selection */}
|
||||
<div className="flex items-center gap-4 mt-3 pt-3 border-t">
|
||||
<span className="text-sm text-muted-foreground">Метрики:</span>
|
||||
{(["cost", "subscriptions", "views"] as MetricKey[]).map((metric) => (
|
||||
<div key={metric} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id={`metric-${metric}`}
|
||||
checked={selectedMetrics.includes(metric)}
|
||||
onCheckedChange={() => handleToggleMetric(metric)}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`metric-${metric}`}
|
||||
className="text-sm cursor-pointer flex items-center gap-1.5"
|
||||
>
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: `var(--color-${metric})` }}
|
||||
/>
|
||||
{chartConfig[metric].label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 sm:p-6">{renderChart()}</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Data Table */}
|
||||
{spending.chart_data && spending.chart_data.length > 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Данные по периодам</CardTitle>
|
||||
<CardDescription>{spending.chart_data.length} периодов</CardDescription>
|
||||
</CardHeader>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Период</TableHead>
|
||||
<TableHead className="text-right">Расходы</TableHead>
|
||||
<TableHead className="text-right">Подписчики</TableHead>
|
||||
<TableHead className="text-right">Просмотры</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
CPS
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Cost Per Subscription</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
CPM
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Cost Per Mille (1000 views)</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{spending.chart_data.map((item, index) => {
|
||||
const cps = item.subscriptions > 0 ? item.cost / item.subscriptions : null;
|
||||
const cpm = item.views > 0 ? (item.cost / item.views) * 1000 : null;
|
||||
|
||||
return (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">{item.period}</TableCell>
|
||||
<TableCell className="text-right">{formatCurrency(item.cost)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(item.subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(item.views)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{cps ? formatCurrency(cps) : "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{cpm ? formatCurrency(cpm) : "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<TrendingUp className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет данных</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
Создайте размещения для отображения статистики
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
384
app/dashboard/[workspaceId]/channels/page.tsx
Normal file
384
app/dashboard/[workspaceId]/channels/page.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Channels Catalog Page - Enhanced with Sorting
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import {
|
||||
Loader2,
|
||||
Search,
|
||||
Building2,
|
||||
Users,
|
||||
ExternalLink,
|
||||
Grid,
|
||||
List,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { channelsApi } from "@/lib/api";
|
||||
import { isDemoWorkspace, demoChannels } from "@/lib/demo";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import type { Channel } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatNumber = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Sort Types
|
||||
// ============================================================================
|
||||
|
||||
type SortField = "title" | "username" | "subscribers";
|
||||
type SortOrder = "asc" | "desc" | null;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function ChannelsCatalogPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"table" | "grid">("table");
|
||||
const [sortField, setSortField] = useState<SortField | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadChannels = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Demo mode - use mock data
|
||||
const isDemo = isDemoWorkspace(workspaceId);
|
||||
const response = isDemo
|
||||
? { items: demoChannels.filter(c => !search || c.username?.includes(search) || c.title.includes(search)), total: demoChannels.length, page: 1, size: 100, pages: 1 }
|
||||
: await channelsApi.list({
|
||||
username: search || undefined,
|
||||
size: 100,
|
||||
});
|
||||
setChannels(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load channels:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const debounce = setTimeout(loadChannels, 300);
|
||||
return () => clearTimeout(debounce);
|
||||
}, [search]);
|
||||
|
||||
// Handle sort
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortOrder === "asc") {
|
||||
setSortOrder("desc");
|
||||
} else if (sortOrder === "desc") {
|
||||
setSortField(null);
|
||||
setSortOrder(null);
|
||||
} else {
|
||||
setSortOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "asc") return <ArrowUp className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "desc") return <ArrowDown className="h-4 w-4 ml-1" />;
|
||||
return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
};
|
||||
|
||||
// Filter and sort channels
|
||||
const filteredChannels = useMemo(() => {
|
||||
let result = [...channels];
|
||||
|
||||
// Sort
|
||||
if (sortField && sortOrder) {
|
||||
result.sort((a, b) => {
|
||||
let aVal: string | number = "";
|
||||
let bVal: string | number = "";
|
||||
|
||||
switch (sortField) {
|
||||
case "title":
|
||||
aVal = a.title.toLowerCase();
|
||||
bVal = b.title.toLowerCase();
|
||||
return sortOrder === "asc"
|
||||
? aVal.localeCompare(bVal)
|
||||
: bVal.localeCompare(aVal);
|
||||
case "username":
|
||||
aVal = (a.username || "").toLowerCase();
|
||||
bVal = (b.username || "").toLowerCase();
|
||||
return sortOrder === "asc"
|
||||
? aVal.localeCompare(bVal)
|
||||
: bVal.localeCompare(aVal);
|
||||
case "subscribers":
|
||||
aVal = a.subscribers_count || 0;
|
||||
bVal = b.subscribers_count || 0;
|
||||
return sortOrder === "asc" ? aVal - bVal : bVal - aVal;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [channels, sortField, sortOrder]);
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Каталог каналов" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Каталог каналов</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{filteredChannels.length} каналов для размещения рекламы
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по username..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border rounded-lg p-1">
|
||||
<Button
|
||||
variant={viewMode === "table" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("table")}
|
||||
aria-label="Табличный вид"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
aria-label="Плиточный вид"
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : channels.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Building2 className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Каналы не найдены</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
{search
|
||||
? "Попробуйте изменить поисковый запрос"
|
||||
: "В каталоге пока нет каналов"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : viewMode === "table" ? (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("title")}
|
||||
>
|
||||
Канал
|
||||
{getSortIcon("title")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("username")}
|
||||
>
|
||||
Username
|
||||
{getSortIcon("username")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8"
|
||||
onClick={() => handleSort("subscribers")}
|
||||
>
|
||||
Подписчики
|
||||
{getSortIcon("subscribers")}
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help ml-1" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Количество подписчиков на момент последнего обновления
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredChannels.map((channel) => (
|
||||
<TableRow key={channel.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted">
|
||||
<Building2 className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{channel.title}</div>
|
||||
{channel.description && (
|
||||
<div className="text-xs text-muted-foreground line-clamp-1 max-w-[300px]">
|
||||
{channel.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{channel.username ? (
|
||||
<a
|
||||
href={`https://t.me/${channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline flex items-center gap-1"
|
||||
>
|
||||
@{channel.username}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
{formatNumber(channel.subscribers_count)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={`/dashboard/${workspaceId}/placements/new?channel_id=${channel.id}`}>
|
||||
Разместить
|
||||
</a>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredChannels.map((channel) => (
|
||||
<Card key={channel.id}>
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
||||
<Building2 className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-base truncate">{channel.title}</CardTitle>
|
||||
{channel.username && (
|
||||
<CardDescription>
|
||||
<a
|
||||
href={`https://t.me/${channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
@{channel.username}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{channel.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-3">
|
||||
{channel.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
{formatNumber(channel.subscribers_count)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={`/dashboard/${workspaceId}/placements/new?channel_id=${channel.id}`}>
|
||||
Разместить
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
366
app/dashboard/[workspaceId]/creatives/[creativeId]/page.tsx
Normal file
366
app/dashboard/[workspaceId]/creatives/[creativeId]/page.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Creative Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
Pencil,
|
||||
Archive,
|
||||
Trash2,
|
||||
Copy,
|
||||
Check,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { creativesApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import type { Creative } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function CreativeDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const creativeId = params?.creativeId as string;
|
||||
const { hasPermission } = useWorkspace();
|
||||
|
||||
const [creative, setCreative] = useState<Creative | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditing, setIsEditing] = useState(searchParams.get("edit") === "true");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Edit form state
|
||||
const [name, setName] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const canWrite = hasPermission("placements_write");
|
||||
|
||||
useEffect(() => {
|
||||
loadCreative();
|
||||
}, [workspaceId, creativeId]);
|
||||
|
||||
const loadCreative = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await creativesApi.get(workspaceId, creativeId);
|
||||
setCreative(data);
|
||||
setName(data.name);
|
||||
setText(data.text);
|
||||
} catch (err) {
|
||||
console.error("Failed to load creative:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim() || !text.trim()) {
|
||||
setError("Заполните все поля");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!text.includes("{invite_link}")) {
|
||||
setError("Текст должен содержать {invite_link}");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
|
||||
const updated = await creativesApi.update(workspaceId, creativeId, {
|
||||
name: name.trim(),
|
||||
text: text.trim(),
|
||||
});
|
||||
|
||||
setCreative(updated);
|
||||
setIsEditing(false);
|
||||
} catch (err: any) {
|
||||
setError(err?.detail || "Не удалось сохранить");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchive = async () => {
|
||||
if (!creative) return;
|
||||
|
||||
try {
|
||||
// Toggle archive status by updating via delete endpoint (soft delete)
|
||||
await creativesApi.delete(workspaceId, creativeId);
|
||||
router.push(`/dashboard/${workspaceId}/creatives`);
|
||||
} catch (err) {
|
||||
console.error("Failed to archive:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
if (creative) {
|
||||
navigator.clipboard.writeText(creative.text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (creative) {
|
||||
setName(creative.name);
|
||||
setText(creative.text);
|
||||
}
|
||||
setIsEditing(false);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Загрузка..." }]} />
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!creative) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Ошибка" }]} />
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<h2 className="text-xl font-semibold mb-2">Креатив не найден</h2>
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/creatives`}>
|
||||
Вернуться к списку
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Креативы", href: `/dashboard/${workspaceId}/creatives` },
|
||||
{ label: creative.name },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-3xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => router.push(`/dashboard/${workspaceId}/creatives`)}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
{creative.name}
|
||||
</h1>
|
||||
<Badge
|
||||
variant={
|
||||
creative.status === "active" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{creative.status === "active" ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
{creative.placements_count} размещений
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canWrite && !isEditing && (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setIsEditing(true)}>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Button>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
В архив
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Архивировать креатив?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Креатив будет перемещён в архив. Существующие размещения
|
||||
останутся без изменений.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleArchive}>
|
||||
Архивировать
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Редактирование</CardTitle>
|
||||
<CardDescription>
|
||||
Изменения не повлияют на существующие размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Название</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="text">Текст креатива</Label>
|
||||
<Textarea
|
||||
id="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
disabled={isSaving}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Не забудьте <code className="bg-muted px-1 rounded">{"{invite_link}"}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
"Сохранить"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Текст креатива</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={handleCopy}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="whitespace-pre-wrap text-sm bg-muted p-4 rounded-lg">
|
||||
{creative.text.replace(
|
||||
"{invite_link}",
|
||||
"https://t.me/+AbCdEfGhIjK"
|
||||
)}
|
||||
</pre>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<code className="bg-muted px-1 rounded">{"{invite_link}"}</code>{" "}
|
||||
заменяется уникальной ссылкой при создании размещения
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
{canWrite && creative.status === "active" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Действия</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/placements/new?creative_id=${creative.id}`}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Создать размещение с этим креативом
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
242
app/dashboard/[workspaceId]/creatives/new/page.tsx
Normal file
242
app/dashboard/[workspaceId]/creatives/new/page.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Create Creative Page
|
||||
// ============================================================================
|
||||
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Loader2, ArrowLeft, Info } from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { creativesApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function NewCreativePage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { currentProject } = useWorkspace();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name.trim() || !text.trim()) {
|
||||
setError("Заполните все обязательные поля");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!text.includes("{invite_link}")) {
|
||||
setError("Текст должен содержать {invite_link} для вставки ссылки");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentProject) {
|
||||
setError("Выберите проект в верхнем меню");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const creative = await creativesApi.create(
|
||||
workspaceId,
|
||||
currentProject.id,
|
||||
{
|
||||
name: name.trim(),
|
||||
text: text.trim(),
|
||||
}
|
||||
);
|
||||
|
||||
router.push(`/dashboard/${workspaceId}/creatives/${creative.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err?.detail || "Не удалось создать креатив");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const insertInviteLink = () => {
|
||||
if (!text.includes("{invite_link}")) {
|
||||
setText((prev) => prev + "{invite_link}");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Креативы", href: `/dashboard/${workspaceId}/creatives` },
|
||||
{ label: "Новый креатив" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-2xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Новый креатив</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Создайте рекламный материал для размещений
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!currentProject && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Выберите проект в верхнем меню для создания креатива
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Информация о креативе</CardTitle>
|
||||
<CardDescription>
|
||||
Креатив — это текст рекламного сообщения с пригласительной ссылкой
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
Название <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Например: Летняя акция 2025"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Внутреннее название для удобства поиска
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="text">
|
||||
Текст креатива <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={insertInviteLink}
|
||||
disabled={text.includes("{invite_link}")}
|
||||
>
|
||||
Вставить {"{invite_link}"}
|
||||
</Button>
|
||||
</div>
|
||||
<Textarea
|
||||
id="text"
|
||||
placeholder={`Пример:
|
||||
|
||||
🔥 Подпишись на наш канал!
|
||||
|
||||
Здесь ты найдёшь:
|
||||
• Полезный контент
|
||||
• Эксклюзивные материалы
|
||||
• Актуальные новости
|
||||
|
||||
👉 {invite_link}`}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Используйте <code className="bg-muted px-1 rounded">{"{invite_link}"}</code>{" "}
|
||||
в том месте, где должна быть пригласительная ссылка
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{text.includes("{invite_link}") && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<span className="font-medium">Предпросмотр:</span>
|
||||
<pre className="mt-2 whitespace-pre-wrap text-sm">
|
||||
{text.replace(
|
||||
"{invite_link}",
|
||||
"https://t.me/+AbCdEfGhIjK"
|
||||
)}
|
||||
</pre>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={
|
||||
isSubmitting ||
|
||||
!name.trim() ||
|
||||
!text.trim() ||
|
||||
!currentProject
|
||||
}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
"Создать креатив"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
569
app/dashboard/[workspaceId]/creatives/page.tsx
Normal file
569
app/dashboard/[workspaceId]/creatives/page.tsx
Normal file
@@ -0,0 +1,569 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Creatives List Page - Enhanced with Statistics
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Search,
|
||||
Plus,
|
||||
Folder,
|
||||
MoreHorizontal,
|
||||
Archive,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Eye,
|
||||
Copy,
|
||||
TrendingUp,
|
||||
Users,
|
||||
ShoppingCart,
|
||||
BarChart3,
|
||||
Info,
|
||||
Grid,
|
||||
List,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { creativesApi } from "@/lib/api";
|
||||
import { demoAwareCreativesApi, demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Creative, CreativeAnalyticsItem } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface CreativeWithStats extends Creative {
|
||||
analytics?: CreativeAnalyticsItem;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatNumber = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function CreativesPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { selectedProjects, getProjectFilterId, allProjectsSelected, hasPermission } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||||
const [analyticsData, setAnalyticsData] = useState<CreativeAnalyticsItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingAnalytics, setLoadingAnalytics] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [includeArchived, setIncludeArchived] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<"table" | "grid">("table");
|
||||
|
||||
const canWrite = hasPermission("placements_write");
|
||||
|
||||
useEffect(() => {
|
||||
loadCreatives();
|
||||
}, [workspaceId, projectFilterId, includeArchived]);
|
||||
|
||||
useEffect(() => {
|
||||
if (creatives.length > 0) {
|
||||
loadAnalytics();
|
||||
}
|
||||
}, [creatives, workspaceId, projectFilterId]);
|
||||
|
||||
const loadCreatives = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await demoAwareCreativesApi.list(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
include_archived: includeArchived,
|
||||
size: 100,
|
||||
});
|
||||
setCreatives(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load creatives:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadAnalytics = async () => {
|
||||
try {
|
||||
setLoadingAnalytics(true);
|
||||
const response = await demoAwareAnalyticsApi.creatives(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
size: 100,
|
||||
});
|
||||
setAnalyticsData(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load analytics:", err);
|
||||
} finally {
|
||||
setLoadingAnalytics(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Merge creatives with analytics
|
||||
const creativesWithStats: CreativeWithStats[] = useMemo(() => {
|
||||
return creatives.map((creative) => ({
|
||||
...creative,
|
||||
analytics: analyticsData.find((a) => a.id === creative.id),
|
||||
}));
|
||||
}, [creatives, analyticsData]);
|
||||
|
||||
const handleArchive = async (creative: Creative) => {
|
||||
try {
|
||||
await creativesApi.update(workspaceId, creative.id, {});
|
||||
loadCreatives();
|
||||
} catch (err) {
|
||||
console.error("Failed to archive creative:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (creativeId: string) => {
|
||||
if (!confirm("Удалить креатив? Это действие необратимо.")) return;
|
||||
|
||||
try {
|
||||
await creativesApi.delete(workspaceId, creativeId);
|
||||
loadCreatives();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete creative:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyText = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
// Filter by search
|
||||
const filteredCreatives = creativesWithStats.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.text.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
// Totals
|
||||
const totals = useMemo(() => {
|
||||
const data = filteredCreatives.filter((c) => c.analytics);
|
||||
return {
|
||||
placements: data.reduce((sum, c) => sum + (c.analytics?.placements_count || 0), 0),
|
||||
cost: data.reduce((sum, c) => sum + (c.analytics?.total_cost || 0), 0),
|
||||
subscriptions: data.reduce((sum, c) => sum + (c.analytics?.total_subscriptions || 0), 0),
|
||||
views: data.reduce((sum, c) => sum + (c.analytics?.total_views || 0), 0),
|
||||
};
|
||||
}, [filteredCreatives]);
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Креативы" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Креативы</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{filteredCreatives.length} креативов • {formatCurrency(totals.cost)} •{" "}
|
||||
{formatNumber(totals.subscriptions)} подписчиков
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 border rounded-lg p-1">
|
||||
<Button
|
||||
variant={viewMode === "table" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("table")}
|
||||
aria-label="Табличный вид"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
aria-label="Плиточный вид"
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{canWrite && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/creatives/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать креатив
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по названию или тексту..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="include-archived"
|
||||
checked={includeArchived}
|
||||
onCheckedChange={(checked) => setIncludeArchived(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="include-archived" className="text-sm cursor-pointer">
|
||||
Показать архивные
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredCreatives.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Folder className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет креативов</h3>
|
||||
<p className="text-muted-foreground text-center mb-4">
|
||||
{search
|
||||
? "Ничего не найдено по вашему запросу"
|
||||
: "Создайте первый креатив для начала работы"}
|
||||
</p>
|
||||
{canWrite && !search && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/creatives/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать креатив
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : viewMode === "table" ? (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Название</TableHead>
|
||||
<TableHead>Текст</TableHead>
|
||||
<TableHead className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
Размещений
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Количество размещений с этим креативом
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Потрачено
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Сумма всех размещений с этим креативом
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Подписчики
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Привлеченные подписчики
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Сред. CPS
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Cost Per Subscription — средняя стоимость подписчика
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead className="w-[70px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredCreatives.map((creative) => (
|
||||
<TableRow key={creative.id}>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{creative.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-[300px] truncate text-sm text-muted-foreground">
|
||||
{creative.text.replace("{invite_link}", "[ссылка]")}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge variant="secondary">
|
||||
{creative.analytics?.placements_count ?? creative.placements_count}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium">
|
||||
{loadingAnalytics ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin inline" />
|
||||
) : (
|
||||
formatCurrency(creative.analytics?.total_cost)
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{loadingAnalytics ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin inline" />
|
||||
) : (
|
||||
formatNumber(creative.analytics?.total_subscriptions)
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{loadingAnalytics ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin inline" />
|
||||
) : (
|
||||
formatCurrency(creative.analytics?.avg_cpf)
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={creative.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{creative.status === "active" ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Просмотр
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/analytics/creatives?creative_id=${creative.id}`}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4 mr-2" />
|
||||
Аналитика
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopyText(creative.text)}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать текст
|
||||
</DropdownMenuItem>
|
||||
{canWrite && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}?edit=true`}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleArchive(creative)}>
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
{creative.status === "active" ? "В архив" : "Восстановить"}
|
||||
</DropdownMenuItem>
|
||||
{creative.placements_count === 0 && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(creative.id)}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
) : (
|
||||
// Grid View
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredCreatives.map((creative) => (
|
||||
<Card key={creative.id}>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-base truncate">
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
className="hover:underline"
|
||||
>
|
||||
{creative.name}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription className="line-clamp-2 mt-1">
|
||||
{creative.text.replace("{invite_link}", "[ссылка]")}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge
|
||||
variant={creative.status === "active" ? "default" : "secondary"}
|
||||
className="ml-2 shrink-0"
|
||||
>
|
||||
{creative.status === "active" ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Stats */}
|
||||
{creative.analytics && (
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatCurrency(creative.analytics.total_cost)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Потрачено</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatNumber(creative.analytics.total_subscriptions)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Подписчиков</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatNumber(creative.analytics.total_views)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Просмотров</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatCurrency(creative.analytics.avg_cpf)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Сред. CPS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" className="flex-1" asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/creatives/${creative.id}`}>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Подробнее
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/analytics/creatives?creative_id=${creative.id}`}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
29
app/dashboard/[workspaceId]/layout.tsx
Normal file
29
app/dashboard/[workspaceId]/layout.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// ============================================================================
|
||||
// Workspace Dashboard Layout
|
||||
// ============================================================================
|
||||
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||
import { ProtectedRoute } from "@/components/auth/protected-route";
|
||||
import { WorkspaceProvider } from "@/components/providers/workspace-provider";
|
||||
import { DashboardLayoutContent } from "@/components/layout/dashboard-layout-content";
|
||||
|
||||
export default function WorkspaceDashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<WorkspaceProvider>
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<DashboardLayoutContent>{children}</DashboardLayoutContent>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
</WorkspaceProvider>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
231
app/dashboard/[workspaceId]/page.tsx
Normal file
231
app/dashboard/[workspaceId]/page.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Dashboard Home Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Loader2, ShoppingCart, Users, TrendingUp, BarChart3 } from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { SpendingAnalytics } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatNumber = (value: number | null | undefined, showSign = false): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
const formatted = new Intl.NumberFormat("ru-RU").format(value);
|
||||
if (showSign && value > 0) return `+${formatted}`;
|
||||
return formatted;
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { currentWorkspace, currentProject, isLoading: workspaceLoading, projects } = useWorkspace();
|
||||
const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentWorkspace) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await demoAwareAnalyticsApi.spending(currentWorkspace.id, {
|
||||
project_id: currentProject?.id,
|
||||
});
|
||||
setSpending(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load spending:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [currentWorkspace?.id, currentProject?.id]);
|
||||
|
||||
if (workspaceLoading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!currentWorkspace) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold mb-2">Нет доступных воркспейсов</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Создайте новый воркспейс для начала работы
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate totals and averages
|
||||
const totalCost = spending?.total_cost ?? 0;
|
||||
const totalSubscriptions = spending?.total_subscriptions ?? 0;
|
||||
const totalViews = spending?.total_views ?? 0;
|
||||
const avgCps = totalSubscriptions > 0 ? totalCost / totalSubscriptions : null;
|
||||
const avgCpm = totalViews > 0 ? (totalCost / totalViews) * 1000 : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Всего потрачено</CardTitle>
|
||||
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold">{formatCurrency(totalCost)}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Подписчиков</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold">{formatNumber(totalSubscriptions)}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Средний CPS</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold">{formatCurrency(avgCps)}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Средний CPM</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold">{formatCurrency(avgCpm)}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Быстрый старт</CardTitle>
|
||||
<CardDescription>Начните с основных действий</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<a
|
||||
href={`/dashboard/${currentWorkspace.id}/placements/new`}
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Создать размещение
|
||||
</a>
|
||||
<a
|
||||
href={`/dashboard/${currentWorkspace.id}/creatives/new`}
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Создать креатив
|
||||
</a>
|
||||
<a
|
||||
href={`/dashboard/${currentWorkspace.id}/analytics`}
|
||||
className="block text-sm text-primary hover:underline"
|
||||
>
|
||||
→ Посмотреть аналитику
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Проекты</CardTitle>
|
||||
<CardDescription>
|
||||
{projects.length > 0
|
||||
? `${projects.length} активных проектов`
|
||||
: "Нет активных проектов"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{projects.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{projects.slice(0, 5).map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="flex items-center justify-between text-sm"
|
||||
>
|
||||
<span className="font-medium">{project.title}</span>
|
||||
{project.username && (
|
||||
<span className="text-muted-foreground">@{project.username}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Добавьте бота в канал через Telegram для создания проекта
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
431
app/dashboard/[workspaceId]/placements/[placementId]/page.tsx
Normal file
431
app/dashboard/[workspaceId]/placements/[placementId]/page.tsx
Normal file
@@ -0,0 +1,431 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Placement Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
Check,
|
||||
Archive,
|
||||
Eye,
|
||||
Users,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { placementsApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import type { Placement } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string | null | undefined) => {
|
||||
if (!dateString) return "—";
|
||||
return new Date(dateString).toLocaleString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null | undefined) => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null | undefined) => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function PlacementDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const placementId = params?.placementId as string;
|
||||
const { hasPermission } = useWorkspace();
|
||||
|
||||
const [placement, setPlacement] = useState<Placement | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [copiedLink, setCopiedLink] = useState(false);
|
||||
|
||||
const canWrite = hasPermission("placements_write");
|
||||
|
||||
useEffect(() => {
|
||||
loadPlacement();
|
||||
}, [workspaceId, placementId]);
|
||||
|
||||
const loadPlacement = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await placementsApi.get(workspaceId, placementId);
|
||||
setPlacement(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load placement:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchive = async () => {
|
||||
try {
|
||||
await placementsApi.delete(workspaceId, placementId);
|
||||
router.push(`/dashboard/${workspaceId}/placements`);
|
||||
} catch (err) {
|
||||
console.error("Failed to archive:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyLink = () => {
|
||||
if (placement?.invite_link) {
|
||||
navigator.clipboard.writeText(placement.invite_link);
|
||||
setCopiedLink(true);
|
||||
setTimeout(() => setCopiedLink(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Загрузка..." }]} />
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!placement) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Ошибка" }]} />
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<h2 className="text-xl font-semibold mb-2">Размещение не найдено</h2>
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/placements`}>
|
||||
Вернуться к списку
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate metrics
|
||||
const cps =
|
||||
placement.cost && placement.subscriptions_count > 0
|
||||
? placement.cost / placement.subscriptions_count
|
||||
: null;
|
||||
const cpm =
|
||||
placement.cost && placement.views_count
|
||||
? (placement.cost / placement.views_count) * 1000
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Размещения", href: `/dashboard/${workspaceId}/placements` },
|
||||
{ label: placement.placement_channel_title },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => router.push(`/dashboard/${workspaceId}/placements`)}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
{placement.placement_channel_title}
|
||||
</h1>
|
||||
<Badge
|
||||
variant={
|
||||
placement.status === "active" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{placement.status === "active" ? "Активно" : "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
{formatDate(placement.placement_date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canWrite && placement.status === "active" && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
В архив
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Архивировать размещение?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Размещение будет перемещено в архив. Статистика сохранится.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleArchive}>
|
||||
Архивировать
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Стоимость</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(placement.cost)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Подписчиков</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(placement.subscriptions_count)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
CPS: {cps ? formatCurrency(cps) : "—"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Просмотров</CardTitle>
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatNumber(placement.views_count)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
CPM: {cpm ? formatCurrency(cpm) : "—"}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Тип ссылки
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{placement.invite_link_type === "approval"
|
||||
? "С заявками"
|
||||
: "Публичная"}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
{/* Invite Link */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Пригласительная ссылка</CardTitle>
|
||||
<CardDescription>
|
||||
{placement.invite_link_type === "approval"
|
||||
? "С одобрением — бот отслеживает подписчиков"
|
||||
: "Публичная ссылка"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 bg-muted px-3 py-2 rounded text-sm truncate">
|
||||
{placement.invite_link}
|
||||
</code>
|
||||
<Button variant="outline" size="icon" onClick={handleCopyLink}>
|
||||
{copiedLink ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" asChild>
|
||||
<a
|
||||
href={placement.invite_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Creative */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Креатив</CardTitle>
|
||||
<CardDescription>{placement.creative_name}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="outline" asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${placement.creative_id}`}
|
||||
>
|
||||
Просмотреть креатив
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Детали размещения</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Проект
|
||||
</dt>
|
||||
<dd className="text-sm">{placement.project_channel_title}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Дата размещения
|
||||
</dt>
|
||||
<dd className="text-sm">{formatDate(placement.placement_date)}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Статус просмотров
|
||||
</dt>
|
||||
<dd className="text-sm">
|
||||
<Badge variant="outline">
|
||||
{placement.views_availability === "available"
|
||||
? "Автообновление"
|
||||
: placement.views_availability === "manual"
|
||||
? "Ручной ввод"
|
||||
: placement.views_availability === "unavailable"
|
||||
? "Недоступно"
|
||||
: "Не проверено"}
|
||||
</Badge>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Последнее обновление просмотров
|
||||
</dt>
|
||||
<dd className="text-sm">
|
||||
{formatDateTime(placement.last_views_fetch_at)}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{placement.ad_post_url && (
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Ссылка на пост
|
||||
</dt>
|
||||
<dd className="text-sm">
|
||||
<a
|
||||
href={placement.ad_post_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{placement.ad_post_url}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{placement.comment && (
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-sm font-medium text-muted-foreground">
|
||||
Комментарий
|
||||
</dt>
|
||||
<dd className="text-sm">{placement.comment}</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
393
app/dashboard/[workspaceId]/placements/new/page.tsx
Normal file
393
app/dashboard/[workspaceId]/placements/new/page.tsx
Normal file
@@ -0,0 +1,393 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Create Placement Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||
import { Loader2, ArrowLeft, Info, Calendar as CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { ru } from "date-fns/locale";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { placementsApi, creativesApi, channelsApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Creative, Channel, InviteLinkType } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function NewPlacementPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { currentProject } = useWorkspace();
|
||||
|
||||
// Pre-filled from URL params
|
||||
const prefilledCreativeId = searchParams.get("creative_id");
|
||||
const prefilledChannelId = searchParams.get("channel_id");
|
||||
|
||||
// Form state
|
||||
const [channelId, setChannelId] = useState(prefilledChannelId || "");
|
||||
const [creativeId, setCreativeId] = useState(prefilledCreativeId || "");
|
||||
const [placementDate, setPlacementDate] = useState<Date>(new Date());
|
||||
const [cost, setCost] = useState("");
|
||||
const [comment, setComment] = useState("");
|
||||
const [adPostUrl, setAdPostUrl] = useState("");
|
||||
const [inviteLinkType, setInviteLinkType] = useState<InviteLinkType>("approval");
|
||||
|
||||
// Data
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||||
const [loadingData, setLoadingData] = useState(true);
|
||||
|
||||
// Submit state
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [workspaceId, currentProject?.id]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoadingData(true);
|
||||
|
||||
const [channelsRes, creativesRes] = await Promise.all([
|
||||
channelsApi.list({ size: 100 }),
|
||||
currentProject
|
||||
? creativesApi.list(workspaceId, {
|
||||
project_id: currentProject.id,
|
||||
include_archived: false,
|
||||
size: 100,
|
||||
})
|
||||
: Promise.resolve({ items: [] }),
|
||||
]);
|
||||
|
||||
setChannels(channelsRes.items);
|
||||
setCreatives(creativesRes.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load data:", err);
|
||||
} finally {
|
||||
setLoadingData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!currentProject) {
|
||||
setError("Выберите проект в верхнем меню");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!channelId || !creativeId) {
|
||||
setError("Выберите канал и креатив");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const placement = await placementsApi.create(workspaceId, {
|
||||
project_id: currentProject.id,
|
||||
placement_channel_id: channelId,
|
||||
creative_id: creativeId,
|
||||
placement_date: placementDate.toISOString(),
|
||||
cost: cost ? parseFloat(cost) : undefined,
|
||||
comment: comment || undefined,
|
||||
ad_post_url: adPostUrl || undefined,
|
||||
invite_link_type: inviteLinkType,
|
||||
});
|
||||
|
||||
router.push(`/dashboard/${workspaceId}/placements/${placement.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err?.detail || "Не удалось создать размещение");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Размещения", href: `/dashboard/${workspaceId}/placements` },
|
||||
{ label: "Новое размещение" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-2xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Новое размещение</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Создайте размещение рекламы в Telegram канале
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!currentProject && (
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Выберите проект в верхнем меню для создания размещения
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loadingData ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Параметры размещения</CardTitle>
|
||||
<CardDescription>
|
||||
Укажите канал, креатив и условия размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Channel */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Канал для размещения <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={channelId} onValueChange={setChannelId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите канал" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{channels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
<div className="flex flex-col">
|
||||
<span>{channel.title}</span>
|
||||
{channel.username && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
@{channel.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Creative */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Креатив <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={creativeId} onValueChange={setCreativeId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите креатив" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{creatives.length === 0 ? (
|
||||
<div className="p-2 text-sm text-muted-foreground text-center">
|
||||
Нет доступных креативов
|
||||
</div>
|
||||
) : (
|
||||
creatives.map((creative) => (
|
||||
<SelectItem key={creative.id} value={creative.id}>
|
||||
{creative.name}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{creatives.length === 0 && currentProject && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Сначала{" "}
|
||||
<a
|
||||
href={`/dashboard/${workspaceId}/creatives/new`}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
создайте креатив
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Placement Date */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Дата размещения <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!placementDate && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{placementDate
|
||||
? format(placementDate, "PPP", { locale: ru })
|
||||
: "Выберите дату"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={placementDate}
|
||||
onSelect={(date) => date && setPlacementDate(date)}
|
||||
locale={ru}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Cost */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cost">Стоимость (₽)</Label>
|
||||
<Input
|
||||
id="cost"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={cost}
|
||||
onChange={(e) => setCost(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Invite Link Type */}
|
||||
<div className="space-y-2">
|
||||
<Label>Тип пригласительной ссылки</Label>
|
||||
<Select
|
||||
value={inviteLinkType}
|
||||
onValueChange={(v) => setInviteLinkType(v as InviteLinkType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="approval">
|
||||
<div className="flex flex-col">
|
||||
<span>С одобрением (рекомендуется)</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Бот одобряет заявки и отслеживает подписчиков
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="public">
|
||||
<div className="flex flex-col">
|
||||
<span>Публичная ссылка</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Без отслеживания подписчиков
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Ad Post URL */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="adPostUrl">Ссылка на рекламный пост</Label>
|
||||
<Input
|
||||
id="adPostUrl"
|
||||
placeholder="https://t.me/channel/123"
|
||||
value={adPostUrl}
|
||||
onChange={(e) => setAdPostUrl(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Ссылка на пост после публикации (можно добавить позже)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="comment">Комментарий</Label>
|
||||
<Textarea
|
||||
id="comment"
|
||||
placeholder="Дополнительная информация..."
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={
|
||||
isSubmitting ||
|
||||
!channelId ||
|
||||
!creativeId ||
|
||||
!currentProject
|
||||
}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
"Создать размещение"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
742
app/dashboard/[workspaceId]/placements/page.tsx
Normal file
742
app/dashboard/[workspaceId]/placements/page.tsx
Normal file
@@ -0,0 +1,742 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Placements List Page - Enhanced with Totals Row and Export
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Search,
|
||||
Plus,
|
||||
ShoppingCart,
|
||||
MoreHorizontal,
|
||||
Eye,
|
||||
ExternalLink,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Download,
|
||||
FileSpreadsheet,
|
||||
FileText,
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwarePlacementsApi } from "@/lib/demo";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableFooter,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuLabel,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Placement } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
const calculateCPS = (cost: number | null, subscriptions: number) => {
|
||||
if (!cost || subscriptions === 0) return null;
|
||||
return cost / subscriptions;
|
||||
};
|
||||
|
||||
const calculateCPM = (cost: number | null | undefined, views: number | null | undefined) => {
|
||||
if (!cost || !views || views === 0) return null;
|
||||
return (cost / views) * 1000;
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Sort Types
|
||||
// ============================================================================
|
||||
|
||||
type SortField = "date" | "cost" | "subscriptions" | "views" | "cps" | "cpm" | "status";
|
||||
type SortOrder = "asc" | "desc" | null;
|
||||
|
||||
// ============================================================================
|
||||
// Aggregation Functions
|
||||
// ============================================================================
|
||||
|
||||
type AggFunc = "sum" | "avg" | "median" | "max" | "min";
|
||||
|
||||
const aggregationFunctions: Record<AggFunc, { label: string; fn: (values: number[]) => number | null }> = {
|
||||
sum: {
|
||||
label: "Сумма",
|
||||
fn: (values) => (values.length > 0 ? values.reduce((a, b) => a + b, 0) : null),
|
||||
},
|
||||
avg: {
|
||||
label: "Среднее",
|
||||
fn: (values) => (values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : null),
|
||||
},
|
||||
median: {
|
||||
label: "Медиана",
|
||||
fn: (values) => {
|
||||
if (values.length === 0) return null;
|
||||
const sorted = [...values].sort((a, b) => a - b);
|
||||
const mid = Math.floor(sorted.length / 2);
|
||||
return sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
|
||||
},
|
||||
},
|
||||
max: {
|
||||
label: "Макс.",
|
||||
fn: (values) => (values.length > 0 ? Math.max(...values) : null),
|
||||
},
|
||||
min: {
|
||||
label: "Мин.",
|
||||
fn: (values) => (values.length > 0 ? Math.min(...values) : null),
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Export Functions
|
||||
// ============================================================================
|
||||
|
||||
const exportToCSV = (placements: Placement[], filename: string) => {
|
||||
const headers = [
|
||||
"Канал",
|
||||
"Username",
|
||||
"Креатив",
|
||||
"Дата",
|
||||
"Стоимость",
|
||||
"Подписки",
|
||||
"Просмотры",
|
||||
"CPS",
|
||||
"CPM",
|
||||
"Статус",
|
||||
"Ссылка на пост",
|
||||
"Пригласительная ссылка",
|
||||
];
|
||||
|
||||
const rows = placements.map((p) => [
|
||||
p.placement_channel_title,
|
||||
"",
|
||||
p.creative_name,
|
||||
new Date(p.placement_date).toISOString().split("T")[0],
|
||||
p.cost?.toString() || "",
|
||||
p.subscriptions_count.toString(),
|
||||
p.views_count?.toString() || "",
|
||||
calculateCPS(p.cost, p.subscriptions_count)?.toFixed(2) || "",
|
||||
calculateCPM(p.cost, p.views_count)?.toFixed(2) || "",
|
||||
p.status,
|
||||
p.ad_post_url || "",
|
||||
p.invite_link,
|
||||
]);
|
||||
|
||||
const csv = [headers.join(";"), ...rows.map((r) => r.join(";"))].join("\n");
|
||||
const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
|
||||
downloadBlob(blob, `${filename}.csv`);
|
||||
};
|
||||
|
||||
const exportToExcel = (placements: Placement[], filename: string) => {
|
||||
// Simple XLSX-like TSV format (opens in Excel)
|
||||
const headers = [
|
||||
"Канал",
|
||||
"Username",
|
||||
"Креатив",
|
||||
"Дата",
|
||||
"Стоимость",
|
||||
"Подписки",
|
||||
"Просмотры",
|
||||
"CPS",
|
||||
"CPM",
|
||||
"Статус",
|
||||
];
|
||||
|
||||
const rows = placements.map((p) => [
|
||||
p.placement_channel_title,
|
||||
"",
|
||||
p.creative_name,
|
||||
new Date(p.placement_date).toISOString().split("T")[0],
|
||||
p.cost?.toString() || "",
|
||||
p.subscriptions_count.toString(),
|
||||
p.views_count?.toString() || "",
|
||||
calculateCPS(p.cost, p.subscriptions_count)?.toFixed(2) || "",
|
||||
calculateCPM(p.cost, p.views_count)?.toFixed(2) || "",
|
||||
p.status,
|
||||
]);
|
||||
|
||||
const tsv = [headers.join("\t"), ...rows.map((r) => r.join("\t"))].join("\n");
|
||||
const blob = new Blob(["\uFEFF" + tsv], {
|
||||
type: "application/vnd.ms-excel;charset=utf-8;",
|
||||
});
|
||||
downloadBlob(blob, `${filename}.xls`);
|
||||
};
|
||||
|
||||
const exportToTxt = (placements: Placement[], filename: string) => {
|
||||
const lines = placements.map((p) => {
|
||||
const cps = calculateCPS(p.cost, p.subscriptions_count);
|
||||
const cpm = calculateCPM(p.cost, p.views_count);
|
||||
return [
|
||||
`Канал: ${p.placement_channel_title}`,
|
||||
`Креатив: ${p.creative_name}`,
|
||||
`Дата: ${formatDate(p.placement_date)}`,
|
||||
`Стоимость: ${formatCurrency(p.cost)}`,
|
||||
`Подписки: ${p.subscriptions_count}`,
|
||||
`Просмотры: ${p.views_count || "—"}`,
|
||||
`CPS: ${cps ? formatCurrency(cps) : "—"}`,
|
||||
`CPM: ${cpm ? formatCurrency(cpm) : "—"}`,
|
||||
`Ссылка: ${p.invite_link}`,
|
||||
"---",
|
||||
].join("\n");
|
||||
});
|
||||
|
||||
const text = lines.join("\n");
|
||||
const blob = new Blob([text], { type: "text/plain;charset=utf-8;" });
|
||||
downloadBlob(blob, `${filename}.txt`);
|
||||
};
|
||||
|
||||
const downloadBlob = (blob: Blob, filename: string) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function PlacementsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { selectedProjects, getProjectFilterId, allProjectsSelected, hasPermission } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
|
||||
const [placements, setPlacements] = useState<Placement[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [includeArchived, setIncludeArchived] = useState(false);
|
||||
const [sortField, setSortField] = useState<SortField | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>(null);
|
||||
|
||||
// Aggregation settings
|
||||
const [aggCost, setAggCost] = useState<AggFunc>("sum");
|
||||
const [aggSubs, setAggSubs] = useState<AggFunc>("sum");
|
||||
const [aggViews, setAggViews] = useState<AggFunc>("sum");
|
||||
const [aggCps, setAggCps] = useState<AggFunc>("avg");
|
||||
const [aggCpm, setAggCpm] = useState<AggFunc>("avg");
|
||||
|
||||
const canWrite = hasPermission("placements_write");
|
||||
|
||||
useEffect(() => {
|
||||
loadPlacements();
|
||||
}, [workspaceId, projectFilterId, includeArchived]);
|
||||
|
||||
const loadPlacements = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await demoAwarePlacementsApi.list(workspaceId, {
|
||||
project_id: projectFilterId,
|
||||
include_archived: includeArchived,
|
||||
size: 100,
|
||||
});
|
||||
setPlacements(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load placements:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle sort
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortOrder === "asc") {
|
||||
setSortOrder("desc");
|
||||
} else if (sortOrder === "desc") {
|
||||
setSortField(null);
|
||||
setSortOrder(null);
|
||||
} else {
|
||||
setSortOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "asc") return <ArrowUp className="h-4 w-4 ml-1" />;
|
||||
if (sortOrder === "desc") return <ArrowDown className="h-4 w-4 ml-1" />;
|
||||
return <ArrowUpDown className="h-4 w-4 ml-1" />;
|
||||
};
|
||||
|
||||
// Filter and sort
|
||||
const filteredPlacements = useMemo(() => {
|
||||
return placements
|
||||
.filter(
|
||||
(p) =>
|
||||
p.placement_channel_title.toLowerCase().includes(search.toLowerCase()) ||
|
||||
p.creative_name.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (!sortField || !sortOrder) return 0;
|
||||
|
||||
let aVal: number | string = 0;
|
||||
let bVal: number | string = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "date":
|
||||
return sortOrder === "asc"
|
||||
? new Date(a.placement_date).getTime() - new Date(b.placement_date).getTime()
|
||||
: new Date(b.placement_date).getTime() - new Date(a.placement_date).getTime();
|
||||
case "cost":
|
||||
aVal = a.cost ?? 0;
|
||||
bVal = b.cost ?? 0;
|
||||
break;
|
||||
case "subscriptions":
|
||||
aVal = a.subscriptions_count;
|
||||
bVal = b.subscriptions_count;
|
||||
break;
|
||||
case "views":
|
||||
aVal = a.views_count ?? 0;
|
||||
bVal = b.views_count ?? 0;
|
||||
break;
|
||||
case "cps":
|
||||
aVal = calculateCPS(a.cost, a.subscriptions_count) ?? 0;
|
||||
bVal = calculateCPS(b.cost, b.subscriptions_count) ?? 0;
|
||||
break;
|
||||
case "cpm":
|
||||
aVal = calculateCPM(a.cost, a.views_count) ?? 0;
|
||||
bVal = calculateCPM(b.cost, b.views_count) ?? 0;
|
||||
break;
|
||||
case "status":
|
||||
aVal = a.status;
|
||||
bVal = b.status;
|
||||
return sortOrder === "asc"
|
||||
? aVal.localeCompare(bVal)
|
||||
: bVal.localeCompare(aVal);
|
||||
}
|
||||
|
||||
return sortOrder === "asc"
|
||||
? (aVal as number) - (bVal as number)
|
||||
: (bVal as number) - (aVal as number);
|
||||
});
|
||||
}, [placements, search, sortField, sortOrder]);
|
||||
|
||||
// Calculate totals with aggregation functions
|
||||
const totals = useMemo(() => {
|
||||
const costs = filteredPlacements.map((p) => p.cost).filter((c): c is number => c !== null);
|
||||
const subs = filteredPlacements.map((p) => p.subscriptions_count);
|
||||
const views = filteredPlacements.map((p) => p.views_count).filter((v): v is number => v !== null);
|
||||
const cpsValues = filteredPlacements
|
||||
.map((p) => calculateCPS(p.cost, p.subscriptions_count))
|
||||
.filter((c): c is number => c !== null);
|
||||
const cpmValues = filteredPlacements
|
||||
.map((p) => calculateCPM(p.cost, p.views_count))
|
||||
.filter((c): c is number => c !== null);
|
||||
|
||||
return {
|
||||
cost: aggregationFunctions[aggCost].fn(costs),
|
||||
subscriptions: aggregationFunctions[aggSubs].fn(subs),
|
||||
views: aggregationFunctions[aggViews].fn(views),
|
||||
cps: aggregationFunctions[aggCps].fn(cpsValues),
|
||||
cpm: aggregationFunctions[aggCpm].fn(cpmValues),
|
||||
};
|
||||
}, [filteredPlacements, aggCost, aggSubs, aggViews, aggCps, aggCpm]);
|
||||
|
||||
// Export handlers
|
||||
const handleExport = useCallback(
|
||||
(format: "csv" | "excel" | "txt") => {
|
||||
const filename = `placements_${new Date().toISOString().split("T")[0]}`;
|
||||
switch (format) {
|
||||
case "csv":
|
||||
exportToCSV(filteredPlacements, filename);
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(filteredPlacements, filename);
|
||||
break;
|
||||
case "txt":
|
||||
exportToTxt(filteredPlacements, filename);
|
||||
break;
|
||||
}
|
||||
},
|
||||
[filteredPlacements]
|
||||
);
|
||||
|
||||
// Aggregation selector component
|
||||
const AggSelector = ({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: AggFunc;
|
||||
onChange: (v: AggFunc) => void;
|
||||
}) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-5 w-5 ml-1 opacity-50 hover:opacity-100">
|
||||
<span className="text-[10px] font-mono">f</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Функция</DropdownMenuLabel>
|
||||
{(Object.keys(aggregationFunctions) as AggFunc[]).map((key) => (
|
||||
<DropdownMenuItem
|
||||
key={key}
|
||||
onClick={() => onChange(key)}
|
||||
className={value === key ? "bg-accent" : ""}
|
||||
>
|
||||
{aggregationFunctions[key].label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Размещения" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Размещения</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{filteredPlacements.length} размещений
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Export Button */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Экспорт
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleExport("excel")}>
|
||||
<FileSpreadsheet className="h-4 w-4 mr-2" />
|
||||
Excel (.xls)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleExport("csv")}>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
CSV
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleExport("txt")}>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
Текст (.txt)
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{canWrite && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/placements/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать размещение
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по каналу или креативу..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="include-archived"
|
||||
checked={includeArchived}
|
||||
onCheckedChange={(checked) => setIncludeArchived(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="include-archived" className="text-sm cursor-pointer">
|
||||
Показать архивные
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filteredPlacements.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<ShoppingCart className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет размещений</h3>
|
||||
<p className="text-muted-foreground text-center mb-4">
|
||||
{search ? "Ничего не найдено по вашему запросу" : "Создайте первое размещение"}
|
||||
</p>
|
||||
{canWrite && !search && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/placements/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать размещение
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Канал</TableHead>
|
||||
<TableHead>Креатив</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("date")}
|
||||
>
|
||||
Дата
|
||||
{getSortIcon("date")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cost")}
|
||||
>
|
||||
Стоимость
|
||||
{getSortIcon("cost")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("subscriptions")}
|
||||
>
|
||||
Подписки
|
||||
{getSortIcon("subscriptions")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("views")}
|
||||
>
|
||||
Просмотры
|
||||
{getSortIcon("views")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cps")}
|
||||
>
|
||||
CPS
|
||||
{getSortIcon("cps")}
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Cost Per Subscription</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cpm")}
|
||||
>
|
||||
CPM
|
||||
{getSortIcon("cpm")}
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Cost Per Mille (1000 views)</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("status")}
|
||||
>
|
||||
Статус
|
||||
{getSortIcon("status")}
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[50px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredPlacements.map((placement) => {
|
||||
const cps = calculateCPS(placement.cost, placement.subscriptions_count);
|
||||
const cpm = calculateCPM(placement.cost, placement.views_count);
|
||||
|
||||
return (
|
||||
<TableRow key={placement.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium">{placement.placement_channel_title}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">{placement.creative_name}</div>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(placement.placement_date)}</TableCell>
|
||||
<TableCell>{formatCurrency(placement.cost)}</TableCell>
|
||||
<TableCell>{formatNumber(placement.subscriptions_count)}</TableCell>
|
||||
<TableCell>{formatNumber(placement.views_count ?? null)}</TableCell>
|
||||
<TableCell>{cps ? formatCurrency(cps) : "—"}</TableCell>
|
||||
<TableCell>{cpm ? formatCurrency(cpm) : "—"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={placement.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{placement.status === "active" ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/placements/${placement.id}`}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Подробнее
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{placement.ad_post_url && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a
|
||||
href={placement.ad_post_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Открыть пост
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
{/* Totals Row */}
|
||||
<TableFooter>
|
||||
<TableRow className="bg-muted/50 font-medium">
|
||||
<TableCell colSpan={3}>
|
||||
<span className="text-muted-foreground">Итого</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
{formatCurrency(totals.cost)}
|
||||
<AggSelector value={aggCost} onChange={setAggCost} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
{formatNumber(totals.subscriptions)}
|
||||
<AggSelector value={aggSubs} onChange={setAggSubs} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
{formatNumber(totals.views)}
|
||||
<AggSelector value={aggViews} onChange={setAggViews} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
{totals.cps ? formatCurrency(totals.cps) : "—"}
|
||||
<AggSelector value={aggCps} onChange={setAggCps} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
{totals.cpm ? formatCurrency(totals.cpm) : "—"}
|
||||
<AggSelector value={aggCpm} onChange={setAggCpm} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell colSpan={2}></TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
458
app/dashboard/[workspaceId]/projects/page.tsx
Normal file
458
app/dashboard/[workspaceId]/projects/page.tsx
Normal file
@@ -0,0 +1,458 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Projects Page (Target Channels) - Enhanced with Statistics
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Tv,
|
||||
ExternalLink,
|
||||
Grid,
|
||||
List,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Eye,
|
||||
ShoppingCart,
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwareAnalyticsApi } from "@/lib/demo";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { BOT_USERNAME } from "@/lib/utils/constants";
|
||||
import type { Project, SpendingAnalytics } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface ProjectWithStats extends Project {
|
||||
stats?: {
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
avg_cps: number | null;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatNumber = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU").format(value);
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { projects, isLoadingProjects, currentWorkspace } = useWorkspace();
|
||||
|
||||
const [projectsWithStats, setProjectsWithStats] = useState<ProjectWithStats[]>([]);
|
||||
const [loadingStats, setLoadingStats] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
|
||||
|
||||
// Load statistics for each project
|
||||
useEffect(() => {
|
||||
if (projects.length === 0) {
|
||||
setProjectsWithStats([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadStats = async () => {
|
||||
setLoadingStats(true);
|
||||
try {
|
||||
const statsPromises = projects.map(async (project) => {
|
||||
try {
|
||||
const spending = await demoAwareAnalyticsApi.spending(workspaceId, {
|
||||
project_id: project.id,
|
||||
});
|
||||
return {
|
||||
...project,
|
||||
stats: {
|
||||
total_cost: spending.total_cost,
|
||||
total_subscriptions: spending.total_subscriptions,
|
||||
total_views: spending.total_views,
|
||||
avg_cps:
|
||||
spending.total_subscriptions > 0
|
||||
? spending.total_cost / spending.total_subscriptions
|
||||
: null,
|
||||
},
|
||||
};
|
||||
} catch {
|
||||
return { ...project, stats: undefined };
|
||||
}
|
||||
});
|
||||
|
||||
const results = await Promise.all(statsPromises);
|
||||
setProjectsWithStats(results);
|
||||
} catch (err) {
|
||||
console.error("Failed to load project stats:", err);
|
||||
setProjectsWithStats(projects);
|
||||
} finally {
|
||||
setLoadingStats(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadStats();
|
||||
}, [projects, workspaceId]);
|
||||
|
||||
const isLoading = isLoadingProjects || loadingStats;
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${currentWorkspace?.id}` },
|
||||
{ label: "Проекты" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Проекты</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Telegram каналы, которые вы продвигаете
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 border rounded-lg p-1">
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
aria-label="Плиточный вид"
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "table" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("table")}
|
||||
aria-label="Табличный вид"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Alert>
|
||||
<Tv className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Чтобы добавить новый проект, добавьте бота{" "}
|
||||
<a
|
||||
href={`https://t.me/${BOT_USERNAME}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
@{BOT_USERNAME}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>{" "}
|
||||
администратором в ваш Telegram канал.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : projectsWithStats.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Tv className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет проектов</h3>
|
||||
<p className="text-muted-foreground text-center max-w-md">
|
||||
Добавьте бота администратором в ваш Telegram канал, и он
|
||||
автоматически появится здесь как проект.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : viewMode === "table" ? (
|
||||
// Table View
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Канал</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Потрачено
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Сумма всех размещений по проекту
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Подписчики
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Привлеченные подписчики по пригласительным ссылкам
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Просмотры
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Суммарные просмотры рекламных постов
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Сред. CPS
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Cost Per Subscription — средняя стоимость подписчика
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{projectsWithStats.map((project) => (
|
||||
<TableRow key={project.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Tv className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{project.title}</div>
|
||||
{project.username && (
|
||||
<a
|
||||
href={`https://t.me/${project.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-muted-foreground hover:underline inline-flex items-center gap-0.5"
|
||||
>
|
||||
@{project.username}
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={project.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{project.status === "active"
|
||||
? "Активен"
|
||||
: project.status === "inactive"
|
||||
? "Неактивен"
|
||||
: "Архив"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium">
|
||||
{formatCurrency(project.stats?.total_cost)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(project.stats?.total_subscriptions)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(project.stats?.total_views)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(project.stats?.avg_cps)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link
|
||||
href={`/dashboard/${currentWorkspace?.id}/projects/${project.id}/purchase-plan`}
|
||||
>
|
||||
План закупа
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
) : (
|
||||
// Grid View
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projectsWithStats.map((project) => (
|
||||
<Card key={project.id}>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Tv className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">{project.title}</CardTitle>
|
||||
{project.username && (
|
||||
<CardDescription>
|
||||
<a
|
||||
href={`https://t.me/${project.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline inline-flex items-center gap-0.5"
|
||||
>
|
||||
@{project.username}
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant={project.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{project.status === "active"
|
||||
? "Активен"
|
||||
: project.status === "inactive"
|
||||
? "Неактивен"
|
||||
: "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Stats Grid */}
|
||||
{project.stats && (
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatCurrency(project.stats.total_cost)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Потрачено
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatNumber(project.stats.total_subscriptions)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Подписчиков
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatNumber(project.stats.total_views)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Просмотров
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{formatCurrency(project.stats.avg_cps)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Сред. CPS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
{project.username && (
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a
|
||||
href={`https://t.me/${project.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-1" />
|
||||
Канал
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link
|
||||
href={`/dashboard/${currentWorkspace?.id}/projects/${project.id}/purchase-plan`}
|
||||
>
|
||||
План закупа
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
742
app/dashboard/[workspaceId]/purchase-plans/[projectId]/page.tsx
Normal file
742
app/dashboard/[workspaceId]/purchase-plans/[projectId]/page.tsx
Normal file
@@ -0,0 +1,742 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Purchase Plan Detail Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
Plus,
|
||||
ArrowLeft,
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
Trash2,
|
||||
ExternalLink,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
ArrowUpDown,
|
||||
ShoppingCart,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { purchasePlanApi, channelsApi } from "@/lib/api";
|
||||
import { demoAwarePurchasePlanApi, isDemoWorkspace, demoChannels } from "@/lib/demo";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableFooter,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import type { Project, PurchasePlanChannel, Channel } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "planned":
|
||||
return (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
Запланировано
|
||||
</Badge>
|
||||
);
|
||||
case "completed":
|
||||
return (
|
||||
<Badge variant="default" className="gap-1">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Завершено
|
||||
</Badge>
|
||||
);
|
||||
case "cancelled":
|
||||
return (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Отменено
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
type SortField = "channel" | "status" | "cost";
|
||||
type SortOrder = "asc" | "desc" | null;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function PurchasePlanDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const projectId = params?.projectId as string;
|
||||
const { projects, hasPermission } = useWorkspace();
|
||||
|
||||
const [planChannels, setPlanChannels] = useState<PurchasePlanChannel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
|
||||
// Add channel dialog
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [availableChannels, setAvailableChannels] = useState<Channel[]>([]);
|
||||
const [loadingChannels, setLoadingChannels] = useState(false);
|
||||
const [selectedChannelId, setSelectedChannelId] = useState("");
|
||||
const [plannedCost, setPlannedCost] = useState("");
|
||||
const [comment, setComment] = useState("");
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
|
||||
// Edit dialog
|
||||
const [editingChannel, setEditingChannel] = useState<PurchasePlanChannel | null>(null);
|
||||
const [editPlannedCost, setEditPlannedCost] = useState("");
|
||||
const [editComment, setEditComment] = useState("");
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
// Delete confirmation
|
||||
const [deletingChannel, setDeletingChannel] = useState<PurchasePlanChannel | null>(null);
|
||||
|
||||
// Sorting
|
||||
const [sortField, setSortField] = useState<SortField | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>(null);
|
||||
|
||||
const canWrite = hasPermission("placements_write");
|
||||
|
||||
useEffect(() => {
|
||||
const proj = projects.find((p) => p.id === projectId);
|
||||
if (proj) {
|
||||
setProject(proj);
|
||||
}
|
||||
}, [projects, projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadPlanChannels();
|
||||
}, [workspaceId, projectId]);
|
||||
|
||||
const loadPlanChannels = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await demoAwarePurchasePlanApi.list(workspaceId, projectId, { size: 100 });
|
||||
setPlanChannels(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load purchase plan:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadAvailableChannels = async () => {
|
||||
try {
|
||||
setLoadingChannels(true);
|
||||
// In demo mode use mock channels
|
||||
const isDemo = isDemoWorkspace(workspaceId);
|
||||
const response = isDemo
|
||||
? { items: demoChannels, total: demoChannels.length, page: 1, size: 100, pages: 1 }
|
||||
: await channelsApi.list({ size: 100 });
|
||||
// Filter out channels already in plan
|
||||
const existingIds = new Set(planChannels.map((pc) => pc.channel.id));
|
||||
setAvailableChannels(response.items.filter((c) => !existingIds.has(c.id)));
|
||||
} catch (err) {
|
||||
console.error("Failed to load channels:", err);
|
||||
} finally {
|
||||
setLoadingChannels(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenAddDialog = () => {
|
||||
loadAvailableChannels();
|
||||
setSelectedChannelId("");
|
||||
setPlannedCost("");
|
||||
setComment("");
|
||||
setShowAddDialog(true);
|
||||
};
|
||||
|
||||
const handleAddChannel = async () => {
|
||||
if (!selectedChannelId) return;
|
||||
|
||||
try {
|
||||
setIsAdding(true);
|
||||
await purchasePlanApi.create(workspaceId, projectId, {
|
||||
channel_id: selectedChannelId,
|
||||
planned_cost: plannedCost ? parseFloat(plannedCost) : undefined,
|
||||
comment: comment || undefined,
|
||||
});
|
||||
setShowAddDialog(false);
|
||||
loadPlanChannels();
|
||||
} catch (err) {
|
||||
console.error("Failed to add channel:", err);
|
||||
} finally {
|
||||
setIsAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenEditDialog = (channel: PurchasePlanChannel) => {
|
||||
setEditingChannel(channel);
|
||||
setEditPlannedCost(channel.planned_cost?.toString() || "");
|
||||
setEditComment(channel.comment || "");
|
||||
};
|
||||
|
||||
const handleUpdateChannel = async () => {
|
||||
if (!editingChannel) return;
|
||||
|
||||
try {
|
||||
setIsUpdating(true);
|
||||
await purchasePlanApi.update(workspaceId, projectId, editingChannel.id, {
|
||||
planned_cost: editPlannedCost ? parseFloat(editPlannedCost) : undefined,
|
||||
comment: editComment || undefined,
|
||||
});
|
||||
setEditingChannel(null);
|
||||
loadPlanChannels();
|
||||
} catch (err) {
|
||||
console.error("Failed to update channel:", err);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteChannel = async () => {
|
||||
if (!deletingChannel) return;
|
||||
|
||||
try {
|
||||
await purchasePlanApi.delete(workspaceId, projectId, deletingChannel.id);
|
||||
setDeletingChannel(null);
|
||||
loadPlanChannels();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete channel:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Sorting
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortOrder === "asc") setSortOrder("desc");
|
||||
else if (sortOrder === "desc") {
|
||||
setSortField(null);
|
||||
setSortOrder(null);
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const sortedChannels = useMemo(() => {
|
||||
if (!sortField || !sortOrder) return planChannels;
|
||||
|
||||
return [...planChannels].sort((a, b) => {
|
||||
let aVal: string | number = 0;
|
||||
let bVal: string | number = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case "channel":
|
||||
aVal = a.channel.title.toLowerCase();
|
||||
bVal = b.channel.title.toLowerCase();
|
||||
break;
|
||||
case "status":
|
||||
aVal = a.status;
|
||||
bVal = b.status;
|
||||
break;
|
||||
case "cost":
|
||||
aVal = a.planned_cost ?? 0;
|
||||
bVal = b.planned_cost ?? 0;
|
||||
break;
|
||||
}
|
||||
|
||||
if (typeof aVal === "string") {
|
||||
return sortOrder === "asc"
|
||||
? aVal.localeCompare(bVal as string)
|
||||
: (bVal as string).localeCompare(aVal);
|
||||
}
|
||||
return sortOrder === "asc" ? aVal - (bVal as number) : (bVal as number) - aVal;
|
||||
});
|
||||
}, [planChannels, sortField, sortOrder]);
|
||||
|
||||
// Stats
|
||||
const stats = useMemo(() => {
|
||||
const planned = planChannels.filter((c) => c.status === "planned");
|
||||
return {
|
||||
totalChannels: planChannels.length,
|
||||
plannedCount: planned.length,
|
||||
completedCount: planChannels.filter((c) => c.status === "completed").length,
|
||||
totalPlannedCost: planned.reduce((sum, c) => sum + (c.planned_cost || 0), 0),
|
||||
};
|
||||
}, [planChannels]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Загрузка..." }]} showProjectSelector={false} />
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Планы закупок", href: `/dashboard/${workspaceId}/purchase-plans` },
|
||||
{ label: project?.title || "План закупок" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => router.push(`/dashboard/${workspaceId}/purchase-plans`)}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
План закупок: {project?.title}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{stats.totalChannels} каналов • Планируемый бюджет:{" "}
|
||||
{formatCurrency(stats.totalPlannedCost)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canWrite && (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={loadPlanChannels}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Обновить
|
||||
</Button>
|
||||
<Button onClick={handleOpenAddDialog}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить канал
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Всего каналов
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.totalChannels}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Запланировано
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.plannedCount}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Завершено
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.completedCount}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Планируемый бюджет
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatCurrency(stats.totalPlannedCost)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{planChannels.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<ShoppingCart className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">План пуст</h3>
|
||||
<p className="text-muted-foreground text-center mb-4">
|
||||
Добавьте каналы для размещения рекламы
|
||||
</p>
|
||||
{canWrite && (
|
||||
<Button onClick={handleOpenAddDialog}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить канал
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("channel")}
|
||||
>
|
||||
Канал
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("status")}
|
||||
>
|
||||
Статус
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => handleSort("cost")}
|
||||
>
|
||||
План. стоимость
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>Комментарий</TableHead>
|
||||
<TableHead className="w-[100px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedChannels.map((planChannel) => (
|
||||
<TableRow key={planChannel.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{planChannel.channel.title}</div>
|
||||
{planChannel.channel.username && (
|
||||
<a
|
||||
href={`https://t.me/${planChannel.channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@{planChannel.channel.username}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(planChannel.status)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(planChannel.planned_cost)}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate">
|
||||
{planChannel.comment || "—"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/placements/new?channel_id=${planChannel.channel.id}`}
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Создать размещение
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{canWrite && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleOpenEditDialog(planChannel)}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => setDeletingChannel(planChannel)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={2} className="font-bold">
|
||||
Итого запланировано:
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-bold">
|
||||
{formatCurrency(stats.totalPlannedCost)}
|
||||
</TableCell>
|
||||
<TableCell colSpan={2}></TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add Channel Dialog */}
|
||||
<Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Добавить канал в план</DialogTitle>
|
||||
<DialogDescription>
|
||||
Выберите канал из каталога для добавления в план закупок
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Канал</Label>
|
||||
{loadingChannels ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Загрузка каналов...
|
||||
</div>
|
||||
) : (
|
||||
<Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите канал" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableChannels.length === 0 ? (
|
||||
<div className="p-2 text-sm text-muted-foreground text-center">
|
||||
Все каналы уже добавлены
|
||||
</div>
|
||||
) : (
|
||||
availableChannels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
<div className="flex flex-col">
|
||||
<span>{channel.title}</span>
|
||||
{channel.username && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
@{channel.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="planned-cost">Планируемая стоимость (₽)</Label>
|
||||
<Input
|
||||
id="planned-cost"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={plannedCost}
|
||||
onChange={(e) => setPlannedCost(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="comment">Комментарий</Label>
|
||||
<Textarea
|
||||
id="comment"
|
||||
placeholder="Дополнительная информация..."
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowAddDialog(false)}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAddChannel}
|
||||
disabled={!selectedChannelId || isAdding}
|
||||
>
|
||||
{isAdding ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Добавление...
|
||||
</>
|
||||
) : (
|
||||
"Добавить"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={!!editingChannel} onOpenChange={(open) => !open && setEditingChannel(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Редактировать канал</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingChannel?.channel.title}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-planned-cost">Планируемая стоимость (₽)</Label>
|
||||
<Input
|
||||
id="edit-planned-cost"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={editPlannedCost}
|
||||
onChange={(e) => setEditPlannedCost(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-comment">Комментарий</Label>
|
||||
<Textarea
|
||||
id="edit-comment"
|
||||
placeholder="Дополнительная информация..."
|
||||
value={editComment}
|
||||
onChange={(e) => setEditComment(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditingChannel(null)}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleUpdateChannel} disabled={isUpdating}>
|
||||
{isUpdating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
"Сохранить"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
<AlertDialog
|
||||
open={!!deletingChannel}
|
||||
onOpenChange={(open) => !open && setDeletingChannel(null)}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Удалить канал из плана?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Канал "{deletingChannel?.channel.title}" будет удалён из плана закупок.
|
||||
Это действие нельзя отменить.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteChannel}>
|
||||
Удалить
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
234
app/dashboard/[workspaceId]/purchase-plans/page.tsx
Normal file
234
app/dashboard/[workspaceId]/purchase-plans/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Purchase Plans Overview Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
ClipboardList,
|
||||
ChevronRight,
|
||||
Tv,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoAwarePurchasePlanApi } from "@/lib/demo";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import type { Project, PurchasePlanChannel } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helpers
|
||||
// ============================================================================
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return "—";
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
interface ProjectPlanStats {
|
||||
totalChannels: number;
|
||||
plannedChannels: number;
|
||||
completedChannels: number;
|
||||
cancelledChannels: number;
|
||||
totalPlannedCost: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function PurchasePlansPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { projects, isLoadingProjects } = useWorkspace();
|
||||
|
||||
const [projectStats, setProjectStats] = useState<Record<string, ProjectPlanStats>>({});
|
||||
const [loadingStats, setLoadingStats] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (projects.length > 0) {
|
||||
loadAllStats();
|
||||
} else {
|
||||
setLoadingStats(false);
|
||||
}
|
||||
}, [projects, workspaceId]);
|
||||
|
||||
const loadAllStats = async () => {
|
||||
setLoadingStats(true);
|
||||
const stats: Record<string, ProjectPlanStats> = {};
|
||||
|
||||
for (const project of projects) {
|
||||
try {
|
||||
const response = await demoAwarePurchasePlanApi.list(workspaceId, project.id, { size: 100 });
|
||||
const channels = response.items;
|
||||
|
||||
stats[project.id] = {
|
||||
totalChannels: channels.length,
|
||||
plannedChannels: channels.filter((c) => c.status === "planned").length,
|
||||
completedChannels: channels.filter((c) => c.status === "completed").length,
|
||||
cancelledChannels: channels.filter((c) => c.status === "cancelled").length,
|
||||
totalPlannedCost: channels
|
||||
.filter((c) => c.status === "planned")
|
||||
.reduce((sum, c) => sum + (c.planned_cost || 0), 0),
|
||||
};
|
||||
} catch (err) {
|
||||
console.error(`Failed to load plan for project ${project.id}:`, err);
|
||||
stats[project.id] = {
|
||||
totalChannels: 0,
|
||||
plannedChannels: 0,
|
||||
completedChannels: 0,
|
||||
cancelledChannels: 0,
|
||||
totalPlannedCost: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
setProjectStats(stats);
|
||||
setLoadingStats(false);
|
||||
};
|
||||
|
||||
const isLoading = isLoadingProjects || loadingStats;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Планы закупок" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Планы закупок</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Управление планами закупок по проектам
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : projects.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<ClipboardList className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет проектов</h3>
|
||||
<p className="text-muted-foreground text-center mb-4">
|
||||
Добавьте проект через Telegram бота для создания плана закупок
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/projects`}>
|
||||
Перейти к проектам
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => {
|
||||
const stats = projectStats[project.id];
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={project.id}
|
||||
className="cursor-pointer hover:bg-muted/50 transition-colors"
|
||||
onClick={() =>
|
||||
router.push(`/dashboard/${workspaceId}/purchase-plans/${project.id}`)
|
||||
}
|
||||
>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Tv className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">{project.title}</CardTitle>
|
||||
{project.username && (
|
||||
<CardDescription>@{project.username}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Всего каналов:</span>
|
||||
<span className="font-medium">{stats.totalChannels}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{stats.plannedChannels > 0 && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{stats.plannedChannels} план.
|
||||
</Badge>
|
||||
)}
|
||||
{stats.completedChannels > 0 && (
|
||||
<Badge variant="default" className="gap-1">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
{stats.completedChannels} заверш.
|
||||
</Badge>
|
||||
)}
|
||||
{stats.cancelledChannels > 0 && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<XCircle className="h-3 w-3" />
|
||||
{stats.cancelledChannels} отмен.
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{stats.totalPlannedCost > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm pt-2 border-t">
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">План. бюджет:</span>
|
||||
<span className="font-medium ml-auto">
|
||||
{formatCurrency(stats.totalPlannedCost)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">Загрузка...</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
267
app/dashboard/[workspaceId]/settings/invites/page.tsx
Normal file
267
app/dashboard/[workspaceId]/settings/invites/page.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Workspace Invites Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Loader2, UserPlus, Mail, Check, X, Clock } from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { invitesApi } from "@/lib/api";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import type { WorkspaceInvite } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function InvitesPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
|
||||
const [invites, setInvites] = useState<WorkspaceInvite[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [username, setUsername] = useState("");
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadInvites();
|
||||
}, [workspaceId]);
|
||||
|
||||
const loadInvites = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await invitesApi.list(workspaceId, { size: 100 });
|
||||
setInvites(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load invites:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateInvite = async () => {
|
||||
if (!username.trim()) return;
|
||||
|
||||
try {
|
||||
setIsCreating(true);
|
||||
setError(null);
|
||||
|
||||
// Remove @ if present
|
||||
const cleanUsername = username.trim().replace(/^@/, "");
|
||||
|
||||
const invite = await invitesApi.create(workspaceId, {
|
||||
username: cleanUsername,
|
||||
});
|
||||
|
||||
setInvites((prev) => [invite, ...prev]);
|
||||
setShowDialog(false);
|
||||
setUsername("");
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Не удалось отправить приглашение");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: WorkspaceInvite["status"]) => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return <Clock className="h-4 w-4 text-yellow-500" />;
|
||||
case "accepted":
|
||||
return <Check className="h-4 w-4 text-green-500" />;
|
||||
case "rejected":
|
||||
return <X className="h-4 w-4 text-red-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: WorkspaceInvite["status"]) => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "Ожидает";
|
||||
case "accepted":
|
||||
return "Принято";
|
||||
case "rejected":
|
||||
return "Отклонено";
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Настройки", href: `/dashboard/${workspaceId}/settings` },
|
||||
{ label: "Приглашения" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Приглашения</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Приглашения в воркспейс через Telegram
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<UserPlus className="h-4 w-4 mr-2" />
|
||||
Пригласить
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Пригласить участника</DialogTitle>
|
||||
<DialogDescription>
|
||||
Введите username Telegram пользователя для отправки
|
||||
приглашения через бота
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">Telegram username</Label>
|
||||
<Input
|
||||
id="username"
|
||||
placeholder="@username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleCreateInvite();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowDialog(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateInvite}
|
||||
disabled={!username.trim() || isCreating}
|
||||
>
|
||||
{isCreating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Отправить
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : invites.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Mail className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет приглашений</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
Пригласите участников в воркспейс через Telegram
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead>Дата</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{invites.map((invite) => (
|
||||
<TableRow key={invite.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserPlus className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">@{invite.username}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
invite.status === "pending"
|
||||
? "outline"
|
||||
: invite.status === "accepted"
|
||||
? "default"
|
||||
: "destructive"
|
||||
}
|
||||
className="gap-1"
|
||||
>
|
||||
{getStatusIcon(invite.status)}
|
||||
{getStatusText(invite.status)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{formatDate(invite.created_at)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
281
app/dashboard/[workspaceId]/settings/members/page.tsx
Normal file
281
app/dashboard/[workspaceId]/settings/members/page.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Workspace Members Page
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Loader2, Users, Shield, ChevronDown } from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { membersApi } from "@/lib/api";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import type { WorkspaceMember, PermissionKey } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
const PERMISSION_LABELS: Record<PermissionKey, string> = {
|
||||
admin_full: "Полный доступ",
|
||||
projects_read: "Просмотр проектов",
|
||||
projects_write: "Редактирование проектов",
|
||||
placements_read: "Просмотр размещений",
|
||||
placements_write: "Редактирование размещений",
|
||||
analytics_read: "Просмотр аналитики",
|
||||
};
|
||||
|
||||
const ALL_PERMISSIONS: PermissionKey[] = [
|
||||
"admin_full",
|
||||
"projects_read",
|
||||
"projects_write",
|
||||
"placements_read",
|
||||
"placements_write",
|
||||
"analytics_read",
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function MembersPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
|
||||
const [members, setMembers] = useState<WorkspaceMember[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [updating, setUpdating] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadMembers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await membersApi.list(workspaceId, { size: 100 });
|
||||
setMembers(response.items);
|
||||
} catch (err) {
|
||||
console.error("Failed to load members:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadMembers();
|
||||
}, [workspaceId]);
|
||||
|
||||
const handlePermissionChange = async (
|
||||
memberId: string,
|
||||
userId: string,
|
||||
permission: PermissionKey,
|
||||
enabled: boolean
|
||||
) => {
|
||||
try {
|
||||
setUpdating(memberId);
|
||||
|
||||
const member = members.find((m) => m.id === memberId);
|
||||
if (!member) return;
|
||||
|
||||
let newPermissions = [...member.permissions];
|
||||
|
||||
if (enabled) {
|
||||
// Add permission
|
||||
if (!newPermissions.some((p) => p.key === permission)) {
|
||||
newPermissions.push({ key: permission });
|
||||
}
|
||||
} else {
|
||||
// Remove permission
|
||||
newPermissions = newPermissions.filter((p) => p.key !== permission);
|
||||
}
|
||||
|
||||
await membersApi.updatePermissions(workspaceId, userId, {
|
||||
permissions: newPermissions,
|
||||
});
|
||||
|
||||
// Update local state
|
||||
setMembers((prev) =>
|
||||
prev.map((m) =>
|
||||
m.id === memberId ? { ...m, permissions: newPermissions } : m
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("Failed to update permissions:", err);
|
||||
} finally {
|
||||
setUpdating(null);
|
||||
}
|
||||
};
|
||||
|
||||
const hasPermission = (member: WorkspaceMember, key: PermissionKey) => {
|
||||
return member.permissions.some((p) => p.key === key);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Настройки", href: `/dashboard/${workspaceId}/settings` },
|
||||
{ label: "Участники" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Участники</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Управление участниками и правами доступа
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<a href={`/dashboard/${workspaceId}/settings/invites`}>
|
||||
Пригласить участника
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : members.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Users className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Нет участников</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
Пригласите участников в воркспейс
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Пользователь</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead>Права доступа</TableHead>
|
||||
<TableHead className="w-[150px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{members.map((member) => (
|
||||
<TableRow key={member.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10">
|
||||
<Users className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{member.user.username || `User ${member.user.telegram_id}`}
|
||||
</div>
|
||||
{member.user.username && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@{member.user.username}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
member.status === "active" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{member.status === "active" ? "Активен" : "Приглашён"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{hasPermission(member, "admin_full") ? (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<Shield className="h-3 w-3" />
|
||||
Админ
|
||||
</Badge>
|
||||
) : (
|
||||
member.permissions.map((p) => (
|
||||
<Badge key={p.key} variant="outline">
|
||||
{PERMISSION_LABELS[p.key]}
|
||||
</Badge>
|
||||
))
|
||||
)}
|
||||
{member.permissions.length === 0 && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Нет прав
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={updating === member.id}
|
||||
>
|
||||
{updating === member.id ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Права
|
||||
<ChevronDown className="h-4 w-4 ml-1" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>Права доступа</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{ALL_PERMISSIONS.map((perm) => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={perm}
|
||||
checked={hasPermission(member, perm)}
|
||||
onCheckedChange={(checked) =>
|
||||
handlePermissionChange(
|
||||
member.id,
|
||||
member.user.id,
|
||||
perm,
|
||||
checked
|
||||
)
|
||||
}
|
||||
>
|
||||
{PERMISSION_LABELS[perm]}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
204
app/dashboard/[workspaceId]/settings/page.tsx
Normal file
204
app/dashboard/[workspaceId]/settings/page.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Workspace Settings Page
|
||||
// ============================================================================
|
||||
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Loader2, Settings, Pencil, Trash2 } from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { workspacesApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { currentWorkspace, refreshWorkspaces } = useWorkspace();
|
||||
|
||||
const [name, setName] = useState(currentWorkspace?.name || "");
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const handleUpdate = async () => {
|
||||
if (!name.trim() || name === currentWorkspace?.name) return;
|
||||
|
||||
try {
|
||||
setIsUpdating(true);
|
||||
await workspacesApi.update(workspaceId, { name: name.trim() });
|
||||
await refreshWorkspaces();
|
||||
} catch (err) {
|
||||
console.error("Failed to update workspace:", err);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await workspacesApi.delete(workspaceId);
|
||||
router.replace("/");
|
||||
} catch (err) {
|
||||
console.error("Failed to delete workspace:", err);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!currentWorkspace) {
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader breadcrumbs={[{ label: "Настройки" }]} />
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Настройки" },
|
||||
]}
|
||||
showProjectSelector={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-2xl">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Настройки воркспейса</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Управление настройками воркспейса
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* General Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Основные настройки</CardTitle>
|
||||
<CardDescription>
|
||||
Название и основные параметры воркспейса
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="workspace-name">Название</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="workspace-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Название воркспейса"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleUpdate}
|
||||
disabled={
|
||||
!name.trim() ||
|
||||
name === currentWorkspace.name ||
|
||||
isUpdating
|
||||
}
|
||||
>
|
||||
{isUpdating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Pencil className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Team Management Links */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Команда</CardTitle>
|
||||
<CardDescription>
|
||||
Управление участниками и приглашениями
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button variant="outline" className="w-full justify-start" asChild>
|
||||
<a href={`/dashboard/${workspaceId}/settings/members`}>
|
||||
Участники воркспейса
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full justify-start" asChild>
|
||||
<a href={`/dashboard/${workspaceId}/settings/invites`}>
|
||||
Приглашения
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card className="border-destructive">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">Опасная зона</CardTitle>
|
||||
<CardDescription>
|
||||
Необратимые действия с воркспейсом
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить воркспейс
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Удалить воркспейс?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Это действие необратимо. Все данные воркспейса будут
|
||||
удалены, включая проекты, креативы, размещения и аналитику.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : null}
|
||||
Удалить
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
115
app/dashboard/onboarding/page.tsx
Normal file
115
app/dashboard/onboarding/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Onboarding Page - First Workspace Creation
|
||||
// ============================================================================
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Building2, Loader2, Megaphone } from "lucide-react";
|
||||
import { workspacesApi } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
|
||||
export default function OnboardingPage() {
|
||||
const router = useRouter();
|
||||
const [name, setName] = useState("");
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) return;
|
||||
|
||||
try {
|
||||
setIsCreating(true);
|
||||
setError(null);
|
||||
|
||||
const workspace = await workspacesApi.create({ name: name.trim() });
|
||||
|
||||
// Save as selected workspace
|
||||
localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, workspace.id);
|
||||
|
||||
// Redirect to dashboard
|
||||
router.replace(`/dashboard/${workspace.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Не удалось создать воркспейс");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background to-muted p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
||||
<Megaphone className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Добро пожаловать в TGEX!</CardTitle>
|
||||
<CardDescription>
|
||||
Создайте свой первый воркспейс для начала работы
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="workspace-name">Название воркспейса</Label>
|
||||
<Input
|
||||
id="workspace-name"
|
||||
placeholder="Например: Моя команда"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleCreate();
|
||||
}
|
||||
}}
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Воркспейс — это изолированное пространство для вашей команды. Вы
|
||||
сможете пригласить участников и настроить права доступа.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
<CardFooter>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={handleCreate}
|
||||
disabled={!name.trim() || isCreating}
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Building2 className="mr-2 h-4 w-4" />
|
||||
Создать воркспейс
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
59
app/page.tsx
Normal file
59
app/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Root Page - Redirect to Dashboard
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { authApi, workspacesApi } from "@/lib/api";
|
||||
import { STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
|
||||
export default function RootPage() {
|
||||
const router = useRouter();
|
||||
const [isChecking, setIsChecking] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuthAndRedirect = async () => {
|
||||
// Check if user is authenticated
|
||||
const token = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
|
||||
|
||||
if (!token) {
|
||||
router.replace("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Verify token is valid
|
||||
await authApi.me();
|
||||
|
||||
// Get workspaces
|
||||
const { items: workspaces } = await workspacesApi.list({ size: 1 });
|
||||
|
||||
if (workspaces.length > 0) {
|
||||
// Check for saved workspace
|
||||
const savedId = localStorage.getItem(STORAGE_KEYS.SELECTED_WORKSPACE);
|
||||
const workspaceId = savedId || workspaces[0].id;
|
||||
router.replace(`/dashboard/${workspaceId}`);
|
||||
} else {
|
||||
// No workspaces - show onboarding or create first workspace
|
||||
router.replace("/dashboard/onboarding");
|
||||
}
|
||||
} catch (err) {
|
||||
// Token invalid - redirect to login
|
||||
localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
|
||||
router.replace("/login");
|
||||
}
|
||||
};
|
||||
|
||||
checkAuthAndRedirect();
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
import React from "react";
|
||||
import { AuthProvider } from "@/components/auth/auth-provider";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { TargetChannelProvider } from "@/components/providers/target-channel-provider";
|
||||
|
||||
interface ProvidersProps {
|
||||
children: React.ReactNode;
|
||||
@@ -21,9 +20,7 @@ export const Providers: React.FC<ProvidersProps> = ({ children }) => {
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<AuthProvider>
|
||||
<TargetChannelProvider>{children}</TargetChannelProvider>
|
||||
</AuthProvider>
|
||||
<AuthProvider>{children}</AuthProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { CartesianGrid, Line, LineChart, XAxis, Bar, BarChart } from "recharts";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
} from "@/components/ui/chart";
|
||||
import { formatCurrency, formatNumber } from "@/lib/utils/format";
|
||||
import type { SpendingDataPoint, AnalyticsMetric } from "@/lib/types/api";
|
||||
|
||||
interface AnalyticsChartProps {
|
||||
data: SpendingDataPoint[];
|
||||
metrics: AnalyticsMetric[];
|
||||
chartType: "line" | "bar";
|
||||
showDataLabels?: boolean;
|
||||
}
|
||||
|
||||
const METRIC_LABELS: Record<AnalyticsMetric, string> = {
|
||||
cost: "Расходы",
|
||||
subscriptions: "Подписки",
|
||||
views: "Просмотры",
|
||||
cpf: "CPF",
|
||||
cpm: "CPM",
|
||||
};
|
||||
|
||||
export const AnalyticsChart: React.FC<AnalyticsChartProps> = ({
|
||||
data,
|
||||
metrics,
|
||||
chartType,
|
||||
showDataLabels = false,
|
||||
}) => {
|
||||
// Создаем конфигурацию для chart
|
||||
const chartConfig: ChartConfig = metrics.reduce((acc, metric, index) => {
|
||||
acc[metric] = {
|
||||
label: METRIC_LABELS[metric],
|
||||
color: `var(--chart-${index + 1})`,
|
||||
};
|
||||
return acc;
|
||||
}, {} as ChartConfig);
|
||||
|
||||
const formatValue = (value: number | null, metric: AnalyticsMetric) => {
|
||||
if (value === null) return "—";
|
||||
if (metric === "cost" || metric === "cpf" || metric === "cpm") {
|
||||
return formatCurrency(value);
|
||||
}
|
||||
return formatNumber(value);
|
||||
};
|
||||
|
||||
if (chartType === "bar") {
|
||||
return (
|
||||
<CardContent className="px-2 sm:p-6">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[350px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
data={data}
|
||||
margin={{
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: showDataLabels ? 20 : 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="period"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => `Период: ${value}`}
|
||||
formatter={(value, name) => [
|
||||
formatValue(
|
||||
value as number,
|
||||
name as AnalyticsMetric
|
||||
),
|
||||
chartConfig[name as AnalyticsMetric]?.label || name,
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
{metrics.map((metric) => (
|
||||
<Bar
|
||||
key={metric}
|
||||
dataKey={metric}
|
||||
fill={chartConfig[metric]?.color}
|
||||
radius={4}
|
||||
label={
|
||||
showDataLabels
|
||||
? {
|
||||
position: "top",
|
||||
formatter: (value: number) =>
|
||||
formatValue(value, metric),
|
||||
fontSize: 10,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CardContent className="px-2 sm:p-6">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[350px] w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
data={data}
|
||||
margin={{
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: showDataLabels ? 20 : 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="period"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => `Период: ${value}`}
|
||||
formatter={(value, name) => [
|
||||
formatValue(
|
||||
value as number,
|
||||
name as AnalyticsMetric
|
||||
),
|
||||
chartConfig[name as AnalyticsMetric]?.label || name,
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
{metrics.map((metric) => (
|
||||
<Line
|
||||
key={metric}
|
||||
dataKey={metric}
|
||||
type="monotone"
|
||||
stroke={chartConfig[metric]?.color}
|
||||
strokeWidth={2}
|
||||
dot={showDataLabels}
|
||||
label={
|
||||
showDataLabels
|
||||
? {
|
||||
position: "top",
|
||||
formatter: (value: number) =>
|
||||
formatValue(value, metric),
|
||||
fontSize: 10,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,438 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import { ru } from "date-fns/locale";
|
||||
import {
|
||||
CalendarIcon,
|
||||
X,
|
||||
TrendingUp,
|
||||
BarChart3,
|
||||
LineChart,
|
||||
GripVertical,
|
||||
Maximize2,
|
||||
Columns2,
|
||||
} from "lucide-react";
|
||||
import type {
|
||||
TargetChannel,
|
||||
AnalyticsMetric,
|
||||
DateGrouping,
|
||||
} from "@/lib/types/api";
|
||||
import { AnalyticsChart } from "./analytics-chart";
|
||||
import type { SpendingAnalytics } from "@/lib/types/api";
|
||||
|
||||
interface ChartConfigPanelProps {
|
||||
channels: TargetChannel[];
|
||||
data: SpendingAnalytics | null;
|
||||
loading: boolean;
|
||||
width: "full" | "half";
|
||||
onBuild: (config: {
|
||||
targetChannelIds: string[];
|
||||
metrics: AnalyticsMetric[];
|
||||
dateFrom: Date | null;
|
||||
dateTo: Date | null;
|
||||
grouping: DateGrouping;
|
||||
}) => void;
|
||||
onRemove?: () => void;
|
||||
onWidthChange?: (width: "full" | "half") => void;
|
||||
showRemoveButton?: boolean;
|
||||
chartNumber?: number;
|
||||
dragHandleProps?: any;
|
||||
}
|
||||
|
||||
const METRICS: { value: AnalyticsMetric; label: string }[] = [
|
||||
{ value: "cost", label: "Расходы" },
|
||||
{ value: "subscriptions", label: "Подписки" },
|
||||
{ value: "views", label: "Просмотры" },
|
||||
{ value: "cpf", label: "CPF (Cost Per Follow)" },
|
||||
{ value: "cpm", label: "CPM (Cost Per Mille)" },
|
||||
];
|
||||
|
||||
const GROUPINGS: { value: DateGrouping; label: string }[] = [
|
||||
{ value: "day", label: "По дням" },
|
||||
{ value: "week", label: "По неделям" },
|
||||
{ value: "month", label: "По месяцам" },
|
||||
{ value: "quarter", label: "По кварталам" },
|
||||
{ value: "year", label: "По годам" },
|
||||
];
|
||||
|
||||
export const ChartConfigPanel: React.FC<ChartConfigPanelProps> = ({
|
||||
channels,
|
||||
data,
|
||||
loading,
|
||||
width,
|
||||
onBuild,
|
||||
onRemove,
|
||||
onWidthChange,
|
||||
showRemoveButton = false,
|
||||
chartNumber = 1,
|
||||
dragHandleProps,
|
||||
}) => {
|
||||
const [selectedChannelIds, setSelectedChannelIds] = useState<string[]>([]);
|
||||
const [selectedMetrics, setSelectedMetrics] = useState<AnalyticsMetric[]>([]);
|
||||
const [dateFrom, setDateFrom] = useState<Date | undefined>();
|
||||
const [dateTo, setDateTo] = useState<Date | undefined>();
|
||||
const [grouping, setGrouping] = useState<DateGrouping>("day");
|
||||
const [chartType, setChartType] = useState<"line" | "bar">("line");
|
||||
const [showDataLabels, setShowDataLabels] = useState(false);
|
||||
|
||||
// Отслеживание изменений настроек
|
||||
const [lastBuiltConfig, setLastBuiltConfig] = useState<string | null>(null);
|
||||
const [isBuilt, setIsBuilt] = useState(false);
|
||||
|
||||
// Текущая конфигурация как строка для сравнения
|
||||
const currentConfigString = JSON.stringify({
|
||||
selectedChannelIds,
|
||||
selectedMetrics,
|
||||
dateFrom: dateFrom?.toISOString(),
|
||||
dateTo: dateTo?.toISOString(),
|
||||
grouping,
|
||||
});
|
||||
|
||||
// Проверяем, изменились ли настройки
|
||||
const hasChanges = isBuilt && lastBuiltConfig !== currentConfigString;
|
||||
|
||||
const toggleChannel = (channelId: string) => {
|
||||
setSelectedChannelIds((prev) =>
|
||||
prev.includes(channelId)
|
||||
? prev.filter((id) => id !== channelId)
|
||||
: [...prev, channelId]
|
||||
);
|
||||
};
|
||||
|
||||
const toggleMetric = (metric: AnalyticsMetric) => {
|
||||
setSelectedMetrics((prev) =>
|
||||
prev.includes(metric)
|
||||
? prev.filter((m) => m !== metric)
|
||||
: [...prev, metric]
|
||||
);
|
||||
};
|
||||
|
||||
const handleBuild = () => {
|
||||
if (selectedChannelIds.length === 0 || selectedMetrics.length === 0) {
|
||||
alert("Выберите хотя бы один канал и одну метрику");
|
||||
return;
|
||||
}
|
||||
|
||||
onBuild({
|
||||
targetChannelIds: selectedChannelIds,
|
||||
metrics: selectedMetrics,
|
||||
dateFrom: dateFrom || null,
|
||||
dateTo: dateTo || null,
|
||||
grouping,
|
||||
});
|
||||
|
||||
setLastBuiltConfig(currentConfigString);
|
||||
setIsBuilt(true);
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (loading) return "Загрузка...";
|
||||
if (!isBuilt) return "Построить график";
|
||||
if (hasChanges) return "Обновить график";
|
||||
return "График построен";
|
||||
};
|
||||
|
||||
const isButtonDisabled = loading || (isBuilt && !hasChanges);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Drag handle */}
|
||||
<div
|
||||
{...dragHandleProps}
|
||||
className="cursor-grab active:cursor-grabbing touch-none"
|
||||
>
|
||||
<GripVertical className="h-5 w-5 text-muted-foreground hover:text-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>График #{chartNumber}</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
Настройте параметры и постройте график
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Width toggle */}
|
||||
{onWidthChange && (
|
||||
<div className="flex gap-1 border rounded-md mr-2">
|
||||
<Button
|
||||
variant={width === "full" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => onWidthChange("full")}
|
||||
className="rounded-r-none"
|
||||
title="Полная ширина"
|
||||
>
|
||||
<Maximize2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={width === "half" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => onWidthChange("half")}
|
||||
className="rounded-l-none"
|
||||
title="Половина ширины"
|
||||
>
|
||||
<Columns2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remove button */}
|
||||
{showRemoveButton && onRemove && (
|
||||
<Button variant="ghost" size="sm" onClick={onRemove}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Настройки */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Выбор каналов */}
|
||||
<div className="space-y-2">
|
||||
<Label>Целевые каналы</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
{selectedChannelIds.length === 0
|
||||
? "Выберите каналы"
|
||||
: `Выбрано: ${selectedChannelIds.length}`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-3" align="start">
|
||||
<div className="space-y-2">
|
||||
{channels.map((channel) => (
|
||||
<div
|
||||
key={channel.id}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
id={`channel-${channel.id}`}
|
||||
checked={selectedChannelIds.includes(channel.id)}
|
||||
onCheckedChange={() => toggleChannel(channel.id)}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`channel-${channel.id}`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
||||
>
|
||||
{channel.title}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Выбор метрик */}
|
||||
<div className="space-y-2">
|
||||
<Label>Метрики</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
{selectedMetrics.length === 0
|
||||
? "Выберите метрики"
|
||||
: `Выбрано: ${selectedMetrics.length}`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-3" align="start">
|
||||
<div className="space-y-2">
|
||||
{METRICS.map((metric) => (
|
||||
<div
|
||||
key={metric.value}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
id={`metric-${metric.value}`}
|
||||
checked={selectedMetrics.includes(metric.value)}
|
||||
onCheckedChange={() => toggleMetric(metric.value)}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`metric-${metric.value}`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
||||
>
|
||||
{metric.label}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Период от */}
|
||||
<div className="space-y-2">
|
||||
<Label>Дата от</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!dateFrom && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{dateFrom ? (
|
||||
format(dateFrom, "d MMM yyyy", { locale: ru })
|
||||
) : (
|
||||
<span>Выберите</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={dateFrom}
|
||||
onSelect={setDateFrom}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Период до */}
|
||||
<div className="space-y-2">
|
||||
<Label>Дата до</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!dateTo && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{dateTo ? (
|
||||
format(dateTo, "d MMM yyyy", { locale: ru })
|
||||
) : (
|
||||
<span>Выберите</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={dateTo}
|
||||
onSelect={setDateTo}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Группировка */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label>Группировка</Label>
|
||||
<Select
|
||||
value={grouping}
|
||||
onValueChange={(v) => setGrouping(v as DateGrouping)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{GROUPINGS.map((g) => (
|
||||
<SelectItem key={g.value} value={g.value}>
|
||||
{g.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Тип графика */}
|
||||
<div className="space-y-2">
|
||||
<Label>Тип</Label>
|
||||
<div className="flex gap-1 border rounded-md">
|
||||
<Button
|
||||
variant={chartType === "line" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setChartType("line")}
|
||||
className="rounded-r-none"
|
||||
>
|
||||
<LineChart className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={chartType === "bar" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setChartType("bar")}
|
||||
className="rounded-l-none"
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Подписи значений */}
|
||||
<div className="space-y-2">
|
||||
<Label>Подписи</Label>
|
||||
<div className="flex items-center space-x-2 h-9">
|
||||
<Switch
|
||||
id="show-data-labels"
|
||||
checked={showDataLabels}
|
||||
onCheckedChange={setShowDataLabels}
|
||||
/>
|
||||
<Label htmlFor="show-data-labels" className="cursor-pointer">
|
||||
{showDataLabels ? "Вкл" : "Выкл"}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка построения */}
|
||||
<div className="space-y-2">
|
||||
<Label className="invisible">Построить</Label>
|
||||
<Button onClick={handleBuild} disabled={isButtonDisabled}>
|
||||
<TrendingUp
|
||||
className={cn("mr-2 h-4 w-4", loading && "animate-pulse")}
|
||||
/>
|
||||
{getButtonText()}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* График */}
|
||||
{data && (
|
||||
<AnalyticsChart
|
||||
data={data.chart_data}
|
||||
metrics={selectedMetrics}
|
||||
chartType={chartType}
|
||||
showDataLabels={showDataLabels}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -5,8 +5,9 @@
|
||||
// ============================================================================
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import { useAuth } from "./auth-provider";
|
||||
import { isDemoWorkspace } from "@/lib/demo";
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
children: React.ReactNode;
|
||||
@@ -15,12 +16,25 @@ interface ProtectedRouteProps {
|
||||
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
||||
const { user, loading } = useAuth();
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
// Check if this is demo mode
|
||||
const workspaceId = params?.workspaceId as string | undefined;
|
||||
const isDemo = isDemoWorkspace(workspaceId);
|
||||
|
||||
useEffect(() => {
|
||||
// Skip auth check for demo mode
|
||||
if (isDemo) return;
|
||||
|
||||
if (!loading && !user) {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [user, loading, router]);
|
||||
}, [user, loading, router, isDemo]);
|
||||
|
||||
// Demo mode - skip auth entirely
|
||||
if (isDemo) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
||||
59
components/demo-banner.tsx
Normal file
59
components/demo-banner.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Demo Banner Component
|
||||
// ============================================================================
|
||||
|
||||
import Link from "next/link";
|
||||
import { Sparkles, ArrowRight, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BOT_USERNAME } from "@/lib/utils/constants";
|
||||
|
||||
interface DemoBannerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const DemoBanner: React.FC<DemoBannerProps> = ({ className }) => {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative w-full bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500
|
||||
text-white py-2.5 px-4 text-center text-sm font-medium
|
||||
shadow-lg shadow-fuchsia-500/20
|
||||
${className || ""}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2 flex-wrap">
|
||||
<Sparkles className="h-4 w-4 animate-pulse" />
|
||||
<span>Вы просматриваете демо-версию платформы</span>
|
||||
<span className="hidden sm:inline text-white/80">•</span>
|
||||
<a
|
||||
href={`https://t.me/${BOT_USERNAME}?start=register`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-semibold underline underline-offset-2 hover:text-white/90 transition-colors"
|
||||
>
|
||||
Создать свой кабинет
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</a>
|
||||
<span className="text-white/60 hidden md:inline">
|
||||
и опробовать всю мощь платформы!
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-white/20 transition-colors"
|
||||
aria-label="Закрыть баннер"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,15 +5,25 @@
|
||||
// ============================================================================
|
||||
|
||||
import * as React from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import {
|
||||
BarChart3,
|
||||
Building2,
|
||||
Check,
|
||||
ChevronsUpDown,
|
||||
ClipboardList,
|
||||
ExternalLink,
|
||||
Folder,
|
||||
HelpCircle,
|
||||
LayoutDashboard,
|
||||
Megaphone,
|
||||
MessageCircle,
|
||||
Plus,
|
||||
Settings,
|
||||
ShoppingCart,
|
||||
TrendingUp,
|
||||
Settings2,
|
||||
ExternalLink,
|
||||
Tv,
|
||||
BookOpen,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
import { NavMain } from "@/components/nav-main";
|
||||
@@ -23,126 +33,419 @@ import {
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
} from "@/components/ui/sidebar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { buildRoute, BOT_USERNAME } from "@/lib/utils/constants";
|
||||
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "Главная",
|
||||
url: "/",
|
||||
icon: LayoutDashboard,
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: "Внешние каналы",
|
||||
url: "/external-channels",
|
||||
icon: ExternalLink,
|
||||
items: [
|
||||
{
|
||||
title: "Каталог",
|
||||
url: "/external-channels",
|
||||
},
|
||||
{
|
||||
title: "Импорт",
|
||||
url: "/external-channels/import",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Креативы",
|
||||
url: "/creatives",
|
||||
icon: Folder,
|
||||
items: [
|
||||
{
|
||||
title: "Все креативы",
|
||||
url: "/creatives",
|
||||
},
|
||||
{
|
||||
title: "Создать",
|
||||
url: "/creatives/new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Закупы",
|
||||
url: "/purchases",
|
||||
icon: ShoppingCart,
|
||||
items: [
|
||||
{
|
||||
title: "Все закупы",
|
||||
url: "/purchases",
|
||||
},
|
||||
{
|
||||
title: "Создать",
|
||||
url: "/purchases/new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Аналитика",
|
||||
url: "/analytics",
|
||||
icon: BarChart3,
|
||||
items: [
|
||||
{
|
||||
title: "Обзор",
|
||||
url: "/analytics",
|
||||
},
|
||||
{
|
||||
title: "Затраты",
|
||||
url: "/analytics/costs",
|
||||
},
|
||||
{
|
||||
title: "Целевые каналы",
|
||||
url: "/analytics/target-channels",
|
||||
},
|
||||
{
|
||||
title: "Креативы",
|
||||
url: "/analytics/creatives",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
url: string;
|
||||
icon?: LucideIcon;
|
||||
isActive?: boolean;
|
||||
requiredPermission?: "projects_read" | "placements_read" | "analytics_read" | "admin_full";
|
||||
items?: {
|
||||
title: string;
|
||||
url: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface FooterLink {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: LucideIcon;
|
||||
external?: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Footer Links Configuration
|
||||
// ============================================================================
|
||||
|
||||
const footerLinks: FooterLink[] = [
|
||||
{
|
||||
title: "Поддержка",
|
||||
url: `https://t.me/${BOT_USERNAME}`,
|
||||
icon: MessageCircle,
|
||||
external: true,
|
||||
},
|
||||
{
|
||||
title: "Информационный канал",
|
||||
url: "https://t.me/tgex_news",
|
||||
icon: Megaphone,
|
||||
external: true,
|
||||
},
|
||||
{
|
||||
title: "База знаний",
|
||||
url: "https://docs.tgex.io",
|
||||
icon: BookOpen,
|
||||
external: true,
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||
const params = useParams();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { user } = useAuth();
|
||||
const {
|
||||
workspaces,
|
||||
currentWorkspace,
|
||||
setCurrentWorkspace,
|
||||
hasPermission,
|
||||
isAdmin,
|
||||
createWorkspace,
|
||||
} = useWorkspace();
|
||||
|
||||
const [showCreateDialog, setShowCreateDialog] = React.useState(false);
|
||||
const [newWorkspaceName, setNewWorkspaceName] = React.useState("");
|
||||
const [isCreating, setIsCreating] = React.useState(false);
|
||||
|
||||
// Build navigation items based on permissions
|
||||
const navItems: NavItem[] = React.useMemo(() => {
|
||||
if (!workspaceId) return [];
|
||||
|
||||
const items: NavItem[] = [
|
||||
{
|
||||
title: "Главная",
|
||||
url: buildRoute.dashboard(workspaceId),
|
||||
icon: LayoutDashboard,
|
||||
isActive: true,
|
||||
},
|
||||
];
|
||||
|
||||
// Projects - always visible (contains instructions how to add projects via bot)
|
||||
items.push({
|
||||
title: "Проекты",
|
||||
url: buildRoute.projects(workspaceId),
|
||||
icon: Tv,
|
||||
});
|
||||
|
||||
// Channels catalog (available to all)
|
||||
items.push({
|
||||
title: "Каталог каналов",
|
||||
url: buildRoute.channels(workspaceId),
|
||||
icon: Building2,
|
||||
});
|
||||
|
||||
// Purchase Plans (requires placements_read or admin)
|
||||
if (hasPermission("placements_read")) {
|
||||
items.push({
|
||||
title: "Планы закупок",
|
||||
url: buildRoute.purchasePlans(workspaceId),
|
||||
icon: ClipboardList,
|
||||
requiredPermission: "placements_read",
|
||||
});
|
||||
}
|
||||
|
||||
// Creatives (requires placements_read or admin)
|
||||
if (hasPermission("placements_read")) {
|
||||
items.push({
|
||||
title: "Креативы",
|
||||
url: buildRoute.creatives(workspaceId),
|
||||
icon: Folder,
|
||||
requiredPermission: "placements_read",
|
||||
items: [
|
||||
{
|
||||
title: "Все креативы",
|
||||
url: buildRoute.creatives(workspaceId),
|
||||
},
|
||||
...(hasPermission("placements_write")
|
||||
? [
|
||||
{
|
||||
title: "Создать",
|
||||
url: buildRoute.creativeNew(workspaceId),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Placements (requires placements_read or admin)
|
||||
if (hasPermission("placements_read")) {
|
||||
items.push({
|
||||
title: "Размещения",
|
||||
url: buildRoute.placements(workspaceId),
|
||||
icon: ShoppingCart,
|
||||
requiredPermission: "placements_read",
|
||||
items: [
|
||||
{
|
||||
title: "Все размещения",
|
||||
url: buildRoute.placements(workspaceId),
|
||||
},
|
||||
...(hasPermission("placements_write")
|
||||
? [
|
||||
{
|
||||
title: "Создать",
|
||||
url: buildRoute.placementNew(workspaceId),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Analytics (requires analytics_read or admin)
|
||||
if (hasPermission("analytics_read")) {
|
||||
items.push({
|
||||
title: "Аналитика",
|
||||
url: buildRoute.analytics(workspaceId),
|
||||
icon: BarChart3,
|
||||
requiredPermission: "analytics_read",
|
||||
items: [
|
||||
{
|
||||
title: "Обзор",
|
||||
url: buildRoute.analytics(workspaceId),
|
||||
},
|
||||
{
|
||||
title: "Расходы",
|
||||
url: buildRoute.analyticsSpending(workspaceId),
|
||||
},
|
||||
{
|
||||
title: "Каналы",
|
||||
url: buildRoute.analyticsChannels(workspaceId),
|
||||
},
|
||||
{
|
||||
title: "Креативы",
|
||||
url: buildRoute.analyticsCreatives(workspaceId),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Settings (admin only)
|
||||
if (isAdmin) {
|
||||
items.push({
|
||||
title: "Настройки",
|
||||
url: buildRoute.settings(workspaceId),
|
||||
icon: Settings,
|
||||
requiredPermission: "admin_full",
|
||||
items: [
|
||||
{
|
||||
title: "Участники",
|
||||
url: buildRoute.members(workspaceId),
|
||||
},
|
||||
{
|
||||
title: "Приглашения",
|
||||
url: buildRoute.invites(workspaceId),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
}, [workspaceId, hasPermission, isAdmin]);
|
||||
|
||||
const handleCreateWorkspace = async () => {
|
||||
if (!newWorkspaceName.trim()) return;
|
||||
|
||||
try {
|
||||
setIsCreating(true);
|
||||
const workspace = await createWorkspace(newWorkspaceName.trim());
|
||||
setShowCreateDialog(false);
|
||||
setNewWorkspaceName("");
|
||||
setCurrentWorkspace(workspace);
|
||||
} catch (err) {
|
||||
console.error("Failed to create workspace:", err);
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon" {...props}>
|
||||
<SidebarHeader>
|
||||
<div className="flex items-center gap-2 px-2 py-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||||
<Megaphone className="h-4 w-4" />
|
||||
<>
|
||||
<Sidebar collapsible="icon" {...props}>
|
||||
<SidebarHeader>
|
||||
{/* Workspace Switcher */}
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||||
<Megaphone className="size-4" />
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">
|
||||
{currentWorkspace?.name || "TGEX"}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{workspaces.length} воркспейс{workspaces.length === 1 ? "" : workspaces.length < 5 ? "а" : "ов"}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="ml-auto" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
align="start"
|
||||
side="bottom"
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||
Воркспейсы
|
||||
</DropdownMenuLabel>
|
||||
{workspaces.map((workspace) => (
|
||||
<DropdownMenuItem
|
||||
key={workspace.id}
|
||||
onClick={() => setCurrentWorkspace(workspace)}
|
||||
className="gap-2 p-2"
|
||||
>
|
||||
<div className="flex size-6 items-center justify-center rounded-sm border">
|
||||
<Building2 className="size-4 shrink-0" />
|
||||
</div>
|
||||
<span className="flex-1 truncate">{workspace.name}</span>
|
||||
{currentWorkspace?.id === workspace.id && (
|
||||
<Check className="size-4 ml-auto" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setShowCreateDialog(true)}
|
||||
className="gap-2 p-2"
|
||||
>
|
||||
<div className="flex size-6 items-center justify-center rounded-md border bg-background">
|
||||
<Plus className="size-4" />
|
||||
</div>
|
||||
<span className="text-muted-foreground">
|
||||
Создать воркспейс
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<NavMain items={navItems} />
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter>
|
||||
{/* Footer Links */}
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{footerLinks.map((link) => (
|
||||
<SidebarMenuItem key={link.title}>
|
||||
<SidebarMenuButton asChild size="sm">
|
||||
<a
|
||||
href={link.url}
|
||||
target={link.external ? "_blank" : undefined}
|
||||
rel={link.external ? "noopener noreferrer" : undefined}
|
||||
className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<link.icon className="size-4" />
|
||||
<span>{link.title}</span>
|
||||
{link.external && (
|
||||
<ExternalLink className="size-3 ml-auto opacity-50" />
|
||||
)}
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarSeparator />
|
||||
|
||||
{/* User */}
|
||||
{user && (
|
||||
<NavUser
|
||||
user={{
|
||||
name: user.username || `User ${user.telegram_id}`,
|
||||
email: user.username
|
||||
? `@${user.username}`
|
||||
: `ID: ${user.telegram_id}`,
|
||||
avatar: user.username
|
||||
? `https://ui-avatars.com/api/?name=${user.username}`
|
||||
: `https://ui-avatars.com/api/?name=User`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SidebarFooter>
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
|
||||
{/* Create Workspace Dialog */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Создать воркспейс</DialogTitle>
|
||||
<DialogDescription>
|
||||
Воркспейс — это изолированное пространство для вашей команды
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="workspace-name">Название</Label>
|
||||
<Input
|
||||
id="workspace-name"
|
||||
placeholder="Например: Моя команда"
|
||||
value={newWorkspaceName}
|
||||
onChange={(e) => setNewWorkspaceName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleCreateWorkspace();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">TGEX</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
Управление закупками
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<NavMain items={data.navMain} />
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
{user && (
|
||||
<NavUser
|
||||
user={{
|
||||
name: user.username || `User ${user.telegram_id}`,
|
||||
email: user.username
|
||||
? `@${user.username}`
|
||||
: `ID: ${user.telegram_id}`,
|
||||
avatar: user.username
|
||||
? `https://ui-avatars.com/api/?name=${user.username}`
|
||||
: `https://ui-avatars.com/api/?name=User`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SidebarFooter>
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowCreateDialog(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateWorkspace}
|
||||
disabled={!newWorkspaceName.trim() || isCreating}
|
||||
>
|
||||
{isCreating ? "Создание..." : "Создать"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,20 +15,22 @@ import {
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { TargetChannelSelector } from "@/components/target-channel-selector";
|
||||
import { ProjectSelector } from "@/components/project-selector";
|
||||
import React from "react";
|
||||
|
||||
interface BreadcrumbItem {
|
||||
interface BreadcrumbItemType {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface DashboardHeaderProps {
|
||||
breadcrumbs?: BreadcrumbItem[];
|
||||
breadcrumbs?: BreadcrumbItemType[];
|
||||
showProjectSelector?: boolean;
|
||||
}
|
||||
|
||||
export const DashboardHeader: React.FC<DashboardHeaderProps> = ({
|
||||
breadcrumbs = [],
|
||||
showProjectSelector = true,
|
||||
}) => {
|
||||
return (
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||
@@ -42,9 +44,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({
|
||||
{index > 0 && <BreadcrumbSeparator />}
|
||||
<BreadcrumbItem>
|
||||
{item.href ? (
|
||||
<BreadcrumbLink href={item.href}>
|
||||
{item.label}
|
||||
</BreadcrumbLink>
|
||||
<BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
|
||||
) : (
|
||||
<BreadcrumbPage>{item.label}</BreadcrumbPage>
|
||||
)}
|
||||
@@ -55,7 +55,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({
|
||||
</Breadcrumb>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<TargetChannelSelector />
|
||||
{showProjectSelector && <ProjectSelector />}
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
26
components/layout/dashboard-layout-content.tsx
Normal file
26
components/layout/dashboard-layout-content.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Dashboard Layout Content
|
||||
// ============================================================================
|
||||
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { DemoBanner } from "@/components/demo-banner";
|
||||
|
||||
interface DashboardLayoutContentProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardLayoutContent: React.FC<DashboardLayoutContentProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{isDemoMode && <DemoBanner />}
|
||||
<div className="flex-1 overflow-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
147
components/project-selector.tsx
Normal file
147
components/project-selector.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Project Selector (Multi-select)
|
||||
// ============================================================================
|
||||
|
||||
import * as React from "react";
|
||||
import { Check, ChevronsUpDown, Tv, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSeparator,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const ProjectSelector: React.FC = () => {
|
||||
const {
|
||||
projects,
|
||||
selectedProjects,
|
||||
toggleProject,
|
||||
selectAllProjects,
|
||||
clearProjectSelection,
|
||||
isLoadingProjects,
|
||||
} = useWorkspace();
|
||||
|
||||
if (isLoadingProjects) {
|
||||
return (
|
||||
<div className="w-[240px] h-11 rounded-lg border border-input bg-background animate-pulse" />
|
||||
);
|
||||
}
|
||||
|
||||
if (projects.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-muted-foreground px-3 py-2">
|
||||
Нет проектов
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const allSelected = selectedProjects.length === projects.length;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-[280px] h-auto min-h-[44px] py-2 px-3 rounded-lg justify-between"
|
||||
>
|
||||
<div className="flex flex-col items-start text-left overflow-hidden">
|
||||
{selectedProjects.length === 0 ? (
|
||||
<span className="text-muted-foreground">Выберите проекты</span>
|
||||
) : selectedProjects.length === 1 ? (
|
||||
<>
|
||||
<span className="font-semibold text-base truncate max-w-[220px]">
|
||||
{selectedProjects[0].title}
|
||||
</span>
|
||||
{selectedProjects[0].username && (
|
||||
<span className="text-xs text-muted-foreground -mt-0.5">
|
||||
@{selectedProjects[0].username}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : allSelected ? (
|
||||
<span className="font-semibold text-base">Все проекты</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="font-semibold text-base">
|
||||
{selectedProjects.length} проекта
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground -mt-0.5 truncate max-w-[220px]">
|
||||
{selectedProjects.map((p) => p.title).join(", ")}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent className="w-[280px] p-2" align="start">
|
||||
{/* Quick actions */}
|
||||
<div className="flex gap-2 mb-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="flex-1 text-xs"
|
||||
onClick={selectAllProjects}
|
||||
disabled={allSelected}
|
||||
>
|
||||
Выбрать все
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="flex-1 text-xs"
|
||||
onClick={clearProjectSelection}
|
||||
disabled={selectedProjects.length <= 1}
|
||||
>
|
||||
Сбросить
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{/* Projects list */}
|
||||
<div className="max-h-[300px] overflow-y-auto">
|
||||
{projects.map((project) => {
|
||||
const isSelected = selectedProjects.some((p) => p.id === project.id);
|
||||
const isOnlyOne = selectedProjects.length === 1 && isSelected;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-2 py-2 rounded-md cursor-pointer hover:bg-accent",
|
||||
isSelected && "bg-accent/50"
|
||||
)}
|
||||
onClick={() => !isOnlyOne && toggleProject(project)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
disabled={isOnlyOne}
|
||||
onCheckedChange={() => !isOnlyOne && toggleProject(project)}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<Tv className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<span className="font-medium truncate">{project.title}</span>
|
||||
{project.username && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
@{project.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -2,5 +2,4 @@
|
||||
// Providers Export
|
||||
// ============================================================================
|
||||
|
||||
export { TargetChannelProvider, useTargetChannel } from "./target-channel-provider";
|
||||
|
||||
export { WorkspaceProvider, useWorkspace } from "./workspace-provider";
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Target Channel Provider
|
||||
// ============================================================================
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import { channelsApi } from "@/lib/api";
|
||||
import type { TargetChannel } from "@/lib/types/api";
|
||||
|
||||
interface TargetChannelContextType {
|
||||
channels: TargetChannel[];
|
||||
selectedChannel: TargetChannel | null;
|
||||
setSelectedChannel: (channel: TargetChannel | null) => void;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
refreshChannels: () => Promise<void>;
|
||||
}
|
||||
|
||||
const TargetChannelContext = createContext<TargetChannelContextType | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
export const useTargetChannel = () => {
|
||||
const context = useContext(TargetChannelContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useTargetChannel must be used within TargetChannelProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export const TargetChannelProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [channels, setChannels] = useState<TargetChannel[]>([]);
|
||||
const [selectedChannel, setSelectedChannelState] = useState<TargetChannel | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadChannels = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const response = await channelsApi.list();
|
||||
const activeChannels = response.target_channels.filter((c) => c.is_active);
|
||||
setChannels(activeChannels);
|
||||
|
||||
// Загружаем сохраненный канал из localStorage
|
||||
const savedChannelId = localStorage.getItem("selected_channel_id");
|
||||
if (savedChannelId && activeChannels.length > 0) {
|
||||
const savedChannel = activeChannels.find((c) => c.id === savedChannelId);
|
||||
if (savedChannel) {
|
||||
setSelectedChannelState(savedChannel);
|
||||
} else {
|
||||
// Если сохраненный канал не найден, выбираем первый
|
||||
setSelectedChannelState(activeChannels[0]);
|
||||
localStorage.setItem("selected_channel_id", activeChannels[0].id);
|
||||
}
|
||||
} else if (activeChannels.length > 0) {
|
||||
// Если нет сохраненного канала, выбираем первый
|
||||
setSelectedChannelState(activeChannels[0]);
|
||||
localStorage.setItem("selected_channel_id", activeChannels[0].id);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.error?.message || "Ошибка загрузки каналов");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const setSelectedChannel = (channel: TargetChannel | null) => {
|
||||
setSelectedChannelState(channel);
|
||||
if (channel) {
|
||||
localStorage.setItem("selected_channel_id", channel.id);
|
||||
} else {
|
||||
localStorage.removeItem("selected_channel_id");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadChannels();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TargetChannelContext.Provider
|
||||
value={{
|
||||
channels,
|
||||
selectedChannel,
|
||||
setSelectedChannel,
|
||||
isLoading,
|
||||
error,
|
||||
refreshChannels: loadChannels,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TargetChannelContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
468
components/providers/workspace-provider.tsx
Normal file
468
components/providers/workspace-provider.tsx
Normal file
@@ -0,0 +1,468 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================================
|
||||
// Workspace Provider
|
||||
// ============================================================================
|
||||
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import { useParams, useRouter, usePathname } from "next/navigation";
|
||||
import { workspacesApi, projectsApi, membersApi, authApi } from "@/lib/api";
|
||||
import type {
|
||||
Workspace,
|
||||
Project,
|
||||
Permission,
|
||||
PermissionKey,
|
||||
} from "@/lib/types/api";
|
||||
import { STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
import { isDemoWorkspace, demoApi, demoWorkspace, demoProjects } from "@/lib/demo";
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface WorkspaceContextType {
|
||||
// Workspaces
|
||||
workspaces: Workspace[];
|
||||
currentWorkspace: Workspace | null;
|
||||
setCurrentWorkspace: (workspace: Workspace) => void;
|
||||
|
||||
// Projects (Target Channels)
|
||||
projects: Project[];
|
||||
selectedProjects: Project[];
|
||||
currentProject: Project | null; // First selected or null (for backward compatibility)
|
||||
setSelectedProjects: (projects: Project[]) => void;
|
||||
toggleProject: (project: Project) => void;
|
||||
selectAllProjects: () => void;
|
||||
clearProjectSelection: () => void;
|
||||
|
||||
// Helper for API filtering
|
||||
// Returns project_id only if single project selected, undefined otherwise
|
||||
getProjectFilterId: () => string | undefined;
|
||||
// Returns true if all projects are selected
|
||||
allProjectsSelected: boolean;
|
||||
|
||||
// Demo mode
|
||||
isDemoMode: boolean;
|
||||
|
||||
// Permissions
|
||||
permissions: Permission[];
|
||||
hasPermission: (key: PermissionKey, projectId?: string) => boolean;
|
||||
isAdmin: boolean;
|
||||
|
||||
// Loading states
|
||||
isLoading: boolean;
|
||||
isLoadingProjects: boolean;
|
||||
error: string | null;
|
||||
|
||||
// Actions
|
||||
refreshWorkspaces: () => Promise<Workspace[]>;
|
||||
refreshProjects: () => Promise<void>;
|
||||
createWorkspace: (name: string) => Promise<Workspace>;
|
||||
}
|
||||
|
||||
const WorkspaceContext = createContext<WorkspaceContextType | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Hook
|
||||
// ============================================================================
|
||||
|
||||
export const useWorkspace = () => {
|
||||
const context = useContext(WorkspaceContext);
|
||||
if (!context) {
|
||||
throw new Error("useWorkspace must be used within WorkspaceProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Provider
|
||||
// ============================================================================
|
||||
|
||||
interface WorkspaceProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// State
|
||||
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
|
||||
const [currentWorkspace, setCurrentWorkspaceState] = useState<Workspace | null>(null);
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [selectedProjects, setSelectedProjectsState] = useState<Project[]>([]);
|
||||
const [permissions, setPermissions] = useState<Permission[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoadingProjects, setIsLoadingProjects] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Get workspaceId from URL params
|
||||
const workspaceIdFromUrl = params?.workspaceId as string | undefined;
|
||||
|
||||
// Check if demo mode
|
||||
const isDemoMode = isDemoWorkspace(workspaceIdFromUrl);
|
||||
|
||||
// Current project (first selected for backward compatibility)
|
||||
const currentProject = selectedProjects.length > 0 ? selectedProjects[0] : null;
|
||||
|
||||
// Check if all projects are selected
|
||||
const allProjectsSelected =
|
||||
projects.length > 0 && selectedProjects.length === projects.length;
|
||||
|
||||
// Get project_id for API filtering
|
||||
// Returns undefined if multiple projects selected (to get workspace-wide data)
|
||||
const getProjectFilterId = useCallback(() => {
|
||||
if (selectedProjects.length === 1) {
|
||||
return selectedProjects[0].id;
|
||||
}
|
||||
// Multiple projects selected - return undefined to get all data
|
||||
return undefined;
|
||||
}, [selectedProjects]);
|
||||
|
||||
// ============================================================================
|
||||
// Permission Helpers
|
||||
// ============================================================================
|
||||
|
||||
const isAdmin = permissions.some((p) => p.key === "admin_full");
|
||||
|
||||
const hasPermission = useCallback(
|
||||
(key: PermissionKey, projectId?: string): boolean => {
|
||||
// Admin has all permissions
|
||||
if (isAdmin) return true;
|
||||
|
||||
// Find permission by key
|
||||
const permission = permissions.find((p) => p.key === key);
|
||||
if (!permission) return false;
|
||||
|
||||
// If no scopes defined, permission applies globally
|
||||
if (!permission.scopes || permission.scopes.length === 0) return true;
|
||||
|
||||
// If projectId provided, check if it's in scopes
|
||||
if (projectId) {
|
||||
return permission.scopes.some(
|
||||
(s) => s.type === "project" && s.id === projectId
|
||||
);
|
||||
}
|
||||
|
||||
// Permission exists but is scoped - need projectId to verify
|
||||
return true;
|
||||
},
|
||||
[permissions, isAdmin]
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Load Workspaces
|
||||
// ============================================================================
|
||||
|
||||
const loadWorkspaces = useCallback(async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Demo mode - use mock data
|
||||
if (isDemoMode) {
|
||||
setWorkspaces([demoWorkspace]);
|
||||
setCurrentWorkspaceState(demoWorkspace);
|
||||
setIsLoading(false);
|
||||
return [demoWorkspace];
|
||||
}
|
||||
|
||||
const response = await workspacesApi.list({ size: 100 });
|
||||
setWorkspaces(response.items);
|
||||
|
||||
// If we have workspaceId in URL, select that workspace
|
||||
if (workspaceIdFromUrl && response.items.length > 0) {
|
||||
const workspace = response.items.find((w) => w.id === workspaceIdFromUrl);
|
||||
if (workspace) {
|
||||
setCurrentWorkspaceState(workspace);
|
||||
localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, workspace.id);
|
||||
} else {
|
||||
// Workspace from URL not found, redirect to first available
|
||||
const firstWorkspace = response.items[0];
|
||||
setCurrentWorkspaceState(firstWorkspace);
|
||||
localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, firstWorkspace.id);
|
||||
// Redirect to correct workspace
|
||||
const newPath = pathname.replace(
|
||||
`/dashboard/${workspaceIdFromUrl}`,
|
||||
`/dashboard/${firstWorkspace.id}`
|
||||
);
|
||||
router.replace(newPath);
|
||||
}
|
||||
} else if (response.items.length > 0) {
|
||||
// Try to restore from localStorage or use first
|
||||
const savedId = localStorage.getItem(STORAGE_KEYS.SELECTED_WORKSPACE);
|
||||
const saved = savedId
|
||||
? response.items.find((w) => w.id === savedId)
|
||||
: null;
|
||||
const workspace = saved || response.items[0];
|
||||
setCurrentWorkspaceState(workspace);
|
||||
localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, workspace.id);
|
||||
}
|
||||
|
||||
return response.items;
|
||||
} catch (err: any) {
|
||||
console.error("Failed to load workspaces:", err);
|
||||
setError(err?.error?.message || "Ошибка загрузки воркспейсов");
|
||||
return [];
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [workspaceIdFromUrl, pathname, router, isDemoMode]);
|
||||
|
||||
// ============================================================================
|
||||
// Load Projects & Permissions
|
||||
// ============================================================================
|
||||
|
||||
const loadProjectsAndPermissions = useCallback(async (workspaceId: string) => {
|
||||
try {
|
||||
setIsLoadingProjects(true);
|
||||
|
||||
// Demo mode - use mock data
|
||||
if (isDemoMode) {
|
||||
const activeProjects = demoProjects.filter((p) => p.status === "active");
|
||||
setProjects(activeProjects);
|
||||
setPermissions([{ key: "admin_full" }]);
|
||||
setSelectedProjectsState(activeProjects.length > 0 ? [activeProjects[0]] : []);
|
||||
setIsLoadingProjects(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Load projects
|
||||
const projectsResponse = await projectsApi.list(workspaceId, { size: 100 });
|
||||
const activeProjects = projectsResponse.items.filter(
|
||||
(p) => p.status === "active"
|
||||
);
|
||||
setProjects(activeProjects);
|
||||
|
||||
// Load current user's permissions
|
||||
const me = await authApi.me();
|
||||
const membersResponse = await membersApi.list(workspaceId, { size: 100 });
|
||||
// Find member by user.id (not by member record id)
|
||||
const currentMember = membersResponse.items.find((m) => m.user.id === me.id);
|
||||
|
||||
if (currentMember) {
|
||||
// If member found but no permissions, they're likely the creator - grant admin
|
||||
if (currentMember.permissions.length === 0) {
|
||||
setPermissions([{ key: "admin_full" }]);
|
||||
} else {
|
||||
setPermissions(currentMember.permissions);
|
||||
}
|
||||
} else {
|
||||
// User not in members list - might be creator, check if only workspace
|
||||
// Grant admin access by default for workspace creators
|
||||
if (membersResponse.items.length === 0) {
|
||||
setPermissions([{ key: "admin_full" }]);
|
||||
} else {
|
||||
setPermissions([]);
|
||||
}
|
||||
}
|
||||
|
||||
// Restore selected projects from localStorage
|
||||
const savedProjectIds = localStorage.getItem(
|
||||
`${STORAGE_KEYS.SELECTED_PROJECT}_${workspaceId}`
|
||||
);
|
||||
if (savedProjectIds && activeProjects.length > 0) {
|
||||
try {
|
||||
const ids = JSON.parse(savedProjectIds) as string[];
|
||||
const savedProjects = activeProjects.filter((p) => ids.includes(p.id));
|
||||
if (savedProjects.length > 0) {
|
||||
setSelectedProjectsState(savedProjects);
|
||||
} else if (activeProjects.length > 0) {
|
||||
setSelectedProjectsState([activeProjects[0]]);
|
||||
}
|
||||
} catch {
|
||||
// Old format (single id), migrate to array
|
||||
const savedProject = activeProjects.find((p) => p.id === savedProjectIds);
|
||||
if (savedProject) {
|
||||
setSelectedProjectsState([savedProject]);
|
||||
} else if (activeProjects.length > 0) {
|
||||
setSelectedProjectsState([activeProjects[0]]);
|
||||
}
|
||||
}
|
||||
} else if (activeProjects.length > 0) {
|
||||
setSelectedProjectsState([activeProjects[0]]);
|
||||
} else {
|
||||
setSelectedProjectsState([]);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Failed to load projects/permissions:", err);
|
||||
} finally {
|
||||
setIsLoadingProjects(false);
|
||||
}
|
||||
}, [isDemoMode]);
|
||||
|
||||
// ============================================================================
|
||||
// Set Current Workspace
|
||||
// ============================================================================
|
||||
|
||||
const setCurrentWorkspace = useCallback(
|
||||
(workspace: Workspace) => {
|
||||
setCurrentWorkspaceState(workspace);
|
||||
localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, workspace.id);
|
||||
|
||||
// Update URL if we're in dashboard
|
||||
if (pathname.startsWith("/dashboard/")) {
|
||||
const currentWorkspaceId = workspaceIdFromUrl;
|
||||
if (currentWorkspaceId && currentWorkspaceId !== workspace.id) {
|
||||
const newPath = pathname.replace(
|
||||
`/dashboard/${currentWorkspaceId}`,
|
||||
`/dashboard/${workspace.id}`
|
||||
);
|
||||
router.push(newPath);
|
||||
}
|
||||
} else if (pathname === "/dashboard" || pathname === "/") {
|
||||
router.push(`/dashboard/${workspace.id}`);
|
||||
}
|
||||
|
||||
// Load projects for new workspace
|
||||
loadProjectsAndPermissions(workspace.id);
|
||||
},
|
||||
[pathname, router, workspaceIdFromUrl, loadProjectsAndPermissions]
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Project Selection Methods
|
||||
// ============================================================================
|
||||
|
||||
const saveSelectedProjects = useCallback(
|
||||
(selected: Project[]) => {
|
||||
if (currentWorkspace) {
|
||||
localStorage.setItem(
|
||||
`${STORAGE_KEYS.SELECTED_PROJECT}_${currentWorkspace.id}`,
|
||||
JSON.stringify(selected.map((p) => p.id))
|
||||
);
|
||||
}
|
||||
},
|
||||
[currentWorkspace]
|
||||
);
|
||||
|
||||
const setSelectedProjects = useCallback(
|
||||
(selected: Project[]) => {
|
||||
setSelectedProjectsState(selected);
|
||||
saveSelectedProjects(selected);
|
||||
},
|
||||
[saveSelectedProjects]
|
||||
);
|
||||
|
||||
const toggleProject = useCallback(
|
||||
(project: Project) => {
|
||||
setSelectedProjectsState((prev) => {
|
||||
const isSelected = prev.some((p) => p.id === project.id);
|
||||
let newSelection: Project[];
|
||||
|
||||
if (isSelected) {
|
||||
// Don't allow deselecting if it's the only one
|
||||
if (prev.length <= 1) {
|
||||
return prev;
|
||||
}
|
||||
newSelection = prev.filter((p) => p.id !== project.id);
|
||||
} else {
|
||||
newSelection = [...prev, project];
|
||||
}
|
||||
|
||||
saveSelectedProjects(newSelection);
|
||||
return newSelection;
|
||||
});
|
||||
},
|
||||
[saveSelectedProjects]
|
||||
);
|
||||
|
||||
const selectAllProjects = useCallback(() => {
|
||||
setSelectedProjectsState(projects);
|
||||
saveSelectedProjects(projects);
|
||||
}, [projects, saveSelectedProjects]);
|
||||
|
||||
const clearProjectSelection = useCallback(() => {
|
||||
if (projects.length > 0) {
|
||||
const firstProject = [projects[0]];
|
||||
setSelectedProjectsState(firstProject);
|
||||
saveSelectedProjects(firstProject);
|
||||
}
|
||||
}, [projects, saveSelectedProjects]);
|
||||
|
||||
// ============================================================================
|
||||
// Create Workspace
|
||||
// ============================================================================
|
||||
|
||||
const createWorkspace = useCallback(async (name: string): Promise<Workspace> => {
|
||||
const workspace = await workspacesApi.create({ name });
|
||||
setWorkspaces((prev) => [...prev, workspace]);
|
||||
return workspace;
|
||||
}, []);
|
||||
|
||||
// ============================================================================
|
||||
// Effects
|
||||
// ============================================================================
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
loadWorkspaces();
|
||||
}, [loadWorkspaces]);
|
||||
|
||||
// Load projects when workspace changes
|
||||
useEffect(() => {
|
||||
if (currentWorkspace) {
|
||||
loadProjectsAndPermissions(currentWorkspace.id);
|
||||
}
|
||||
}, [currentWorkspace?.id, loadProjectsAndPermissions]);
|
||||
|
||||
// ============================================================================
|
||||
// Render
|
||||
// ============================================================================
|
||||
|
||||
return (
|
||||
<WorkspaceContext.Provider
|
||||
value={{
|
||||
// Workspaces
|
||||
workspaces,
|
||||
currentWorkspace,
|
||||
setCurrentWorkspace,
|
||||
|
||||
// Projects
|
||||
projects,
|
||||
selectedProjects,
|
||||
currentProject,
|
||||
setSelectedProjects,
|
||||
toggleProject,
|
||||
selectAllProjects,
|
||||
clearProjectSelection,
|
||||
getProjectFilterId,
|
||||
allProjectsSelected,
|
||||
|
||||
// Demo mode
|
||||
isDemoMode,
|
||||
|
||||
// Permissions
|
||||
permissions,
|
||||
hasPermission,
|
||||
isAdmin,
|
||||
|
||||
// Loading states
|
||||
isLoading,
|
||||
isLoadingProjects,
|
||||
error,
|
||||
|
||||
// Actions
|
||||
refreshWorkspaces: loadWorkspaces,
|
||||
refreshProjects: () =>
|
||||
currentWorkspace
|
||||
? loadProjectsAndPermissions(currentWorkspace.id)
|
||||
: Promise.resolve(),
|
||||
createWorkspace,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</WorkspaceContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -1,276 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Plus,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
} from "lucide-react";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { BOT_USERNAME } from "@/lib/utils/constants";
|
||||
import { channelsApi } from "@/lib/api";
|
||||
|
||||
export const TargetChannelSelector: React.FC = () => {
|
||||
const { channels, selectedChannel, setSelectedChannel, isLoading, error } =
|
||||
useTargetChannel();
|
||||
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [initialChannelCount, setInitialChannelCount] = useState(0);
|
||||
const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Очистка интервала при размонтировании
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Автоматический запуск polling при открытии диалога
|
||||
useEffect(() => {
|
||||
if (isAddDialogOpen && !isSuccess && initialChannelCount >= 0) {
|
||||
pollingIntervalRef.current = setInterval(() => {
|
||||
checkForNewChannels();
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
pollingIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [isAddDialogOpen, isSuccess, initialChannelCount]);
|
||||
|
||||
const checkForNewChannels = async () => {
|
||||
try {
|
||||
const response = await channelsApi.list();
|
||||
const activeChannels = response.target_channels.filter(
|
||||
(c) => c.is_active
|
||||
);
|
||||
|
||||
if (activeChannels.length > initialChannelCount) {
|
||||
setIsSuccess(true);
|
||||
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
pollingIntervalRef.current = null;
|
||||
}
|
||||
setTimeout(() => {
|
||||
setIsAddDialogOpen(false);
|
||||
setIsSuccess(false);
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error polling channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddChannel = () => {
|
||||
setInitialChannelCount(channels.length);
|
||||
setIsSuccess(false);
|
||||
setIsAddDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDialogOpenChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
// Разрешаем закрытие всегда (в том числе через кнопку крестик)
|
||||
setIsAddDialogOpen(false);
|
||||
setIsSuccess(false);
|
||||
if (pollingIntervalRef.current) {
|
||||
clearInterval(pollingIntervalRef.current);
|
||||
pollingIntervalRef.current = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Загрузка каналов...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert variant="destructive" className="p-2 h-auto">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="text-xs">Ошибка: {error}</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (channels.length === 0) {
|
||||
return (
|
||||
<Button variant="outline" size="sm" onClick={handleAddChannel}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить канал
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
value={selectedChannel?.id || "add-new"}
|
||||
onValueChange={(value) => {
|
||||
if (value === "add-new") {
|
||||
handleAddChannel();
|
||||
} else {
|
||||
const channel = channels.find((c) => c.id === value);
|
||||
if (channel) {
|
||||
setSelectedChannel(channel);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[260px] h-auto min-h-[52px] py-2 rounded-lg">
|
||||
<SelectValue placeholder="Выберите канал">
|
||||
{selectedChannel && (
|
||||
<div className="flex flex-col items-start gap-0.5">
|
||||
<span className="font-semibold text-base">
|
||||
{selectedChannel.title}
|
||||
</span>
|
||||
{selectedChannel.username && (
|
||||
<span className="text-xs text-muted-foreground -mt-1">
|
||||
@{selectedChannel.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{channels.map((channel) => (
|
||||
<SelectItem
|
||||
key={channel.id}
|
||||
value={channel.id}
|
||||
className="cursor-pointer py-3"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full gap-2">
|
||||
<div className="flex flex-col items-start flex-1 min-w-0 gap-0.5">
|
||||
<span className="font-semibold text-base truncate w-full">
|
||||
{channel.title}
|
||||
</span>
|
||||
{channel.username && (
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
@{channel.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem
|
||||
value="add-new"
|
||||
className="cursor-pointer border-t mt-1 py-3"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-primary">
|
||||
<Plus className="h-4 w-4" />
|
||||
<span className="font-medium">Добавить канал</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Dialog open={isAddDialogOpen} onOpenChange={handleDialogOpenChange}>
|
||||
<DialogContent
|
||||
className="sm:max-w-md"
|
||||
onInteractOutside={(e) => !isSuccess && e.preventDefault()}
|
||||
onEscapeKeyDown={(e) => !isSuccess && e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Добавить целевой канал</DialogTitle>
|
||||
<DialogDescription>
|
||||
Следуйте инструкциям ниже, чтобы подключить новый канал
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{isSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 space-y-4">
|
||||
<div className="rounded-full bg-green-100 dark:bg-green-900 p-3">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Канал успешно добавлен!
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Страница обновится автоматически...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<Alert>
|
||||
<AlertDescription className="space-y-2">
|
||||
<p className="font-medium">Шаги для добавления канала:</p>
|
||||
<ol className="list-decimal list-inside space-y-1.5 text-sm">
|
||||
<li>Откройте свой Telegram канал</li>
|
||||
<li>Перейдите в настройки канала → Администраторы</li>
|
||||
<li>
|
||||
Добавьте бота{" "}
|
||||
<a
|
||||
href={`https://t.me/${BOT_USERNAME}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-primary hover:underline inline-flex items-center gap-1"
|
||||
tabIndex={0}
|
||||
aria-label={`Открыть бота @${BOT_USERNAME} в Telegram`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
@{BOT_USERNAME}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>{" "}
|
||||
как администратора
|
||||
</li>
|
||||
<li>
|
||||
Предоставьте боту права:{" "}
|
||||
<span className="font-medium">
|
||||
Публикация сообщений, Удаление сообщений
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex flex-col items-center justify-center py-6 space-y-3">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Ждем добавления бота...
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
Как только вы добавите бота, канал автоматически появится
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
142
components/ui/alert-dialog.tsx
Normal file
142
components/ui/alert-dialog.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
const AlertDialog = AlertDialogPrimitive.Root
|
||||
|
||||
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
||||
|
||||
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
||||
|
||||
const AlertDialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
|
||||
|
||||
const AlertDialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
))
|
||||
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
|
||||
|
||||
const AlertDialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
AlertDialogHeader.displayName = "AlertDialogHeader"
|
||||
|
||||
const AlertDialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
AlertDialogFooter.displayName = "AlertDialogFooter"
|
||||
|
||||
const AlertDialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
|
||||
|
||||
const AlertDialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogDescription.displayName =
|
||||
AlertDialogPrimitive.Description.displayName
|
||||
|
||||
const AlertDialogAction = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Action
|
||||
ref={ref}
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
|
||||
|
||||
const AlertDialogCancel = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
ref={ref}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"mt-2 sm:mt-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
|
||||
@@ -4,41 +4,49 @@
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
PlacementAnalyticsItem,
|
||||
CreativeAnalyticsItem,
|
||||
ChannelAnalyticsItem,
|
||||
SpendingAnalytics,
|
||||
PlacementsAnalytics,
|
||||
CreativesAnalytics,
|
||||
ExternalChannelsAnalytics,
|
||||
DateGrouping,
|
||||
AnalyticsQueryParams,
|
||||
SpendingAnalyticsQueryParams,
|
||||
PaginatedResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const analyticsApi = {
|
||||
/**
|
||||
* Get spending analytics
|
||||
*/
|
||||
spending: (params?: {
|
||||
target_channel_id?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
grouping?: DateGrouping;
|
||||
}) => api.get<SpendingAnalytics>("/analytics/spending", { params }),
|
||||
|
||||
/**
|
||||
* Get placements analytics
|
||||
*/
|
||||
placements: (params?: { target_channel_id?: string }) =>
|
||||
api.get<PlacementsAnalytics>("/analytics/placements", { params }),
|
||||
placements: (workspaceId: string, params?: AnalyticsQueryParams) =>
|
||||
api.get<PaginatedResponse<PlacementAnalyticsItem>>(
|
||||
`/workspaces/${workspaceId}/analytics/placements`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Get creatives analytics
|
||||
*/
|
||||
creatives: (params?: { target_channel_id?: string }) =>
|
||||
api.get<CreativesAnalytics>("/analytics/creatives", { params }),
|
||||
creatives: (workspaceId: string, params?: AnalyticsQueryParams) =>
|
||||
api.get<PaginatedResponse<CreativeAnalyticsItem>>(
|
||||
`/workspaces/${workspaceId}/analytics/creatives`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Get external channels analytics
|
||||
* Get channels analytics
|
||||
*/
|
||||
externalChannels: (params?: { target_channel_id?: string }) =>
|
||||
api.get<ExternalChannelsAnalytics>("/analytics/external-channels", {
|
||||
params,
|
||||
}),
|
||||
channels: (workspaceId: string, params?: AnalyticsQueryParams) =>
|
||||
api.get<PaginatedResponse<ChannelAnalyticsItem>>(
|
||||
`/workspaces/${workspaceId}/analytics/channels`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Get spending analytics (time-series data)
|
||||
*/
|
||||
spending: (workspaceId: string, params?: SpendingAnalyticsQueryParams) =>
|
||||
api.get<SpendingAnalytics>(
|
||||
`/workspaces/${workspaceId}/analytics/spending`,
|
||||
{ params }
|
||||
),
|
||||
};
|
||||
|
||||
@@ -2,33 +2,19 @@
|
||||
// Auth API
|
||||
// ============================================================================
|
||||
|
||||
import { api, saveAuthTokens, clearAuthTokens } from "./client";
|
||||
import { api, clearAuthTokens } from "./client";
|
||||
import { STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
import type {
|
||||
User,
|
||||
AuthInitResponse,
|
||||
AuthCompleteRequest,
|
||||
AuthCompleteResponse,
|
||||
AuthRefreshRequest,
|
||||
AuthRefreshResponse,
|
||||
} from "@/lib/types/api";
|
||||
import type { User, AuthCompleteResponse } from "@/lib/types/api";
|
||||
|
||||
export const authApi = {
|
||||
/**
|
||||
* Initialize Telegram auth flow
|
||||
*/
|
||||
init: () => api.get<AuthInitResponse>("/auth/init", { requireAuth: false }),
|
||||
|
||||
/**
|
||||
* Complete auth with one-time token from bot
|
||||
* GET /auth/complete?token=...
|
||||
*/
|
||||
complete: async (token: string): Promise<{ access_token: string }> => {
|
||||
// GET request with token as query parameter
|
||||
const response = await api.get<{ access_token: string }>(
|
||||
complete: async (token: string): Promise<AuthCompleteResponse> => {
|
||||
const response = await api.get<AuthCompleteResponse>(
|
||||
`/auth/complete?token=${token}`,
|
||||
{
|
||||
requireAuth: false,
|
||||
}
|
||||
{ requireAuth: false }
|
||||
);
|
||||
|
||||
// Save access token to storage
|
||||
@@ -39,36 +25,9 @@ export const authApi = {
|
||||
return response;
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh access token
|
||||
*/
|
||||
refresh: async (): Promise<string> => {
|
||||
if (typeof window === "undefined") {
|
||||
throw new Error("Cannot refresh token on server");
|
||||
}
|
||||
|
||||
const refreshToken = localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
|
||||
if (!refreshToken) {
|
||||
throw new Error("No refresh token available");
|
||||
}
|
||||
|
||||
const data: AuthRefreshRequest = { refresh_token: refreshToken };
|
||||
const response = await api.post<AuthRefreshResponse>(
|
||||
"/auth/refresh",
|
||||
data,
|
||||
{
|
||||
requireAuth: false,
|
||||
}
|
||||
);
|
||||
|
||||
// Update access token
|
||||
localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, response.access_token);
|
||||
|
||||
return response.access_token;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get current user info
|
||||
* GET /auth/me
|
||||
*/
|
||||
me: () => api.get<User>("/auth/me"),
|
||||
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
// ============================================================================
|
||||
// Target Channels API
|
||||
// Channels API (Catalog for Placements)
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
TargetChannel,
|
||||
TargetChannelsListResponse,
|
||||
SuccessResponse,
|
||||
Channel,
|
||||
ChannelsQueryParams,
|
||||
PaginatedResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const channelsApi = {
|
||||
/**
|
||||
* Get list of target channels
|
||||
* GET /api/v1/target_channels
|
||||
* Get catalog of channels for placements
|
||||
*/
|
||||
list: () => api.get<TargetChannelsListResponse>("/target_channels"),
|
||||
|
||||
/**
|
||||
* Delete (disconnect) target channel
|
||||
* DELETE /api/v1/target_channels/{channel_id}
|
||||
*/
|
||||
delete: (id: string) => api.delete<SuccessResponse>(`/target_channels/${id}`),
|
||||
list: (params?: ChannelsQueryParams) =>
|
||||
api.get<PaginatedResponse<Channel>>("/channels", { params }),
|
||||
};
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
// ============================================================================
|
||||
// API Client with Mock Support
|
||||
// API Client
|
||||
// ============================================================================
|
||||
|
||||
import { API_URL, USE_MOCKS, STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
import { mockApiHandlers } from "@/lib/mocks/handlers";
|
||||
import { API_URL, STORAGE_KEYS } from "@/lib/utils/constants";
|
||||
import type { ApiError } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
@@ -61,169 +60,13 @@ export const clearAuthTokens = (): void => {
|
||||
*/
|
||||
export const saveAuthTokens = (
|
||||
accessToken: string,
|
||||
refreshToken: string
|
||||
refreshToken?: string
|
||||
): void => {
|
||||
if (typeof window === "undefined") return;
|
||||
localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, accessToken);
|
||||
localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, refreshToken);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Mock Router
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Route request to appropriate mock handler
|
||||
*/
|
||||
const routeMockRequest = async (
|
||||
endpoint: string,
|
||||
options: RequestOptions
|
||||
): Promise<any> => {
|
||||
const method = options.method || "GET";
|
||||
const params = options.params || {};
|
||||
const body = options.body ? JSON.parse(options.body as string) : undefined;
|
||||
|
||||
console.log(`[MOCK API] ${method} ${endpoint}`, { params, body });
|
||||
|
||||
// Auth endpoints
|
||||
if (endpoint === "/auth/init") {
|
||||
return mockApiHandlers.authInit();
|
||||
if (refreshToken) {
|
||||
localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, refreshToken);
|
||||
}
|
||||
if (endpoint.startsWith("/auth/complete")) {
|
||||
// Extract token from query params
|
||||
const token =
|
||||
params.token ||
|
||||
(endpoint.includes("?")
|
||||
? new URLSearchParams(endpoint.split("?")[1]).get("token")
|
||||
: null);
|
||||
return mockApiHandlers.authComplete({ token });
|
||||
}
|
||||
if (endpoint === "/auth/refresh") {
|
||||
return mockApiHandlers.authRefresh(body);
|
||||
}
|
||||
if (endpoint === "/auth/me") {
|
||||
return mockApiHandlers.authMe();
|
||||
}
|
||||
|
||||
// Target Channels
|
||||
if (endpoint === "/target_channels" && method === "GET") {
|
||||
return mockApiHandlers.getTargetChannels();
|
||||
}
|
||||
if (endpoint.startsWith("/target_channels/") && method === "DELETE") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.deleteTargetChannel(id);
|
||||
}
|
||||
|
||||
// External Channels
|
||||
if (endpoint.startsWith("/external_channels/target/") && method === "GET") {
|
||||
const targetChannelId = endpoint.split("/")[3];
|
||||
return mockApiHandlers.getExternalChannels(targetChannelId);
|
||||
}
|
||||
if (endpoint === "/external_channels" && method === "POST") {
|
||||
return mockApiHandlers.createExternalChannel(body);
|
||||
}
|
||||
if (
|
||||
endpoint.startsWith("/external_channels/") &&
|
||||
!endpoint.includes("/target/") &&
|
||||
!endpoint.includes("/links") &&
|
||||
method === "GET"
|
||||
) {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.getExternalChannel(id);
|
||||
}
|
||||
if (
|
||||
endpoint.startsWith("/external_channels/") &&
|
||||
endpoint.includes("/links") &&
|
||||
method === "PATCH"
|
||||
) {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.updateExternalChannelLinks(id, body);
|
||||
}
|
||||
if (
|
||||
endpoint.startsWith("/external_channels/") &&
|
||||
!endpoint.includes("/links") &&
|
||||
method === "PATCH"
|
||||
) {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.updateExternalChannel(id, body);
|
||||
}
|
||||
if (endpoint.startsWith("/external_channels/") && method === "DELETE") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.deleteExternalChannel(id);
|
||||
}
|
||||
|
||||
// Creatives
|
||||
if (endpoint === "/creatives" && method === "GET") {
|
||||
return mockApiHandlers.getCreatives(params);
|
||||
}
|
||||
if (endpoint === "/creatives" && method === "POST") {
|
||||
return mockApiHandlers.createCreative(body);
|
||||
}
|
||||
if (endpoint.startsWith("/creatives/") && method === "GET") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.getCreative(id);
|
||||
}
|
||||
if (endpoint.startsWith("/creatives/") && method === "PATCH") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.updateCreative(id, body);
|
||||
}
|
||||
if (endpoint.startsWith("/creatives/") && method === "DELETE") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.deleteCreative(id);
|
||||
}
|
||||
|
||||
// Placements
|
||||
if (endpoint === "/placements" && method === "GET") {
|
||||
return mockApiHandlers.getPlacements(params);
|
||||
}
|
||||
if (endpoint === "/placements" && method === "POST") {
|
||||
return mockApiHandlers.createPlacement(body);
|
||||
}
|
||||
if (endpoint.match(/^\/placements\/[^\/]+$/) && method === "GET") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.getPlacement(id);
|
||||
}
|
||||
if (endpoint.match(/^\/placements\/[^\/]+$/) && method === "PATCH") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.updatePlacement(id, body);
|
||||
}
|
||||
if (endpoint.match(/^\/placements\/[^\/]+$/) && method === "DELETE") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.deletePlacement(id);
|
||||
}
|
||||
if (endpoint.includes("/views/fetch") && method === "POST") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.fetchPlacementViews(id);
|
||||
}
|
||||
if (endpoint.includes("/views/history") && method === "GET") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.getPlacementViewsHistory(id, params);
|
||||
}
|
||||
if (endpoint.includes("/views/manual") && method === "POST") {
|
||||
const id = endpoint.split("/")[2];
|
||||
return mockApiHandlers.setPlacementViewsManually(id, params?.views_count);
|
||||
}
|
||||
|
||||
// Analytics
|
||||
if (endpoint === "/analytics/spending") {
|
||||
return mockApiHandlers.getSpendingAnalytics(params);
|
||||
}
|
||||
if (endpoint === "/analytics/placements") {
|
||||
return mockApiHandlers.getPlacementsAnalytics(params);
|
||||
}
|
||||
if (endpoint === "/analytics/creatives") {
|
||||
return mockApiHandlers.getCreativesAnalytics(params);
|
||||
}
|
||||
if (endpoint === "/analytics/external-channels") {
|
||||
return mockApiHandlers.getExternalChannelsAnalytics(params);
|
||||
}
|
||||
|
||||
throw {
|
||||
error: {
|
||||
code: "NOT_IMPLEMENTED",
|
||||
message: `Mock handler not implemented for ${method} ${endpoint}`,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
@@ -231,7 +74,7 @@ const routeMockRequest = async (
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Main API request function with mock support
|
||||
* Main API request function
|
||||
*/
|
||||
export const apiRequest = async <T = any>(
|
||||
endpoint: string,
|
||||
@@ -239,17 +82,7 @@ export const apiRequest = async <T = any>(
|
||||
): Promise<T> => {
|
||||
const { params, requireAuth = true, ...fetchOptions } = options;
|
||||
|
||||
// Use mocks if enabled
|
||||
if (USE_MOCKS) {
|
||||
try {
|
||||
const result = await routeMockRequest(endpoint, options);
|
||||
return result as T;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Real API request
|
||||
// Build URL
|
||||
const url = buildUrl(`${API_URL}${endpoint}`, params);
|
||||
|
||||
const headers: HeadersInit = {
|
||||
@@ -271,45 +104,29 @@ export const apiRequest = async <T = any>(
|
||||
headers,
|
||||
});
|
||||
|
||||
// Handle 204 No Content
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
// Parse response
|
||||
const data = await response.json();
|
||||
|
||||
// Handle errors
|
||||
if (!response.ok) {
|
||||
// FastAPI returns errors in format { "detail": "..." }
|
||||
// Transform to our ApiError format
|
||||
if (data.detail) {
|
||||
throw {
|
||||
error: {
|
||||
code:
|
||||
response.status === 401
|
||||
? "UNAUTHORIZED"
|
||||
: response.status === 403
|
||||
? "FORBIDDEN"
|
||||
: response.status === 404
|
||||
? "NOT_FOUND"
|
||||
: response.status === 422
|
||||
? "VALIDATION_ERROR"
|
||||
: "API_ERROR",
|
||||
message: data.detail,
|
||||
},
|
||||
detail: data.detail,
|
||||
};
|
||||
}
|
||||
// If it's already in our format, throw as is
|
||||
const error: ApiError = data;
|
||||
const error: ApiError = {
|
||||
detail: data.detail || "An error occurred",
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
|
||||
return data as T;
|
||||
} catch (error: any) {
|
||||
// Network error or parsing error
|
||||
if (!error.error) {
|
||||
if (!error.detail) {
|
||||
throw {
|
||||
error: {
|
||||
code: "NETWORK_ERROR",
|
||||
message: error.message || "Network error occurred",
|
||||
},
|
||||
detail: error.message || "Network error occurred",
|
||||
} as ApiError;
|
||||
}
|
||||
throw error;
|
||||
@@ -328,47 +145,23 @@ export const api = {
|
||||
apiRequest<T>(endpoint, {
|
||||
...options,
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
}),
|
||||
|
||||
put: <T = any>(endpoint: string, body?: any, options?: RequestOptions) =>
|
||||
apiRequest<T>(endpoint, {
|
||||
...options,
|
||||
method: "PUT",
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
}),
|
||||
|
||||
patch: <T = any>(endpoint: string, body?: any, options?: RequestOptions) =>
|
||||
apiRequest<T>(endpoint, {
|
||||
...options,
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(body),
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
}),
|
||||
|
||||
delete: <T = any>(endpoint: string, options?: RequestOptions) =>
|
||||
apiRequest<T>(endpoint, { ...options, method: "DELETE" }),
|
||||
|
||||
// Special method for file upload
|
||||
upload: async <T = any>(
|
||||
endpoint: string,
|
||||
formData: FormData,
|
||||
options?: RequestOptions
|
||||
): Promise<T> => {
|
||||
// File import is now done on client side, no need for mock handling
|
||||
const url = `${API_URL}${endpoint}`;
|
||||
const token = getAuthToken();
|
||||
|
||||
const headers: HeadersInit = {};
|
||||
if (token) {
|
||||
headers["Authorization"] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: formData,
|
||||
...options,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw data as ApiError;
|
||||
}
|
||||
|
||||
return data as T;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -5,39 +5,57 @@
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
Creative,
|
||||
CreativeQueryParams,
|
||||
CreativeCreateRequest,
|
||||
CreativeUpdateRequest,
|
||||
CreativesListResponse,
|
||||
SuccessResponse,
|
||||
CreativesQueryParams,
|
||||
PaginatedResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const creativesApi = {
|
||||
/**
|
||||
* Get list of creatives
|
||||
* Get list of creatives for workspace
|
||||
*/
|
||||
list: (params?: CreativeQueryParams) =>
|
||||
api.get<CreativesListResponse>("/creatives", { params }),
|
||||
list: (workspaceId: string, params?: CreativesQueryParams) =>
|
||||
api.get<PaginatedResponse<Creative>>(
|
||||
`/workspaces/${workspaceId}/creatives`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Get creative details
|
||||
* Get single creative
|
||||
*/
|
||||
get: (id: string) => api.get<Creative>(`/creatives/${id}`),
|
||||
get: (workspaceId: string, creativeId: string) =>
|
||||
api.get<Creative>(`/workspaces/${workspaceId}/creatives/${creativeId}`),
|
||||
|
||||
/**
|
||||
* Create new creative
|
||||
* @param projectId - Required query param for the project
|
||||
*/
|
||||
create: (data: CreativeCreateRequest) =>
|
||||
api.post<Creative>("/creatives", data),
|
||||
create: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
data: CreativeCreateRequest
|
||||
) =>
|
||||
api.post<Creative>(`/workspaces/${workspaceId}/creatives`, data, {
|
||||
params: { project_id: projectId },
|
||||
}),
|
||||
|
||||
/**
|
||||
* Update creative
|
||||
*/
|
||||
update: (id: string, data: CreativeUpdateRequest) =>
|
||||
api.patch<Creative>(`/creatives/${id}`, data),
|
||||
update: (
|
||||
workspaceId: string,
|
||||
creativeId: string,
|
||||
data: CreativeUpdateRequest
|
||||
) =>
|
||||
api.patch<Creative>(
|
||||
`/workspaces/${workspaceId}/creatives/${creativeId}`,
|
||||
data
|
||||
),
|
||||
|
||||
/**
|
||||
* Delete creative
|
||||
* Delete (archive) creative
|
||||
*/
|
||||
delete: (id: string) => api.delete<SuccessResponse>(`/creatives/${id}`),
|
||||
delete: (workspaceId: string, creativeId: string) =>
|
||||
api.delete<void>(`/workspaces/${workspaceId}/creatives/${creativeId}`),
|
||||
};
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
// ============================================================================
|
||||
// External Channels API
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
ExternalChannel,
|
||||
ExternalChannelsListResponse,
|
||||
ExternalChannelCreateRequest,
|
||||
ExternalChannelUpdateRequest,
|
||||
ExternalChannelLinksUpdateRequest,
|
||||
SuccessResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const externalChannelsApi = {
|
||||
/**
|
||||
* Get list of external channels for target channel
|
||||
* GET /api/v1/external_channels/target/{target_channel_id}
|
||||
*/
|
||||
list: (targetChannelId: string) =>
|
||||
api.get<ExternalChannelsListResponse>(
|
||||
`/external_channels/target/${targetChannelId}`
|
||||
),
|
||||
|
||||
/**
|
||||
* Create new external channel
|
||||
* POST /api/v1/external_channels
|
||||
*/
|
||||
create: (data: ExternalChannelCreateRequest) =>
|
||||
api.post<ExternalChannel>("/external_channels", data),
|
||||
|
||||
/**
|
||||
* Update external channel
|
||||
* PATCH /api/v1/external_channels/{channel_id}
|
||||
*/
|
||||
update: (id: string, data: ExternalChannelUpdateRequest) =>
|
||||
api.patch<ExternalChannel>(`/external_channels/${id}`, data),
|
||||
|
||||
/**
|
||||
* Update external channel links
|
||||
* PATCH /api/v1/external_channels/{channel_id}/links
|
||||
*/
|
||||
updateLinks: (id: string, data: ExternalChannelLinksUpdateRequest) =>
|
||||
api.patch<ExternalChannel>(`/external_channels/${id}/links`, data),
|
||||
|
||||
/**
|
||||
* Delete external channel
|
||||
* DELETE /api/v1/external_channels/{channel_id}
|
||||
*/
|
||||
delete: (id: string) =>
|
||||
api.delete<SuccessResponse>(`/external_channels/${id}`),
|
||||
};
|
||||
@@ -1,11 +1,15 @@
|
||||
// ============================================================================
|
||||
// API Export
|
||||
// API Exports
|
||||
// ============================================================================
|
||||
|
||||
export * from "./client";
|
||||
export * from "./auth";
|
||||
export * from "./channels";
|
||||
export * from "./external-channels";
|
||||
export * from "./creatives";
|
||||
export * from "./placements";
|
||||
export * from "./analytics";
|
||||
export { api, apiRequest, clearAuthTokens, saveAuthTokens } from "./client";
|
||||
export { authApi } from "./auth";
|
||||
export { workspacesApi } from "./workspaces";
|
||||
export { membersApi } from "./members";
|
||||
export { invitesApi } from "./invites";
|
||||
export { projectsApi } from "./projects";
|
||||
export { channelsApi } from "./channels";
|
||||
export { purchasePlanApi } from "./purchase-plan";
|
||||
export { creativesApi } from "./creatives";
|
||||
export { placementsApi } from "./placements";
|
||||
export { analyticsApi } from "./analytics";
|
||||
|
||||
29
lib/api/invites.ts
Normal file
29
lib/api/invites.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
// ============================================================================
|
||||
// Workspace Invites API
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
WorkspaceInvite,
|
||||
WorkspaceInviteCreateRequest,
|
||||
PaginatedResponse,
|
||||
PaginationParams,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const invitesApi = {
|
||||
/**
|
||||
* Get list of workspace invites
|
||||
*/
|
||||
list: (workspaceId: string, params?: PaginationParams) =>
|
||||
api.get<PaginatedResponse<WorkspaceInvite>>(
|
||||
`/workspaces/${workspaceId}/invites`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Create new invite
|
||||
*/
|
||||
create: (workspaceId: string, data: WorkspaceInviteCreateRequest) =>
|
||||
api.post<WorkspaceInvite>(`/workspaces/${workspaceId}/invites`, data),
|
||||
};
|
||||
|
||||
36
lib/api/members.ts
Normal file
36
lib/api/members.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
// ============================================================================
|
||||
// Workspace Members API
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
WorkspaceMember,
|
||||
UpdatePermissionsRequest,
|
||||
PaginatedResponse,
|
||||
PaginationParams,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const membersApi = {
|
||||
/**
|
||||
* Get list of workspace members
|
||||
*/
|
||||
list: (workspaceId: string, params?: PaginationParams) =>
|
||||
api.get<PaginatedResponse<WorkspaceMember>>(
|
||||
`/workspaces/${workspaceId}/members`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Update member permissions
|
||||
*/
|
||||
updatePermissions: (
|
||||
workspaceId: string,
|
||||
userId: string,
|
||||
data: UpdatePermissionsRequest
|
||||
) =>
|
||||
api.put<WorkspaceMember>(
|
||||
`/workspaces/${workspaceId}/members/${userId}/permissions`,
|
||||
data
|
||||
),
|
||||
};
|
||||
|
||||
@@ -5,69 +5,65 @@
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
Placement,
|
||||
PlacementQueryParams,
|
||||
PlacementCreateRequest,
|
||||
PlacementUpdateRequest,
|
||||
PlacementsListResponse,
|
||||
ViewsFetchResponse,
|
||||
ViewsHistoryResponse,
|
||||
SuccessResponse,
|
||||
PlacementsQueryParams,
|
||||
ViewsHistoryItem,
|
||||
ViewsHistoryQueryParams,
|
||||
PaginatedResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
export const placementsApi = {
|
||||
/**
|
||||
* Get list of placements
|
||||
* Get list of placements for workspace
|
||||
*/
|
||||
list: (params?: PlacementQueryParams) =>
|
||||
api.get<PlacementsListResponse>("/placements", { params }),
|
||||
list: (workspaceId: string, params?: PlacementsQueryParams) =>
|
||||
api.get<PaginatedResponse<Placement>>(
|
||||
`/workspaces/${workspaceId}/placements`,
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Get placement details
|
||||
* Get single placement
|
||||
*/
|
||||
get: (id: string) => api.get<Placement>(`/placements/${id}`),
|
||||
get: (workspaceId: string, placementId: string) =>
|
||||
api.get<Placement>(`/workspaces/${workspaceId}/placements/${placementId}`),
|
||||
|
||||
/**
|
||||
* Create new placement
|
||||
*/
|
||||
create: (data: PlacementCreateRequest) =>
|
||||
api.post<Placement>("/placements", data),
|
||||
create: (workspaceId: string, data: PlacementCreateRequest) =>
|
||||
api.post<Placement>(`/workspaces/${workspaceId}/placements`, data),
|
||||
|
||||
/**
|
||||
* Update placement
|
||||
*/
|
||||
update: (id: string, data: PlacementUpdateRequest) =>
|
||||
api.patch<Placement>(`/placements/${id}`, data),
|
||||
update: (
|
||||
workspaceId: string,
|
||||
placementId: string,
|
||||
data: PlacementUpdateRequest
|
||||
) =>
|
||||
api.patch<Placement>(
|
||||
`/workspaces/${workspaceId}/placements/${placementId}`,
|
||||
data
|
||||
),
|
||||
|
||||
/**
|
||||
* Delete placement
|
||||
* Delete (archive) placement
|
||||
*/
|
||||
delete: (id: string) => api.delete<SuccessResponse>(`/placements/${id}`),
|
||||
|
||||
/**
|
||||
* Fetch views for placement
|
||||
*/
|
||||
fetchViews: (id: string) =>
|
||||
api.post<ViewsFetchResponse>(`/placements/${id}/views/fetch`),
|
||||
delete: (workspaceId: string, placementId: string) =>
|
||||
api.delete<void>(`/workspaces/${workspaceId}/placements/${placementId}`),
|
||||
|
||||
/**
|
||||
* Get views history for placement
|
||||
*/
|
||||
viewsHistory: (
|
||||
id: string,
|
||||
params?: { from_date?: string; to_date?: string }
|
||||
getViewsHistory: (
|
||||
workspaceId: string,
|
||||
placementId: string,
|
||||
params?: ViewsHistoryQueryParams
|
||||
) =>
|
||||
api.get<ViewsHistoryResponse>(`/placements/${id}/views/history`, {
|
||||
params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Set views manually
|
||||
*/
|
||||
setViewsManually: (id: string, views_count: number) =>
|
||||
api.post<Placement>(`/placements/${id}/views/manual`, null, {
|
||||
params: { views_count },
|
||||
}),
|
||||
api.get<PaginatedResponse<ViewsHistoryItem>>(
|
||||
`/workspaces/${workspaceId}/placements/${placementId}/views/history`,
|
||||
{ params }
|
||||
),
|
||||
};
|
||||
|
||||
// Keep purchasesApi as an alias for backwards compatibility
|
||||
export const purchasesApi = placementsApi;
|
||||
|
||||
19
lib/api/projects.ts
Normal file
19
lib/api/projects.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
// ============================================================================
|
||||
// Projects API (Target Channels)
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type { Project, PaginatedResponse, PaginationParams } from "@/lib/types/api";
|
||||
|
||||
export const projectsApi = {
|
||||
/**
|
||||
* Get list of projects for workspace
|
||||
* Projects are created via Telegram bot (add/remove channel)
|
||||
*/
|
||||
list: (workspaceId: string, params?: PaginationParams) =>
|
||||
api.get<PaginatedResponse<Project>>(
|
||||
`/workspaces/${workspaceId}/projects`,
|
||||
{ params }
|
||||
),
|
||||
};
|
||||
|
||||
61
lib/api/purchase-plan.ts
Normal file
61
lib/api/purchase-plan.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
// ============================================================================
|
||||
// Purchase Plan API
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
PurchasePlanChannel,
|
||||
PurchasePlanChannelCreateRequest,
|
||||
PurchasePlanChannelUpdateRequest,
|
||||
PaginatedResponse,
|
||||
PaginationParams,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
const buildPath = (workspaceId: string, projectId: string) =>
|
||||
`/workspaces/${workspaceId}/projects/${projectId}/purchase-plan/channels`;
|
||||
|
||||
export const purchasePlanApi = {
|
||||
/**
|
||||
* Get list of channels in purchase plan
|
||||
*/
|
||||
list: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
params?: PaginationParams
|
||||
) =>
|
||||
api.get<PaginatedResponse<PurchasePlanChannel>>(
|
||||
buildPath(workspaceId, projectId),
|
||||
{ params }
|
||||
),
|
||||
|
||||
/**
|
||||
* Add channel to purchase plan
|
||||
*/
|
||||
create: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
data: PurchasePlanChannelCreateRequest
|
||||
) =>
|
||||
api.post<PurchasePlanChannel>(buildPath(workspaceId, projectId), data),
|
||||
|
||||
/**
|
||||
* Update channel in purchase plan
|
||||
*/
|
||||
update: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
channelId: string,
|
||||
data: PurchasePlanChannelUpdateRequest
|
||||
) =>
|
||||
api.patch<PurchasePlanChannel>(
|
||||
`${buildPath(workspaceId, projectId)}/${channelId}`,
|
||||
data
|
||||
),
|
||||
|
||||
/**
|
||||
* Remove channel from purchase plan
|
||||
*/
|
||||
delete: (workspaceId: string, projectId: string, channelId: string) =>
|
||||
api.delete<void>(`${buildPath(workspaceId, projectId)}/${channelId}`),
|
||||
};
|
||||
|
||||
41
lib/api/workspaces.ts
Normal file
41
lib/api/workspaces.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
// ============================================================================
|
||||
// Workspaces API
|
||||
// ============================================================================
|
||||
|
||||
import { api } from "./client";
|
||||
import type {
|
||||
Workspace,
|
||||
WorkspaceCreateRequest,
|
||||
WorkspaceUpdateRequest,
|
||||
PaginatedResponse,
|
||||
PaginationParams,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
const BASE_PATH = "/workspaces";
|
||||
|
||||
export const workspacesApi = {
|
||||
/**
|
||||
* Get list of workspaces for current user
|
||||
*/
|
||||
list: (params?: PaginationParams) =>
|
||||
api.get<PaginatedResponse<Workspace>>(BASE_PATH, { params }),
|
||||
|
||||
/**
|
||||
* Create new workspace
|
||||
*/
|
||||
create: (data: WorkspaceCreateRequest) =>
|
||||
api.post<Workspace>(BASE_PATH, data),
|
||||
|
||||
/**
|
||||
* Update workspace
|
||||
*/
|
||||
update: (workspaceId: string, data: WorkspaceUpdateRequest) =>
|
||||
api.patch<Workspace>(`${BASE_PATH}/${workspaceId}`, data),
|
||||
|
||||
/**
|
||||
* Delete workspace
|
||||
*/
|
||||
delete: (workspaceId: string) =>
|
||||
api.delete<void>(`${BASE_PATH}/${workspaceId}`),
|
||||
};
|
||||
|
||||
196
lib/demo/api.ts
Normal file
196
lib/demo/api.ts
Normal file
@@ -0,0 +1,196 @@
|
||||
// ============================================================================
|
||||
// Demo API - Mock responses for demo mode
|
||||
// ============================================================================
|
||||
|
||||
import type {
|
||||
PaginatedResponse,
|
||||
Workspace,
|
||||
Project,
|
||||
Channel,
|
||||
Creative,
|
||||
Placement,
|
||||
PurchasePlanChannel,
|
||||
WorkspaceMember,
|
||||
SpendingAnalytics,
|
||||
CreativeAnalyticsItem,
|
||||
ChannelAnalyticsItem,
|
||||
} from "@/lib/types/api";
|
||||
import {
|
||||
demoWorkspace,
|
||||
demoMember,
|
||||
demoProjects,
|
||||
demoChannels,
|
||||
demoCreatives,
|
||||
demoPlacements,
|
||||
demoPurchasePlanChannels,
|
||||
demoSpendingAnalytics,
|
||||
demoCreativeAnalytics,
|
||||
demoChannelAnalytics,
|
||||
} from "./mock-data";
|
||||
import { DEMO_USER } from "./constants";
|
||||
|
||||
// ============================================================================
|
||||
// Helper to create paginated response
|
||||
// ============================================================================
|
||||
|
||||
const paginate = <T>(items: T[], page = 1, size = 50): PaginatedResponse<T> => ({
|
||||
items: items.slice((page - 1) * size, page * size),
|
||||
total: items.length,
|
||||
page,
|
||||
size,
|
||||
pages: Math.ceil(items.length / size),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Demo API Methods
|
||||
// ============================================================================
|
||||
|
||||
export const demoApi = {
|
||||
// Auth
|
||||
auth: {
|
||||
me: () => Promise.resolve(DEMO_USER),
|
||||
},
|
||||
|
||||
// Workspaces
|
||||
workspaces: {
|
||||
list: () => Promise.resolve(paginate([demoWorkspace])),
|
||||
get: () => Promise.resolve(demoWorkspace),
|
||||
},
|
||||
|
||||
// Members
|
||||
members: {
|
||||
list: () => Promise.resolve(paginate([demoMember])),
|
||||
},
|
||||
|
||||
// Projects
|
||||
projects: {
|
||||
list: (params?: { project_id?: string }) => {
|
||||
let items = demoProjects;
|
||||
if (params?.project_id) {
|
||||
items = items.filter((p) => p.id === params.project_id);
|
||||
}
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
},
|
||||
|
||||
// Channels
|
||||
channels: {
|
||||
list: () => Promise.resolve(paginate(demoChannels)),
|
||||
},
|
||||
|
||||
// Creatives
|
||||
creatives: {
|
||||
list: (params?: { project_id?: string; include_archived?: boolean }) => {
|
||||
let items = demoCreatives;
|
||||
if (params?.project_id) {
|
||||
items = items.filter((c) => c.project_id === params.project_id);
|
||||
}
|
||||
if (!params?.include_archived) {
|
||||
items = items.filter((c) => c.status === "active");
|
||||
}
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
get: (id: string) => {
|
||||
const creative = demoCreatives.find((c) => c.id === id);
|
||||
if (!creative) throw new Error("Creative not found");
|
||||
return Promise.resolve(creative);
|
||||
},
|
||||
},
|
||||
|
||||
// Placements
|
||||
placements: {
|
||||
list: (params?: {
|
||||
project_id?: string;
|
||||
placement_channel_id?: string;
|
||||
creative_id?: string;
|
||||
include_archived?: boolean;
|
||||
}) => {
|
||||
let items = demoPlacements;
|
||||
if (params?.project_id) {
|
||||
items = items.filter((p) => p.project_id === params.project_id);
|
||||
}
|
||||
if (params?.placement_channel_id) {
|
||||
items = items.filter(
|
||||
(p) => p.placement_channel_id === params.placement_channel_id
|
||||
);
|
||||
}
|
||||
if (params?.creative_id) {
|
||||
items = items.filter((p) => p.creative_id === params.creative_id);
|
||||
}
|
||||
if (!params?.include_archived) {
|
||||
items = items.filter((p) => p.status === "active");
|
||||
}
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
get: (id: string) => {
|
||||
const placement = demoPlacements.find((p) => p.id === id);
|
||||
if (!placement) throw new Error("Placement not found");
|
||||
return Promise.resolve(placement);
|
||||
},
|
||||
},
|
||||
|
||||
// Purchase Plan
|
||||
purchasePlan: {
|
||||
list: (projectId: string) => {
|
||||
const items = demoPurchasePlanChannels[projectId] || [];
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
},
|
||||
|
||||
// Analytics
|
||||
analytics: {
|
||||
spending: (params?: { project_id?: string; grouping?: string }) => {
|
||||
// Filter by project if specified
|
||||
if (params?.project_id) {
|
||||
const projectPlacements = demoPlacements.filter(
|
||||
(p) => p.project_id === params.project_id && p.status === "active"
|
||||
);
|
||||
const totalCost = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.cost || 0),
|
||||
0
|
||||
);
|
||||
const totalSubs = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.subscriptions_count || 0),
|
||||
0
|
||||
);
|
||||
const totalViews = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.views_count || 0),
|
||||
0
|
||||
);
|
||||
|
||||
return Promise.resolve({
|
||||
total_cost: totalCost,
|
||||
total_subscriptions: totalSubs,
|
||||
total_views: totalViews,
|
||||
avg_cpf: totalSubs > 0 ? totalCost / totalSubs : null,
|
||||
avg_cpm: totalViews > 0 ? (totalCost / totalViews) * 1000 : null,
|
||||
chart_data: demoSpendingAnalytics.chart_data.slice(0, 3),
|
||||
} as SpendingAnalytics);
|
||||
}
|
||||
return Promise.resolve(demoSpendingAnalytics);
|
||||
},
|
||||
creatives: (params?: { project_id?: string }) => {
|
||||
let items = demoCreativeAnalytics;
|
||||
if (params?.project_id) {
|
||||
const projectCreativeIds = demoCreatives
|
||||
.filter((c) => c.project_id === params.project_id)
|
||||
.map((c) => c.id);
|
||||
items = items.filter((a) => projectCreativeIds.includes(a.id));
|
||||
}
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
channels: (params?: { project_id?: string }) => {
|
||||
let items = demoChannelAnalytics;
|
||||
if (params?.project_id) {
|
||||
const projectPlacementChannelIds = new Set(
|
||||
demoPlacements
|
||||
.filter((p) => p.project_id === params.project_id)
|
||||
.map((p) => p.placement_channel_id)
|
||||
);
|
||||
items = items.filter((a) => projectPlacementChannelIds.has(a.channel_id));
|
||||
}
|
||||
return Promise.resolve(paginate(items));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
25
lib/demo/constants.ts
Normal file
25
lib/demo/constants.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
// ============================================================================
|
||||
// Demo Mode Constants
|
||||
// ============================================================================
|
||||
|
||||
// Demo workspace ID - красивый и запоминающийся
|
||||
export const DEMO_WORKSPACE_ID = "demo";
|
||||
|
||||
// Check if workspace is demo
|
||||
export const isDemoWorkspace = (workspaceId: string | undefined): boolean => {
|
||||
return workspaceId === DEMO_WORKSPACE_ID;
|
||||
};
|
||||
|
||||
// Demo user
|
||||
export const DEMO_USER = {
|
||||
id: "demo-user-0000-0000-000000000000",
|
||||
telegram_id: 123456789,
|
||||
username: "demo_user",
|
||||
};
|
||||
|
||||
// Demo workspace
|
||||
export const DEMO_WORKSPACE = {
|
||||
id: DEMO_WORKSPACE_ID,
|
||||
name: "Демо Workspace",
|
||||
};
|
||||
|
||||
309
lib/demo/demo-aware-api.ts
Normal file
309
lib/demo/demo-aware-api.ts
Normal file
@@ -0,0 +1,309 @@
|
||||
// ============================================================================
|
||||
// Demo-Aware API Wrapper
|
||||
// ============================================================================
|
||||
// This wrapper checks if the workspace is demo and returns mock data instead
|
||||
|
||||
import { isDemoWorkspace, DEMO_WORKSPACE_ID } from "./constants";
|
||||
import {
|
||||
demoChannels,
|
||||
demoCreatives,
|
||||
demoPlacements,
|
||||
demoPurchasePlanChannels,
|
||||
demoSpendingAnalytics,
|
||||
demoCreativeAnalytics,
|
||||
demoChannelAnalytics,
|
||||
demoProjects,
|
||||
demoWorkspace,
|
||||
demoMember,
|
||||
} from "./mock-data";
|
||||
import type {
|
||||
PaginatedResponse,
|
||||
Channel,
|
||||
Creative,
|
||||
Placement,
|
||||
PurchasePlanChannel,
|
||||
SpendingAnalytics,
|
||||
CreativeAnalyticsItem,
|
||||
ChannelAnalyticsItem,
|
||||
Project,
|
||||
Workspace,
|
||||
WorkspaceMember,
|
||||
DateGrouping,
|
||||
} from "@/lib/types/api";
|
||||
import {
|
||||
workspacesApi,
|
||||
projectsApi,
|
||||
channelsApi,
|
||||
creativesApi,
|
||||
placementsApi,
|
||||
purchasePlanApi,
|
||||
analyticsApi,
|
||||
membersApi,
|
||||
} from "@/lib/api";
|
||||
|
||||
// ============================================================================
|
||||
// Helper
|
||||
// ============================================================================
|
||||
|
||||
const paginate = <T>(items: T[], page = 1, size = 50): PaginatedResponse<T> => ({
|
||||
items: items.slice((page - 1) * size, page * size),
|
||||
total: items.length,
|
||||
page,
|
||||
size,
|
||||
pages: Math.ceil(items.length / size),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Workspaces API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareWorkspacesApi = {
|
||||
list: async (params?: { page?: number; size?: number }) => {
|
||||
// Always include demo workspace in list for demo mode
|
||||
return workspacesApi.list(params);
|
||||
},
|
||||
get: async (workspaceId: string): Promise<Workspace> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
return demoWorkspace;
|
||||
}
|
||||
// Workspaces API doesn't have get method, fetch from list
|
||||
const response = await workspacesApi.list({ size: 100 });
|
||||
const workspace = response.items.find(w => w.id === workspaceId);
|
||||
if (!workspace) throw new Error("Workspace not found");
|
||||
return workspace;
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Projects API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareProjectsApi = {
|
||||
list: async (
|
||||
workspaceId: string,
|
||||
params?: { page?: number; size?: number }
|
||||
): Promise<PaginatedResponse<Project>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
return paginate(demoProjects, params?.page, params?.size);
|
||||
}
|
||||
return projectsApi.list(workspaceId, params);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Members API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareMembersApi = {
|
||||
list: async (
|
||||
workspaceId: string,
|
||||
params?: { page?: number; size?: number }
|
||||
): Promise<PaginatedResponse<WorkspaceMember>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
return paginate([demoMember], params?.page, params?.size);
|
||||
}
|
||||
return membersApi.list(workspaceId, params);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Channels API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareChannelsApi = {
|
||||
list: async (params?: {
|
||||
page?: number;
|
||||
size?: number;
|
||||
username?: string;
|
||||
}): Promise<PaginatedResponse<Channel>> => {
|
||||
// Channels are global, check if we're in demo context via some mechanism
|
||||
// For now, always return real data - demo channels are handled per-workspace
|
||||
return channelsApi.list(params);
|
||||
},
|
||||
listForDemo: (): PaginatedResponse<Channel> => {
|
||||
return paginate(demoChannels);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Creatives API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareCreativesApi = {
|
||||
list: async (
|
||||
workspaceId: string,
|
||||
params?: {
|
||||
project_id?: string;
|
||||
include_archived?: boolean;
|
||||
page?: number;
|
||||
size?: number;
|
||||
}
|
||||
): Promise<PaginatedResponse<Creative>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
let items = demoCreatives;
|
||||
if (params?.project_id) {
|
||||
items = items.filter((c) => c.project_id === params.project_id);
|
||||
}
|
||||
if (!params?.include_archived) {
|
||||
items = items.filter((c) => c.status === "active");
|
||||
}
|
||||
return paginate(items, params?.page, params?.size);
|
||||
}
|
||||
return creativesApi.list(workspaceId, params);
|
||||
},
|
||||
get: async (workspaceId: string, creativeId: string): Promise<Creative> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
const creative = demoCreatives.find((c) => c.id === creativeId);
|
||||
if (!creative) throw new Error("Creative not found");
|
||||
return creative;
|
||||
}
|
||||
return creativesApi.get(workspaceId, creativeId);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Placements API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwarePlacementsApi = {
|
||||
list: async (
|
||||
workspaceId: string,
|
||||
params?: {
|
||||
project_id?: string;
|
||||
placement_channel_id?: string;
|
||||
creative_id?: string;
|
||||
include_archived?: boolean;
|
||||
page?: number;
|
||||
size?: number;
|
||||
}
|
||||
): Promise<PaginatedResponse<Placement>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
let items = demoPlacements;
|
||||
if (params?.project_id) {
|
||||
items = items.filter((p) => p.project_id === params.project_id);
|
||||
}
|
||||
if (params?.placement_channel_id) {
|
||||
items = items.filter(
|
||||
(p) => p.placement_channel_id === params.placement_channel_id
|
||||
);
|
||||
}
|
||||
if (params?.creative_id) {
|
||||
items = items.filter((p) => p.creative_id === params.creative_id);
|
||||
}
|
||||
if (!params?.include_archived) {
|
||||
items = items.filter((p) => p.status === "active");
|
||||
}
|
||||
return paginate(items, params?.page, params?.size);
|
||||
}
|
||||
return placementsApi.list(workspaceId, params);
|
||||
},
|
||||
get: async (workspaceId: string, placementId: 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);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Purchase Plan API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwarePurchasePlanApi = {
|
||||
list: async (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
params?: { page?: number; size?: number }
|
||||
): Promise<PaginatedResponse<PurchasePlanChannel>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
const items = demoPurchasePlanChannels[projectId] || [];
|
||||
return paginate(items, params?.page, params?.size);
|
||||
}
|
||||
return purchasePlanApi.list(workspaceId, projectId, params);
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Demo-Aware Analytics API
|
||||
// ============================================================================
|
||||
|
||||
export const demoAwareAnalyticsApi = {
|
||||
spending: async (
|
||||
workspaceId: string,
|
||||
params?: {
|
||||
project_id?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
grouping?: DateGrouping;
|
||||
}
|
||||
): Promise<SpendingAnalytics> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
if (params?.project_id) {
|
||||
const projectPlacements = demoPlacements.filter(
|
||||
(p) => p.project_id === params.project_id && p.status === "active"
|
||||
);
|
||||
const totalCost = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.cost || 0),
|
||||
0
|
||||
);
|
||||
const totalSubs = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.subscriptions_count || 0),
|
||||
0
|
||||
);
|
||||
const totalViews = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.views_count || 0),
|
||||
0
|
||||
);
|
||||
return {
|
||||
total_cost: totalCost,
|
||||
total_subscriptions: totalSubs,
|
||||
total_views: totalViews,
|
||||
avg_cpf: totalSubs > 0 ? totalCost / totalSubs : null,
|
||||
avg_cpm: totalViews > 0 ? (totalCost / totalViews) * 1000 : null,
|
||||
chart_data: demoSpendingAnalytics.chart_data.slice(0, 4),
|
||||
};
|
||||
}
|
||||
return demoSpendingAnalytics;
|
||||
}
|
||||
return analyticsApi.spending(workspaceId, params);
|
||||
},
|
||||
creatives: async (
|
||||
workspaceId: string,
|
||||
params?: { project_id?: string; page?: number; size?: number }
|
||||
): Promise<PaginatedResponse<CreativeAnalyticsItem>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
let items = demoCreativeAnalytics;
|
||||
if (params?.project_id) {
|
||||
const projectCreativeIds = demoCreatives
|
||||
.filter((c) => c.project_id === params.project_id)
|
||||
.map((c) => c.id);
|
||||
items = items.filter((a) => projectCreativeIds.includes(a.id));
|
||||
}
|
||||
return paginate(items, params?.page, params?.size);
|
||||
}
|
||||
return analyticsApi.creatives(workspaceId, params);
|
||||
},
|
||||
channels: async (
|
||||
workspaceId: string,
|
||||
params?: { project_id?: string; page?: number; size?: number }
|
||||
): Promise<PaginatedResponse<ChannelAnalyticsItem>> => {
|
||||
if (isDemoWorkspace(workspaceId)) {
|
||||
let items = demoChannelAnalytics;
|
||||
if (params?.project_id) {
|
||||
const projectPlacementChannelIds = new Set(
|
||||
demoPlacements
|
||||
.filter((p) => p.project_id === params.project_id)
|
||||
.map((p) => p.placement_channel_id)
|
||||
);
|
||||
items = items.filter((a) =>
|
||||
projectPlacementChannelIds.has(a.channel_id)
|
||||
);
|
||||
}
|
||||
return paginate(items, params?.page, params?.size);
|
||||
}
|
||||
return analyticsApi.channels(workspaceId, params);
|
||||
},
|
||||
};
|
||||
|
||||
272
lib/demo/hooks.ts
Normal file
272
lib/demo/hooks.ts
Normal file
@@ -0,0 +1,272 @@
|
||||
// ============================================================================
|
||||
// Demo Mode Hooks
|
||||
// ============================================================================
|
||||
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
import { demoApi } from "./api";
|
||||
import {
|
||||
demoChannels,
|
||||
demoCreatives,
|
||||
demoPlacements,
|
||||
demoPurchasePlanChannels,
|
||||
demoSpendingAnalytics,
|
||||
demoCreativeAnalytics,
|
||||
demoChannelAnalytics,
|
||||
} from "./mock-data";
|
||||
import type {
|
||||
Channel,
|
||||
Creative,
|
||||
Placement,
|
||||
PurchasePlanChannel,
|
||||
SpendingAnalytics,
|
||||
CreativeAnalyticsItem,
|
||||
ChannelAnalyticsItem,
|
||||
PaginatedResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface UseDemoDataResult<T> {
|
||||
data: T | null;
|
||||
isDemo: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Check if should use demo mode
|
||||
// ============================================================================
|
||||
|
||||
export const useIsDemoMode = (): boolean => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
return isDemoMode;
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo channels
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoChannels = (): UseDemoDataResult<PaginatedResponse<Channel>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
return {
|
||||
data: {
|
||||
items: demoChannels,
|
||||
total: demoChannels.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo creatives
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoCreatives = (
|
||||
projectId?: string
|
||||
): UseDemoDataResult<PaginatedResponse<Creative>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
let items = demoCreatives;
|
||||
if (projectId) {
|
||||
items = items.filter((c) => c.project_id === projectId);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
items,
|
||||
total: items.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo placements
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoPlacements = (
|
||||
projectId?: string
|
||||
): UseDemoDataResult<PaginatedResponse<Placement>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
let items = demoPlacements;
|
||||
if (projectId) {
|
||||
items = items.filter((p) => p.project_id === projectId);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
items,
|
||||
total: items.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo purchase plan
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoPurchasePlan = (
|
||||
projectId: string
|
||||
): UseDemoDataResult<PaginatedResponse<PurchasePlanChannel>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
const items = demoPurchasePlanChannels[projectId] || [];
|
||||
|
||||
return {
|
||||
data: {
|
||||
items,
|
||||
total: items.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo spending analytics
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoSpendingAnalytics = (
|
||||
projectId?: string
|
||||
): UseDemoDataResult<SpendingAnalytics> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
if (projectId) {
|
||||
// Filter by project
|
||||
const projectPlacements = demoPlacements.filter(
|
||||
(p) => p.project_id === projectId && p.status === "active"
|
||||
);
|
||||
const totalCost = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.cost || 0),
|
||||
0
|
||||
);
|
||||
const totalSubs = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.subscriptions_count || 0),
|
||||
0
|
||||
);
|
||||
const totalViews = projectPlacements.reduce(
|
||||
(sum, p) => sum + (p.views_count || 0),
|
||||
0
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
total_cost: totalCost,
|
||||
total_subscriptions: totalSubs,
|
||||
total_views: totalViews,
|
||||
avg_cpf: totalSubs > 0 ? totalCost / totalSubs : null,
|
||||
avg_cpm: totalViews > 0 ? (totalCost / totalViews) * 1000 : null,
|
||||
chart_data: demoSpendingAnalytics.chart_data.slice(0, 3),
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
data: demoSpendingAnalytics,
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo creative analytics
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoCreativeAnalytics = (
|
||||
projectId?: string
|
||||
): UseDemoDataResult<PaginatedResponse<CreativeAnalyticsItem>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
let items = demoCreativeAnalytics;
|
||||
if (projectId) {
|
||||
const projectCreativeIds = demoCreatives
|
||||
.filter((c) => c.project_id === projectId)
|
||||
.map((c) => c.id);
|
||||
items = items.filter((a) => projectCreativeIds.includes(a.id));
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
items,
|
||||
total: items.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Hook: Get demo channel analytics
|
||||
// ============================================================================
|
||||
|
||||
export const useDemoChannelAnalytics = (
|
||||
projectId?: string
|
||||
): UseDemoDataResult<PaginatedResponse<ChannelAnalyticsItem>> => {
|
||||
const { isDemoMode } = useWorkspace();
|
||||
|
||||
if (isDemoMode) {
|
||||
let items = demoChannelAnalytics;
|
||||
if (projectId) {
|
||||
const projectPlacementChannelIds = new Set(
|
||||
demoPlacements
|
||||
.filter((p) => p.project_id === projectId)
|
||||
.map((p) => p.placement_channel_id)
|
||||
);
|
||||
items = items.filter((a) => projectPlacementChannelIds.has(a.channel_id));
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
items,
|
||||
total: items.length,
|
||||
page: 1,
|
||||
size: 50,
|
||||
pages: 1,
|
||||
},
|
||||
isDemo: true,
|
||||
};
|
||||
}
|
||||
|
||||
return { data: null, isDemo: false };
|
||||
};
|
||||
|
||||
10
lib/demo/index.ts
Normal file
10
lib/demo/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
// ============================================================================
|
||||
// Demo Module Exports
|
||||
// ============================================================================
|
||||
|
||||
export * from "./constants";
|
||||
export * from "./mock-data";
|
||||
export { demoApi } from "./api";
|
||||
export * from "./hooks";
|
||||
export * from "./demo-aware-api";
|
||||
|
||||
583
lib/demo/mock-data.ts
Normal file
583
lib/demo/mock-data.ts
Normal file
@@ -0,0 +1,583 @@
|
||||
// ============================================================================
|
||||
// Demo Mock Data
|
||||
// ============================================================================
|
||||
|
||||
import type {
|
||||
Workspace,
|
||||
Project,
|
||||
Channel,
|
||||
Creative,
|
||||
Placement,
|
||||
PurchasePlanChannel,
|
||||
WorkspaceMember,
|
||||
Permission,
|
||||
SpendingAnalytics,
|
||||
CreativeAnalyticsItem,
|
||||
ChannelAnalyticsItem,
|
||||
} from "@/lib/types/api";
|
||||
import { DEMO_WORKSPACE_ID, DEMO_USER } from "./constants";
|
||||
|
||||
// ============================================================================
|
||||
// Workspace & User
|
||||
// ============================================================================
|
||||
|
||||
export const demoWorkspace: Workspace = {
|
||||
id: DEMO_WORKSPACE_ID,
|
||||
name: "Демо Workspace",
|
||||
};
|
||||
|
||||
export const demoMember: WorkspaceMember = {
|
||||
id: "demo-member-0000-0000-000000000001",
|
||||
user: {
|
||||
id: DEMO_USER.id,
|
||||
telegram_id: DEMO_USER.telegram_id,
|
||||
username: DEMO_USER.username,
|
||||
},
|
||||
status: "active",
|
||||
permissions: [{ key: "admin_full" }],
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Projects (Target Channels)
|
||||
// ============================================================================
|
||||
|
||||
export const demoProjects: Project[] = [
|
||||
{
|
||||
id: "proj-0001-0000-0000-000000000001",
|
||||
telegram_id: -1001234567001,
|
||||
title: "Крипто Новости",
|
||||
username: "crypto_news_demo",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "proj-0002-0000-0000-000000000002",
|
||||
telegram_id: -1001234567002,
|
||||
title: "IT Вакансии",
|
||||
username: "it_jobs_demo",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "proj-0003-0000-0000-000000000003",
|
||||
telegram_id: -1001234567003,
|
||||
title: "Стартапы и Бизнес",
|
||||
username: "startups_demo",
|
||||
status: "active",
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Channels (External Channels for placements)
|
||||
// ============================================================================
|
||||
|
||||
export const demoChannels: Channel[] = [
|
||||
{
|
||||
id: "chan-0001-0000-0000-000000000001",
|
||||
telegram_id: -1002345678001,
|
||||
title: "Технологии Будущего",
|
||||
username: "tech_future",
|
||||
description: "Новости о технологиях и инновациях",
|
||||
subscribers_count: 125000,
|
||||
},
|
||||
{
|
||||
id: "chan-0002-0000-0000-000000000002",
|
||||
telegram_id: -1002345678002,
|
||||
title: "Инвестиции Pro",
|
||||
username: "invest_pro",
|
||||
description: "Аналитика и инвестиционные идеи",
|
||||
subscribers_count: 89000,
|
||||
},
|
||||
{
|
||||
id: "chan-0003-0000-0000-000000000003",
|
||||
telegram_id: -1002345678003,
|
||||
title: "Программисты",
|
||||
username: "programmers_hub",
|
||||
description: "Сообщество разработчиков",
|
||||
subscribers_count: 156000,
|
||||
},
|
||||
{
|
||||
id: "chan-0004-0000-0000-000000000004",
|
||||
telegram_id: -1002345678004,
|
||||
title: "Маркетинг Pro",
|
||||
username: "marketing_pro",
|
||||
description: "Digital маркетинг и реклама",
|
||||
subscribers_count: 67000,
|
||||
},
|
||||
{
|
||||
id: "chan-0005-0000-0000-000000000005",
|
||||
telegram_id: -1002345678005,
|
||||
title: "Финансовая грамотность",
|
||||
username: "finance_edu",
|
||||
description: "Обучение финансам",
|
||||
subscribers_count: 234000,
|
||||
},
|
||||
{
|
||||
id: "chan-0006-0000-0000-000000000006",
|
||||
telegram_id: -1002345678006,
|
||||
title: "Startup Daily",
|
||||
username: "startup_daily",
|
||||
description: "Ежедневные новости стартапов",
|
||||
subscribers_count: 45000,
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Creatives
|
||||
// ============================================================================
|
||||
|
||||
export const demoCreatives: Creative[] = [
|
||||
{
|
||||
id: "crea-0001-0000-0000-000000000001",
|
||||
name: "Крипто - Основной",
|
||||
text: "🚀 Присоединяйтесь к лучшему крипто-каналу!\n\n💰 Ежедневные сигналы\n📊 Аналитика рынка\n🎯 Точные прогнозы\n\n{invite_link}",
|
||||
status: "active",
|
||||
placements_count: 12,
|
||||
project_id: "proj-0001-0000-0000-000000000001",
|
||||
project_channel_title: "Крипто Новости",
|
||||
created_at: "2024-11-15T10:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "crea-0002-0000-0000-000000000002",
|
||||
name: "Крипто - Агрессивный",
|
||||
text: "⚡️ СРОЧНО! Секретный канал для избранных!\n\n🔥 Закрытая информация\n💎 Альткоины x100\n🚀 Успей до памп!\n\n{invite_link}",
|
||||
status: "active",
|
||||
placements_count: 5,
|
||||
project_id: "proj-0001-0000-0000-000000000001",
|
||||
project_channel_title: "Крипто Новости",
|
||||
created_at: "2024-11-20T14:30:00Z",
|
||||
},
|
||||
{
|
||||
id: "crea-0003-0000-0000-000000000003",
|
||||
name: "IT Jobs - Основной",
|
||||
text: "👨💻 Ищешь работу в IT?\n\n✅ Вакансии от топ-компаний\n✅ Удаленка и офис\n✅ Junior - Senior\n\nПодписывайся: {invite_link}",
|
||||
status: "active",
|
||||
placements_count: 8,
|
||||
project_id: "proj-0002-0000-0000-000000000002",
|
||||
project_channel_title: "IT Вакансии",
|
||||
created_at: "2024-10-01T09:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "crea-0004-0000-0000-000000000004",
|
||||
name: "Startups - Нетворкинг",
|
||||
text: "🤝 Нетворкинг для стартаперов\n\n🎯 Найди кофаундера\n💡 Обменяйся идеями\n🚀 Развивай проект\n\n{invite_link}",
|
||||
status: "active",
|
||||
placements_count: 6,
|
||||
project_id: "proj-0003-0000-0000-000000000003",
|
||||
project_channel_title: "Стартапы и Бизнес",
|
||||
created_at: "2024-12-01T16:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "crea-0005-0000-0000-000000000005",
|
||||
name: "IT Jobs - Тестовый",
|
||||
text: "🔥 Тестовый креатив для IT вакансий\n\n{invite_link}",
|
||||
status: "archived",
|
||||
placements_count: 2,
|
||||
project_id: "proj-0002-0000-0000-000000000002",
|
||||
project_channel_title: "IT Вакансии",
|
||||
created_at: "2024-09-15T11:00:00Z",
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Placements
|
||||
// ============================================================================
|
||||
|
||||
export const demoPlacements: Placement[] = [
|
||||
{
|
||||
id: "plac-0001-0000-0000-000000000001",
|
||||
placement_date: "2024-12-20T12:00:00Z",
|
||||
cost: 5500,
|
||||
comment: "Отличное размещение",
|
||||
ad_post_url: "https://t.me/tech_future/1234",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+ABC123demo1",
|
||||
status: "active",
|
||||
subscriptions_count: 156,
|
||||
views_count: 8500,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-12-21T10:00:00Z",
|
||||
created_at: "2024-12-19T15:00:00Z",
|
||||
project_id: "proj-0001-0000-0000-000000000001",
|
||||
project_channel_title: "Крипто Новости",
|
||||
placement_channel_id: "chan-0001-0000-0000-000000000001",
|
||||
placement_channel_title: "Технологии Будущего",
|
||||
creative_id: "crea-0001-0000-0000-000000000001",
|
||||
creative_name: "Крипто - Основной",
|
||||
},
|
||||
{
|
||||
id: "plac-0002-0000-0000-000000000002",
|
||||
placement_date: "2024-12-18T14:00:00Z",
|
||||
cost: 3200,
|
||||
comment: null,
|
||||
ad_post_url: "https://t.me/invest_pro/5678",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+ABC123demo2",
|
||||
status: "active",
|
||||
subscriptions_count: 89,
|
||||
views_count: 4200,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-12-20T08:00:00Z",
|
||||
created_at: "2024-12-17T10:00:00Z",
|
||||
project_id: "proj-0001-0000-0000-000000000001",
|
||||
project_channel_title: "Крипто Новости",
|
||||
placement_channel_id: "chan-0002-0000-0000-000000000002",
|
||||
placement_channel_title: "Инвестиции Pro",
|
||||
creative_id: "crea-0001-0000-0000-000000000001",
|
||||
creative_name: "Крипто - Основной",
|
||||
},
|
||||
{
|
||||
id: "plac-0003-0000-0000-000000000003",
|
||||
placement_date: "2024-12-15T10:00:00Z",
|
||||
cost: 4800,
|
||||
comment: "Программисты - хорошая аудитория",
|
||||
ad_post_url: "https://t.me/programmers_hub/9012",
|
||||
invite_link_type: "public",
|
||||
invite_link: "https://t.me/+ABC123demo3",
|
||||
status: "active",
|
||||
subscriptions_count: 234,
|
||||
views_count: 12000,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-12-19T14:00:00Z",
|
||||
created_at: "2024-12-14T09:00:00Z",
|
||||
project_id: "proj-0002-0000-0000-000000000002",
|
||||
project_channel_title: "IT Вакансии",
|
||||
placement_channel_id: "chan-0003-0000-0000-000000000003",
|
||||
placement_channel_title: "Программисты",
|
||||
creative_id: "crea-0003-0000-0000-000000000003",
|
||||
creative_name: "IT Jobs - Основной",
|
||||
},
|
||||
{
|
||||
id: "plac-0004-0000-0000-000000000004",
|
||||
placement_date: "2024-12-10T16:00:00Z",
|
||||
cost: 2500,
|
||||
comment: null,
|
||||
ad_post_url: "https://t.me/marketing_pro/3456",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+ABC123demo4",
|
||||
status: "active",
|
||||
subscriptions_count: 67,
|
||||
views_count: 3100,
|
||||
views_availability: "manual",
|
||||
last_views_fetch_at: "2024-12-12T11:00:00Z",
|
||||
created_at: "2024-12-09T14:00:00Z",
|
||||
project_id: "proj-0003-0000-0000-000000000003",
|
||||
project_channel_title: "Стартапы и Бизнес",
|
||||
placement_channel_id: "chan-0004-0000-0000-000000000004",
|
||||
placement_channel_title: "Маркетинг Pro",
|
||||
creative_id: "crea-0004-0000-0000-000000000004",
|
||||
creative_name: "Startups - Нетворкинг",
|
||||
},
|
||||
{
|
||||
id: "plac-0005-0000-0000-000000000005",
|
||||
placement_date: "2024-12-05T11:00:00Z",
|
||||
cost: 6200,
|
||||
comment: "Финансовая аудитория",
|
||||
ad_post_url: "https://t.me/finance_edu/7890",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+ABC123demo5",
|
||||
status: "active",
|
||||
subscriptions_count: 312,
|
||||
views_count: 15600,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-12-08T09:00:00Z",
|
||||
created_at: "2024-12-04T10:00:00Z",
|
||||
project_id: "proj-0001-0000-0000-000000000001",
|
||||
project_channel_title: "Крипто Новости",
|
||||
placement_channel_id: "chan-0005-0000-0000-000000000005",
|
||||
placement_channel_title: "Финансовая грамотность",
|
||||
creative_id: "crea-0002-0000-0000-000000000002",
|
||||
creative_name: "Крипто - Агрессивный",
|
||||
},
|
||||
{
|
||||
id: "plac-0006-0000-0000-000000000006",
|
||||
placement_date: "2024-11-28T13:00:00Z",
|
||||
cost: 1800,
|
||||
comment: null,
|
||||
ad_post_url: "https://t.me/startup_daily/2345",
|
||||
invite_link_type: "public",
|
||||
invite_link: "https://t.me/+ABC123demo6",
|
||||
status: "archived",
|
||||
subscriptions_count: 45,
|
||||
views_count: 2100,
|
||||
views_availability: "unavailable",
|
||||
last_views_fetch_at: null,
|
||||
created_at: "2024-11-27T15:00:00Z",
|
||||
project_id: "proj-0003-0000-0000-000000000003",
|
||||
project_channel_title: "Стартапы и Бизнес",
|
||||
placement_channel_id: "chan-0006-0000-0000-000000000006",
|
||||
placement_channel_title: "Startup Daily",
|
||||
creative_id: "crea-0004-0000-0000-000000000004",
|
||||
creative_name: "Startups - Нетворкинг",
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Purchase Plan Channels
|
||||
// ============================================================================
|
||||
|
||||
export const demoPurchasePlanChannels: Record<string, PurchasePlanChannel[]> = {
|
||||
"proj-0001-0000-0000-000000000001": [
|
||||
{
|
||||
id: "plan-0001-0000-0000-000000000001",
|
||||
status: "completed",
|
||||
planned_cost: 5500,
|
||||
comment: "Основной канал",
|
||||
channel: {
|
||||
id: "chan-0001-0000-0000-000000000001",
|
||||
telegram_id: -1002345678001,
|
||||
title: "Технологии Будущего",
|
||||
username: "tech_future",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "plan-0002-0000-0000-000000000002",
|
||||
status: "completed",
|
||||
planned_cost: 3500,
|
||||
comment: null,
|
||||
channel: {
|
||||
id: "chan-0002-0000-0000-000000000002",
|
||||
telegram_id: -1002345678002,
|
||||
title: "Инвестиции Pro",
|
||||
username: "invest_pro",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "plan-0003-0000-0000-000000000003",
|
||||
status: "planned",
|
||||
planned_cost: 4000,
|
||||
comment: "На следующую неделю",
|
||||
channel: {
|
||||
id: "chan-0005-0000-0000-000000000005",
|
||||
telegram_id: -1002345678005,
|
||||
title: "Финансовая грамотность",
|
||||
username: "finance_edu",
|
||||
},
|
||||
},
|
||||
],
|
||||
"proj-0002-0000-0000-000000000002": [
|
||||
{
|
||||
id: "plan-0004-0000-0000-000000000004",
|
||||
status: "completed",
|
||||
planned_cost: 4800,
|
||||
comment: "IT аудитория",
|
||||
channel: {
|
||||
id: "chan-0003-0000-0000-000000000003",
|
||||
telegram_id: -1002345678003,
|
||||
title: "Программисты",
|
||||
username: "programmers_hub",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "plan-0005-0000-0000-000000000005",
|
||||
status: "planned",
|
||||
planned_cost: 3000,
|
||||
comment: null,
|
||||
channel: {
|
||||
id: "chan-0001-0000-0000-000000000001",
|
||||
telegram_id: -1002345678001,
|
||||
title: "Технологии Будущего",
|
||||
username: "tech_future",
|
||||
},
|
||||
},
|
||||
],
|
||||
"proj-0003-0000-0000-000000000003": [
|
||||
{
|
||||
id: "plan-0006-0000-0000-000000000006",
|
||||
status: "completed",
|
||||
planned_cost: 2500,
|
||||
comment: null,
|
||||
channel: {
|
||||
id: "chan-0004-0000-0000-000000000004",
|
||||
telegram_id: -1002345678004,
|
||||
title: "Маркетинг Pro",
|
||||
username: "marketing_pro",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "plan-0007-0000-0000-000000000007",
|
||||
status: "completed",
|
||||
planned_cost: 1800,
|
||||
comment: "Стартап аудитория",
|
||||
channel: {
|
||||
id: "chan-0006-0000-0000-000000000006",
|
||||
telegram_id: -1002345678006,
|
||||
title: "Startup Daily",
|
||||
username: "startup_daily",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Analytics Data
|
||||
// ============================================================================
|
||||
|
||||
export const demoSpendingAnalytics: SpendingAnalytics = {
|
||||
total_cost: 24000,
|
||||
total_subscriptions: 903,
|
||||
total_views: 45500,
|
||||
avg_cpf: 26.58,
|
||||
avg_cpm: 527.47,
|
||||
chart_data: [
|
||||
{
|
||||
period: "2024-11",
|
||||
cost: 1800,
|
||||
subscriptions: 45,
|
||||
views: 2100,
|
||||
cpf: 40.0,
|
||||
cpm: 857.14,
|
||||
},
|
||||
{
|
||||
period: "2024-12-05",
|
||||
cost: 6200,
|
||||
subscriptions: 312,
|
||||
views: 15600,
|
||||
cpf: 19.87,
|
||||
cpm: 397.44,
|
||||
},
|
||||
{
|
||||
period: "2024-12-10",
|
||||
cost: 2500,
|
||||
subscriptions: 67,
|
||||
views: 3100,
|
||||
cpf: 37.31,
|
||||
cpm: 806.45,
|
||||
},
|
||||
{
|
||||
period: "2024-12-15",
|
||||
cost: 4800,
|
||||
subscriptions: 234,
|
||||
views: 12000,
|
||||
cpf: 20.51,
|
||||
cpm: 400.0,
|
||||
},
|
||||
{
|
||||
period: "2024-12-18",
|
||||
cost: 3200,
|
||||
subscriptions: 89,
|
||||
views: 4200,
|
||||
cpf: 35.96,
|
||||
cpm: 761.9,
|
||||
},
|
||||
{
|
||||
period: "2024-12-20",
|
||||
cost: 5500,
|
||||
subscriptions: 156,
|
||||
views: 8500,
|
||||
cpf: 35.26,
|
||||
cpm: 647.06,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const demoCreativeAnalytics: CreativeAnalyticsItem[] = [
|
||||
{
|
||||
id: "crea-0001-0000-0000-000000000001",
|
||||
name: "Крипто - Основной",
|
||||
placements_count: 12,
|
||||
total_cost: 8700,
|
||||
total_subscriptions: 245,
|
||||
total_views: 12700,
|
||||
avg_cpf: 35.51,
|
||||
avg_cpm: 685.04,
|
||||
},
|
||||
{
|
||||
id: "crea-0002-0000-0000-000000000002",
|
||||
name: "Крипто - Агрессивный",
|
||||
placements_count: 5,
|
||||
total_cost: 6200,
|
||||
total_subscriptions: 312,
|
||||
total_views: 15600,
|
||||
avg_cpf: 19.87,
|
||||
avg_cpm: 397.44,
|
||||
},
|
||||
{
|
||||
id: "crea-0003-0000-0000-000000000003",
|
||||
name: "IT Jobs - Основной",
|
||||
placements_count: 8,
|
||||
total_cost: 4800,
|
||||
total_subscriptions: 234,
|
||||
total_views: 12000,
|
||||
avg_cpf: 20.51,
|
||||
avg_cpm: 400.0,
|
||||
},
|
||||
{
|
||||
id: "crea-0004-0000-0000-000000000004",
|
||||
name: "Startups - Нетворкинг",
|
||||
placements_count: 6,
|
||||
total_cost: 4300,
|
||||
total_subscriptions: 112,
|
||||
total_views: 5200,
|
||||
avg_cpf: 38.39,
|
||||
avg_cpm: 826.92,
|
||||
},
|
||||
];
|
||||
|
||||
export const demoChannelAnalytics: ChannelAnalyticsItem[] = [
|
||||
{
|
||||
channel_id: "chan-0001-0000-0000-000000000001",
|
||||
channel_title: "Технологии Будущего",
|
||||
channel_username: "tech_future",
|
||||
placements_count: 3,
|
||||
total_cost: 5500,
|
||||
total_subscriptions: 156,
|
||||
total_views: 8500,
|
||||
avg_cps: 35.26,
|
||||
avg_cpm: 647.06,
|
||||
},
|
||||
{
|
||||
channel_id: "chan-0002-0000-0000-000000000002",
|
||||
channel_title: "Инвестиции Pro",
|
||||
channel_username: "invest_pro",
|
||||
placements_count: 2,
|
||||
total_cost: 3200,
|
||||
total_subscriptions: 89,
|
||||
total_views: 4200,
|
||||
avg_cps: 35.96,
|
||||
avg_cpm: 761.9,
|
||||
},
|
||||
{
|
||||
channel_id: "chan-0003-0000-0000-000000000003",
|
||||
channel_title: "Программисты",
|
||||
channel_username: "programmers_hub",
|
||||
placements_count: 4,
|
||||
total_cost: 4800,
|
||||
total_subscriptions: 234,
|
||||
total_views: 12000,
|
||||
avg_cps: 20.51,
|
||||
avg_cpm: 400.0,
|
||||
},
|
||||
{
|
||||
channel_id: "chan-0005-0000-0000-000000000005",
|
||||
channel_title: "Финансовая грамотность",
|
||||
channel_username: "finance_edu",
|
||||
placements_count: 2,
|
||||
total_cost: 6200,
|
||||
total_subscriptions: 312,
|
||||
total_views: 15600,
|
||||
avg_cps: 19.87,
|
||||
avg_cpm: 397.44,
|
||||
},
|
||||
{
|
||||
channel_id: "chan-0004-0000-0000-000000000004",
|
||||
channel_title: "Маркетинг Pro",
|
||||
channel_username: "marketing_pro",
|
||||
placements_count: 1,
|
||||
total_cost: 2500,
|
||||
total_subscriptions: 67,
|
||||
total_views: 3100,
|
||||
avg_cps: 37.31,
|
||||
avg_cpm: 806.45,
|
||||
},
|
||||
{
|
||||
channel_id: "chan-0006-0000-0000-000000000006",
|
||||
channel_title: "Startup Daily",
|
||||
channel_username: "startup_daily",
|
||||
placements_count: 1,
|
||||
total_cost: 1800,
|
||||
total_subscriptions: 45,
|
||||
total_views: 2100,
|
||||
avg_cps: 40.0,
|
||||
avg_cpm: 857.14,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { TargetChannel } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Mock Target Channels Data
|
||||
// ============================================================================
|
||||
|
||||
export const mockTargetChannels: TargetChannel[] = [
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440010",
|
||||
telegram_id: -1001234567890,
|
||||
title: "Мой Главный Канал",
|
||||
username: "my_main_channel",
|
||||
is_active: true,
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440011",
|
||||
telegram_id: -1009876543210,
|
||||
title: "Тестовый Канал",
|
||||
username: "test_channel_promo",
|
||||
is_active: true,
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440012",
|
||||
telegram_id: -1005555555555,
|
||||
title: "Новости и Обновления",
|
||||
username: null,
|
||||
is_active: false,
|
||||
},
|
||||
];
|
||||
@@ -1,49 +0,0 @@
|
||||
import { Creative } from "@/lib/types/api";
|
||||
import { mockTargetChannels } from "./channels";
|
||||
|
||||
// ============================================================================
|
||||
// Mock Creatives Data
|
||||
// ============================================================================
|
||||
|
||||
export const mockCreatives: Creative[] = [
|
||||
{
|
||||
id: "cr1",
|
||||
name: 'Креатив "Присоединяйся"',
|
||||
text: "🔥 Присоединяйся к нашему сообществу!\n\nУзнавай первым о новых возможностях и фишках.\n\n👉 {link}",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
created_at: "2024-01-15T10:00:00.000Z",
|
||||
status: "active",
|
||||
placements_count: 10,
|
||||
},
|
||||
{
|
||||
id: "cr2",
|
||||
name: 'Креатив "Эксклюзив"',
|
||||
text: "⭐ Эксклюзивный контент только для подписчиков!\n\nНе упусти возможность быть в курсе всех трендов.\n\nПереходи: {link}",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
created_at: "2024-01-20T12:00:00.000Z",
|
||||
status: "active",
|
||||
placements_count: 5,
|
||||
},
|
||||
{
|
||||
id: "cr3",
|
||||
name: 'Креатив "Обучение"',
|
||||
text: "📚 Хочешь научиться зарабатывать больше?\n\nПодписывайся на канал с проверенными методиками!\n\n{link}",
|
||||
target_channel_id: "tc2",
|
||||
target_channel_title: mockTargetChannels[1].title,
|
||||
created_at: "2024-02-05T09:00:00.000Z",
|
||||
status: "active",
|
||||
placements_count: 8,
|
||||
},
|
||||
{
|
||||
id: "cr4",
|
||||
name: "Старый креатив (архив)",
|
||||
text: "Устаревший текст с предложением. {link}",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
created_at: "2023-12-01T10:00:00.000Z",
|
||||
status: "archived",
|
||||
placements_count: 2,
|
||||
},
|
||||
];
|
||||
@@ -1,48 +0,0 @@
|
||||
import { ExternalChannel } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Mock External Channels Data
|
||||
// ============================================================================
|
||||
|
||||
export const mockExternalChannels: ExternalChannel[] = [
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440020",
|
||||
telegram_id: -1001111111111,
|
||||
title: "Канал о Маркетинге",
|
||||
username: "marketing_pro",
|
||||
subscribers_count: 50000,
|
||||
description: "Лучшие практики маркетинга",
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440021",
|
||||
telegram_id: -1002222222222,
|
||||
title: "Бизнес и Стартапы",
|
||||
username: "business_startups",
|
||||
subscribers_count: 120000,
|
||||
description: "Новости мира бизнеса",
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440022",
|
||||
telegram_id: -1003333333333,
|
||||
title: "IT и Технологии",
|
||||
username: "it_tech_news",
|
||||
subscribers_count: 85000,
|
||||
description: "Все о новых технологиях",
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440023",
|
||||
telegram_id: -1004444444444,
|
||||
title: "Крипто Инвестиции",
|
||||
username: "crypto_invest",
|
||||
subscribers_count: 200000,
|
||||
description: null,
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440024",
|
||||
telegram_id: -1005555555555,
|
||||
title: "Продажи и Переговоры",
|
||||
username: "sales_expert",
|
||||
subscribers_count: 35000,
|
||||
description: "Экспертиза в продажах",
|
||||
},
|
||||
];
|
||||
@@ -1,213 +0,0 @@
|
||||
import { Placement, Subscription, ViewsSnapshot } from "@/lib/types/api";
|
||||
import { mockTargetChannels } from "./channels";
|
||||
import { mockExternalChannels } from "./external-channels";
|
||||
import { mockCreatives } from "./creatives";
|
||||
|
||||
// ============================================================================
|
||||
// Mock Placements Data
|
||||
// ============================================================================
|
||||
|
||||
export const mockPlacements: Placement[] = [
|
||||
{
|
||||
id: "p1",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
external_channel_id: "ec1",
|
||||
external_channel_title: mockExternalChannels[0].title,
|
||||
creative_id: "cr1",
|
||||
creative_name: mockCreatives[0].name,
|
||||
placement_date: "2024-03-15T10:00:00.000Z",
|
||||
cost: 5000,
|
||||
comment: "Тестовая закупка на утро",
|
||||
ad_post_url: "https://t.me/marketing_pro/1234",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+AbCdEfGhIjKlMnOp",
|
||||
status: "active",
|
||||
subscriptions_count: 125,
|
||||
views_count: 12500,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-03-16T10:00:00.000Z",
|
||||
created_at: "2024-03-14T15:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
external_channel_id: "ec2",
|
||||
external_channel_title: mockExternalChannels[1].title,
|
||||
creative_id: "cr2",
|
||||
creative_name: mockCreatives[1].name,
|
||||
placement_date: "2024-03-18T14:00:00.000Z",
|
||||
cost: 12000,
|
||||
comment: "Большой канал, ожидаем хороших результатов",
|
||||
ad_post_url: "https://t.me/business_startups/5678",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+QrStUvWxYzAbCdEf",
|
||||
status: "active",
|
||||
subscriptions_count: 210,
|
||||
views_count: 28000,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-03-19T10:00:00.000Z",
|
||||
created_at: "2024-03-17T10:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
target_channel_id: "tc2",
|
||||
target_channel_title: mockTargetChannels[1].title,
|
||||
external_channel_id: "ec3",
|
||||
external_channel_title: mockExternalChannels[2].title,
|
||||
creative_id: "cr3",
|
||||
creative_name: mockCreatives[2].name,
|
||||
placement_date: "2024-03-20T16:00:00.000Z",
|
||||
cost: 3500,
|
||||
comment: null,
|
||||
ad_post_url: "https://t.me/it_tech_news/9101",
|
||||
invite_link_type: "public",
|
||||
invite_link: "https://t.me/+GhIjKlMnOpQrStUv",
|
||||
status: "active",
|
||||
subscriptions_count: 75,
|
||||
views_count: 8500,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-03-21T10:00:00.000Z",
|
||||
created_at: "2024-03-19T12:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
external_channel_id: "ec1",
|
||||
external_channel_title: mockExternalChannels[0].title,
|
||||
creative_id: "cr1",
|
||||
creative_name: mockCreatives[0].name,
|
||||
placement_date: "2024-03-22T08:00:00.000Z",
|
||||
cost: 4500,
|
||||
comment: "Повтор в этом же канале",
|
||||
ad_post_url: "https://t.me/marketing_pro/1290",
|
||||
invite_link_type: "approval",
|
||||
invite_link: "https://t.me/+XyZaBcDeFgHiJkLm",
|
||||
status: "active",
|
||||
subscriptions_count: 95,
|
||||
views_count: null,
|
||||
views_availability: "unavailable",
|
||||
last_views_fetch_at: "2024-03-23T09:00:00.000Z",
|
||||
created_at: "2024-03-21T14:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
target_channel_id: "tc1",
|
||||
target_channel_title: mockTargetChannels[0].title,
|
||||
external_channel_id: "ec2",
|
||||
external_channel_title: mockExternalChannels[1].title,
|
||||
creative_id: "cr1",
|
||||
creative_name: mockCreatives[0].name,
|
||||
placement_date: "2024-02-10T10:00:00.000Z",
|
||||
cost: 10000,
|
||||
comment: "Старая закупка (архив)",
|
||||
ad_post_url: "https://t.me/business_startups/4567",
|
||||
invite_link_type: "public",
|
||||
invite_link: "https://t.me/+OldLinkArch12345",
|
||||
status: "archived",
|
||||
subscriptions_count: 150,
|
||||
views_count: 20000,
|
||||
views_availability: "available",
|
||||
last_views_fetch_at: "2024-02-12T10:00:00.000Z",
|
||||
created_at: "2024-02-09T10:00:00.000Z",
|
||||
},
|
||||
];
|
||||
|
||||
// Keep old name for backward compatibility
|
||||
export const mockPurchases = mockPlacements;
|
||||
|
||||
// ============================================================================
|
||||
// Mock Subscriptions
|
||||
// ============================================================================
|
||||
|
||||
export const mockSubscriptions: Subscription[] = [
|
||||
{
|
||||
id: "s1",
|
||||
purchase_id: "p1",
|
||||
telegram_user_id: 123456789,
|
||||
user_first_name: "Иван",
|
||||
user_last_name: "Иванов",
|
||||
user_username: "ivan_ivanov",
|
||||
subscribed_at: "2024-03-15T11:35:00.000Z",
|
||||
is_active: true,
|
||||
event_type: "join_request",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
purchase_id: "p1",
|
||||
telegram_user_id: 987654321,
|
||||
user_first_name: "Мария",
|
||||
user_last_name: null,
|
||||
user_username: "maria123",
|
||||
subscribed_at: "2024-03-15T12:05:00.000Z",
|
||||
is_active: true,
|
||||
event_type: "join_request",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
purchase_id: "p1",
|
||||
telegram_user_id: 456789123,
|
||||
user_first_name: "Алексей",
|
||||
user_last_name: "Петров",
|
||||
user_username: null,
|
||||
subscribed_at: "2024-03-15T13:20:00.000Z",
|
||||
is_active: false,
|
||||
event_type: "join_request",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
purchase_id: "p2",
|
||||
telegram_user_id: 789123456,
|
||||
user_first_name: "Елена",
|
||||
user_last_name: "Сидорова",
|
||||
user_username: "elena_s",
|
||||
subscribed_at: "2024-03-18T14:30:00.000Z",
|
||||
is_active: true,
|
||||
event_type: "chat_member",
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Mock Views History
|
||||
// ============================================================================
|
||||
|
||||
export const mockViewsHistory: ViewsSnapshot[] = [
|
||||
{
|
||||
id: "v1",
|
||||
purchase_id: "p1",
|
||||
views: 10000,
|
||||
fetched_at: "2024-03-15T12:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "v2",
|
||||
purchase_id: "p1",
|
||||
views: 11500,
|
||||
fetched_at: "2024-03-15T18:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "v3",
|
||||
purchase_id: "p1",
|
||||
views: 12500,
|
||||
fetched_at: "2024-03-16T10:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "v4",
|
||||
purchase_id: "p2",
|
||||
views: 25000,
|
||||
fetched_at: "2024-03-18T15:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "v5",
|
||||
purchase_id: "p2",
|
||||
views: 27000,
|
||||
fetched_at: "2024-03-18T20:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "v6",
|
||||
purchase_id: "p2",
|
||||
views: 28000,
|
||||
fetched_at: "2024-03-19T10:00:00.000Z",
|
||||
},
|
||||
];
|
||||
@@ -1,26 +0,0 @@
|
||||
import { User } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
// Mock Users Data
|
||||
// ============================================================================
|
||||
|
||||
export const mockUsers: User[] = [
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440001",
|
||||
telegram_id: 123456789,
|
||||
username: "ivan_test",
|
||||
},
|
||||
{
|
||||
id: "550e8400-e29b-41d4-a716-446655440002",
|
||||
telegram_id: 987654321,
|
||||
username: "maria_test",
|
||||
},
|
||||
];
|
||||
|
||||
export const mockCurrentUser = mockUsers[0];
|
||||
|
||||
// Mock tokens
|
||||
export const mockTokens = {
|
||||
access_token: "mock_access_token_123456789",
|
||||
refresh_token: "mock_refresh_token_123456789",
|
||||
};
|
||||
@@ -1,573 +0,0 @@
|
||||
// ============================================================================
|
||||
// Mock API Handlers
|
||||
// ============================================================================
|
||||
|
||||
import {
|
||||
mockCurrentUser,
|
||||
mockTokens,
|
||||
mockTargetChannels,
|
||||
mockExternalChannels,
|
||||
mockCreatives,
|
||||
mockPlacements,
|
||||
mockSubscriptions,
|
||||
mockViewsHistory,
|
||||
} from "./index";
|
||||
|
||||
import type {
|
||||
ListResponse,
|
||||
SuccessResponse,
|
||||
ApiError,
|
||||
TargetChannel,
|
||||
ExternalChannel,
|
||||
Creative,
|
||||
Placement,
|
||||
PlacementCreateRequest,
|
||||
PlacementUpdateRequest,
|
||||
CreativeCreateRequest,
|
||||
ExternalChannelCreateRequest,
|
||||
ViewsFetchResponse,
|
||||
ViewsHistoryResponse,
|
||||
AuthCompleteRequest,
|
||||
AuthCompleteResponse,
|
||||
AuthRefreshRequest,
|
||||
AuthRefreshResponse,
|
||||
AuthInitResponse,
|
||||
ExternalChannelUpdateRequest,
|
||||
CreativeUpdateRequest,
|
||||
ExternalChannelsListResponse,
|
||||
} from "@/lib/types/api";
|
||||
|
||||
// Simulate network delay
|
||||
const delay = (ms: number = 300) =>
|
||||
new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
// Helper to generate mock error
|
||||
const mockError = (code: string, message: string): ApiError => ({
|
||||
error: { code, message },
|
||||
});
|
||||
|
||||
// Helper to generate IDs
|
||||
let idCounter = 1000;
|
||||
const generateId = () => `mock_${idCounter++}`;
|
||||
|
||||
// ============================================================================
|
||||
// Mock API Handlers
|
||||
// ============================================================================
|
||||
|
||||
export const mockApiHandlers = {
|
||||
// --------------------------------------------------------------------------
|
||||
// Auth
|
||||
// --------------------------------------------------------------------------
|
||||
async authInit(): Promise<AuthInitResponse> {
|
||||
await delay();
|
||||
return {
|
||||
bot_username: "tgex_bot",
|
||||
start_param: "login",
|
||||
};
|
||||
},
|
||||
|
||||
async authComplete(
|
||||
data: AuthCompleteRequest | { token: string | null }
|
||||
): Promise<{ access_token: string }> {
|
||||
await delay();
|
||||
if (!data.token) {
|
||||
throw mockError("VALIDATION_ERROR", "Token is required");
|
||||
}
|
||||
|
||||
// Save mock user to localStorage for later retrieval
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.setItem("tgex_user", JSON.stringify(mockCurrentUser));
|
||||
}
|
||||
|
||||
return {
|
||||
access_token: mockTokens.access_token,
|
||||
};
|
||||
},
|
||||
|
||||
async authRefresh(data: AuthRefreshRequest): Promise<AuthRefreshResponse> {
|
||||
await delay();
|
||||
if (!data.refresh_token) {
|
||||
throw mockError("VALIDATION_ERROR", "Refresh token is required");
|
||||
}
|
||||
return {
|
||||
access_token: `${mockTokens.access_token}_refreshed`,
|
||||
};
|
||||
},
|
||||
|
||||
async authMe() {
|
||||
await delay();
|
||||
return mockCurrentUser;
|
||||
},
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Target Channels
|
||||
// --------------------------------------------------------------------------
|
||||
async getTargetChannels() {
|
||||
await delay();
|
||||
return {
|
||||
target_channels: mockTargetChannels,
|
||||
};
|
||||
},
|
||||
|
||||
async deleteTargetChannel(id: string): Promise<SuccessResponse> {
|
||||
await delay();
|
||||
const channel = mockTargetChannels.find((c) => c.id === id);
|
||||
if (!channel) {
|
||||
throw mockError("NOT_FOUND", "Target channel not found");
|
||||
}
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// External Channels
|
||||
// --------------------------------------------------------------------------
|
||||
async getExternalChannels(
|
||||
targetChannelId: string
|
||||
): Promise<ExternalChannelsListResponse> {
|
||||
await delay();
|
||||
// Возвращаем все каналы для указанного target channel
|
||||
// В реальном API это будет фильтрация по связям через промежуточную таблицу
|
||||
return {
|
||||
external_channels: mockExternalChannels,
|
||||
};
|
||||
},
|
||||
|
||||
async getExternalChannel(id: string): Promise<ExternalChannel> {
|
||||
await delay();
|
||||
const channel = mockExternalChannels.find((c) => c.id === id);
|
||||
if (!channel) {
|
||||
throw mockError("NOT_FOUND", "External channel not found");
|
||||
}
|
||||
return channel;
|
||||
},
|
||||
|
||||
async createExternalChannel(
|
||||
data: ExternalChannelCreateRequest
|
||||
): Promise<ExternalChannel> {
|
||||
await delay(500);
|
||||
const newChannel: ExternalChannel = {
|
||||
id: generateId(),
|
||||
telegram_id: data.telegram_id,
|
||||
title: data.title,
|
||||
username: data.username || null,
|
||||
subscribers_count: data.subscribers_count || null,
|
||||
description: data.description || null,
|
||||
};
|
||||
mockExternalChannels.push(newChannel);
|
||||
return newChannel;
|
||||
},
|
||||
|
||||
async updateExternalChannel(
|
||||
id: string,
|
||||
data: ExternalChannelUpdateRequest
|
||||
): Promise<ExternalChannel> {
|
||||
await delay();
|
||||
const channel = mockExternalChannels.find((c) => c.id === id);
|
||||
if (!channel) {
|
||||
throw mockError("NOT_FOUND", "External channel not found");
|
||||
}
|
||||
return {
|
||||
...channel,
|
||||
...data,
|
||||
};
|
||||
},
|
||||
|
||||
async deleteExternalChannel(id: string): Promise<SuccessResponse> {
|
||||
await delay();
|
||||
const index = mockExternalChannels.findIndex((c) => c.id === id);
|
||||
if (index === -1) {
|
||||
throw mockError("NOT_FOUND", "External channel not found");
|
||||
}
|
||||
mockExternalChannels.splice(index, 1);
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
async updateExternalChannelLinks(
|
||||
id: string,
|
||||
data: {
|
||||
add_target_channel_ids?: string[];
|
||||
remove_target_channel_ids?: string[];
|
||||
}
|
||||
): Promise<ExternalChannel> {
|
||||
await delay();
|
||||
const channel = mockExternalChannels.find((c) => c.id === id);
|
||||
if (!channel) {
|
||||
throw mockError("NOT_FOUND", "External channel not found");
|
||||
}
|
||||
// В упрощенной версии просто возвращаем канал
|
||||
return channel;
|
||||
},
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Creatives
|
||||
// --------------------------------------------------------------------------
|
||||
async getCreatives(params?: {
|
||||
target_channel_id?: string;
|
||||
include_archived?: boolean;
|
||||
}) {
|
||||
await delay();
|
||||
let filtered = [...mockCreatives];
|
||||
|
||||
if (params?.target_channel_id) {
|
||||
filtered = filtered.filter(
|
||||
(c) => c.target_channel_id === params.target_channel_id
|
||||
);
|
||||
}
|
||||
|
||||
if (!params?.include_archived) {
|
||||
filtered = filtered.filter((c) => c.status !== "archived");
|
||||
}
|
||||
|
||||
return {
|
||||
creatives: filtered,
|
||||
};
|
||||
},
|
||||
|
||||
async getCreative(id: string): Promise<Creative> {
|
||||
await delay();
|
||||
const creative = mockCreatives.find((c) => c.id === id);
|
||||
if (!creative) {
|
||||
throw mockError("NOT_FOUND", "Creative not found");
|
||||
}
|
||||
return creative;
|
||||
},
|
||||
|
||||
async createCreative(data: CreativeCreateRequest): Promise<Creative> {
|
||||
await delay(500);
|
||||
|
||||
const targetChannel = mockTargetChannels.find(
|
||||
(c) => c.id === data.target_channel_id
|
||||
);
|
||||
if (!targetChannel) {
|
||||
throw mockError("NOT_FOUND", "Target channel not found");
|
||||
}
|
||||
|
||||
const newCreative: Creative = {
|
||||
id: generateId(),
|
||||
name: data.name,
|
||||
text: data.text,
|
||||
target_channel_id: data.target_channel_id,
|
||||
target_channel_title: targetChannel.title,
|
||||
created_at: new Date().toISOString(),
|
||||
status: "active",
|
||||
placements_count: 0,
|
||||
};
|
||||
mockCreatives.push(newCreative);
|
||||
return newCreative;
|
||||
},
|
||||
|
||||
async updateCreative(
|
||||
id: string,
|
||||
data: CreativeUpdateRequest
|
||||
): Promise<Creative> {
|
||||
await delay();
|
||||
const creative = mockCreatives.find((c) => c.id === id);
|
||||
if (!creative) {
|
||||
throw mockError("NOT_FOUND", "Creative not found");
|
||||
}
|
||||
|
||||
if (data.text && !data.text.includes("{link}")) {
|
||||
throw mockError(
|
||||
"VALIDATION_ERROR",
|
||||
"Creative text must contain {link} placeholder"
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...creative,
|
||||
...data,
|
||||
};
|
||||
},
|
||||
|
||||
async deleteCreative(id: string): Promise<SuccessResponse> {
|
||||
await delay();
|
||||
const creative = mockCreatives.find((c) => c.id === id);
|
||||
if (!creative) {
|
||||
throw mockError("NOT_FOUND", "Creative not found");
|
||||
}
|
||||
|
||||
if (creative.placements_count > 0) {
|
||||
throw mockError(
|
||||
"CREATIVE_IN_USE",
|
||||
"Cannot delete creative with active placements"
|
||||
);
|
||||
}
|
||||
|
||||
const index = mockCreatives.findIndex((c) => c.id === id);
|
||||
mockCreatives.splice(index, 1);
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Placements (Purchases)
|
||||
// --------------------------------------------------------------------------
|
||||
async getPlacements(params?: {
|
||||
target_channel_id?: string;
|
||||
external_channel_id?: string;
|
||||
creative_id?: string;
|
||||
include_archived?: boolean;
|
||||
}) {
|
||||
await delay();
|
||||
let filtered = [...mockPlacements];
|
||||
|
||||
if (params?.target_channel_id) {
|
||||
filtered = filtered.filter(
|
||||
(p) => p.target_channel_id === params.target_channel_id
|
||||
);
|
||||
}
|
||||
|
||||
if (params?.external_channel_id) {
|
||||
filtered = filtered.filter(
|
||||
(p) => p.external_channel_id === params.external_channel_id
|
||||
);
|
||||
}
|
||||
|
||||
if (params?.creative_id) {
|
||||
filtered = filtered.filter((p) => p.creative_id === params.creative_id);
|
||||
}
|
||||
|
||||
if (!params?.include_archived) {
|
||||
filtered = filtered.filter((p) => p.status !== "archived");
|
||||
}
|
||||
|
||||
return {
|
||||
placements: filtered,
|
||||
};
|
||||
},
|
||||
|
||||
async getPlacement(id: string): Promise<Placement> {
|
||||
await delay();
|
||||
const placement = mockPlacements.find((p) => p.id === id);
|
||||
if (!placement) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
return placement;
|
||||
},
|
||||
|
||||
async createPlacement(data: PlacementCreateRequest): Promise<Placement> {
|
||||
await delay(800);
|
||||
|
||||
const targetChannel = mockTargetChannels.find(
|
||||
(c) => c.id === data.target_channel_id
|
||||
);
|
||||
const externalChannel = mockExternalChannels.find(
|
||||
(c) => c.id === data.external_channel_id
|
||||
);
|
||||
const creative = mockCreatives.find((c) => c.id === data.creative_id);
|
||||
|
||||
if (!targetChannel || !externalChannel || !creative) {
|
||||
throw mockError("NOT_FOUND", "One of the required entities not found");
|
||||
}
|
||||
|
||||
// Generate mock invite link
|
||||
const inviteLink = `https://t.me/+${Math.random()
|
||||
.toString(36)
|
||||
.substring(2, 15)}`;
|
||||
|
||||
const newPlacement: Placement = {
|
||||
id: generateId(),
|
||||
target_channel_id: data.target_channel_id,
|
||||
target_channel_title: targetChannel.title,
|
||||
external_channel_id: data.external_channel_id,
|
||||
external_channel_title: externalChannel.title,
|
||||
creative_id: data.creative_id,
|
||||
creative_name: creative.name,
|
||||
placement_date: data.placement_date,
|
||||
cost: data.cost || null,
|
||||
comment: data.comment || null,
|
||||
ad_post_url: data.ad_post_url || null,
|
||||
invite_link_type: data.invite_link_type || "public",
|
||||
invite_link: inviteLink,
|
||||
status: "active",
|
||||
subscriptions_count: 0,
|
||||
views_count: null,
|
||||
views_availability: "unknown",
|
||||
last_views_fetch_at: null,
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
mockPlacements.push(newPlacement);
|
||||
return newPlacement;
|
||||
},
|
||||
|
||||
async updatePlacement(
|
||||
id: string,
|
||||
data: PlacementUpdateRequest
|
||||
): Promise<Placement> {
|
||||
await delay();
|
||||
const placement = mockPlacements.find((p) => p.id === id);
|
||||
if (!placement) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
|
||||
return {
|
||||
...placement,
|
||||
...data,
|
||||
};
|
||||
},
|
||||
|
||||
async deletePlacement(id: string): Promise<SuccessResponse> {
|
||||
await delay();
|
||||
const index = mockPlacements.findIndex((p) => p.id === id);
|
||||
if (index === -1) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
mockPlacements.splice(index, 1);
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
async fetchPlacementViews(id: string): Promise<ViewsFetchResponse> {
|
||||
await delay(1000);
|
||||
const placement = mockPlacements.find((p) => p.id === id);
|
||||
if (!placement) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
|
||||
// Mock: add some random views
|
||||
const newViews =
|
||||
(placement.views_count || 0) + Math.floor(Math.random() * 500);
|
||||
|
||||
return {
|
||||
placement_id: id,
|
||||
views_count: newViews,
|
||||
views_availability: "available",
|
||||
fetched_at: new Date().toISOString(),
|
||||
error_message: null,
|
||||
};
|
||||
},
|
||||
|
||||
async getPlacementViewsHistory(
|
||||
id: string,
|
||||
params?: { from_date?: string; to_date?: string }
|
||||
): Promise<ViewsHistoryResponse> {
|
||||
await delay();
|
||||
const placement = mockPlacements.find((p) => p.id === id);
|
||||
if (!placement) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
|
||||
const filteredHistory = mockViewsHistory.filter(
|
||||
(v) => v.purchase_id === id
|
||||
);
|
||||
return {
|
||||
histories: filteredHistory,
|
||||
};
|
||||
},
|
||||
|
||||
async setPlacementViewsManually(
|
||||
id: string,
|
||||
views_count: number
|
||||
): Promise<Placement> {
|
||||
await delay();
|
||||
const placement = mockPlacements.find((p) => p.id === id);
|
||||
if (!placement) {
|
||||
throw mockError("NOT_FOUND", "Placement not found");
|
||||
}
|
||||
|
||||
return {
|
||||
...placement,
|
||||
views_count,
|
||||
views_availability: "manual",
|
||||
last_views_fetch_at: new Date().toISOString(),
|
||||
};
|
||||
},
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Analytics
|
||||
// --------------------------------------------------------------------------
|
||||
async getSpendingAnalytics(params?: {
|
||||
target_channel_id?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
grouping?: "day" | "week" | "month" | "quarter" | "year";
|
||||
}) {
|
||||
await delay();
|
||||
return {
|
||||
total_cost: 45000,
|
||||
total_subscriptions: 850,
|
||||
total_views: 125000,
|
||||
avg_cpf: 52.94,
|
||||
avg_cpm: 360,
|
||||
chart_data: [
|
||||
{
|
||||
period: "2024-03-01",
|
||||
cost: 15000,
|
||||
subscriptions: 280,
|
||||
views: 42000,
|
||||
cpf: 53.57,
|
||||
cpm: 357.14,
|
||||
},
|
||||
{
|
||||
period: "2024-03-08",
|
||||
cost: 18000,
|
||||
subscriptions: 340,
|
||||
views: 51000,
|
||||
cpf: 52.94,
|
||||
cpm: 352.94,
|
||||
},
|
||||
{
|
||||
period: "2024-03-15",
|
||||
cost: 12000,
|
||||
subscriptions: 230,
|
||||
views: 32000,
|
||||
cpf: 52.17,
|
||||
cpm: 375,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
async getPlacementsAnalytics(params?: { target_channel_id?: string }) {
|
||||
await delay();
|
||||
return {
|
||||
placements: mockPlacements.map((p) => ({
|
||||
id: p.id,
|
||||
target_channel_id: p.target_channel_id,
|
||||
target_channel_title: p.target_channel_title,
|
||||
external_channel_id: p.external_channel_id,
|
||||
external_channel_title: p.external_channel_title,
|
||||
creative_id: p.creative_id,
|
||||
creative_name: p.creative_name,
|
||||
placement_date: p.placement_date,
|
||||
cost: p.cost,
|
||||
subscriptions_count: p.subscriptions_count,
|
||||
views_count: p.views_count,
|
||||
cpf: p.cost && p.subscriptions_count > 0 ? p.cost / p.subscriptions_count : null,
|
||||
cpm: p.cost && p.views_count ? (p.cost / p.views_count) * 1000 : null,
|
||||
})),
|
||||
};
|
||||
},
|
||||
|
||||
async getCreativesAnalytics(params?: { target_channel_id?: string }) {
|
||||
await delay();
|
||||
return {
|
||||
creatives: mockCreatives.map((c) => ({
|
||||
id: c.id,
|
||||
name: c.name,
|
||||
placements_count: c.placements_count,
|
||||
total_cost: 15000,
|
||||
total_subscriptions: 280,
|
||||
total_views: 42000,
|
||||
avg_cpf: 53.57,
|
||||
avg_cpm: 357.14,
|
||||
})),
|
||||
};
|
||||
},
|
||||
|
||||
async getExternalChannelsAnalytics(params?: { target_channel_id?: string }) {
|
||||
await delay();
|
||||
return {
|
||||
external_channels: mockExternalChannels.map((ec) => ({
|
||||
id: ec.id,
|
||||
title: ec.title,
|
||||
username: ec.username,
|
||||
placements_count: 3,
|
||||
total_cost: 12000,
|
||||
total_subscriptions: 210,
|
||||
total_views: 28000,
|
||||
avg_cpf: 57.14,
|
||||
avg_cpm: 428.57,
|
||||
})),
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
// ============================================================================
|
||||
// Mock Data Export
|
||||
// ============================================================================
|
||||
|
||||
export * from "./data/users";
|
||||
export * from "./data/channels";
|
||||
export * from "./data/external-channels";
|
||||
export * from "./data/creatives";
|
||||
export * from "./data/placements";
|
||||
484
lib/types/api.ts
484
lib/types/api.ts
@@ -1,5 +1,5 @@
|
||||
// ============================================================================
|
||||
// API Types - Generated from API_DOCUMENTATION.md
|
||||
// API Types - Based on actual API responses
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -12,148 +12,220 @@ export interface User {
|
||||
username: string | null;
|
||||
}
|
||||
|
||||
export interface AuthInitResponse {
|
||||
bot_username: string;
|
||||
start_param: string; // "login"
|
||||
}
|
||||
|
||||
export interface AuthCompleteRequest {
|
||||
token: string; // one-time token from bot
|
||||
}
|
||||
|
||||
export interface AuthCompleteResponse {
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export interface AuthRefreshRequest {
|
||||
refresh_token: string;
|
||||
}
|
||||
|
||||
export interface AuthRefreshResponse {
|
||||
access_token: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Target Channel
|
||||
// Pagination
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Основная структура как возвращает API
|
||||
export interface TargetChannel {
|
||||
export interface PaginatedResponse<T> {
|
||||
items: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
size: number;
|
||||
pages: number;
|
||||
}
|
||||
|
||||
export interface PaginationParams {
|
||||
page?: number;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Workspaces
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export interface Workspace {
|
||||
id: string; // UUID
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface WorkspaceCreateRequest {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface WorkspaceUpdateRequest {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Workspace Members & Permissions
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type WorkspaceUserStatus = "active" | "invited";
|
||||
|
||||
export type PermissionKey =
|
||||
| "admin_full"
|
||||
| "projects_read"
|
||||
| "projects_write"
|
||||
| "placements_read"
|
||||
| "placements_write"
|
||||
| "analytics_read";
|
||||
|
||||
export type PermissionScopeType = "project";
|
||||
|
||||
export interface PermissionScope {
|
||||
type: PermissionScopeType;
|
||||
id: string; // UUID
|
||||
}
|
||||
|
||||
export interface Permission {
|
||||
key: PermissionKey;
|
||||
scopes?: PermissionScope[];
|
||||
}
|
||||
|
||||
export interface WorkspaceMemberUser {
|
||||
id: string; // user_id
|
||||
telegram_id: number;
|
||||
username: string | null;
|
||||
}
|
||||
|
||||
export interface WorkspaceMember {
|
||||
id: string; // member record id
|
||||
status: WorkspaceUserStatus;
|
||||
user: WorkspaceMemberUser;
|
||||
permissions: Permission[];
|
||||
}
|
||||
|
||||
export interface UpdatePermissionsRequest {
|
||||
permissions: Permission[];
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Workspace Invites
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type WorkspaceInviteStatus = "pending" | "accepted" | "rejected";
|
||||
|
||||
export interface WorkspaceInvite {
|
||||
id: string; // UUID
|
||||
username: string;
|
||||
status: WorkspaceInviteStatus;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface WorkspaceInviteCreateRequest {
|
||||
username: string; // без @
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Projects (Target Channels)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type ProjectStatus = "active" | "inactive" | "archived";
|
||||
|
||||
export interface Project {
|
||||
id: string; // UUID
|
||||
telegram_id: number;
|
||||
title: string;
|
||||
username: string | null;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
// Расширенная версия с дополнительными полями (пока не реализовано на бекенде)
|
||||
export interface TargetChannelDetail extends TargetChannel {
|
||||
// В будущем можно добавить статистику
|
||||
}
|
||||
|
||||
export interface TargetChannelUpdateRequest {
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface TargetChannelsListResponse {
|
||||
target_channels: TargetChannel[];
|
||||
status: ProjectStatus;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// External Channel
|
||||
// Channels (Catalog for Placements)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Основная структура как возвращает API
|
||||
export interface ExternalChannel {
|
||||
export type ChannelStatus = "active" | "inactive" | "archived";
|
||||
|
||||
export interface Channel {
|
||||
id: string; // UUID
|
||||
telegram_id: number;
|
||||
title: string;
|
||||
username: string | null;
|
||||
description: string | null;
|
||||
subscribers_count: number | null;
|
||||
}
|
||||
|
||||
export interface ExternalChannelCreateRequest {
|
||||
telegram_id: number;
|
||||
title: string;
|
||||
username?: string | null;
|
||||
description?: string | null;
|
||||
subscribers_count?: number | null;
|
||||
target_channel_ids: string[]; // UUID[]
|
||||
subscribers_count?: number;
|
||||
}
|
||||
|
||||
export interface ExternalChannelUpdateRequest {
|
||||
title?: string;
|
||||
username?: string | null;
|
||||
description?: string | null;
|
||||
subscribers_count?: number | null;
|
||||
}
|
||||
|
||||
export interface ExternalChannelLinksUpdateRequest {
|
||||
add_target_channel_ids?: string[];
|
||||
remove_target_channel_ids?: string[];
|
||||
}
|
||||
|
||||
export interface ExternalChannelsListResponse {
|
||||
external_channels: ExternalChannel[];
|
||||
export interface ChannelsQueryParams extends PaginationParams {
|
||||
username?: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Creative
|
||||
// Purchase Plan
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type PurchasePlanStatus = "planned" | "completed" | "cancelled";
|
||||
|
||||
export interface PurchasePlanChannel {
|
||||
id: string; // UUID
|
||||
status: PurchasePlanStatus;
|
||||
planned_cost: number | null;
|
||||
comment: string | null;
|
||||
channel: {
|
||||
id: string;
|
||||
telegram_id: number;
|
||||
title: string;
|
||||
username: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export interface PurchasePlanChannelCreateRequest {
|
||||
channel_id: string;
|
||||
planned_cost?: number;
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
export interface PurchasePlanChannelUpdateRequest {
|
||||
planned_cost?: number;
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Creatives
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type CreativeStatus = "active" | "archived";
|
||||
|
||||
export interface Creative {
|
||||
id: string;
|
||||
id: string; // UUID
|
||||
name: string;
|
||||
text: string;
|
||||
target_channel_id: string;
|
||||
target_channel_title: string;
|
||||
text: string; // Contains {invite_link} placeholder
|
||||
project_id: string;
|
||||
project_channel_title: string;
|
||||
created_at: string;
|
||||
status: CreativeStatus;
|
||||
placements_count: number;
|
||||
}
|
||||
|
||||
export interface CreativesListResponse {
|
||||
creatives: Creative[];
|
||||
}
|
||||
|
||||
export interface CreativeCreateRequest {
|
||||
name: string;
|
||||
text: string;
|
||||
target_channel_id: string;
|
||||
}
|
||||
|
||||
export interface CreativeUpdateRequest {
|
||||
name?: string;
|
||||
text?: string;
|
||||
status?: CreativeStatus;
|
||||
}
|
||||
|
||||
export interface CreativesQueryParams extends PaginationParams {
|
||||
project_id?: string;
|
||||
include_archived?: boolean;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Placement (Purchase)
|
||||
// Placements
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type InviteLinkType = "public" | "approval";
|
||||
export type PlacementStatus = "active" | "archived";
|
||||
export type ViewsAvailability =
|
||||
export type InviteLinkType = "public" | "approval";
|
||||
export type PostViewsAvailability =
|
||||
| "unknown"
|
||||
| "available"
|
||||
| "unavailable"
|
||||
| "manual";
|
||||
|
||||
export interface Placement {
|
||||
id: string;
|
||||
target_channel_id: string;
|
||||
target_channel_title: string;
|
||||
external_channel_id: string;
|
||||
external_channel_title: string;
|
||||
id: string; // UUID
|
||||
project_id: string;
|
||||
project_channel_title: string;
|
||||
placement_channel_id: string;
|
||||
placement_channel_title: string;
|
||||
creative_id: string;
|
||||
creative_name: string;
|
||||
placement_date: string;
|
||||
placement_date: string; // ISO 8601
|
||||
cost: number | null;
|
||||
comment: string | null;
|
||||
ad_post_url: string | null;
|
||||
@@ -161,84 +233,96 @@ export interface Placement {
|
||||
invite_link: string;
|
||||
status: PlacementStatus;
|
||||
subscriptions_count: number;
|
||||
views_count: number | null;
|
||||
views_availability: ViewsAvailability;
|
||||
last_views_fetch_at: string | null;
|
||||
views_count?: number | null;
|
||||
views_availability?: PostViewsAvailability;
|
||||
last_views_fetch_at?: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface PlacementsListResponse {
|
||||
placements: Placement[];
|
||||
}
|
||||
|
||||
export interface PlacementCreateRequest {
|
||||
target_channel_id: string;
|
||||
external_channel_id: string;
|
||||
project_id: string;
|
||||
placement_channel_id: string;
|
||||
creative_id: string;
|
||||
placement_date: string;
|
||||
cost?: number | null;
|
||||
comment?: string | null;
|
||||
ad_post_url?: string | null;
|
||||
invite_link_type?: InviteLinkType;
|
||||
placement_date: string; // ISO 8601
|
||||
cost?: number;
|
||||
comment?: string;
|
||||
ad_post_url?: string;
|
||||
invite_link_type: InviteLinkType;
|
||||
}
|
||||
|
||||
export interface PlacementUpdateRequest {
|
||||
placement_date?: string;
|
||||
cost?: number | null;
|
||||
comment?: string | null;
|
||||
ad_post_url?: string | null;
|
||||
status?: PlacementStatus;
|
||||
cost?: number;
|
||||
comment?: string;
|
||||
ad_post_url?: string;
|
||||
}
|
||||
|
||||
// Legacy aliases for backwards compatibility
|
||||
export type Purchase = Placement;
|
||||
export type PurchaseCreateRequest = PlacementCreateRequest;
|
||||
export type PurchaseUpdateRequest = PlacementUpdateRequest;
|
||||
|
||||
export interface ViewsFetchResponse {
|
||||
placement_id: string;
|
||||
views_count: number | null;
|
||||
views_availability: ViewsAvailability;
|
||||
fetched_at: string;
|
||||
error_message: string | null;
|
||||
}
|
||||
|
||||
export interface ViewsHistoryResponse {
|
||||
histories: ViewsSnapshot[];
|
||||
export interface PlacementsQueryParams extends PaginationParams {
|
||||
project_id?: string;
|
||||
placement_channel_id?: string;
|
||||
creative_id?: string;
|
||||
include_archived?: boolean;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Subscription
|
||||
// Views History
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export interface Subscription {
|
||||
id: string;
|
||||
purchase_id: string;
|
||||
telegram_user_id: number;
|
||||
user_first_name: string;
|
||||
user_last_name: string | null;
|
||||
user_username: string | null;
|
||||
subscribed_at: string; // ISO 8601
|
||||
is_active: boolean;
|
||||
event_type: "chat_member" | "join_request";
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Views Snapshot
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export interface ViewsSnapshot {
|
||||
id: string;
|
||||
purchase_id: string;
|
||||
views: number;
|
||||
export interface ViewsHistoryItem {
|
||||
id: string; // UUID
|
||||
views_count: number;
|
||||
fetched_at: string; // ISO 8601
|
||||
}
|
||||
|
||||
export interface ViewsHistoryQueryParams extends PaginationParams {
|
||||
from_date?: string;
|
||||
to_date?: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Analytics
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export type DateGrouping = "day" | "week" | "month" | "quarter" | "year";
|
||||
export type DateGrouping = "day" | "week" | "month" | "DAY" | "WEEK" | "MONTH";
|
||||
|
||||
// Placements Analytics
|
||||
export interface PlacementAnalyticsItem {
|
||||
placement_id: string;
|
||||
placement_channel_title: string;
|
||||
placement_channel_username: string | null;
|
||||
creative_name: string;
|
||||
placement_date: string;
|
||||
cost: number | null;
|
||||
subscriptions_count: number;
|
||||
views_count: number | null;
|
||||
cps: number | null; // cost per subscription
|
||||
cpm: number | null; // cost per mille views
|
||||
}
|
||||
|
||||
// Creatives Analytics (matches actual API response)
|
||||
export interface CreativeAnalyticsItem {
|
||||
id: string;
|
||||
name: string;
|
||||
placements_count: number;
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
avg_cpf: number | null; // cost per follower (same as CPS)
|
||||
avg_cpm: number | null;
|
||||
}
|
||||
|
||||
// Channels Analytics
|
||||
export interface ChannelAnalyticsItem {
|
||||
channel_id: string;
|
||||
channel_title: string;
|
||||
channel_username: string | null;
|
||||
placements_count: number;
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
avg_cps: number | null;
|
||||
avg_cpm: number | null;
|
||||
}
|
||||
|
||||
// Spending Analytics
|
||||
export interface SpendingDataPoint {
|
||||
@@ -251,40 +335,7 @@ export interface SpendingDataPoint {
|
||||
}
|
||||
|
||||
export interface SpendingAnalytics {
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
avg_cpf: number | null;
|
||||
avg_cpm: number | null;
|
||||
chart_data: SpendingDataPoint[];
|
||||
}
|
||||
|
||||
// Placements Analytics
|
||||
export interface PlacementAnalytics {
|
||||
id: string;
|
||||
target_channel_id: string;
|
||||
target_channel_title: string;
|
||||
external_channel_id: string;
|
||||
external_channel_title: string;
|
||||
creative_id: string;
|
||||
creative_name: string;
|
||||
placement_date: string;
|
||||
cost: number | null;
|
||||
subscriptions_count: number;
|
||||
views_count: number | null;
|
||||
cpf: number | null;
|
||||
cpm: number | null;
|
||||
}
|
||||
|
||||
export interface PlacementsAnalytics {
|
||||
placements: PlacementAnalytics[];
|
||||
}
|
||||
|
||||
// Creatives Analytics
|
||||
export interface CreativeAnalytics {
|
||||
id: string;
|
||||
name: string;
|
||||
placements_count: number;
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
@@ -292,99 +343,34 @@ export interface CreativeAnalytics {
|
||||
avg_cpm: number | null;
|
||||
}
|
||||
|
||||
export interface CreativesAnalytics {
|
||||
creatives: CreativeAnalytics[];
|
||||
}
|
||||
|
||||
// External Channels Analytics
|
||||
export interface ExternalChannelAnalytics {
|
||||
id: string;
|
||||
title: string;
|
||||
username: string | null;
|
||||
placements_count: number;
|
||||
total_cost: number;
|
||||
total_subscriptions: number;
|
||||
total_views: number;
|
||||
avg_cpf: number | null;
|
||||
avg_cpm: number | null;
|
||||
}
|
||||
|
||||
export interface ExternalChannelsAnalytics {
|
||||
external_channels: ExternalChannelAnalytics[];
|
||||
}
|
||||
|
||||
// Analytics Configuration Types
|
||||
export type AnalyticsMetric = "cost" | "subscriptions" | "views" | "cpf" | "cpm";
|
||||
|
||||
export interface ChartConfig {
|
||||
id: string;
|
||||
targetChannelIds: string[]; // Multiple selection
|
||||
metrics: AnalyticsMetric[];
|
||||
dateFrom: Date | null;
|
||||
dateTo: Date | null;
|
||||
grouping: DateGrouping;
|
||||
export interface AnalyticsQueryParams extends PaginationParams {
|
||||
project_id?: string;
|
||||
}
|
||||
|
||||
export interface SpendingAnalyticsQueryParams {
|
||||
target_channel_id?: string;
|
||||
project_id?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
grouping?: DateGrouping;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Common API Responses
|
||||
// Common Types
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export interface ListResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface SuccessResponse {
|
||||
success: boolean;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
error: {
|
||||
code: string;
|
||||
message: string;
|
||||
details?: any;
|
||||
};
|
||||
detail: string;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Query Parameters
|
||||
// Legacy Aliases (for backwards compatibility during migration)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
export interface TargetChannelQueryParams {
|
||||
is_active?: boolean;
|
||||
}
|
||||
/** @deprecated Use Project instead */
|
||||
export type TargetChannel = Project;
|
||||
|
||||
export interface ExternalChannelQueryParams {
|
||||
target_channel_id?: string;
|
||||
search?: string;
|
||||
}
|
||||
|
||||
export interface CreativeQueryParams {
|
||||
target_channel_id?: string;
|
||||
is_archived?: boolean;
|
||||
}
|
||||
|
||||
export interface PlacementQueryParams {
|
||||
target_channel_id?: string;
|
||||
external_channel_id?: string;
|
||||
creative_id?: string;
|
||||
is_archived?: boolean;
|
||||
date_from?: string; // ISO 8601
|
||||
date_to?: string; // ISO 8601
|
||||
sort?: "date" | "cost" | "cpf" | "subscriptions";
|
||||
order?: "asc" | "desc";
|
||||
}
|
||||
|
||||
export interface AnalyticsOverviewQueryParams {
|
||||
target_channel_id?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
}
|
||||
/** @deprecated Use Channel instead */
|
||||
export type ExternalChannel = Channel;
|
||||
|
||||
/** @deprecated Use PlacementCreateRequest with new fields */
|
||||
export type PurchaseCreateRequest = PlacementCreateRequest;
|
||||
|
||||
@@ -14,40 +14,8 @@ export const STORAGE_KEYS = {
|
||||
ACCESS_TOKEN: "tgex_access_token",
|
||||
REFRESH_TOKEN: "tgex_refresh_token",
|
||||
USER: "tgex_user",
|
||||
SELECTED_TARGET_CHANNEL: "tgex_selected_target_channel",
|
||||
} as const;
|
||||
|
||||
// API Endpoints
|
||||
export const API_ENDPOINTS = {
|
||||
// Auth
|
||||
AUTH_INIT: "/auth/init",
|
||||
AUTH_COMPLETE: "/auth/complete",
|
||||
AUTH_REFRESH: "/auth/refresh",
|
||||
AUTH_ME: "/auth/me",
|
||||
|
||||
// Target Channels
|
||||
TARGET_CHANNELS: "/target-channels",
|
||||
TARGET_CHANNEL: (id: string) => `/target-channels/${id}`,
|
||||
|
||||
// External Channels
|
||||
EXTERNAL_CHANNELS: "/external-channels",
|
||||
EXTERNAL_CHANNEL: (id: string) => `/external-channels/${id}`,
|
||||
EXTERNAL_CHANNELS_IMPORT: "/external-channels/import",
|
||||
|
||||
// Creatives
|
||||
CREATIVES: "/creatives",
|
||||
CREATIVE: (id: string) => `/creatives/${id}`,
|
||||
|
||||
// Purchases
|
||||
PURCHASES: "/purchases",
|
||||
PURCHASE: (id: string) => `/purchases/${id}`,
|
||||
PURCHASE_REFRESH_VIEWS: (id: string) => `/purchases/${id}/refresh-views`,
|
||||
|
||||
// Analytics
|
||||
ANALYTICS_OVERVIEW: "/analytics/overview",
|
||||
ANALYTICS_COSTS: "/analytics/costs",
|
||||
ANALYTICS_CHANNELS: "/analytics/channels",
|
||||
ANALYTICS_CREATIVES: "/analytics/creatives",
|
||||
SELECTED_WORKSPACE: "tgex_selected_workspace",
|
||||
SELECTED_PROJECT: "tgex_selected_project",
|
||||
} as const;
|
||||
|
||||
// Error Codes
|
||||
@@ -57,11 +25,6 @@ export const ERROR_CODES = {
|
||||
NOT_FOUND: "NOT_FOUND",
|
||||
VALIDATION_ERROR: "VALIDATION_ERROR",
|
||||
INTERNAL_ERROR: "INTERNAL_ERROR",
|
||||
CHANNEL_NOT_FOUND: "CHANNEL_NOT_FOUND",
|
||||
CHANNEL_ALREADY_EXISTS: "CHANNEL_ALREADY_EXISTS",
|
||||
INSUFFICIENT_PERMISSIONS: "INSUFFICIENT_PERMISSIONS",
|
||||
CREATIVE_IN_USE: "CREATIVE_IN_USE",
|
||||
INVALID_INVITE_LINK: "INVALID_INVITE_LINK",
|
||||
} as const;
|
||||
|
||||
// Date Formats
|
||||
@@ -72,34 +35,57 @@ export const DATE_FORMATS = {
|
||||
} as const;
|
||||
|
||||
// Pagination
|
||||
export const DEFAULT_PAGE_SIZE = 20;
|
||||
export const DEFAULT_PAGE_SIZE = 50;
|
||||
export const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
|
||||
|
||||
// Routes
|
||||
// Routes Builder
|
||||
export const buildRoute = {
|
||||
// Dashboard
|
||||
dashboard: (workspaceId: string) => `/dashboard/${workspaceId}`,
|
||||
|
||||
// Projects
|
||||
projects: (workspaceId: string) => `/dashboard/${workspaceId}/projects`,
|
||||
|
||||
// Channels
|
||||
channels: (workspaceId: string) => `/dashboard/${workspaceId}/channels`,
|
||||
|
||||
// Purchase Plan
|
||||
purchasePlans: (workspaceId: string) => `/dashboard/${workspaceId}/purchase-plans`,
|
||||
purchasePlan: (workspaceId: string, projectId: string) =>
|
||||
`/dashboard/${workspaceId}/purchase-plans/${projectId}`,
|
||||
|
||||
// Creatives
|
||||
creatives: (workspaceId: string) => `/dashboard/${workspaceId}/creatives`,
|
||||
creativeNew: (workspaceId: string) => `/dashboard/${workspaceId}/creatives/new`,
|
||||
creativeDetail: (workspaceId: string, creativeId: string) =>
|
||||
`/dashboard/${workspaceId}/creatives/${creativeId}`,
|
||||
|
||||
// Placements
|
||||
placements: (workspaceId: string) => `/dashboard/${workspaceId}/placements`,
|
||||
placementNew: (workspaceId: string) => `/dashboard/${workspaceId}/placements/new`,
|
||||
placementDetail: (workspaceId: string, placementId: string) =>
|
||||
`/dashboard/${workspaceId}/placements/${placementId}`,
|
||||
|
||||
// Analytics
|
||||
analytics: (workspaceId: string) => `/dashboard/${workspaceId}/analytics`,
|
||||
analyticsSpending: (workspaceId: string) =>
|
||||
`/dashboard/${workspaceId}/analytics/spending`,
|
||||
analyticsCreatives: (workspaceId: string) =>
|
||||
`/dashboard/${workspaceId}/analytics/creatives`,
|
||||
analyticsChannels: (workspaceId: string) =>
|
||||
`/dashboard/${workspaceId}/analytics/channels`,
|
||||
analyticsPlacements: (workspaceId: string) =>
|
||||
`/dashboard/${workspaceId}/analytics/placements`,
|
||||
|
||||
// Settings
|
||||
settings: (workspaceId: string) => `/dashboard/${workspaceId}/settings`,
|
||||
members: (workspaceId: string) => `/dashboard/${workspaceId}/settings/members`,
|
||||
invites: (workspaceId: string) => `/dashboard/${workspaceId}/settings/invites`,
|
||||
} as const;
|
||||
|
||||
// Static routes
|
||||
export const ROUTES = {
|
||||
HOME: "/",
|
||||
LOGIN: "/login",
|
||||
AUTH_COMPLETE: "/auth/complete",
|
||||
|
||||
CHANNELS: "/channels",
|
||||
CHANNEL_DETAIL: (id: string) => `/channels/${id}`,
|
||||
|
||||
EXTERNAL_CHANNELS: "/external-channels",
|
||||
EXTERNAL_CHANNEL_DETAIL: (id: string) => `/external-channels/${id}`,
|
||||
EXTERNAL_CHANNELS_IMPORT: "/external-channels/import",
|
||||
|
||||
CREATIVES: "/creatives",
|
||||
CREATIVE_NEW: "/creatives/new",
|
||||
CREATIVE_DETAIL: (id: string) => `/creatives/${id}`,
|
||||
CREATIVE_EDIT: (id: string) => `/creatives/${id}/edit`,
|
||||
|
||||
PURCHASES: "/purchases",
|
||||
PURCHASE_NEW: "/purchases/new",
|
||||
PURCHASE_DETAIL: (id: string) => `/purchases/${id}`,
|
||||
PURCHASE_EDIT: (id: string) => `/purchases/${id}/edit`,
|
||||
|
||||
ANALYTICS: "/analytics",
|
||||
ANALYTICS_COSTS: "/analytics/costs",
|
||||
ANALYTICS_CHANNELS: "/analytics/channels",
|
||||
ANALYTICS_CREATIVES: "/analytics/creatives",
|
||||
} as const;
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-avatar": "^1.1.11",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
@@ -35,6 +36,7 @@
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"lucide-react": "^0.553.0",
|
||||
"next": "16.0.1",
|
||||
|
||||
51
pnpm-lock.yaml
generated
51
pnpm-lock.yaml
generated
@@ -23,6 +23,9 @@ importers:
|
||||
'@hookform/resolvers':
|
||||
specifier: ^5.2.2
|
||||
version: 5.2.2(react-hook-form@7.66.0(react@19.2.0))
|
||||
'@radix-ui/react-alert-dialog':
|
||||
specifier: ^1.1.15
|
||||
version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
'@radix-ui/react-avatar':
|
||||
specifier: ^1.1.11
|
||||
version: 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
@@ -86,6 +89,9 @@ importers:
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
cmdk:
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
date-fns:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0
|
||||
@@ -586,6 +592,19 @@ packages:
|
||||
'@radix-ui/primitive@1.1.3':
|
||||
resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
|
||||
|
||||
'@radix-ui/react-alert-dialog@1.1.15':
|
||||
resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-arrow@1.1.7':
|
||||
resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
|
||||
peerDependencies:
|
||||
@@ -1571,6 +1590,12 @@ packages:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
cmdk@1.1.1:
|
||||
resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
|
||||
peerDependencies:
|
||||
react: ^18 || ^19 || ^19.0.0-rc
|
||||
react-dom: ^18 || ^19 || ^19.0.0-rc
|
||||
|
||||
codepage@1.15.0:
|
||||
resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
|
||||
engines: {node: '>=0.8'}
|
||||
@@ -3326,6 +3351,20 @@ snapshots:
|
||||
|
||||
'@radix-ui/primitive@1.1.3': {}
|
||||
|
||||
'@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||
'@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
'@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
|
||||
react: 19.2.0
|
||||
react-dom: 19.2.0(react@19.2.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.2
|
||||
'@types/react-dom': 19.2.2(@types/react@19.2.2)
|
||||
|
||||
'@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
@@ -4315,6 +4354,18 @@ snapshots:
|
||||
|
||||
clsx@2.1.1: {}
|
||||
|
||||
cmdk@1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||
'@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
'@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
|
||||
'@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
react: 19.2.0
|
||||
react-dom: 19.2.0(react@19.2.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
- '@types/react-dom'
|
||||
|
||||
codepage@1.15.0: {}
|
||||
|
||||
color-convert@2.0.1:
|
||||
|
||||
Reference in New Issue
Block a user