feat: include schedule config

src/components/molecules/ScheduleSettings.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { GenericModal } from "../atoms/GenericModal";
-import { MenuItem, TextField, Typography, Box } from "@mui/material";
+import { MenuItem, TextField, Typography, Box, Switch, FormControlLabel } from "@mui/material";
 import { Dropdown } from "../atoms/DropdownMui";
 import Button from "@mui/material/Button";
 import { modalStyle } from "./AddWhereCondModal";
@@ -10,28 +10,38 @@ interface ScheduleSettingsProps {
   isOpen: boolean;
   handleStart: (settings: ScheduleSettings) => void;
   handleClose: () => void;
+  initialSettings?: ScheduleSettings | null;
 }
 
 export interface ScheduleSettings {
+  enabled: boolean;
   runEvery: number;
   runEveryUnit: string;
   startFrom: string;
-  atTimeStart?: string; // Start time for "In Between"
-  atTimeEnd?: string;   // End time for "In Between"
+  atTimeStart?: string;
+  atTimeEnd?: string;
   timezone: string;
 }
 
-export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: ScheduleSettingsProps) => {
+export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: ScheduleSettingsProps) => {
   const [settings, setSettings] = useState<ScheduleSettings>({
+    enabled: true,
     runEvery: 1,
     runEveryUnit: 'HOURS',
     startFrom: 'MONDAY',
     atTimeStart: '00:00',
-    atTimeEnd: '01:00', // Default end time
+    atTimeEnd: '01:00',
     timezone: 'UTC'
   });
 
-  const handleChange = (field: keyof ScheduleSettings, value: string | number) => {
+  // Load initial settings if provided
+  useEffect(() => {
+    if (initialSettings) {
+      setSettings(initialSettings);
+    }
+  }, [initialSettings]);
+
+  const handleChange = (field: keyof ScheduleSettings, value: string | number | boolean) => {
     setSettings(prev => ({ ...prev, [field]: value }));
   };
 
@@ -66,6 +76,15 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
     'SUNDAY'
   ];
 
+  const handleSubmit = () => {
+    // If scheduling is disabled, only send the enabled flag
+    if (!settings.enabled) {
+      handleStart({ enabled: false } as ScheduleSettings);
+      return;
+    }
+    handleStart(settings);
+  };
+
   return (
     <GenericModal
       isOpen={isOpen}
@@ -81,6 +100,19 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
       }}>
         <Typography variant="h6" sx={{ marginBottom: '20px' }}>Schedule Settings</Typography>
 
+        <FormControlLabel
+          control={
+            <Switch
+              checked={settings.enabled}
+              onChange={(e) => handleChange('enabled', e.target.checked)}
+              color="primary"
+            />
+          }
+          label="Enable Scheduling"
+        />
+
+        {settings.enabled && (
+          <>
             <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
               <Typography sx={{ marginRight: '10px' }}>Run once every</Typography>
               <TextField
@@ -118,7 +150,6 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
               </Dropdown>
             </Box>
 
-        {/* Conditional rendering based on the selected runEveryUnit */}
             {['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
               <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                 <Box sx={{ marginRight: '20px' }}>
@@ -163,12 +194,23 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
                 ))}
               </Dropdown>
             </Box>
+          </>
+        )}
+
+        {/* {settings.enabled && (
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+            {initialSettings?.nextRunAt && (
+              `Next scheduled run: ${new Date(initialSettings.nextRunAt).toLocaleString()}`
+            )}
+          </Typography>
+        )} */}
 
         <Button
           variant="contained"
-          onClick={() => handleStart(settings)}
+          onClick={handleSubmit}
+          color={settings.enabled ? 'primary' : 'secondary'}
         >
-          Schedule
+          {settings.enabled ? 'Schedule' : 'Disable Schedule'}
         </Button>
       </Box>
     </GenericModal>