._.

src/AppRouter.jsx

@@ -9,6 +9,7 @@ import Roles from "./pages/Roles.jsx";
 import Statuses from "./pages/Statuses.jsx";
 import Trucks from "./pages/Trucks.jsx";
 import Users from "./pages/Users.jsx";
+import DeliveryOrderDetails from "./pages/DeliveryOrderDetails.jsx";
 
 const RoutesComponent = () => (
   <Routes>
@@ -22,6 +23,7 @@ const RoutesComponent = () => (
       <Route path="/statuses" element={<Statuses />} />
       <Route path="/trucks" element={<Trucks />} />
       <Route path="/users" element={<Users />} />
+      <Route path="/sub-orders/:id" element={<DeliveryOrderDetails />} />
     </Route>
   </Routes>
 );

src/api.jsx

@@ -505,3 +505,21 @@ export const getDeliveryOrders = async (totalOrderId) => {
     throw error;
   }
 };
+
+export const getDeliveryAccessories = async (deliveryOrderId) => {
+  try {
+    const response = await axios.get(
+      `${API_URL}/delivery-orders/${deliveryOrderId}/accessories`,
+      {
+        headers: {
+          Authorization: `Bearer ${getAuthToken()}`,
+          Accept: "application/json",
+        },
+      }
+    );
+    return response.data; 
+  } catch (error) {
+    console.log("Ошибка при загрузке доставок:", error);
+    throw error; 
+  }
+};

src/pages/DeliveryOrderDetails.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { getDeliveryAccessories } from "../api.jsx";
+import { useParams } from "react-router-dom";
+
+const DeliveryOrderDetails = () => {
+  const { id: deliveryOrderId } = useParams();
+  const [deliveryAccessories, setDeliveryAccessories] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchDeliveryAccessories();
+  }, [deliveryOrderId]);
+
+  const fetchDeliveryAccessories = async () => {
+    try {
+      console.log(deliveryOrderId);
+      const accessories = await getDeliveryAccessories(deliveryOrderId);
+      setDeliveryAccessories(accessories);
+    } catch (error) {
+      console.error("Ошибка при загрузке доставок:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      {loading ? (
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Загрузка доставок...</span>
+        </div>
+      ) : (
+        <ul>
+          {deliveryAccessories.map((accessory) => (
+            <li key={accessory.id}>
+              Доставка: {accessory.name} (Город: {accessory.city_name})
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default DeliveryOrderDetails;