._.

src/pages/DeliveryOrderDetails.jsx

@@ -114,11 +114,11 @@ const DeliveryOrderDetails = () => {
     <div className="delivery-order-details">
       {loading ? (
         <div className="spinner-border" role="status">
-          <span className="visually-hidden">Загрузка...</span>
+          <span className="visually-hidden">Загрузка</span>
         </div>
       ) : (
         <div className="content-container">
-          <table className="table mb-5">
+          <table className="table table-bordered mb-5">
             <thead>
               <tr>
                 <th scope="col">Общая стоимость</th>
@@ -135,32 +135,39 @@ const DeliveryOrderDetails = () => {
             </tbody>
           </table>
 
-          <ol className="city-list">
+          <h3 className="mb-3">Маршрут</h3>
-            {deliveryAccessories.map((accessory, index) => {
+          <table className="table table-bordered">
-              const coord = coordinates.find(
+            <thead>
-                (c) => c.city === accessory.city_name
+              <tr>
-              );
+                <th scope="col">Город</th>
-              return (
+                <th scope="col">Комплектующее</th>
-                <li key={accessory.id} className="city-item">
+                <th scope="col">Количество</th>
-                  <strong>Доставка:</strong> {accessory.accessory_name}
+                <th scope="col">Объем</th>
-                  <span className="city-info">
+              </tr>
-                    (Город: {accessory.city_name}, Координаты:{" "}
+            </thead>
-                    {coord
+            <tbody>
-                      ? `${coord.latitude}, ${coord.longitude}`
+              {deliveryAccessories.map((accessory, index) => {
-                      : "Не найдены"}
+                const coord = coordinates.find(
-                    )
+                  (c) => c.city === accessory.city_name
-                  </span>
+                );
-                </li>
+                return (
-              );
+                  <tr key={index}>
-            })}
+                    <td>{accessory.city_name}</td>
-            <li className="city-item">
+                    <td>{accessory.accessory_name}</td>
-              <strong>Конечный пункт:</strong> {DELIVERY_CITY.name}
+                    <td>{accessory.count}</td>
-              <span className="city-info">
+                    <td>{accessory.volume}</td>
-                (Координаты: {DELIVERY_CITY.latitude}, {DELIVERY_CITY.longitude}
+                  </tr>
-                )
+                );
-              </span>
+              })}
-            </li>
+              <tr>
-          </ol>
+                <td>{DELIVERY_CITY.name}</td>
+                <td>Конечный пункт</td>
+                <td>-</td>
+                <td>-</td>
+              </tr>
+            </tbody>
+          </table>
+
           {coordinates.length > 0 && (
             <div className="map-container">
               <MapContainer