feat: add page cart

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import About from "./pages/About";
 import Shop from "./pages/Shop";
 import NotFoundPage from "./pages/NotFoundPage";
 import Contact from "./pages/Contact";
+import Cart from "./pages/Cart";
 
 const PrivateRoute = ({ children }) => {
   const token = localStorage.getItem("token");
@@ -26,6 +27,14 @@ export default function App() {
         <Route path="/about" element={<About />} />
         <Route path="/shop" element={<Shop />} />
         <Route path="/contact" element={<Contact />} />
+        <Route
+          path="/cart"
+          element={
+            <PrivateRoute>
+              <Cart />
+            </PrivateRoute>
+          }
+        />
 
         <Route path="*" element={<NotFoundPage />} />
       </Routes>

frontend/src/api/index.js

@@ -38,3 +38,8 @@ export const updateItem = (id, itemData) =>
 export const deleteItem = (id) => axios.delete(`${API_URL}/items/${id}`);
 
 export const getAllCategories = () => axios.get(`${API_URL}/getCategories`)
+
+export const getCart = () => axios.get(`${API_URL}/cart/`);
+export const addToCart = (data) => axios.post(`${API_URL}/cart/`, data)
+export const updateCartItem = (id, data) => axios.post(`${API_URL}/cart/${id}`, data)
+export const removeFromCart = (id) => axios.post(`${API_URL}/cart/${id}`)

frontend/src/pages/Cart.jsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import PageLayout from "../components/PageLayout";
+import { getCart } from "../api/index";
+export default function Cart() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    getCart()
+      .then((res) => {
+        setItems(res.data);
+      })
+      .catch(() => setError("Не удалось загрузить товары"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const total = items.reduce((sum, ci) => sum + ci.quantity * ci.item.price, 0);
+
+  if (loading) {
+    return (
+      <PageLayout>
+        <p className="text-white p-6">Загрузка товаров</p>
+      </PageLayout>
+    );
+  }
+  return (
+    <PageLayout>
+      <div className="px-6 md:px-16 text-white mb-6 grow">
+        <h1 className="text-2xl md:text-4xl font-medium uppercase mb-6">
+          Корзина
+        </h1>
+        {error && <p className="text-red-400">{error}</p>}
+        {items.length === 0 ? (
+          <p>Корзина пуста</p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {items.map((ci) => (
+              <div
+                key={ci.id}
+                className="flex items-center justify-between border-b border-white/20 pb-3"
+              >
+                <span className="font-medium ">{ci.item.name}</span>
+                <span>
+                  {ci.quanitity} x {ci.item.price} ={" "}
+                  {ci.quantity * ci.item.price}
+                </span>
+              </div>
+            ))}
+            <div className="mt-6 text-xl font-medium">Итого: {total}р.</div>
+          </div>
+        )}
+      </div>
+    </PageLayout>
+  );
+}