fix: adding first channel fix

app/(dashboard)/page.tsx

@@ -4,7 +4,7 @@
 // Dashboard Home Page
 // ============================================================================
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { DashboardHeader } from "@/components/layout/dashboard-header";
 import {
   Card,
@@ -13,7 +13,15 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { analyticsApi } from "@/lib/api";
+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,
@@ -26,15 +34,87 @@ import {
   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 } = useTargetChannel();
+  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);
@@ -59,10 +139,85 @@ export default function DashboardPage() {
     loadData();
   }, [selectedChannel]);
 
-  if (!selectedChannel) {
-    return (
-      <>
-        <DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
+  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">
@@ -73,139 +228,138 @@ export default function DashboardPage() {
             </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>
 
-  return (
-    <>
-      <DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
-      <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">
-                Подписчиков привлечено
-              </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">Средний 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>
 
-          <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 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>
-
-        <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>
+      )}
     </>
   );
 }