Добавлено использование токена авторизации из куки в компонентах: AgentsBarChart, AgentsTable, BillingMetricCards, BillingPieChart, BillingStatChart, MetricCards, PayoutsTransactionsTable, ReferralsTable, RevenueChart и SalesTable. Реализована проверка наличия токена перед выполнением запросов к API, добавлены соответствующие сообщения об ошибках при его отсутствии.

src/components/AccountAgentTransactionSection.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import DateFilters from "./DateFilters";
 import AccountAgentTransactionTable from "./AccountAgentTransactionTable";
 import styles from "../styles/account.module.css";
+import Cookies from 'js-cookie';
 
 export default function AccountAgentTransactionSection() {
   const [filters, setFilters] = useState({
@@ -12,6 +13,33 @@ export default function AccountAgentTransactionSection() {
   const [autoConfirmEnabled, setAutoConfirmEnabled] = useState(false);
   const [showConfirmationUI, setShowConfirmationUI] = useState(false);
 
+  useEffect(() => {
+    const fetchAutoApproveSettings = async () => {
+      const token = Cookies.get("access_token");
+      if (!token) {
+        console.warn("Токен авторизации не найден при загрузке настроек автоподтверждения.");
+        return;
+      }
+      try {
+        const res = await fetch("/api/account/auto-approve", {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
+        if (!res.ok) {
+          console.error('Ошибка при загрузке настроек автоподтверждения:', res.status, res.statusText);
+          return;
+        }
+        const data = await res.json();
+        setAutoConfirmEnabled(data.auto_approve_transactions);
+      } catch (error) {
+        console.error('Ошибка при загрузке настроек автоподтверждения:', error);
+      }
+    };
+
+    fetchAutoApproveSettings();
+  }, []);
+
   function handleApply() {
     setReloadKey(k => k + 1);
   }
@@ -25,24 +53,72 @@ export default function AccountAgentTransactionSection() {
     if (isChecked) {
       setShowConfirmationUI(true);
     } else {
+      updateAutoApproveSettings(false, false);
       setAutoConfirmEnabled(false);
       setShowConfirmationUI(false);
       console.log("Автоматическое подтверждение выключено.");
     }
   };
 
-  const handleConfirmYes = () => {
-    setAutoConfirmEnabled(true);
-    setShowConfirmationUI(false);
-    console.log("Автоматическое подтверждение включено и текущие транзакции будут подтверждены.");
-    // TODO: Добавить логику автоматического подтверждения текущих транзакций
+  const updateAutoApproveSettings = async (auto_approve: boolean, apply_to_current: boolean = false) => {
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден при попытке обновить настройки автоподтверждения.");
+      return;
+    }
+    try {
+      const res = await fetch("/api/account/auto-approve", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          auto_approve: auto_approve,
+          apply_to_current: apply_to_current,
+        })
+      });
+      if (!res.ok) {
+        const errorData = await res.json();
+        console.error('Ошибка при обновлении настроек автоподтверждения:', res.status, res.statusText, errorData);
+        return false;
+      }
+      const responseData = await res.json();
+      console.log('Настройка автоподтверждения успешно обновлена:', responseData);
+      if (apply_to_current) {
+          setReloadKey(k => k + 1);
+      }
+      return true;
+    } catch (error) {
+      console.error('Ошибка при отправке запроса на обновление настроек автоподтверждения:', error);
+      return false;
+    }
   };
 
-  const handleConfirmNo = () => {
-    setAutoConfirmEnabled(true); 
-    setShowConfirmationUI(false);
-    console.log("Автоматическое подтверждение включено для новых транзакций. Текущие остаются неподтвержденными.");
-    // Текущие транзакции остаются в статусе waiting, ничего дополнительно делать не нужно
+  const handleConfirmYes = async () => {
+    const success = await updateAutoApproveSettings(true, true);
+    if (success) {
+      setAutoConfirmEnabled(true);
+      setShowConfirmationUI(false);
+      console.log("Автоматическое подтверждение включено и текущие транзакции будут подтверждены.");
+    } else {
+        setAutoConfirmEnabled(false);
+        setShowConfirmationUI(false);
+         console.log("Включение автоматического подтверждения не удалось.");
+    }
+  };
+
+  const handleConfirmNo = async () => {
+    const success = await updateAutoApproveSettings(true, false);
+    if (success) {
+      setAutoConfirmEnabled(true);
+      setShowConfirmationUI(false);
+      console.log("Автоматическое подтверждение включено для новых транзакций. Текущие остаются неподтвержденными.");
+    } else {
+        setAutoConfirmEnabled(false);
+        setShowConfirmationUI(false);
+         console.log("Включение автоматического подтверждения не удалось.");
+    }
   };
 
   const handleConfirmCancel = () => {
@@ -67,6 +143,7 @@ export default function AccountAgentTransactionSection() {
                   checked={autoConfirmEnabled}
                   onChange={handleToggleChange}
                   className={styles.notificationsSwitchInput}
+                  disabled={showConfirmationUI}
                 />
                 <span
                   className={
@@ -116,7 +193,7 @@ export default function AccountAgentTransactionSection() {
         onApply={handleApply}
         onClear={handleClear}
       />
-      <AccountAgentTransactionTable filters={filters} reloadKey={reloadKey} />
+      <AccountAgentTransactionTable filters={filters} reloadKey={reloadKey} setReloadKey={setReloadKey} />
     </>
   );
 } 

src/components/AccountAgentTransactionTable.tsx

@@ -13,6 +13,7 @@ const STATUS_COLORS: Record<string, string> = {
   "error": "#EF4444", // Красный
   "process": "#3B82F6", // Синий
   "reject": "#800080", // Фиолетовый
+  "new": "#E30B5C", // Малиновый
 };
 
 function formatCurrency(amount: number) {
@@ -23,13 +24,15 @@ function formatCurrency(amount: number) {
   }) ?? "";
 }
 
-export default function AccountAgentTransactionTable({ filters, reloadKey }: { filters: { dateStart: string, dateEnd: string }, reloadKey: number }) {
+export default function AccountAgentTransactionTable({ filters, reloadKey, setReloadKey }: { filters: { dateStart: string, dateEnd: string }, reloadKey: number, setReloadKey: React.Dispatch<React.SetStateAction<number>> }) {
   const [data, setData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const token = Cookies.get("access_token");
 
     if (token) {
+      setIsLoading(true);
       const params = new URLSearchParams();
       if (filters.dateStart) params.append('date_start', filters.dateStart);
       if (filters.dateEnd) params.append('date_end', filters.dateEnd);
@@ -57,6 +60,9 @@ export default function AccountAgentTransactionTable({ filters, reloadKey }: { f
         .catch(error => {
           console.error('Ошибка при загрузке данных транзакций агентов:', error);
           setData([]);
+        })
+        .finally(() => {
+          setIsLoading(false);
         });
     } else {
       console.warn('Токен авторизации не найден в куках.');
@@ -74,7 +80,7 @@ export default function AccountAgentTransactionTable({ filters, reloadKey }: { f
         Cell: ({ cell }) => {
           const status = cell.getValue() as string;
           const color = STATUS_COLORS[status] || '#A3A3A3';
-          return <span style={{ color: color }}>{status}</span>;
+          return <span style={{ color: color, fontWeight: 600 }}>{status}</span>;
         }
       },
       { accessorKey: 'create_dttm', header: 'Дата создания', Cell: ({ cell }) => new Date(cell.getValue() as string).toLocaleDateString() },
@@ -93,16 +99,55 @@ export default function AccountAgentTransactionTable({ filters, reloadKey }: { f
     columns,
     data,
     enableRowSelection: true,
+    state: {
+      isLoading: isLoading,
+    },
     renderTopToolbarCustomActions: ({ table }) => (
       <Box sx={{ display: 'flex', gap: 2, p: 1, flexWrap: 'wrap' }}>
         <Button
-          onClick={() => {
+          onClick={async () => {
             const selectedRows = table.getSelectedRowModel().rows;
-            console.log('Выбранные строки для выплаты:', selectedRows.map(row => row.original));
-            // Здесь будет логика для отправки запроса на выплату
+            const transactionIdsToApprove = selectedRows.map(row => row.original.transaction_group);
+
+            if (transactionIdsToApprove.length === 0) {
+              console.warn('Выберите транзакции для выплаты.');
+              return;
+            }
+
+            const token = Cookies.get("access_token");
+            if (!token) {
+              console.warn('Токен авторизации не найден. Пожалуйста, войдите снова.');
+              return;
+            }
+
+            setIsLoading(true);
+            try {
+              const response = await fetch('/api/account/approve-transactions', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ transaction_ids: transactionIdsToApprove }),
+              });
+
+              const result = await response.json();
+
+              if (response.ok) {
+                console.log(result.msg || `Успешно утверждено ${result.approved_count || 0} транзакций.`);
+                table.toggleAllRowsSelected(false);
+                setReloadKey(prev => prev + 1);
+              } else {
+                console.error('Ошибка утверждения транзакций:', result);
+              }
+            } catch (error) {
+              console.error('Ошибка запроса утверждения транзакций:', error);
+            } finally {
+              setIsLoading(false);
+            }
           }}
           startIcon={<PaymentIcon />}
-          disabled={!table.getSelectedRowModel().rows.length}
+          disabled={!table.getSelectedRowModel().rows.length || isLoading}
           variant="contained"
           color="primary"
         >

src/components/AgentsBarChart.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, LabelList, Label } from "recharts";
 import { useEffect, useState } from "react";
+import Cookies from 'js-cookie';
 
 interface AgentBarData {
   name: string;
@@ -28,7 +29,19 @@ const AgentsBarChart: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetch("/api/dashboard/chart/agent")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setError("Токен авторизации не найден.");
+      setLoading(false);
+      return;
+    }
+
+    fetch("/api/dashboard/chart/agent", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then((res) => {
         if (!res.ok) throw new Error("Ошибка загрузки данных");
         return res.json();

src/components/AgentsTable.tsx

@@ -4,6 +4,7 @@ import styles from "../styles/stat.module.css";
 import { Box, Button } from '@mui/material';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
+import Cookies from 'js-cookie';
 
 function formatCurrency(amount: number) {
   return amount?.toLocaleString("ru-RU", {
@@ -20,7 +21,19 @@ export default function AgentsTable({ filters, reloadKey }: { filters: { dateSta
     const params = new URLSearchParams();
     if (filters.dateStart) params.append('date_start', filters.dateStart);
     if (filters.dateEnd) params.append('date_end', filters.dateEnd);
-    fetch(`/api/stat/agents?${params.toString()}`)
+
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setData([]); // Очистить данные, если токен отсутствует
+      return;
+    }
+
+    fetch(`/api/stat/agents?${params.toString()}`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then(res => res.json())
       .then(setData)
       .catch(() => setData([]));

src/components/BillingMetricCards.tsx

@@ -1,6 +1,7 @@
 import MetricCard from "./MetricCard";
 import styles from "../styles/billing.module.css";
 import React, { useEffect, useState } from "react";
+import Cookies from 'js-cookie';
 
 interface BillingCardsData {
   cost: number;
@@ -22,7 +23,19 @@ const BillingMetricCards: React.FC = () => {
   }
 
   useEffect(() => {
-    fetch("/api/billing/cards")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setError("Токен авторизации не найден.");
+      setLoading(false);
+      return;
+    }
+
+    fetch("/api/billing/cards", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then((res) => {
         if (!res.ok) throw new Error("Ошибка загрузки данных");
         return res.json();

src/components/BillingPieChart.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
 import styles from "../styles/billing.module.css";
+import Cookies from 'js-cookie';
 
 const STATUS_COLORS: Record<string, string> = {
   "done": "#10B981",
@@ -9,12 +10,23 @@ const STATUS_COLORS: Record<string, string> = {
   "error": "#EF4444",
   "process": "#3B82F6",
   "reject": "#800080",
+  "new": "#E30B5C",
 };
 
 const BillingPieChart: React.FC = () => {
   const [data, setData] = useState<{ name: string; value: number; fill: string }[]>([]);
   useEffect(() => {
-    fetch("/api/billing/chart/pie")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      return;
+    }
+
+    fetch("/api/billing/chart/pie", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then((res) => res.json())
       .then((apiData) => {
         const mapped = apiData.map((item: { status: string; count: number }) => ({

src/components/BillingStatChart.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import styles from "../styles/billing.module.css";
 import { TooltipProps } from "recharts";
 import { ValueType, NameType } from "recharts/types/component/DefaultTooltipContent";
+import Cookies from 'js-cookie';
 
 const statusColors: Record<string, string> = {
   done: "#10B981",
@@ -11,6 +12,7 @@ const statusColors: Record<string, string> = {
   waiting: "#F59E42",
   error: "#EF4444",
   reject: "#800080",
+  new: "#E30B5C",
 };
 
 const BillingStatChart: React.FC = () => {
@@ -18,7 +20,17 @@ const BillingStatChart: React.FC = () => {
   const [statuses, setStatuses] = useState<string[]>([]);
 
   useEffect(() => {
-    fetch("/api/billing/chart/stat")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      return;
+    }
+
+    fetch("/api/billing/chart/stat", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then(res => res.json())
       .then((apiData) => {
         // Собираем все уникальные даты и статусы

src/components/MetricCards.tsx

@@ -2,6 +2,7 @@
 import MetricCard from "./MetricCard";
 import styles from "../styles/dashboard.module.css";
 import React, { useEffect, useState } from "react";
+import Cookies from 'js-cookie';
 
 function formatCurrency(amount: number) {
   return amount.toLocaleString("ru-RU", {
@@ -25,7 +26,19 @@ export default function MetricCards() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetch("/api/dashboard/cards")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setError("Токен авторизации не найден.");
+      setLoading(false);
+      return;
+    }
+
+    fetch("/api/dashboard/cards", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then((res) => {
         if (!res.ok) throw new Error("Ошибка загрузки данных");
         return res.json();

src/components/PayoutsTransactionsTable.tsx

@@ -4,6 +4,7 @@ import styles from "../styles/billing.module.css";
 import { Box, Button } from '@mui/material';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
+import Cookies from 'js-cookie';
 
 
 function formatCurrency(amount: number) {
@@ -20,6 +21,7 @@ const statusColor: Record<string, string> = {
   'process': '#2196f3',
   'error': '#f44336',
   'reject': '#800080',
+  'new': '#E30B5C',
 };
 
 export default function PayoutsTransactionsTable({ filters, reloadKey }: { filters: { dateStart: string, dateEnd: string }, reloadKey: number }) {
@@ -28,7 +30,19 @@ export default function PayoutsTransactionsTable({ filters, reloadKey }: { filte
     const params = new URLSearchParams();
     if (filters.dateStart) params.append('date_start', filters.dateStart);
     if (filters.dateEnd) params.append('date_end', filters.dateEnd);
-    fetch(`/api/billing/payouts/transactions?${params.toString()}`)
+
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setData([]); // Очистить данные, если токен отсутствует
+      return;
+    }
+
+    fetch(`/api/billing/payouts/transactions?${params.toString()}`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then(res => res.json())
       .then(setData)
       .catch(() => setData([]));

src/components/ReferralsTable.tsx

@@ -4,6 +4,7 @@ import styles from "../styles/stat.module.css";
 import { Box, Button } from '@mui/material';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
+import Cookies from 'js-cookie';
 
 function formatCurrency(amount: number) {
   return amount?.toLocaleString("ru-RU", {
@@ -20,7 +21,19 @@ export default function ReferralsTable({ filters, reloadKey }: { filters: { date
     const params = new URLSearchParams();
     if (filters.dateStart) params.append('date_start', filters.dateStart);
     if (filters.dateEnd) params.append('date_end', filters.dateEnd);
-    fetch(`/api/stat/referrals?${params.toString()}`)
+
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setData([]); // Очистить данные, если токен отсутствует
+      return;
+    }
+
+    fetch(`/api/stat/referrals?${params.toString()}`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then(res => res.json())
       .then(setData)
       .catch(() => setData([]));

src/components/RevenueChart.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Label } from "recharts";
 import { useEffect, useState } from "react";
+import Cookies from 'js-cookie';
 
 const formatCurrency = (amount: number) => {
   return amount.toLocaleString("ru-RU", {
@@ -22,7 +23,19 @@ const RevenueChart: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetch("/api/dashboard/chart/total")
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setError("Токен авторизации не найден.");
+      setLoading(false);
+      return;
+    }
+
+    fetch("/api/dashboard/chart/total", {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then((res) => {
         if (!res.ok) throw new Error("Ошибка загрузки данных");
         return res.json();

src/components/SalesTable.tsx

@@ -4,6 +4,7 @@ import styles from "../styles/stat.module.css";
 import { Box, Button } from '@mui/material';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
+import Cookies from 'js-cookie';
 
 function formatCurrency(amount: number) {
   return amount?.toLocaleString("ru-RU", {
@@ -20,7 +21,19 @@ export default function SalesTable({ filters, reloadKey }: { filters: { dateStar
     const params = new URLSearchParams();
     if (filters.dateStart) params.append('date_start', filters.dateStart);
     if (filters.dateEnd) params.append('date_end', filters.dateEnd);
-    fetch(`/api/stat/sales?${params.toString()}`)
+
+    const token = Cookies.get("access_token");
+    if (!token) {
+      console.warn("Токен авторизации не найден.");
+      setData([]); // Очистить данные, если токен отсутствует
+      return;
+    }
+
+    fetch(`/api/stat/sales?${params.toString()}`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
       .then(res => res.json())
       .then(setData)
       .catch(() => setData([]));