feat: add top items on admin page

frontend/src/api/index.js

@@ -70,3 +70,4 @@ export const stockOut = (data) =>
   axios.post(`${API_URL}/admin/stock/out`, data);
 export const getStockMovements = () =>
   axios.get(`${API_URL}/admin/stock/movements`);
+export const getTopItems = () => axios.get(`${API_URL}/admin/items/top`);

frontend/src/components/AdminItems.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from "react";
 
 import {
-  getAllItems,
   deleteItem,
   addItem,
+  getAllItems,
   updateItem,
   uploadItemAvatar,
 } from "../api/index";
@@ -170,7 +170,9 @@ export default function AdminItems() {
 
   const loadItems = () => {
     getAllItems()
-      .then((res) => setItems(res.data))
+      .then((res) => {
+        setItems(res.data);
+      })
       .catch(() => { })
       .finally(() => setLoading(false));
   };

frontend/src/components/AdminTopItems.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+
+import { getTopItems } from "../api/index";
+
+export default function AdminItems() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadItems = () => {
+    getTopItems()
+      .then((res) => {
+        setItems(res.data);
+      })
+      .catch(() => { })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    loadItems();
+  }, []);
+
+  if (loading) return <p className="text-white/60">Загрузка...</p>;
+
+  return (
+    <div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left">
+          <thead className="text-white/50 uppercase text-xs border-b border-white/10">
+            <tr>
+              <th className="py-3 pr-4">Название</th>
+              <th className="py-3 pr-4">Общая стоимость продаж</th>
+              <th className="py-3 pr-4">Цена</th>
+              <th className="py-3 pr-4">Проданный объем</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item) => (
+              <tr
+                key={item.id}
+                className="border-b border-white/5 hover:bg-white/5 transition-colors"
+              >
+                <td className="py-3 pr-4 font-medium">{item.name}</td>
+                <td className="py-3 pr-4 text-white/70">{item.revenue}</td>
+                <td className="py-3 pr-4">{item.price} ₽</td>
+                <td className="py-3 pr-4">
+                  {item.sale_quantity} {item.unit}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/AdminPage.jsx

@@ -4,6 +4,7 @@ import AdminItems from "../components/AdminItems";
 import AdminOrders from "../components/AdminOrders";
 import AdminStock from "../components/AdminStock";
 import AdminStaff from "../components/AdminStaff";
+import AdminTopItems from "../components/AdminTopItems";
 
 export default function AdminPage() {
   const [tab, setTab] = useState("items");
@@ -13,6 +14,7 @@ export default function AdminPage() {
     { key: "orders", label: "Заказы" },
     { key: "stock", label: "Склад" },
     { key: "staff", label: "Сотрудники" },
+    { key: "topItems", label: "Лидеры продаж" },
   ];
 
   return (
@@ -41,6 +43,7 @@ export default function AdminPage() {
         {/* Содержимое активной вкладки */}
         {tab === "items" && <AdminItems />}
         {tab === "orders" && <AdminOrders />}
+        {tab === "topItems" && <AdminTopItems />}
         {tab === "stock" && <AdminStock />}
         {tab === "staff" && <AdminStaff />}
       </main>