._.

src/components/DeliveryOrdersList.jsx

@@ -1,8 +1,13 @@
 import { getDeliveryOrders } from "../api";
 import React, { useState, useEffect } from "react";
 
-const DeliveryOrdersList = ({ totalOrderId, onSubOrderClick }) => {
+const DeliveryOrdersList = ({
+  totalOrderId,
+  onSubOrderClick,
+  setDeliveryOrdersCount,
+}) => {
   const [deliveryOrders, setDeliveryOrders] = useState([]);
+  const [loadingDeliveryOrders, setLoadingDeliveryOrders] = useState(true);
 
   useEffect(() => {
     fetchDeliveryOrders();
@@ -11,25 +16,32 @@ const DeliveryOrdersList = ({ totalOrderId, onSubOrderClick }) => {
   const fetchDeliveryOrders = async () => {
     try {
       const orders = await getDeliveryOrders(totalOrderId);
+      setDeliveryOrdersCount(orders.length);
       setDeliveryOrders(orders);
     } catch (error) {
       console.error("Ошибка при загрузке подзаказов:", error);
+    } finally {
+      setLoadingDeliveryOrders(false);
     }
   };
 
   return (
     <div>
-      {deliveryOrders.map((order, index) => (
+      {loadingDeliveryOrders ? (
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden"></span>
+        </div>
+      ) : (
+        deliveryOrders.map((order, index) => (
           <div
             key={order.id}
             className="card mb-1"
             onClick={() => onSubOrderClick(order.id)}
           >
-          <div className="card-body">
-            Подзаказ #{index + 1} {/* Отображение порядкового номера */}
+            <div className="card-body">Подзаказ #{index + 1}</div>
           </div>
-        </div>
-      ))}
+        ))
+      )}
     </div>
   );
 };

src/pages/Home.jsx

@@ -9,12 +9,14 @@ const Home = () => {
   const [totalOrders, setTotalOrders] = useState([]);
   const [expandedOrderId, setExpandedOrderId] = useState(null);
   const [loadingStatuses, setLoadingStatuses] = useState(true);
+  const [loadingOrders, setLoadingOrders] = useState(true);
+  const [deliveryOrdersCount, setDeliveryOrdersCount] = useState(0);
   const navigate = useNavigate();
   const user = JSON.parse(localStorage.getItem("user"));
 
   useEffect(() => {
-    fetchTotalOrders();
     fetchStatuses();
+    fetchTotalOrders();
   }, []);
 
   const fetchStatuses = async () => {
@@ -34,6 +36,8 @@ const Home = () => {
       setTotalOrders(orders);
     } catch (error) {
       console.error("Ошибка при загрузке заказов:", error);
+    } finally {
+      setLoadingOrders(false);
     }
   };
 
@@ -100,7 +104,14 @@ const Home = () => {
         )}
       </button>
 
-      {totalOrders.map((order) => (
+      {loadingOrders ? (
+        <div className="text-center">
+          <div className="spinner-border mb-2" role="status">
+            <span className="visually-hidden"></span>
+          </div>
+        </div>
+      ) : (
+        totalOrders.map((order) => (
           <div key={order.id} className="card mb-2">
             <div
               className="card-header"
@@ -111,14 +122,32 @@ const Home = () => {
 
             {expandedOrderId === order.id && (
               <div className="card-body">
+                <p>
+                  <strong>Статус:</strong>{" "}
+                  {order.status_name || "Неизвестный статус"}
+                </p>
+                <p>
+                  <strong>Количество роботов:</strong> {order.count_robots}
+                </p>
+                <p>
+                  <strong>Количество подзаказов:</strong>{" "}
+                  {deliveryOrdersCount || 0}
+                </p>
+                <p>
+                  <strong>Создатель:</strong>{" "}
+                  {order.user_login || "Неизвестный пользователь"}
+                </p>
+
                 <DeliveryOrdersList
                   totalOrderId={order.id}
                   onSubOrderClick={handleSubOrderClick}
+                  setDeliveryOrdersCount={setDeliveryOrdersCount}
                 />
               </div>
             )}
           </div>
-      ))}
+        ))
+      )}
     </div>
   );
 };