modal extracted to separate file

components/Modal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import common from '../src/helpers/common'; // Ensure this path is correct
+
+interface ModalProps {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  forDate: Date;
+  useFilterDate: boolean;
+  onUseFilterDateChange: (value: boolean) => void;
+}
+
+function Modal({ children, isOpen, onClose, forDate, useFilterDate, onUseFilterDateChange }: ModalProps) {
+  if (!isOpen) return null;
+  const isValidDate = forDate instanceof Date && !isNaN(forDate.getTime());
+  console.log("forDate", forDate, isValidDate);
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50">
+      <div className="bg-white p-4 rounded-md shadow-lg modal-content">
+        {isValidDate && (
+          <h2 className="text-xl font-bold mb-2">
+            <label className="cursor-pointer">
+              <input
+                type="checkbox"
+                checked={useFilterDate}
+                onChange={(e) => onUseFilterDateChange(e.target.checked)}
+              />
+              {` на разположение ${common.getDateFormated(forDate)} или ${common.getDayOfWeekName(forDate)}`}
+            </label>
+          </h2>
+        )}
+        {children}
+        <button type="button" onClick={onClose} className="mt-4 text-red-500">
+          Close
+        </button>
+      </div>
+      <div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
+    </div>
+  );
+}
+
+export default Modal;

components/calendar/ShiftComponent.tsx

@@ -1,51 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import axiosInstance from '../../src/axiosSecure';
 import PublisherSearchBox from '../publisher/PublisherSearchBox'; // Update the path
+import Modal from '../Modal';
 
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 
 const common = require('src/helpers/common');
 
 
-interface ModalProps {
-    children: React.ReactNode;
-    isOpen: boolean;
-    onClose: () => void;
-    forDate: Date;
-    useFilterDate: boolean;
-    onUseFilterDateChange: (value: boolean) => void;
-}
-
-function Modal({ children, isOpen, onClose, forDate, useFilterDate, onUseFilterDateChange }: ModalProps) {
-    if (!isOpen) return null;
-    const isValidDate = forDate instanceof Date && !isNaN(forDate.getTime());
-    console.log("forDate", forDate, isValidDate);
-
-    return (
-        <div className="fixed inset-0 flex items-center justify-center z-50">
-            <div className="bg-white p-4 rounded-md shadow-lg modal-content">
-                {isValidDate && (
-                    <h2 className="text-xl font-bold mb-2">
-                        <label className="cursor-pointer">
-                            <input
-                                type="checkbox"
-                                checked={useFilterDate}
-                                onChange={(e) => onUseFilterDateChange(e.target.checked)}
-                            />
-                            {` на разположение ${common.getDateFormated(forDate)} или ${common.getDayOfWeekName(forDate)}`}
-                        </label>
-                    </h2>
-                )}
-                {children}
-                <button type="button" onClick={onClose} className="mt-4 text-red-500">
-                    Close
-                </button>
-            </div>
-            <div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
-        </div>
-    );
-}
-
 
 function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, allPublishersInfo }) {
 

components/sidemenuData.js

@@ -15,11 +15,11 @@ const sidemenu = [
         text: "График",
         url: "/cart/calendar/schedule",
     },
-    // {
-    //     id: "myshedule",
-    //     text: "Моя График",
-    //     url: "/cart/publishers/myschedule",
-    // },
+    {
+        id: "myshedule",
+        text: "Моя График",
+        url: "/cart/publishers/myschedule",
+    },
     {
         id: "locations",
         text: "Местоположения",