fix: split active and complited orders in profile

frontend/src/components/OrderCard.jsx

@@ -0,0 +1,39 @@
+export default function OrderCard({ order, statusLabels }) {
+  return (
+    <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+      {/* шапка */}
+      <div className="flex justify-between mb-2">
+        <span className="font-medium">Заказ #{order.id}</span>
+        <span className="text-white/60 text-sm uppercase">
+          {statusLabels[order.status] || order.status}
+        </span>
+      </div>
+
+      {/* товары */}
+      <div className="flex flex-col gap-2 mb-3">
+        {order.Items?.map((oi) => (
+          <div
+            key={oi.id}
+            className="flex items-center gap-3 text-sm text-white/70"
+          >
+            <img
+              src={`/static/items/${oi.item?.avatar_url}`}
+              alt=""
+              className="w-10 h-10 object-cover rounded flex-shrink-0"
+            />
+            <span className="flex-grow">{oi.item?.name}</span>
+            <span className="whitespace-nowrap">
+              {oi.quantity} {oi.item?.unit} × {oi.price} ₽
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* подвал */}
+      <div className="flex justify-between pt-2 border-t border-white/10 text-sm">
+        <span className="text-white/50">{order.delivery_address}</span>
+        <span className="font-medium">Итого: {order.total_price} ₽</span>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Profile.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import PageLayout from "../components/PageLayout";
 import { getUserInfo, getUserOrders } from "../api";
+import OrderCard from "../components/OrderCard";
 
 export default function Profile() {
   const [user, setUser] = useState(null);
@@ -39,6 +40,14 @@ export default function Profile() {
       </PageLayout>
     );
   }
+
+  const activeOrders = orders.filter(
+    (o) => o.status === "new" || o.status === "packed",
+  );
+
+  const completedOrders = orders.filter(
+    (o) => o.status === "delivered" || o.status === "cancel",
+  );
   return (
     <PageLayout>
       <main className="px-6 md:px-16 grow w-full mb-10 text-white">
@@ -68,54 +77,37 @@ export default function Profile() {
             )}
           </h2>
         </section>
-        <section>
-          <h2 className="text-xl font-medium mb-4">Мои заказы</h2>
-          {orders.length === 0 ? (
-            <p>У вас пока нет заказов</p>
+        <section className="mb-10">
+          <h2 className="text-xl font-medium mb-4">Активные заказы</h2>
+          {activeOrders.length === 0 ? (
+            <p className="text-white/60">Нет активных заказов</p>
           ) : (
             <div className="flex flex-col gap-4">
-              {orders.map((order) => (
-                <div
-                  className="bg-white/5 rounded-lg p-4 border border-white/10"
+              {activeOrders.map((order) => (
+                <OrderCard
                   key={order.id}
-                >
-                  <div className="flex justify-between mb-2">
-                    <span className="font-medium text-sm md:text-base">
-                      Заказ #{order.id}
-                    </span>
-                    <span className="text-white/60 text-sm uppercase">
-                      {statusLabels[order.status]}
-                    </span>
-                  </div>
-
-                  <div className="flex flex-col gap-1 mb-3">
-                    {order.items?.map((oi) => (
-                      <div
-                        key={oi.id}
-                        className="flex justify-between pt-2 border-t border-white/10 text-sm items-center"
-                      >
-                        <img
-                          src={`/static/items/${oi.item?.avatar_url}`}
-                          alt={oi.item?.name}
-                          className="w-10 h-10 md:w-30 md:h-30 object-cover rounded shrink-0 cursor-pointer"
-                          onClick={() => navigate(`/items/${oi.item.id}`)}
+                  order={order}
+                  statusLabels={statusLabels}
                 />
-                        <span className="grow">{oi.item?.name}</span>
-                        <span className="whitespace-nowrap shrink-0">
-                          {oi.quantity} {oi.item?.unit} x {oi.price}р
-                        </span>
-                      </div>
               ))}
             </div>
-                  <div className="flex justify-between pt-2 border-t border-white/10 text-sm">
-                    <span className="text-white/50">
-                      {order.delivery_address}
-                    </span>
-                    <span className="font-medium">
-                      Итого: {order.total_price}
-                    </span>
-                  </div>
-                </div>
+          )}
+        </section>
+
+        <section>
+          <h2 className="text-xl font-medium mb-4 text-white/50">
+            Завершённые
+          </h2>
+          {completedOrders.length === 0 ? (
+            <p className="text-white/60">Нет завершённых заказов</p>
+          ) : (
+            <div className="flex flex-col gap-4">
+              {completedOrders.map((order) => (
+                <OrderCard
+                  key={order.id}
+                  order={order}
+                  statusLabels={statusLabels}
+                />
               ))}
             </div>
           )}