feat: day of month handle

src/components/molecules/ScheduleSettings.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { GenericModal } from "../atoms/GenericModal";
-import { MenuItem, TextField, Typography, Box, Switch, FormControlLabel } from "@mui/material";
+import { MenuItem, TextField, Typography, Box } from "@mui/material";
 import { Dropdown } from "../atoms/DropdownMui";
 import Button from "@mui/material/Button";
 import { validMomentTimezones } from '../../constants/const';
@@ -18,6 +18,7 @@ export interface ScheduleSettings {
   runEvery: number;
   runEveryUnit: string;
   startFrom: string; 
+  dayOfMonth?: string;
   atTimeStart?: string;
   atTimeEnd?: string;
   timezone: string;
@@ -29,12 +30,12 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
     runEvery: 1,
     runEveryUnit: 'HOURS',
     startFrom: 'MONDAY', 
+    dayOfMonth: '', 
     atTimeStart: '00:00',
     atTimeEnd: '01:00',
     timezone: 'UTC'
   });
 
-  // Load initial settings if provided
   useEffect(() => {
     if (initialSettings) {
       setSettings(initialSettings);
@@ -66,20 +67,8 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
     'MONTHS'
   ];
 
-  const days = [
-    'MONDAY',
-    'TUESDAY',
-    'WEDNESDAY',
-    'THURSDAY',
-    'FRIDAY',
-    'SATURDAY',
-    'SUNDAY'
-  ];
-
   const { recordingId } = useGlobalInfoStore();
 
-  console.log(`Recoridng ID Shculde: ${recordingId}`);
-
   const deleteRobotSchedule = () => {
     if (recordingId) {
       deleteSchedule(recordingId);
@@ -92,6 +81,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
       runEvery: 1,
       runEveryUnit: 'HOURS',
       startFrom: 'MONDAY',
+      dayOfMonth: '', 
       atTimeStart: '00:00',
       atTimeEnd: '01:00',
       timezone: 'UTC'
@@ -101,7 +91,6 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
   const getRobotSchedule = async () => {
     if (recordingId) {
       const scheduleData = await getSchedule(recordingId);
-      console.log(`Robot found schedule: ${JSON.stringify(scheduleData, null, 2)}`);
       setSchedule(scheduleData);
     } else {
       console.error('No recording id provided');
@@ -132,11 +121,11 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
       }}>
         <Typography variant="h6" sx={{ marginBottom: '20px' }}>Schedule Settings</Typography>
         <>
-          {
+          {schedule !== null ? (
-            (schedule !== null) ? (
             <>
               <Typography>Run every: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
               <Typography>Start from: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
+              <Typography>On day: {schedule.dayOfMonth}</Typography>
               <Typography>At around: {schedule.atTimeStart}, {schedule.timezone} Timezone</Typography>
               <Box mt={2} display="flex" justifyContent="space-between">
                 <Button
@@ -172,20 +161,18 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                 </Dropdown>
               </Box>
 
+                {settings.runEveryUnit === 'MONTHS' && (
                 <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                  <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>Start from / On</Typography>
+                  <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>On Day of the Month</Typography>
-                  <Dropdown
+                  <TextField
-                    label=""
+                  type="number"
-                    id="startFrom"
+                  value={settings.dayOfMonth}
-                    value={settings.startFrom}
+                  onChange={(e) => handleChange('dayOfMonth', e.target.value)}
-                    handleSelect={(e) => handleChange('startFrom', e.target.value)}
+                  sx={textStyle}
-                    sx={dropDownStyle}
+                  inputProps={{ min: 1, max: 31 }}
-                  >
+                  />
-                    {days.map((day) => (
-                      <MenuItem key={day} value={day}>{day}</MenuItem>
-                    ))}
-                  </Dropdown>
                 </Box>
+                )}
 
               {['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
                 <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
@@ -240,8 +227,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                 </Button>
               </Box>
             </>
-            )
+          )}
-          }
         </>
       </Box>
     </GenericModal>