Добавлены новые компоненты для управления категориями товаров: SaleCategoriesTable и CategoryPage. Обновлен компонент Navigation для добавления ссылки на страницу категорий. Добавлены стили для новой страницы категорий. Реализована логика получения, создания и редактирования категорий с использованием токена авторизации из куки.

src/app/account/page.tsx

@@ -26,6 +26,7 @@ import AccountNotifications from "../../components/AccountNotifications";
 import AccountAgentTransactionSection from "../../components/AccountAgentTransactionSection";
 import TabsNav from "../../components/TabsNav";
 import AccountIntegration from "../../components/AccountIntegration";
+import Cookies from "js-cookie";
 
 const initialNotifications = {
   emailNotifications: true,

src/app/category/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+import SaleCategoriesTable from "../../components/SaleCategoriesTable";
+import AuthGuard from "../../components/AuthGuard";
+import styles from "../../styles/category.module.css";
+
+export default function CategoryPage() {
+  return (
+    <AuthGuard>
+      <div className={styles.categoryPage}>
+        <h1 className={styles.categoryTitle}>Категории товаров</h1>
+        <SaleCategoriesTable />
+      </div>
+    </AuthGuard>
+  );
+} 

src/components/Navigation.tsx

@@ -18,6 +18,7 @@ const navItems: NavItem[] = [
   { id: "home", label: "Дашборд", href: "/" },
   { id: "stat", label: "Статистика", href: "/stat" },
   { id: "billing", label: "Финансы", href: "/billing" },
+  { id: "category", label: "Категории товаров", href: "/category" },
 ];
 
 const Navigation: React.FC = () => {

src/components/SaleCategoriesTable.tsx

@@ -0,0 +1,239 @@
+"use client";
+import React, { useMemo, useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  IconButton,
+  Tooltip
+} from "@mui/material";
+import { MaterialReactTable, type MRT_ColumnDef, useMaterialReactTable, type MRT_Row, type MRT_TableOptions } from "material-react-table";
+import { Add as AddIcon, Edit as EditIcon, Save as SaveIcon, Cancel as CancelIcon } from "@mui/icons-material";
+import Cookies from "js-cookie";
+
+interface SaleCategory {
+  id: number;
+  category: string;
+  description?: string;
+  perc: number;
+  create_dttm: string;
+  update_dttm: string;
+}
+
+const SaleCategoriesTable: React.FC = () => {
+  const [categories, setCategories] = useState<SaleCategory[]>([]);
+  const [validationErrors, setValidationErrors] = useState<Record<string, string | undefined>>({});
+  const [creationKey, setCreationKey] = useState(0);
+
+  const fetchCategories = async () => {
+    try {
+      const token = Cookies.get("access_token");
+      if (!token) return;
+      const res = await fetch("/api/account/category", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+      });
+      if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+      const data: SaleCategory[] = await res.json();
+      setCategories(data);
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  // CREATE
+  const handleCreateCategory: MRT_TableOptions<SaleCategory>["onCreatingRowSave"] = async ({ values, table }) => {
+    const token = Cookies.get("access_token");
+    if (!token) return;
+    try {
+      const res = await fetch("/api/account/category", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          category: values.category,
+          description: values.description,
+          perc: Number(values.perc)
+        })
+      });
+      if (!res.ok) {
+        if (res.status === 400) {
+          const data = await res.json();
+          setValidationErrors((prev) => ({ ...prev, category: data.detail || "Категория с таким именем уже существует" }));
+          return;
+        }
+        throw new Error("Ошибка создания категории");
+      }
+      await fetchCategories();
+      table.setCreatingRow(null);
+    } catch (e) {
+      alert("Ошибка создания категории");
+    }
+  };
+
+  // UPDATE
+  const handleSaveCategory: MRT_TableOptions<SaleCategory>["onEditingRowSave"] = async ({ values, table }) => {
+    const token = Cookies.get("access_token");
+    if (!token) return;
+    try {
+      const res = await fetch("/api/account/category", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          id: Number(values.id),
+          category: values.category,
+          description: values.description,
+          perc: Number(values.perc)
+        })
+      });
+      if (!res.ok) {
+        if (res.status === 400) {
+          const data = await res.json();
+          setValidationErrors((prev) => ({ ...prev, category: data.detail || "Категория с таким именем уже существует" }));
+          return;
+        }
+        throw new Error("Ошибка обновления категории");
+      }
+      await fetchCategories();
+      table.setEditingRow(null);
+    } catch (e) {
+      alert("Ошибка обновления категории");
+    }
+  };
+
+  // Валидация (минимальная)
+  const validateCategory = (values: Partial<SaleCategory>) => {
+    return {
+      category: !values.category ? "Обязательное поле" : undefined,
+      perc: values.perc === undefined || isNaN(Number(values.perc)) ? "Введите число" : undefined
+    };
+  };
+
+  const columns = useMemo<MRT_ColumnDef<SaleCategory>[]>(
+    () => [
+      {
+        accessorKey: "id",
+        header: "",
+        size: 1,
+        enableEditing: false,
+        enableHiding: false,
+        enableColumnActions: false,
+        enableSorting: false,
+        enableColumnFilter: false,
+        Cell: () => null,
+        Edit: () => null,
+        muiTableBodyCellProps: { sx: { display: 'none' } },
+        muiTableHeadCellProps: { sx: { display: 'none' } },
+      },
+      {
+        accessorKey: "category",
+        header: "Категория",
+        size: 200,
+        muiEditTextFieldProps: {
+          required: true,
+          error: !!validationErrors?.category,
+          helperText: validationErrors?.category,
+          onFocus: () => setValidationErrors((prev) => ({ ...prev, category: undefined }))
+        }
+      },
+      {
+        accessorKey: "description",
+        header: "Описание",
+        size: 250,
+        muiEditTextFieldProps: {
+          onFocus: () => undefined
+        }
+      },
+      {
+        accessorKey: "perc",
+        header: "% начисления",
+        size: 100,
+        muiEditTextFieldProps: {
+          required: true,
+          type: "number",
+          error: !!validationErrors?.perc,
+          helperText: validationErrors?.perc,
+          onFocus: () => setValidationErrors((prev) => ({ ...prev, perc: undefined }))
+        }
+      },
+      {
+        accessorKey: "create_dttm",
+        header: "Создана",
+        size: 160,
+        enableEditing: false,
+        Cell: ({ cell }) => new Date(cell.getValue<string>()).toLocaleString(),
+      },
+      {
+        accessorKey: "update_dttm",
+        header: "Обновлена",
+        size: 160,
+        enableEditing: false,
+        Cell: ({ cell }) => new Date(cell.getValue<string>()).toLocaleString(),
+      },
+    ],
+    [validationErrors],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data: categories,
+    createDisplayMode: "row",
+    editDisplayMode: "row",
+    enableEditing: true,
+    enableRowActions: false,
+    getRowId: (row) => String(row.id),
+    onCreatingRowSave: async (props) => {
+      const errors = validateCategory(props.values);
+      setValidationErrors(errors);
+      if (Object.values(errors).some(Boolean)) return;
+      await handleCreateCategory(props);
+    },
+    onEditingRowSave: async (props) => {
+      const errors = validateCategory(props.values);
+      setValidationErrors(errors);
+      if (Object.values(errors).some(Boolean)) return;
+      props.values.id = Number(props.values.id);
+      await handleSaveCategory(props);
+    },
+    onCreatingRowCancel: () => setValidationErrors({}),
+    onEditingRowCancel: () => setValidationErrors({}),
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Button
+        onClick={() => {
+          setValidationErrors({});
+          table.setEditingRow(null);
+          setCreationKey((k) => k + 1);
+          table.setCreatingRow(true);
+        }}
+        variant="contained"
+        startIcon={<AddIcon />}
+      >
+        Создать категорию
+      </Button>
+    ),
+    muiTableBodyCellProps: { sx: { fontSize: 14 } },
+    muiTableHeadCellProps: { sx: { fontWeight: 700 } },
+    initialState: {
+      pagination: { pageSize: 10, pageIndex: 0 },
+    },
+  });
+
+  useEffect(() => {
+    setValidationErrors({});
+  }, [table.getState().editingRow]);
+
+  return <MaterialReactTable key={creationKey} table={table} />;
+};
+
+export default SaleCategoriesTable; 

src/styles/category.module.css

@@ -0,0 +1,19 @@
+.categoryPage {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.categoryTitle {
+  font-size: 28px;
+  font-weight: bold;
+  color: #111827;
+  margin-bottom: 8px;
+}
+@media (max-width: 600px) {
+  .categoryPage {
+    gap: 16px;
+  }
+  .categoryTitle {
+    font-size: 16px;
+  }
+} 

src/types/tokens.ts

@@ -6,3 +6,4 @@ export interface Token {
     create_dttm: string;
     use_dttm?: string;
 }
+