Add warning window before taking to work action

src/modules/Sidebar/InitialSidebar/TakeToWorkButton.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Modal } from "antd";
+import { Alert, Button, Modal, Popover } from "antd";
 import { useQueryClient } from "@tanstack/react-query";
 import { useFilters } from "../../../stores/useFilters";
 import { usePointSelection } from "../../../stores/usePointSelection";
@@ -6,18 +6,21 @@ import { STATUSES } from "../../../config";
 import { useState } from "react";
 import { useUpdateStatus } from "../../../hooks/useUpdateStatus";
 import { ArrowRightOutlined } from "@ant-design/icons";
+import { Title } from "../../../components/Title";
 
 export const TakeToWorkButton = () => {
   const { filters } = useFilters();
   const { prediction, categories, region } = filters;
   const { selection } = usePointSelection();
   const queryClient = useQueryClient();
+  const [popupVisible, setPopupVisible] = useState(false);
 
   const [isSuccessModalOpened, setIsSuccessModalOpened] = useState(false);
 
   const { mutate: updateStatus } = useUpdateStatus({
     onSuccess: () => {
       queryClient.invalidateQueries(["table", 1, filters]);
+      setPopupVisible(false);
       setIsSuccessModalOpened(true);
     },
   });
@@ -46,10 +49,27 @@ export const TakeToWorkButton = () => {
 
   return (
     <>
-      <Button type="primary" block className={"mt-2"} onClick={takeToWork}>
-        <span className="mr-1"> Взять в работу</span>
-        <ArrowRightOutlined />
-      </Button>
+      <Popover
+        trigger="click"
+        open={popupVisible}
+        onOpenChange={setPopupVisible}
+        content={
+          <div className="p-2">
+            <Title text="Уверены, что хотите взять отобранные локации в работу?" />
+            <div className="flex items-center justify-center gap-x-4">
+              <Button onClick={() => setPopupVisible(false)}>Отмена</Button>
+              <Button type="primary" onClick={takeToWork}>
+                Да
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <Button type="primary" block className={"mt-2"}>
+          <span className="mr-1">Взять в работу</span>
+          <ArrowRightOutlined />
+        </Button>
+      </Popover>
       <Modal
         title={" "}
         centered

src/modules/Sidebar/Sidebar.jsx

@@ -20,10 +20,12 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
   const { reset: resetSelection } = usePointSelection();
   const { isVisible, toggleVisibility } = useLayersVisibility();
 
+  console.log(mode);
+
   return (
     <div
       className={twMerge(
-        "h-screen p-3 box-content overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all pt-20",
+        "h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all pt-20",
         isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
       )}
       ref={ref}