дописал логику подгрузки характеристик продукта

front/src/api/client.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const API_BASE = g;/* process.env.REACT_APP_API_BASE || "";*/ 
+const client = axios.create({
+  baseURL: API_BASE,
+  headers: { "Content-Type": "application/json" },
+});
+
+export default client;

front/src/app/routes.tsx

@@ -4,6 +4,7 @@ import { Route } from "react-router";
 import Main from "../pages/Main/Main";
 import About from "../pages/About/About";
 import Products from "../pages/Products/Products";
+import ItemPage from "../pages/ItemPage/ItemPage";
 
 function AppRoutes() {
   return (  
@@ -12,6 +13,7 @@ function AppRoutes() {
         <Route index element={<Main />} />
         <Route path="about" element={<About />} />
         <Route path="products" element={<Products />} />
+        <Route path="/product/:id" element={<ItemPage />} />
       </Route>
     </Routes>
   )

front/src/app/store.ts

@@ -1,14 +1,17 @@
 import { configureStore } from "@reduxjs/toolkit";
-import catalogReducer from "../features/catalog/catalogSlice";
+import catalogReducer from "../features/catalog/productsSlice";
+import categoriesReducer from "../features/catalog/categoriesSlice"
+import productsReducer from "../features/catalog/productsSlice"
 
 export const store = configureStore({
   reducer: {
-    catalog: catalogReducer,
+    categories: categoriesReducer,
+    products: productsReducer,
   },
-  middleware: (getDefaultMiddleware) =>
+  /*middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false, // отключаем для async thunk
-    }),
+    }),*/
 });
 
 export type RootState = ReturnType<typeof store.getState>;

front/src/components/PriceLisForm/PriceLisForm.tsx

@@ -1,162 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { motion } from "framer-motion";
-import { useForm } from "react-hook-form";
-import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
-import styles from "./ModalRequestForm.module.css";
-import Button from "../Button/Button";
-import axios from "axios";
-
-// ✅ Схема валидации
-const schema = yup.object().shape({
-  name: yup.string().required("Введите имя"),
-  email: yup.string().email("Некорректный Email").required("Введите Email"),
-  phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
-});
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-interface FormData {
-  name: string;
-  email: string;
-  phone: string;
-}
-
-const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
-    console.log('ModalRequestForm render, open:', open); 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    reset,
-  } = useForm({ resolver: yupResolver(schema) });
-
-  const handlePhoneInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let value = e.target.value.replace(/\D/g, '');
-    
-    if (value.startsWith('7') || value.startsWith('8')) {
-      value = value.substring(1);
-    }
-    
-    let formattedValue = '+7 ';
-    
-    if (value.length > 0) {
-      formattedValue += '(' + value.substring(0, 3);
-    }
-    if (value.length > 3) {
-      formattedValue += ') ' + value.substring(3, 6);
-    }
-    if (value.length > 6) {
-      formattedValue += '-' + value.substring(6, 8);
-    }
-    if (value.length > 8) {
-      formattedValue += '-' + value.substring(8, 10);
-    }
-    
-    e.target.value = formattedValue;
-  };
-
-  const sendToBackend = async (data: FormData): Promise<boolean> => {
-    try{
-      const response = await axios.post("/api/requests", {
-      ...data,
-      source: "website-form",
-      timestamp: new Date().toISOString(),
-    })
-
-      return response.data.success;
-    }catch (error: any){
-      console.error("Error sending request:", error);
-
-      throw new Error("Не удалось отправить заявку. Попробуйте позже.");
-    }
-  };
-
-  const onSubmit = async (data: FormData) => {
-    try {
-      await sendToBackend(data);
-      
-      Modal.success({
-        title: "Прайс-лист отправлен!",
-        okText: "Хорошо",
-      });
-      
-      reset();
-      onClose();
-    } catch (error) {
-      Modal.error({
-        title: "Ошибка",
-        content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
-        okText: "Понятно",
-      });
-    }
-  };
-
-  return (
-    <Modal 
-      open={open} 
-      footer={null} 
-      onCancel={onClose} 
-      centered 
-      width={620}
-      closable={!isSubmitting}
-      maskClosable={!isSubmitting}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.35 }}
-        className={styles.modalBox}
-      >
-        <h2 className={styles.title}>СКАЧАЙТЕ ПРАЙС_ЛИСТ</h2>
-        <p className={styles.subtitle}>
-          Заполните форму ниже, и прайс-лист будт выслан вам на почту
-        </p>
-
-        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-          <div className={styles.field}>
-            <input 
-              className={styles.input} 
-              placeholder="Введите имя *" 
-              {...register("name")}
-              disabled={isSubmitting}
-            />
-            {errors.name && <span className={styles.error}>{errors.name.message}</span>}
-          </div>
-
-          <div className={styles.field}>
-            <input 
-              className={styles.input} 
-              placeholder="Введите email *" 
-              {...register("email")}
-              disabled={isSubmitting}
-            />
-            {errors.email && <span className={styles.error}>{errors.email.message}</span>}
-          </div>
-
-          <div className={styles.field}>
-            <input 
-              className={styles.input} 
-              placeholder="+7 (___) ___-__-__ *" 
-              {...register("phone")}
-              onInput={handlePhoneInput}
-              disabled={isSubmitting}
-            />
-            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
-          </div>
-
-          <Button 
-            label={isSubmitting ? "ОТПРАВКА..." : "СКАЧАТЬ ПРАЙС-ЛИСТ"} 
-            className={styles.button}
-          />
-        </form>
-      </motion.div>
-    </Modal>
-  );
-};
-
-export default PriceLisForm;

