fix: split active and complited orders in profile

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>
+                  order={order}
+                  statusLabels={statusLabels}
+                />
+              ))}
+            </div>
+          )}
+        </section>
 
-                  <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}`)}
-                        />
-                        <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>
+          <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>
           )}