._.

src/AuthContext.jsx

@@ -22,6 +22,7 @@ export const AuthProvider = ({ children }) => {
     setRole(userData.user.role_name);
     localStorage.setItem("token", userData.token);
     localStorage.setItem("user", JSON.stringify(userData.user));
+    localStorage.setItem("role", JSON.stringify(userData.user.role_name));
     localStorage.setItem("isAuthenticated", true);
   };
 
@@ -31,6 +32,7 @@ export const AuthProvider = ({ children }) => {
     localStorage.removeItem("token");
     localStorage.removeItem("isAuthenticated");
     localStorage.removeItem("user");
+    localStorage.removeItem("role");
   };
 
   useEffect(() => {

src/components/AddOrderModal.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+const AddOrderModal = ({ show, onHide, onSubmit }) => {
+  const [deadline, setDeadline] = useState(new Date());
+  const [robotsCount, setRobotsCount] = useState(2000);
+  const [formError, setFormError] = useState("");
+
+  const handleSubmit = () => {
+    if (!deadline || robotsCount <= 0) {
+      setFormError("Пожалуйста, заполните все поля корректно.");
+      return;
+    }
+    setFormError("");
+    onSubmit({ deadline, robotsCount });
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div
+      className="modal fade show d-block"
+      tabIndex="-1"
+      role="dialog"
+      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+    >
+      <div className="modal-dialog modal-dialog-centered" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Добавить новый заказ</h5>
+            <button
+              type="button"
+              className="btn-close"
+              aria-label="Close"
+              onClick={onHide}
+            >
+              <span>&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            {formError && <p className="text-danger">{formError}</p>}
+            <div className="mb-3">
+              <label htmlFor="robotsCount" className="form-label">
+                Количество роботов:
+              </label>
+              <input
+                type="number"
+                className="form-control"
+                id="robotsCount"
+                value={robotsCount}
+                onChange={(e) => setRobotsCount(Number(e.target.value))}
+                min="1"
+                placeholder="Введите количество роботов"
+              />
+            </div>
+            <div className="mb-3">
+              <label htmlFor="deadline" className="form-label">
+                Дедлайн:
+              </label>
+              <DatePicker
+                selected={deadline}
+                onChange={(date) => setDeadline(date)}
+                className="form-control"
+                dateFormat="P"
+                placeholderText="Выберите дату дедлайна"
+              />
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={onHide}
+            >
+              Отмена
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={handleSubmit}
+            >
+              Подтвердить
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddOrderModal;

src/components/Header.jsx

@@ -3,9 +3,10 @@ import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../AuthContext";
 
 const Header = () => {
-  const { isAuthenticated, role, logout } = useAuth();
+  const { isAuthenticated, logout } = useAuth();
   const navigate = useNavigate();
   const user = JSON.parse(localStorage.getItem("user"));
+  const role = JSON.parse(localStorage.getItem("role"));
 
   const handleLogout = () => {
     logout();

src/pages/Home.jsx

@@ -3,8 +3,7 @@ import { useNavigate } from "react-router-dom";
 import DeliveryOrdersList from "../components/DeliveryOrdersList.jsx";
 import { getTotalOrders, calculateTotalOrder } from "../api.jsx";
 import { getStatuses } from "../api.jsx";
-import DatePicker from "react-datepicker";
+import AddOrderModal from "../components/AddOrderModal.jsx";
-import "react-datepicker/dist/react-datepicker.css";
 
 const Home = () => {
   const [statuses, setStatuses] = useState([]);
@@ -13,8 +12,7 @@ const Home = () => {
   const [loadingStatuses, setLoadingStatuses] = useState(true);
   const [loadingOrders, setLoadingOrders] = useState(true);
   const [loadingCreateOrder, setLoadingCreateOrder] = useState(false);
-  const [deliveryOrdersCount, setDeliveryOrdersCount] = useState(0);
+  const [showModal, setShowModal] = useState(false);
-  const [deadline, setDeadline] = useState(new Date());
   const navigate = useNavigate();
   const user = JSON.parse(localStorage.getItem("user"));
 
@@ -51,16 +49,17 @@ const Home = () => {
     }
   };
 
-  const handleCreateOrder = async () => {
+  const handleCreateOrder = async ({ deadline, robotsCount }) => {
     setLoadingCreateOrder(true);
     try {
-      await calculateTotalOrder();
+      await calculateTotalOrder({ deadline, robotsCount });
       alert("Начался расчет маршрутов. Заказ скоро появится в списке заказов.");
       fetchTotalOrders();
     } catch (error) {
       console.error("Ошибка при расчете заказа:", error);
     } finally {
       setLoadingCreateOrder(false);
+      setShowModal(false);
     }
   };
 
@@ -78,36 +77,13 @@ const Home = () => {
 
   return (
     <div className="container mt-4">
-      <div className="mb-3">
-        <label htmlFor="deadline" className="form-label">
-          Дедлайн:
-        </label>
-        <DatePicker
-          selected={deadline}
-          onChange={(date) => setDeadline(date)}
-          className="form-control"
-          dateFormat="P"
-          placeholderText="Выберите дату дедлайна"
-        />
-      </div>
       <div className="d-flex align-items-center mb-3">
         <button
           className="btn btn-primary"
-          onClick={handleCreateOrder}
+          onClick={() => setShowModal(true)}
           disabled={loadingCreateOrder || loadingStatuses}
         >
-          {loadingCreateOrder ? (
+          + Создать
-            <>
-              <span
-                className="spinner-border spinner-border-sm"
-                role="status"
-                aria-hidden="true"
-              ></span>
-              Загрузка...
-            </>
-          ) : (
-            "+ Создать"
-          )}
         </button>
         {loadingCreateOrder && (
           <span className="ms-2 text-muted">
@@ -141,10 +117,6 @@ const Home = () => {
                 <p>
                   <strong>Количество роботов:</strong> {order.count_robots}
                 </p>
-                <p>
-                  <strong>Количество подзаказов:</strong>{" "}
-                  {deliveryOrdersCount || 0}
-                </p>
                 <p>
                   <strong>Создатель:</strong>{" "}
                   {order.user_login || "Неизвестный пользователь"}
@@ -153,13 +125,18 @@ const Home = () => {
                 <DeliveryOrdersList
                   totalOrderId={order.id}
                   onSubOrderClick={handleSubOrderClick}
-                  setDeliveryOrdersCount={setDeliveryOrdersCount}
                 />
               </div>
             )}
           </div>
         ))
       )}
+
+      <AddOrderModal
+        show={showModal}
+        onHide={() => setShowModal(false)}
+        onSubmit={handleCreateOrder}
+      />
     </div>
   );
 };