._.

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>
+          <table className="table table-bordered">
+            <thead>
+              <tr>
+                <th scope="col">Город</th>
+                <th scope="col">Комплектующее</th>
+                <th scope="col">Количество</th>
+                <th scope="col">Объем</th>
+              </tr>
+            </thead>
+            <tbody>
               {deliveryAccessories.map((accessory, index) => {
                 const coord = coordinates.find(
                   (c) => c.city === accessory.city_name
                 );
                 return (
-                <li key={accessory.id} className="city-item">
+                  <tr key={index}>
-                  <strong>Доставка:</strong> {accessory.accessory_name}
+                    <td>{accessory.city_name}</td>
-                  <span className="city-info">
+                    <td>{accessory.accessory_name}</td>
-                    (Город: {accessory.city_name}, Координаты:{" "}
+                    <td>{accessory.count}</td>
-                    {coord
+                    <td>{accessory.volume}</td>
-                      ? `${coord.latitude}, ${coord.longitude}`
+                  </tr>
-                      : "Не найдены"}
-                    )
-                  </span>
-                </li>
                 );
               })}
-            <li className="city-item">
+              <tr>
-              <strong>Конечный пункт:</strong> {DELIVERY_CITY.name}
+                <td>{DELIVERY_CITY.name}</td>
-              <span className="city-info">
+                <td>Конечный пункт</td>
-                (Координаты: {DELIVERY_CITY.latitude}, {DELIVERY_CITY.longitude}
+                <td>-</td>
-                )
+                <td>-</td>
-              </span>
+              </tr>
-            </li>
+            </tbody>
-          </ol>
+          </table>
+
           {coordinates.length > 0 && (
             <div className="map-container">
               <MapContainer