front/src/components/QuestionsBlock/QuestionsBlock.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import styles from "./QuestionsBlock.module.css";
 import Button from "../Button/Button";
 import { PhoneOutlined } from "@ant-design/icons";
-import PhoneRequest from "../../features/MainPage/PhoneRequest";
 
 const QuestionsBlock: React.FC = () => {
 
@@ -40,7 +39,7 @@ const QuestionsBlock: React.FC = () => {
           </p>
 
           {/* FORM */}
-          {/*<div className={styles.form}>
+          <div className={styles.form}>
             <input
               type="text"
               placeholder="+7 (___) ___-__-__"
@@ -50,8 +49,7 @@ const QuestionsBlock: React.FC = () => {
                                 label="ОТПРАВИТЬ" 
                                 onClick={handleClick}
                             />
-          </div>*/}
-          <PhoneRequest/>
+          </div>
         </div>
       </div>
     </section>

front/src/features/MainPage/MainPage.module.css

@@ -1,26 +0,0 @@
-.form {
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.input {
-  flex: 1;
-  padding: 18px 24px;
-  border-radius: 50px;
-  border: none;
-  font-size: 18px;
-  outline: none;
-}
-
-.error {
-  color: red;
-  margin-top: 10px;
-}
-
-.success {
-  color: green;
-  margin-top: 10px;
-}
-

front/src/features/MainPage/PhoneRequest.tsx

@@ -1,105 +0,0 @@
-import React, { useState } from "react";
-import axios from "axios";
-import styles from "./MainPage.module.css";
-import Button from "../../components/Button/Button";
-
-interface Props {
-  onSend?: (phone: string) => Promise<void>;
-}
-
-const PhoneRequest: React.FC<Props> = ({ onSend }) => {
-  const [phone, setPhone] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [error, setError] = useState("");
-
-  // Автоформатирование "+7 (999) 999-99-99"
-  const formatPhone = (value: string) => {
-    const digits = value.replace(/\D/g, "");
-
-    let result = "+7 ";
-    if (digits.length > 1) result += "(" + digits.substring(1, 4);
-    if (digits.length >= 4) result += ") " + digits.substring(4, 7);
-    if (digits.length >= 7) result += "-" + digits.substring(7, 9);
-    if (digits.length >= 9) result += "-" + digits.substring(9, 11);
-
-    return result;
-  };
-
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let v = e.target.value;
-
-    if (v.replace(/\D/g, "").length === 0) {
-      setPhone("");
-      return;
-    }
-
-    if (v[0] !== "+") {
-      v = "+7" + v;
-    }
-
-    setPhone(formatPhone(v));
-  };
-
-  const validatePhone = (p: string) => {
-    return p.replace(/\D/g, "").length === 11;
-  };
-
-  const handleSubmit = async () => {
-    setError("");
-
-    if (!validatePhone(phone)) {
-      setError("Введите корректный номер телефона");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      if (onSend) {
-        await onSend(phone);
-      } else {
-        
-        await axios.post("/api/contact/send-phone", { phone });
-      }
-
-      setSuccess(true);
-      setPhone("");
-
-      setTimeout(() => setSuccess(false), 3000);
-    } catch (e) {
-      setError("Ошибка отправки. Попробуйте позже.");
-    }
-
-    setLoading(false);
-  };
-
-  return (
-    <div className={styles.form}>
-      <input
-        className={styles.input}
-        placeholder="+7 (___) ___-__-__"
-        type="tel"
-        value={phone}
-        onChange={handlePhoneChange}
-        maxLength={18}
-      />
-    <Button 
-                                label="ОТПРАВИТЬ" 
-                                onClick={handleSubmit}
-                            />
-      {/*<button
-        className={styles.button}
-        onClick={handleSubmit}
-        disabled={loading}
-      >
-        {loading ? "..." : "ОТПРАВИТЬ"}
-      </button>*/}
-
-      {error && <p className={styles.error}>{error}</p>}
-      {success && <p className={styles.success}>Заявка отправлена!</p>}
-    </div>
-  );
-};
-
-export default PhoneRequest;

front/src/features/catalog/CategoriesGrid.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { onSelect?: (id:number) => void }
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

front/src/features/catalog/CategoryCards.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { 
+    onSelect?: (id:number) => void 
+}
+
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

front/src/features/catalog/CategoryFilters.tsx

@@ -1,22 +1,58 @@
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setSelectedCategory } from "../store/categoriesSlice";
+import { setSelectedCategory } from "./categoriesSlice";
 import styles from "./CategoriesSidebar.module.css";
+import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
+import { useState } from "react";
 
-export const CategoriesSidebar = () => {
-  const { items, selectedCategoryId } = useAppSelector(s => s.categories);
+export const CategoryFilters = () => {
   const dispatch = useAppDispatch();
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const products = useAppSelector(s => s.products);
+  const cat = cats.find(x => x.id === selectedCategoryId);
+  const [local, setLocal] = useState<Record<string, (string|number)[]>>({});
 
+  const apply = () => {
+    dispatch(setFilters(local));
+    dispatch(setPage(1));
+    if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local }));
+  };
+
+  if (!cat) return null;
   return (
-    <div className={styles.sidebar}>
-      {items.map(cat => (
-        <div
-          key={cat.id}
-          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
-          onClick={() => dispatch(setSelectedCategory(cat.id))}
-        >
-          {cat.name}
-        </div>
-      ))}
+    <div className={styles.wrap}>
+      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      <div className={styles.blocks}>
+        {cat.atributes.map(attr => (
+          <div key={attr.id} className={styles.block}>
+            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+            <div className={styles.options}>
+              {attr.vals.map(v => {
+                const key = `attr_${attr.id}`;
+                const active = local[key]?.includes(v.val);
+                return (
+                  <label key={v.id} className={styles.opt}>
+                    <input type="checkbox"
+                      checked={!!active}
+                      onChange={() => {
+                        const cur = local[key] ?? [];
+                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        setLocal({ ...local, [key]: next });
+                      }} />
+                    {v.val}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+      </div>
     </div>
   );
-};
+};
+
+export default CategoryFilters;

front/src/features/catalog/Pagination.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styles from "./Pagination.module.css";
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import { setPage, fetchProductsByCategory } from "./productsSlice";
+
+interface Props { categoryId: number }
+
+const Pagination: React.FC<Props> = ({ categoryId }) => {
+  const dispatch = useAppDispatch();
+  const { total, page, limit } = useAppSelector(s => s.products);
+  const totalPages = Math.ceil(total / limit);
+  if (totalPages <= 1) return null;
+
+  const go = (p:number) => {
+    dispatch(setPage(p));
+    dispatch(fetchProductsByCategory({ categoryId, page: p, limit }));
+    window.scrollTo({ top: 200, behavior: "smooth" });
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <button className={styles.go} onClick={() => go(1)} disabled={page===1}>В НАЧАЛО</button>
+
+      <div className={styles.pages}>
+        {Array.from({length: totalPages}, (_,i) => i+1).map(p => (
+          <button key={p} className={`${styles.page} ${p===page?styles.active:""}`} onClick={() => go(p)}>{p}</button>
+        ))}
+      </div>
+
+      <button className={styles.go} onClick={() => go(totalPages)} disabled={page===totalPages}>В КОНЕЦ</button>
+    </div>
+  );
+};
+export default Pagination;

front/src/features/catalog/ProductCard.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 import type { Product } from "../../types/product";
 import styles from "./Catalog.module.css";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
     product: Product;
 }
 
 const ProductCard: React.FC<Props> = ({ product }) => {
+  const navigate = useNavigate();
+
   return (
-    <div className={styles.card}>
+    <div 
+      className={styles.card}
+      onClick={() => navigate(`/product/${product.id}`)}
+    >
       <img src={product.image} alt={product.name} />
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>

front/src/features/catalog/ProductGrid.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import type { Product } from "../../types/product";
 import ProductCard from "./ProductCard";
 import styles from "./Catalog.module.css";
+import { useAppSelector } from "../../app/hooks";
 
-interface Props {
-  products: Product[];
-}
 
-const ProductGrid: React.FC<Props> = ({ products }) => {
+const ProductGrid: React.FC = () => {
+  const {items: products} = useAppSelector(p => p.products)
+
   return (
     <div className={styles.grid}>
       {products.map((p) => (

front/src/features/catalog/SidebarCategories.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import styles from "./SidebarCategories.module.css";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
+import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
+
+const SidebarCategories: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+
+    useEffect(() => { 
+        dispatch(fetchCategories()); 
+    }, [dispatch]);
+
+    const onClick = (catId: number) => {
+    dispatch(setSelectedCategory(catId));
+    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setPage(1));
+    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  };
+    return(
+        <aside className={styles.sidebar}>
+            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+            {loading ? <p>Загрузка...</p> : (
+                <ul className={styles.list}>
+                {items.map(cat => (
+                    <li key={cat.id}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        onClick={() => onClick(cat.id)}>
+                    {cat.name}
+                    </li>
+                ))}
+                </ul>
+            )}
+        </aside>
+    )
+}
+
+export default SidebarCategories;

front/src/features/catalog/catalogSlice.ts

@@ -1,78 +0,0 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import type {PayloadAction} from "@reduxjs/toolkit";
-import { fetchCategoryProducts, fetchCategories } from "../../api/catalogApi";
-import type { Product } from "../../types/product";
-
-interface CatalogState {
-  products: Product[];
-  filtered: Product[];
-  loading: boolean;
-  error: string | null;
-  filters: Record<string, string[]>;
-  currentCategory: string | null;
-}
-
-const initialState: CatalogState = {
-  products: [],
-  filtered: [],
-  loading: false,
-  error: null,
-  filters: {},
-  currentCategory: null,
-};
-
-export const getCategories = createAsyncThunk(
-  "catalog/getCategories",
-  async (categoryid: string) => {
-    const data = await fetchCategories(categoryid);
-    return data;
-  }
-);
-
-export const getCategoryProducts = createAsyncThunk(
-  "catalog/getCategoryProducts",
-  async (category: string) => {
-    const data = await fetchCategoryProducts(category);
-    return data;
-  }
-);
-
-const catalogSlice = createSlice({
-  name: "catalog",
-  initialState,
-  reducers: {
-    setFilter(state, action: PayloadAction<{ name: string; value: string }>) {
-      const { name, value } = action.payload;
-      const active = state.filters[name] || [];
-      state.filters[name] = active.includes(value)
-        ? active.filter((v) => v !== value)
-        : [...active, value];
-    },
-    applyFilters(state) {
-      state.filtered = state.products.filter((p) =>
-        Object.entries(state.filters).every(([key, values]) =>
-          values.length ? values.includes(p[key as keyof Product] as string) : true
-        )
-      );
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(getCategoryProducts.pending, (state) => {
-        state.loading = true;
-        state.error = null;
-      })
-      .addCase(getCategoryProducts.fulfilled, (state, action) => {
-        state.loading = false;
-        state.products = action.payload;
-        state.filtered = action.payload;
-      })
-      .addCase(getCategoryProducts.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.error.message || "Ошибка загрузки данных";
-      });
-  },
-});
-
-export const { setFilter, applyFilters } = catalogSlice.actions;
-export default catalogSlice.reducer;

front/src/features/catalog/catalogeSidebar.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-import { useDispatch } from "react-redux";
-import { setFilter, applyFilters } from "./catalogSlice";
-import styles from "./Catalog.module.css";
-import type { Category } from "../../types/categories";
-import type { CategoryAtributes } from "../../types/categories";
-import type { CategoryAtrVals } from "../../types/categories";
-
-interface Props{
-  categories: Category[];
-  atributes: CategoryAtributes[]
-  atrVals: CategoryAtrVals[];
-}
-
-const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
-  const dispatch = useDispatch();
-
-  const handleFilterChange = (name: string, value: string) => {
-    dispatch(setFilter({ name, value }));
-    dispatch(applyFilters());
-  };
-
-  return (
-    <aside className={styles.sidebar}>
-      <h3>ПАРАМЕТРЫ</h3>
-      <div className={styles.filterGroup}>
-        <p>размер:</p>
-        {atributes.map((a) => (
-          <>
-            <p>{a.name}</p>
-              {atrVals.map((b) => (
-                <label>
-                  <input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
-                </label>
-              ))}
-          </>
-        ))}
-
-
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
-        </label>
-      </div>
-      <div className={styles.filterGroup}>
-        <p>Форма выпуска:</p>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
-        </label>
-        <label>
-          <input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
-        </label>
-      </div>
-    </aside>
-  );
-};
-
-export default CatalogSidebar;

front/src/features/catalog/categoriesSlice.ts

@@ -1,11 +1,12 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import type { Category } from "../../types/categories";
+import axios from "axios";
 
 export const fetchCategories = createAsyncThunk<Category[]>(
-  "categories/fetch",
+  "categories/fetchCategories",
   async () => {
-    const res = await fetch("/api/categories");
-    return await res.json();
+    const res = await axios.get("/api/categories");
+    return res.data;
   }
 );
 

front/src/features/catalog/productsSlice.ts

@@ -0,0 +1,103 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type {PayloadAction} from "@reduxjs/toolkit";
+import client from "../../api/client";
+import type { Product } from "../../types/product";
+import axios from "axios";
+
+interface FetchParams {
+  categoryId: number;
+  page?: number;
+  limit?: number;
+  filters?: Record<string, string | number | (string | number)[]>;
+}
+
+export const fetchProductsByCategory = createAsyncThunk(
+  "products/fetchByCategory",
+  async (params: FetchParams) => {
+    const { categoryId, page = 1, limit = 9, filters} = params;
+    const qp = new URLSearchParams();
+    qp.append("categoryId", String(categoryId));
+    qp.append("page", String(page));
+    qp.append("limit", String(limit));
+    if (filters) {
+      Object.keys(filters).forEach((k) => {
+        const v = filters[k];
+        if (Array.isArray(v)) qp.append(k, v.join(","));
+        else qp.append(k, String(v));
+      });
+    }
+    const res = await client.get(`/products?${qp.toString()}`);
+    // ожидаем { items: Product[], total: number, page: number, limit: number }
+    return res.data;
+  }
+);
+
+export const fetchProductById = createAsyncThunk(
+  "product/fetchById",
+  async (id: string) => {
+    const response = await axios.get(`/api/products/${id}`);
+    return response.data;
+  }
+);
+
+interface ProductsState {
+  items: Product[];
+  total: number;
+  page: number;
+  limit: number;
+  loading: boolean;
+  error: string | null;
+  filtersApplied: Record<string, (string|number)[]>;
+}
+
+const initialState: ProductsState = {
+  items: [],
+  total: 0,
+  page: 1,
+  limit: 9,
+  loading: false,
+  error: null,
+  filtersApplied: {},
+};
+
+const slice = createSlice({
+  name: "products",
+  initialState,
+  reducers: {
+    setPage(state, action: PayloadAction<number>) { 
+      state.page = action.payload; 
+    },
+    setLimit(state, action: PayloadAction<number>) { 
+      state.limit = action.payload; 
+    },
+    setFilters(state, action: PayloadAction<ProductsState["filtersApplied"]>) {
+      state.filtersApplied = action.payload;
+    },
+    resetProducts(state) {
+      state.items = [];
+      state.total = 0;
+      state.page = 1;
+    }
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchProductsByCategory.pending, (s) => { 
+        s.loading = true; 
+        s.error = null; 
+      })
+      .addCase(fetchProductsByCategory.fulfilled, (s, a) => {
+        s.loading = false;
+        s.items = a.payload.items;
+        s.total = a.payload.total;
+        s.page = a.payload.page ?? s.page;
+        s.limit = a.payload.limit ?? s.limit;
+      })
+      .addCase(fetchProductsByCategory.rejected, (s, a) => { 
+        s.loading = false; 
+        s.error = a.error.message ?? "Ошибка"; 
+      });
+  }
+});
+
+export const { setPage, setLimit, setFilters, resetProducts } = slice.actions;
+export default slice.reducer;

front/src/pages/ItemPage/ItemPage.module.css

@@ -0,0 +1,93 @@
+.page {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.top {
+  background: #000;
+  padding: 15px 40px;
+}
+
+.back {
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.hero {
+  display: flex;
+  min-height: 500px;
+}
+
+.left {
+  flex: 1;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left img {
+  max-width: 400px;
+}
+
+.right {
+  flex: 1;
+  background: linear-gradient(
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0.7)
+    ),
+    url("/bg.jpg");
+  color: white;
+  padding: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.breadcrumbs {
+  color: #f5c400;
+  margin-bottom: 20px;
+}
+
+.download {
+  margin-top: 30px;
+  background: #f5c400;
+  border: none;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.tabs {
+  display: flex;
+  border-top: 1px solid #ddd;
+}
+
+.tabs button {
+  flex: 1;
+  padding: 20px;
+  border: none;
+  background: #eee;
+  cursor: pointer;
+}
+
+.active {
+  background: white;
+  font-weight: bold;
+}
+
+.content {
+  padding: 40px;
+  background: white;
+}
+
+.attrRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}

front/src/pages/ItemPage/ItemPage.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchProductById } from "../../features/catalog/productsSlice";
+import styles from "./ProductPage.module.css";
+import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
+
+const ItemPage = () => {
+    const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { items, loading } = useAppSelector((state) => state.products);
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+
+  const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
+
+  useEffect(() => {
+    if (id) dispatch(fetchProductById(id));
+  }, [id]);
+
+  const product = items.find((item) => item.id === Number(id));
+  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
+
+  if ((loading || !product)) return <div>Загрузка...</div>;
+  if(!category) return <div>Загрузка...</div>;
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.top}>
+        <button className={styles.back} onClick={() => navigate(-1)}>
+          ← НАЗАД В КАТАЛОГ
+        </button>
+      </div>
+
+      <div className={styles.hero}>
+        <div className={styles.left}>
+          <img src={product.image} alt={product.name} />
+        </div>
+
+        <div className={styles.right}>
+          <div className={styles.breadcrumbs}>
+            ГЛАВНАЯ / {category?.name} / {product.name}
+          </div>
+
+          <h1>{product.name}</h1>
+
+          <p className={styles.short}>{product.description}</p>
+
+          <button className={styles.download}>
+            СКАЧАТЬ ПРАЙС-ЛИСТ
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.tabs}>
+        <button
+          className={activeTab === "desc" ? styles.active : ""}
+          onClick={() => setActiveTab("desc")}
+        >
+          ОПИСАНИЕ
+        </button>
+        <button
+          className={activeTab === "chars" ? styles.active : ""}
+          onClick={() => setActiveTab("chars")}
+        >
+          ХАРАКТЕРИСТИКИ
+        </button>
+      </div>
+
+      <div className={styles.content}>
+        {activeTab === "desc" && (
+          <div>
+            <h2>ОПИСАНИЕ</h2>
+            <p>{product.description}</p>
+          </div>
+        )}
+
+        {activeTab === "chars" && (
+          <div>
+            <h2>ХАРАКТЕРИСТИКИ</h2>
+            {category.atributes?.map((attr: CategoryAtributes) => (
+              <div key={attr.id} className={styles.attrRow}>
+                <span>{attr.name}</span>
+                {attr.vals?.map((val: CategoryAtrVals) => (
+                  <div key={val.id}>
+                    <span>{val.val}</span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ItemPage;

front/src/pages/Products/Products.tsx

@@ -1,31 +1,36 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import type { RootState } from "../../app/store";
-import { getCategoryProducts } from "../../features/catalog/catalogSlice";
-import CatalogSidebar from "../../features/catalog/catalogeSidebar"
+import React from "react";
+import styles from "./ProductsPage.module.css";
+import SidebarCategories from "../../features/catalog/SidebarCategories";
+import CategoryCards from "../../features/catalog/CategoryCards";
+import Filters from "../../features/catalog/CategoryFilters";
 import ProductGrid from "../../features/catalog/ProductGrid";
-import styles from "../../features/catalog/catalog.module.css";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import Pagination from "../../features/catalog/Pagination";
+import { useAppSelector } from "../../app/hooks";
 
-const CatalogPage: React.FC = () => {
-  const { category } = useParams<{ category: string }>();
-  const dispatch = useAppDispatch()
-  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);
-
-  useEffect(() => {
-    if (category) dispatch(getCategoryProducts(category));
-  }, [category]);
+const ProductsPage: React.FC = () => {
+  const { selectedCategoryId } = useAppSelector(s => s.categories);
 
   return (
-    <div className={styles.catalogWrapper}>
-      <CatalogSidebar />
-      <div className={styles.productsSection}>
-        {loading && <p>Загрузка...</p>}
-        {error && <p>Ошибка: {error}</p>}
-        <ProductGrid products={filtered} />
+    <div className={styles.wrapper}>
+      <SidebarCategories />
+      <div className={styles.content}>
+        {!selectedCategoryId ? (
+          <CategoryCards onSelect={(id) => {}} />
+        ) : (
+          <>
+            <div className={styles.leftControls}>
+              <Filters />
+            </div>
+
+            <div className={styles.productsArea}>
+              <ProductGrid />
+              <Pagination categoryId={selectedCategoryId} />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
 };
 
-export default CatalogPage;
+export default ProductsPage;

front/src/types/categories.ts

@@ -12,5 +12,7 @@ export interface CategoryAtributes {
 export interface Category {
   id: number;
   name: string;
+  image?: string;
   atributes: CategoryAtributes[];
-}
+}
+

front/src/types/product.ts

@@ -3,6 +3,4 @@ export interface Product {
   name: string;
   image: string;
   description: string;
-  size: string;
-  category: string;
 }