feat: global platform update

app/(auth)/login/page.tsx

@@ -17,6 +17,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { AlertCircle, LogIn, Loader2 } from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import Image from "next/image";
 
 export default function LoginPage() {
   const { loginMock, error: authError } = useAuth();
@@ -43,15 +44,19 @@ export default function LoginPage() {
   const displayError = error || authError;
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#2B1D49] via-[#5F31F4] to-[#2B1D49] p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center space-y-2">
-          <div className="mx-auto w-12 h-12 bg-primary rounded-lg flex items-center justify-center mb-2">
-            <span className="text-2xl font-bold text-primary-foreground">
-              TG
-            </span>
+          <div className="mx-auto w-12 h-12 flex items-center justify-center mb-2">
+            <Image
+              src="/logo.webp"
+              width={64}
+              height={64}
+              alt="Smartpost"
+              className="rounded-xl"
+            />
           </div>
-          <CardTitle className="text-2xl">TGEX</CardTitle>
+          <CardTitle className="text-2xl">Smartpost</CardTitle>
           <CardDescription>
             Система управления рекламными закупками в Telegram
           </CardDescription>

app/dashboard/[workspaceId]/page.tsx

@@ -1,16 +1,46 @@
 "use client";
 
 // ============================================================================
-// Dashboard Home Page
+// Dashboard Overview (Главная)
 // ============================================================================
 
-import { useEffect, useState } from "react";
-import { Loader2, ShoppingCart, Users, TrendingUp, BarChart3 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { format, subDays, startOfDay, endOfDay } from "date-fns";
+import { ru } from "date-fns/locale";
+import {
+  ArrowDown,
+  ArrowUp,
+  Calendar as CalendarIcon,
+  BarChart3,
+  BarChartHorizontal,
+  Gauge,
+  Loader2,
+  Sparkles,
+  TrendingUp,
+  Users,
+} from "lucide-react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { DateRange } from "react-day-picker";
 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";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+import type { OverviewAnalytics } from "@/lib/types/api";
 
 // ============================================================================
 // Helpers
@@ -23,24 +53,94 @@ const formatNumber = (value: number | null | undefined, showSign = false): strin
   return formatted;
 };
 
-const formatCurrency = (value: number | null | undefined): string => {
+const formatCurrency = (
+  value: number | null | undefined,
+  digits = 0
+): string => {
   if (value === null || value === undefined) return "—";
   return new Intl.NumberFormat("ru-RU", {
     style: "currency",
     currency: "RUB",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
   }).format(value);
 };
 
+const formatDateShort = (value: string): string => {
+  const [year, month, day] = value.split("-");
+  if (!year || !month || !day) return value;
+  return `${day}.${month}`;
+};
+
+const DeltaPill: React.FC<{ delta?: number }> = ({ delta }) => {
+  if (delta === undefined || delta === null) return null;
+  const isPositive = delta > 0;
+  const isZero = delta === 0;
+  const color = isZero
+    ? "bg-muted text-muted-foreground"
+    : isPositive
+      ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200"
+      : "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200";
+  const Icon = isZero ? Sparkles : isPositive ? ArrowUp : ArrowDown;
+  const sign = delta > 0 ? "+" : "";
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
+      <Icon className="h-3 w-3" />
+      {sign}
+      {delta.toFixed(1)}%
+    </span>
+  );
+};
+
 // ============================================================================
 // Component
 // ============================================================================
 
 export default function DashboardPage() {
-  const { currentWorkspace, currentProject, isLoading: workspaceLoading, projects } = useWorkspace();
-  const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
+  const {
+    currentWorkspace,
+    isLoading: workspaceLoading,
+    selectedProjects,
+    projects,
+    getProjectFilterId,
+  } = useWorkspace();
+
+  const [overview, setOverview] = useState<OverviewAnalytics | null>(null);
   const [loading, setLoading] = useState(true);
+  const [cpfMode, setCpfMode] = useState<"top" | "worst">("top");
+  const [projectPage, setProjectPage] = useState(1);
+  const pageSize = 5;
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(() => ({
+    from: subDays(new Date(), 29),
+    to: new Date(),
+  }));
+
+  const dateFromIso = useMemo(() => {
+    return dateRange?.from
+      ? startOfDay(dateRange.from).toISOString()
+      : undefined;
+  }, [dateRange?.from]);
+
+  const dateToIso = useMemo(() => {
+    return dateRange?.to ? endOfDay(dateRange.to).toISOString() : undefined;
+  }, [dateRange?.to]);
+
+  const dateRangeLabel = useMemo(() => {
+    if (dateRange?.from && dateRange?.to) {
+      const sameYear =
+        dateRange.from.getFullYear() === dateRange.to.getFullYear();
+      const sameMonth =
+        sameYear && dateRange.from.getMonth() === dateRange.to.getMonth();
+      const fromFormat = sameMonth ? "d MMM" : "d MMM yyyy";
+      return `${format(dateRange.from, fromFormat, { locale: ru })} — ${format(dateRange.to, "d MMM yyyy", { locale: ru })}`;
+    }
+    if (dateRange?.from) {
+      return format(dateRange.from, "d MMM yyyy", { locale: ru });
+    }
+    return "За всё время";
+  }, [dateRange]);
+
+  const projectFilterId = getProjectFilterId();
 
   useEffect(() => {
     if (!currentWorkspace) {
@@ -51,19 +151,109 @@ export default function DashboardPage() {
     const loadData = async () => {
       try {
         setLoading(true);
-        const data = await demoAwareAnalyticsApi.spending(currentWorkspace.id, {
-          project_id: currentProject?.id,
+        const data = await demoAwareAnalyticsApi.overview(currentWorkspace.id, {
+          project_id: projectFilterId,
+          date_from: dateFromIso,
+          date_to: dateToIso,
         });
-        setSpending(data);
+        setOverview(data);
+        setProjectPage(1);
       } catch (err) {
-        console.error("Failed to load spending:", err);
+        console.error("Failed to load overview:", err);
       } finally {
         setLoading(false);
       }
     };
 
     loadData();
-  }, [currentWorkspace?.id, currentProject?.id]);
+  }, [currentWorkspace?.id, projectFilterId, dateFromIso, dateToIso]);
+
+  const stats = useMemo(
+    () => [
+      {
+        title: "Сумма закупов",
+        value: overview?.total_cost.value,
+        delta: overview?.total_cost.delta_percent,
+        format: (v: number | null | undefined) => formatCurrency(v, 0),
+        icon: BarChartHorizontal,
+      },
+      {
+        title: "Общий охват",
+        value: overview?.total_reach.value,
+        delta: overview?.total_reach.delta_percent,
+        format: (v: number | null | undefined) => formatNumber(v),
+        icon: Users,
+      },
+      {
+        title: "Всего размещений",
+        value: overview?.placements_count.value,
+        delta: overview?.placements_count.delta_percent,
+        format: (v: number | null | undefined) => formatNumber(v),
+        icon: Gauge,
+      },
+      {
+        title: "Кол-во подписок",
+        value: overview?.subscriptions_count.value,
+        delta: overview?.subscriptions_count.delta_percent,
+        format: (v: number | null | undefined) => formatNumber(v),
+        icon: TrendingUp,
+      },
+      {
+        title: "Средний CPM",
+        value: overview?.avg_cpm.value,
+        delta: overview?.avg_cpm.delta_percent,
+        format: (v: number | null | undefined) => formatCurrency(v, 2),
+        icon: BarChart3,
+      },
+      {
+        title: "Средний CPF",
+        value: overview?.avg_cpf.value,
+        delta: overview?.avg_cpf.delta_percent,
+        format: (v: number | null | undefined) => formatCurrency(v, 2),
+        icon: Sparkles,
+      },
+    ],
+    [overview]
+  );
+
+  const dailyStats = overview?.daily_stats ?? [];
+
+  const subscriptionsChartData = useMemo(
+    () =>
+      dailyStats.map((item) => ({
+        date: item.date,
+        dateLabel: formatDateShort(item.date),
+        value: item.subscriptions_delta,
+      })),
+    [dailyStats]
+  );
+
+  const costChartData = useMemo(
+    () =>
+      dailyStats.map((item) => ({
+        date: item.date,
+        dateLabel: formatDateShort(item.date),
+        value: item.cost,
+      })),
+    [dailyStats]
+  );
+
+  const cpfChartData = useMemo(
+    () =>
+      dailyStats.map((item) => ({
+        date: item.date,
+        dateLabel: formatDateShort(item.date),
+        value: item.cpf,
+      })),
+    [dailyStats]
+  );
+
+  const projectSpending = overview?.project_spending ?? [];
+  const totalProjectPages = Math.max(1, Math.ceil(projectSpending.length / pageSize));
+  const paginatedProjects = projectSpending.slice(
+    (projectPage - 1) * pageSize,
+    projectPage * pageSize
+  );
 
   if (workspaceLoading) {
     return (
@@ -92,134 +282,378 @@ export default function DashboardPage() {
     );
   }
 
-  // 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" />
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border/70 bg-card/40 p-3">
+          <div>
+            <p className="text-sm text-muted-foreground">Статистика за период</p>
+            <p className="text-base font-semibold">{dateRangeLabel}</p>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                className={cn(
+                  "min-w-[260px] justify-start text-left font-normal",
+                  !dateRange?.from && "text-muted-foreground"
+                )}
+              >
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {dateRange?.from ? (
+                  dateRange.to ? (
+                    <>
+                      {format(dateRange.from, "d MMM yyyy", { locale: ru })} —{" "}
+                      {format(dateRange.to, "d MMM yyyy", { locale: ru })}
+                    </>
+                  ) : (
+                    format(dateRange.from, "d MMM yyyy", { locale: ru })
+                  )
+                ) : (
+                  <span>Выберите период</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="end">
+              <Calendar
+                initialFocus
+                mode="range"
+                numberOfMonths={2}
+                locale={ru}
+                defaultMonth={dateRange?.from}
+                selected={dateRange}
+                onSelect={(range) => setDateRange(range)}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* Строка 1 — компактные показатели */}
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {stats.map((item) => (
+            <Card key={item.title} className="border-border/70">
+              <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
+                <div className="space-y-1">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    {item.title}
+                  </CardTitle>
+                  <DeltaPill delta={item.delta} />
+                </div>
+                <item.icon 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">{item.format(item.value)}</div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Строка 2 — три диаграммы */}
+        <div className="grid gap-4 lg:grid-cols-3">
+          <Card className="border-border/70">
+            <CardHeader className="flex items-start justify-between space-y-0 pb-2">
+              <CardTitle className="text-base font-semibold">Динамика подписчиков по дням</CardTitle>
+              <DeltaPill delta={overview?.subscriptions_count.delta_percent} />
             </CardHeader>
             <CardContent>
               {loading ? (
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <div className="flex h-[240px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
               ) : (
-                <div className="text-2xl font-bold">{formatCurrency(totalCost)}</div>
+                <ChartContainer
+                  config={{
+                    subscriptions_delta: {
+                      label: "Δ подписок",
+                      color: "hsl(var(--chart-1))",
+                    },
+                  }}
+                  className="aspect-auto h-[260px] w-full"
+                >
+                  <BarChart data={subscriptionsChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+                    <ReferenceLine y={0} stroke="#cbd5e1" />
+                    <Bar
+                      dataKey="value"
+                      radius={[4, 4, 0, 0]}
+                      label={false}
+                    >
+                      {subscriptionsChartData.map((entry) => (
+                        <Cell
+                          key={`cell-${entry.date}`}
+                          fill={entry.value >= 0 ? "#22c55e" : "#ef4444"}
+                        />
+                      ))}
+                    </Bar>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
+                          formatter={(value: number) => [formatNumber(value, true), "Δ подписок"]}
+                        />
+                      }
+                    />
+                  </BarChart>
+                </ChartContainer>
               )}
             </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" />
+          <Card className="border-border/70">
+            <CardHeader className="flex items-start justify-between space-y-0 pb-2">
+              <CardTitle className="text-base font-semibold">Траты по дням</CardTitle>
+              <DeltaPill delta={overview?.total_cost.delta_percent} />
             </CardHeader>
             <CardContent>
               {loading ? (
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <div className="flex h-[240px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
               ) : (
-                <div className="text-2xl font-bold">{formatNumber(totalSubscriptions)}</div>
+                <ChartContainer
+                  config={{
+                    cost: {
+                      label: "Затраты",
+                      color: "hsl(var(--chart-2))",
+                    },
+                  }}
+                  className="aspect-auto h-[260px] w-full"
+                >
+                  <BarChart data={costChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <YAxis
+                      tickLine={false}
+                      axisLine={false}
+                      tickMargin={8}
+                      tickFormatter={(value: number) => formatCurrency(value, 0)}
+                    />
+                    <Bar dataKey="value" fill="var(--color-cost)" radius={[4, 4, 0, 0]} />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
+                          formatter={(value: number) => [formatCurrency(value, 0), "Затраты"]}
+                        />
+                      }
+                    />
+                  </BarChart>
+                </ChartContainer>
               )}
             </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" />
+          <Card className="border-border/70">
+            <CardHeader className="flex items-start justify-between space-y-0 pb-2">
+              <CardTitle className="text-base font-semibold">Стоимость подписчика (CPF)</CardTitle>
+              <DeltaPill delta={overview?.avg_cpf.delta_percent} />
             </CardHeader>
             <CardContent>
               {loading ? (
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <div className="flex h-[240px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
               ) : (
-                <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>
+                <ChartContainer
+                  config={{
+                    cpf: {
+                      label: "CPF",
+                      color: "hsl(var(--chart-3))",
+                    },
+                  }}
+                  className="aspect-auto h-[260px] w-full"
+                >
+                  <BarChart data={cpfChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <YAxis
+                      tickLine={false}
+                      axisLine={false}
+                      tickMargin={8}
+                      tickFormatter={(value: number) => formatCurrency(value, 0)}
+                    />
+                    <Bar dataKey="value" fill="var(--color-cpf)" radius={[4, 4, 0, 0]} />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
+                          formatter={(value: number) => [formatCurrency(value, 2), "CPF"]}
+                        />
+                      }
+                    />
+                  </BarChart>
+                </ChartContainer>
               )}
             </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>
+        {/* Строка 3 — таблицы */}
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card className="border-border/70">
+            <Tabs value={cpfMode} onValueChange={(value) => setCpfMode(value as "top" | "worst")}>
+              <CardHeader className="flex flex-col gap-2 pb-3">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base font-semibold">Топ / Антитоп по CPF</CardTitle>
+                  <TabsList className="h-8">
+                    <TabsTrigger value="top" className="h-8 px-3 text-sm">
+                      Топ 5
+                    </TabsTrigger>
+                    <TabsTrigger value="worst" className="h-8 px-3 text-sm">
+                      Антитоп 5
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {loading ? (
+                  <div className="flex h-[200px] items-center justify-center">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : (
+                  <>
+                    <TabsContent value="top" className="mt-0">
+                      {overview?.top_channels_by_cpf?.length ? (
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead className="w-2/3">Канал</TableHead>
+                              <TableHead className="text-right">CPF</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {overview.top_channels_by_cpf.slice(0, 5).map((row) => (
+                              <TableRow key={row.channel_id}>
+                                <TableCell className="space-y-0.5">
+                                  <div className="font-medium">{row.title}</div>
+                                  {row.username && (
+                                    <a
+                                      href={`https://t.me/${row.username}`}
+                                      className="text-xs text-primary hover:underline"
+                                      target="_blank"
+                                      rel="noreferrer"
+                                    >
+                                      @{row.username}
+                                    </a>
+                                  )}
+                                </TableCell>
+                                <TableCell className="text-right font-mono font-semibold">
+                                  {formatCurrency(row.cpf, 2)}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">Нет данных</p>
+                      )}
+                    </TabsContent>
+                    <TabsContent value="worst" className="mt-0">
+                      {overview?.worst_channels_by_cpf?.length ? (
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead className="w-2/3">Канал</TableHead>
+                              <TableHead className="text-right">CPF</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {overview.worst_channels_by_cpf.slice(0, 5).map((row) => (
+                              <TableRow key={row.channel_id}>
+                                <TableCell className="space-y-0.5">
+                                  <div className="font-medium">{row.title}</div>
+                                  {row.username && (
+                                    <a
+                                      href={`https://t.me/${row.username}`}
+                                      className="text-xs text-primary hover:underline"
+                                      target="_blank"
+                                      rel="noreferrer"
+                                    >
+                                      @{row.username}
+                                    </a>
+                                  )}
+                                </TableCell>
+                                <TableCell className="text-right font-mono font-semibold">
+                                  {formatCurrency(row.cpf, 2)}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">Нет данных</p>
+                      )}
+                    </TabsContent>
+                  </>
+                )}
+              </CardContent>
+            </Tabs>
           </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Проекты</CardTitle>
-              <CardDescription>
-                {projects.length > 0
-                  ? `${projects.length} активных проектов`
-                  : "Нет активных проектов"}
-              </CardDescription>
+          <Card className="border-border/70">
+            <CardHeader className="flex items-center justify-between pb-3">
+              <CardTitle className="text-base font-semibold">Сумма закупов по проектам</CardTitle>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setProjectPage((p) => Math.max(1, p - 1))}
+                  disabled={projectPage === 1}
+                >
+                  Назад
+                </Button>
+                <span className="text-sm text-muted-foreground">
+                  {projectPage}/{totalProjectPages}
+                </span>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setProjectPage((p) => Math.min(totalProjectPages, p + 1))}
+                  disabled={projectPage === totalProjectPages}
+                >
+                  Вперед
+                </Button>
+              </div>
             </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>
-                  ))}
+              {loading ? (
+                <div className="flex h-[200px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                 </div>
+              ) : paginatedProjects.length === 0 ? (
+                <p className="text-sm text-muted-foreground">Нет данных</p>
               ) : (
-                <p className="text-sm text-muted-foreground">
-                  Добавьте бота в канал через Telegram для создания проекта
-                </p>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-2/3">Проект</TableHead>
+                      <TableHead className="text-right">Сумма</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {paginatedProjects.map((row) => (
+                      <TableRow key={row.project_id}>
+                        <TableCell className="space-y-0.5">
+                          <div className="font-medium">{row.project_title}</div>
+                          {row.project_username && (
+                            <span className="text-xs text-muted-foreground">@{row.project_username}</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="text-right font-mono font-semibold">
+                          {formatCurrency(row.total_cost, 0)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
               )}
             </CardContent>
           </Card>
@@ -228,4 +662,3 @@ export default function DashboardPage() {
     </>
   );
 }
-

app/dashboard/onboarding/page.tsx

@@ -55,7 +55,7 @@ export default function OnboardingPage() {
           <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>
+          <CardTitle className="text-2xl">Добро пожаловать в Smartpost!</CardTitle>
           <CardDescription>
             Создайте свой первый воркспейс для начала работы
           </CardDescription>

app/layout.tsx

@@ -14,7 +14,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "TGEX - Управление рекламными закупками",
+  title: "Smartpost - Управление рекламными закупками",
   description:
     "Система для владельцев каналов для управления рекламными закупками в Telegram",
 };