feat: add config action pages

src/components/robot/pages/RobotConfigPage.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { 
+  Box, 
+  Typography, 
+  Button, 
+  IconButton,
+  Divider,
+  useTheme
+} from '@mui/material';
+import { ArrowBack } from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+interface RobotConfigPageProps {
+  title: string;
+  children: React.ReactNode;
+  onSave?: () => void;
+  onCancel?: () => void;
+  saveButtonText?: string;
+  cancelButtonText?: string;
+  showSaveButton?: boolean;
+  showCancelButton?: boolean;
+  isLoading?: boolean;
+  icon?: React.ReactNode;
+  onBackToSelection?: () => void;
+  backToSelectionText?: string;
+}
+
+export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
+  title,
+  children,
+  onSave,
+  onCancel,
+  saveButtonText = "Save",
+  cancelButtonText = "Cancel",
+  showSaveButton = true,
+  showCancelButton = true,
+  isLoading = false,
+  icon,
+  onBackToSelection,
+  backToSelectionText = "← Back"
+}) => {
+  const theme = useTheme();
+
+  const handleBack = () => {
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  return (
+    <Box sx={{ 
+      maxWidth: 1000, 
+      margin: 'auto', 
+      px: 4,
+      py: 3,
+      minHeight: '80vh',
+      display: 'flex',
+      flexDirection: 'column',
+      width: '1000px',
+    }}>
+      <Box sx={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        minHeight: '64px',
+        mb: 2,
+        flexShrink: 0
+      }}>
+        <IconButton
+          onClick={handleBack}
+          sx={{
+            mr: 2,
+            color: theme.palette.text.primary,
+            '&:hover': {
+              bgcolor: theme.palette.action.hover
+            }
+          }}
+        >
+          <ArrowBack />
+        </IconButton>
+        {icon && (
+          <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
+            {icon}
+          </Box>
+        )}
+        <Typography 
+          variant="h4" 
+          sx={{ 
+            fontWeight: 600,
+            color: theme.palette.text.primary,
+            lineHeight: 1.2
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Divider sx={{ mb: 4, flexShrink: 0 }} />
+
+      <Box sx={{ 
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0
+      }}>
+        {children}
+      </Box>
+
+      {(showSaveButton || showCancelButton || onBackToSelection) && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: onBackToSelection ? 'space-between' : 'flex-end',
+            gap: 2,
+            pt: 3,
+            mt: 2,
+            borderTop: `1px solid ${theme.palette.divider}`,
+            flexShrink: 0,
+            width: '100%',
+            px: 3
+          }}
+        >
+          {onBackToSelection && (
+            <Button
+              variant="outlined"
+              onClick={onBackToSelection}
+              disabled={isLoading}
+              sx={{
+                color: '#ff00c3',
+                borderColor: '#ff00c3',
+                bgcolor: 'whitesmoke',
+                '&:hover': {
+                  bgcolor: '#f0f0f0',
+                  borderColor: '#cc0099'
+                }
+              }}
+            >
+              {backToSelectionText}
+            </Button>
+          )}
+
+          <Box sx={{ display: 'flex', gap: 2 }}>
+          {showCancelButton && (
+            <Button
+              variant="outlined"
+              onClick={handleBack}
+              disabled={isLoading}
+              sx={{
+                color: '#ff00c3',
+                borderColor: '#ff00c3',
+                bgcolor: 'white',
+                '&:hover': {
+                  borderColor: '#cc0099',
+                  bgcolor: '#fff5fc',
+                },
+                textTransform: 'none',
+                fontWeight: 500,
+                px: 3
+              }}
+            >
+              {cancelButtonText}
+            </Button>
+          )}
+          {showSaveButton && onSave && (
+            <Button
+              variant="contained"
+              onClick={onSave}
+              disabled={isLoading}
+              sx={{
+                bgcolor: '#ff00c3',
+                '&:hover': {
+                  bgcolor: '#cc0099',
+                  boxShadow: 'none',
+                },
+                textTransform: 'none',
+                fontWeight: 500,
+                px: 3,
+                boxShadow: 'none',
+              }}
+            >
+              {isLoading ? 'Saving...' : saveButtonText}
+            </Button>
+          )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};

src/components/robot/pages/RobotDuplicatePage.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect } from "react";
+import {
+  TextField,
+  Typography,
+  Box,
+  Button,
+} from "@mui/material";
+import { useGlobalInfoStore } from "../../../context/globalInfo";
+import {
+  duplicateRecording,
+  getStoredRecording,
+  getStoredRecordings,
+} from "../../../api/storage";
+import { WhereWhatPair } from "maxun-core";
+import { useTranslation } from "react-i18next";
+import { RobotConfigPage } from "./RobotConfigPage";
+import { useNavigate, useLocation } from "react-router-dom";
+
+interface RobotMeta {
+  name: string;
+  id: string;
+  createdAt: string;
+  pairs: number;
+  updatedAt: string;
+  params: any[];
+  url?: string;
+}
+
+interface RobotWorkflow {
+  workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+  runEvery: number;
+  runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
+  startFrom:
+    | "SUNDAY"
+    | "MONDAY"
+    | "TUESDAY"
+    | "WEDNESDAY"
+    | "THURSDAY"
+    | "FRIDAY"
+    | "SATURDAY";
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+  lastRunAt?: Date;
+  nextRunAt?: Date;
+  cronExpression?: string;
+}
+
+export interface RobotSettings {
+  id: string;
+  userId?: number;
+  recording_meta: RobotMeta;
+  recording: RobotWorkflow;
+  google_sheet_email?: string | null;
+  google_sheet_name?: string | null;
+  google_sheet_id?: string | null;
+  google_access_token?: string | null;
+  google_refresh_token?: string | null;
+  schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+  handleStart: (settings: RobotSettings) => void;
+}
+
+export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [targetUrl, setTargetUrl] = useState<string | undefined>("");
+  const [robot, setRobot] = useState<RobotSettings | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { recordingId, notify, setRerenderRobots } =
+    useGlobalInfoStore();
+
+  useEffect(() => {
+    getRobot();
+  }, []);
+
+  useEffect(() => {
+    if (robot) {
+      let url = robot.recording_meta.url;
+
+      if (!url) {
+        const lastPair =
+          robot?.recording.workflow[robot?.recording.workflow.length - 1];
+        url = lastPair?.what.find((action) => action.action === "goto")
+          ?.args?.[0];
+      }
+
+      setTargetUrl(url);
+    }
+  }, [robot]);
+
+  const getRobot = async () => {
+    if (recordingId) {
+      try {
+        const robot = await getStoredRecording(recordingId);
+        setRobot(robot);
+      } catch (error) {
+        notify("error", t("robot_duplication.notifications.robot_not_found"));
+      }
+    } else {
+      notify("error", t("robot_duplication.notifications.robot_not_found"));
+    }
+  };
+
+  const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTargetUrl(e.target.value);
+  };
+
+  const handleSave = async () => {
+    if (!robot || !targetUrl) {
+      notify("error", t("robot_duplication.notifications.url_required"));
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const success = await duplicateRecording(
+        robot.recording_meta.id,
+        targetUrl
+      );
+
+      if (success) {
+        setRerenderRobots(true);
+        notify(
+          "success",
+          t("robot_duplication.notifications.duplicate_success")
+        );
+        handleStart(robot);
+        navigate("/robots");
+      } else {
+        notify("error", t("robot_duplication.notifications.duplicate_error"));
+      }
+    } catch (error) {
+      notify("error", t("robot_duplication.notifications.unknown_error"));
+      console.error("Error updating Target URL:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate("/robots");
+  };
+
+  return (
+    <RobotConfigPage
+      title={t("robot_duplication.title")}
+      onSave={handleSave}
+      onCancel={handleCancel}
+      saveButtonText={t("robot_duplication.buttons.duplicate")}
+      cancelButtonText={t("robot_duplication.buttons.cancel")}
+      isLoading={isLoading}
+    >
+      <>
+        <Box style={{ display: "flex", flexDirection: "column" }}>
+          {robot && (
+            <>
+              <span>{t("robot_duplication.descriptions.purpose")}</span>
+              <br />
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t("robot_duplication.descriptions.example", {
+                    url1: "<code>producthunt.com/topics/api</code>",
+                    url2: "<code>producthunt.com/topics/database</code>",
+                  }),
+                }}
+              />
+              <br />
+              <span>
+                <b>{t("robot_duplication.descriptions.warning")}</b>
+              </span>
+              <TextField
+                label={t("robot_duplication.fields.target_url")}
+                key={t("robot_duplication.fields.target_url")}
+                value={targetUrl}
+                onChange={handleTargetUrlChange}
+                style={{ marginBottom: "20px", marginTop: "30px" }}
+              />
+            </>
+          )}
+        </Box>
+      </>
+    </RobotConfigPage>
+  );
+};

src/components/robot/pages/RobotEditPage.tsx

@@ -0,0 +1,643 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  TextField,
+  Typography,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+} from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { useGlobalInfoStore } from "../../../context/globalInfo";
+import { getStoredRecording, updateRecording } from "../../../api/storage";
+import { WhereWhatPair } from "maxun-core";
+import { RobotConfigPage } from "./RobotConfigPage";
+import { useNavigate, useLocation } from "react-router-dom";
+
+interface RobotMeta {
+  name: string;
+  id: string;
+  createdAt: string;
+  pairs: number;
+  updatedAt: string;
+  params: any[];
+  url?: string;
+}
+
+interface RobotWorkflow {
+  workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+  runEvery: number;
+  runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
+  startFrom:
+    | "SUNDAY"
+    | "MONDAY"
+    | "TUESDAY"
+    | "WEDNESDAY"
+    | "THURSDAY"
+    | "FRIDAY"
+    | "SATURDAY";
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+  lastRunAt?: Date;
+  nextRunAt?: Date;
+  cronExpression?: string;
+}
+
+export interface RobotSettings {
+  id: string;
+  userId?: number;
+  recording_meta: RobotMeta;
+  recording: RobotWorkflow;
+  google_sheet_email?: string | null;
+  google_sheet_name?: string | null;
+  google_sheet_id?: string | null;
+  google_access_token?: string | null;
+  google_refresh_token?: string | null;
+  schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+  handleStart: (settings: RobotSettings) => void;
+}
+
+interface CredentialInfo {
+  value: string;
+  type: string;
+}
+
+interface Credentials {
+  [key: string]: CredentialInfo;
+}
+
+interface CredentialVisibility {
+  [key: string]: boolean;
+}
+
+interface GroupedCredentials {
+  passwords: string[];
+  emails: string[];
+  usernames: string[];
+  others: string[];
+}
+
+interface ScrapeListLimit {
+  pairIndex: number;
+  actionIndex: number;
+  argIndex: number;
+  currentLimit: number;
+}
+
+export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [credentials, setCredentials] = useState<Credentials>({});
+  const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
+  const [robot, setRobot] = useState<RobotSettings | null>(null);
+  const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
+    passwords: [],
+    emails: [],
+    usernames: [],
+    others: [],
+  });
+  const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
+  const [scrapeListLimits, setScrapeListLimits] = useState<ScrapeListLimit[]>(
+    []
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isEmailPattern = (value: string): boolean => {
+    return value.includes("@");
+  };
+
+  const isUsernameSelector = (selector: string): boolean => {
+    return (
+      selector.toLowerCase().includes("username") ||
+      selector.toLowerCase().includes("user") ||
+      selector.toLowerCase().includes("email")
+    );
+  };
+
+  const determineCredentialType = (
+    selector: string,
+    info: CredentialInfo
+  ): "password" | "email" | "username" | "other" => {
+    if (
+      info.type === "password" ||
+      selector.toLowerCase().includes("password")
+    ) {
+      return "password";
+    }
+    if (
+      isEmailPattern(info.value) ||
+      selector.toLowerCase().includes("email")
+    ) {
+      return "email";
+    }
+    if (isUsernameSelector(selector)) {
+      return "username";
+    }
+    return "other";
+  };
+
+  useEffect(() => {
+    getRobot();
+  }, []);
+
+  useEffect(() => {
+    if (robot?.recording?.workflow) {
+      const extractedCredentials = extractInitialCredentials(
+        robot.recording.workflow
+      );
+      setCredentials(extractedCredentials);
+      setCredentialGroups(groupCredentialsByType(extractedCredentials));
+
+      findScrapeListLimits(robot.recording.workflow);
+    }
+  }, [robot]);
+
+  const findScrapeListLimits = (workflow: WhereWhatPair[]) => {
+    const limits: ScrapeListLimit[] = [];
+
+    workflow.forEach((pair, pairIndex) => {
+      if (!pair.what) return;
+
+      pair.what.forEach((action, actionIndex) => {
+        if (
+          action.action === "scrapeList" &&
+          action.args &&
+          action.args.length > 0
+        ) {
+          const arg = action.args[0];
+          if (arg && typeof arg === "object" && "limit" in arg) {
+            limits.push({
+              pairIndex,
+              actionIndex,
+              argIndex: 0,
+              currentLimit: arg.limit,
+            });
+          }
+        }
+      });
+    });
+
+    setScrapeListLimits(limits);
+  };
+
+  function extractInitialCredentials(workflow: any[]): Credentials {
+    const credentials: Credentials = {};
+
+    const isPrintableCharacter = (char: string): boolean => {
+      return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
+    };
+
+    workflow.forEach((step) => {
+      if (!step.what) return;
+
+      let currentSelector = "";
+      let currentValue = "";
+      let currentType = "";
+      let i = 0;
+
+      while (i < step.what.length) {
+        const action = step.what[i];
+
+        if (!action.action || !action.args?.[0]) {
+          i++;
+          continue;
+        }
+
+        const selector = action.args[0];
+
+        if (
+          action.action === "type" &&
+          action.args?.length >= 2 &&
+          typeof action.args[1] === "string" &&
+          action.args[1].length > 1
+        ) {
+          if (!credentials[selector]) {
+            credentials[selector] = {
+              value: action.args[1],
+              type: action.args[2] || "text",
+            };
+          }
+          i++;
+          continue;
+        }
+
+        if (
+          (action.action === "type" || action.action === "press") &&
+          action.args?.length >= 2 &&
+          typeof action.args[1] === "string"
+        ) {
+          if (selector !== currentSelector) {
+            if (currentSelector && currentValue) {
+              credentials[currentSelector] = {
+                value: currentValue,
+                type: currentType || "text",
+              };
+            }
+            currentSelector = selector;
+            currentValue = credentials[selector]?.value || "";
+            currentType =
+              action.args[2] || credentials[selector]?.type || "text";
+          }
+
+          const character = action.args[1];
+
+          if (isPrintableCharacter(character)) {
+            currentValue += character;
+          } else if (character === "Backspace") {
+            currentValue = currentValue.slice(0, -1);
+          }
+
+          if (!currentType && action.args[2]?.toLowerCase() === "password") {
+            currentType = "password";
+          }
+
+          let j = i + 1;
+          while (j < step.what.length) {
+            const nextAction = step.what[j];
+            if (
+              !nextAction.action ||
+              !nextAction.args?.[0] ||
+              nextAction.args[0] !== selector ||
+              (nextAction.action !== "type" && nextAction.action !== "press")
+            ) {
+              break;
+            }
+            if (nextAction.args[1] === "Backspace") {
+              currentValue = currentValue.slice(0, -1);
+            } else if (isPrintableCharacter(nextAction.args[1])) {
+              currentValue += nextAction.args[1];
+            }
+            j++;
+          }
+
+          credentials[currentSelector] = {
+            value: currentValue,
+            type: currentType,
+          };
+
+          i = j;
+        } else {
+          i++;
+        }
+      }
+
+      if (currentSelector && currentValue) {
+        credentials[currentSelector] = {
+          value: currentValue,
+          type: currentType || "text",
+        };
+      }
+    });
+
+    return credentials;
+  }
+
+  const groupCredentialsByType = (
+    credentials: Credentials
+  ): GroupedCredentials => {
+    return Object.entries(credentials).reduce(
+      (acc: GroupedCredentials, [selector, info]) => {
+        const credentialType = determineCredentialType(selector, info);
+
+        switch (credentialType) {
+          case "password":
+            acc.passwords.push(selector);
+            break;
+          case "email":
+            acc.emails.push(selector);
+            break;
+          case "username":
+            acc.usernames.push(selector);
+            break;
+          default:
+            acc.others.push(selector);
+        }
+
+        return acc;
+      },
+      { passwords: [], emails: [], usernames: [], others: [] }
+    );
+  };
+
+  const getRobot = async () => {
+    if (recordingId) {
+      try {
+        const robot = await getStoredRecording(recordingId);
+        setRobot(robot);
+      } catch (error) {
+        notify("error", t("robot_edit.notifications.update_failed"));
+      }
+    } else {
+      notify("error", t("robot_edit.notifications.update_failed"));
+    }
+  };
+
+  const handleClickShowPassword = (selector: string) => {
+    setShowPasswords((prev) => ({
+      ...prev,
+      [selector]: !prev[selector],
+    }));
+  };
+
+  const handleRobotNameChange = (newName: string) => {
+    setRobot((prev) =>
+      prev
+        ? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } }
+        : prev
+    );
+  };
+
+  const handleCredentialChange = (selector: string, value: string) => {
+    setCredentials((prev) => ({
+      ...prev,
+      [selector]: {
+        ...prev[selector],
+        value,
+      },
+    }));
+  };
+
+  const handleLimitChange = (
+    pairIndex: number,
+    actionIndex: number,
+    argIndex: number,
+    newLimit: number
+  ) => {
+    setRobot((prev) => {
+      if (!prev) return prev;
+
+      const updatedWorkflow = [...prev.recording.workflow];
+      if (
+        updatedWorkflow.length > pairIndex &&
+        updatedWorkflow[pairIndex]?.what &&
+        updatedWorkflow[pairIndex].what.length > actionIndex &&
+        updatedWorkflow[pairIndex].what[actionIndex].args &&
+        updatedWorkflow[pairIndex].what[actionIndex].args.length > argIndex
+      ) {
+        updatedWorkflow[pairIndex].what[actionIndex].args[argIndex].limit =
+          newLimit;
+
+        setScrapeListLimits((prev) => {
+          return prev.map((item) => {
+            if (
+              item.pairIndex === pairIndex &&
+              item.actionIndex === actionIndex &&
+              item.argIndex === argIndex
+            ) {
+              return { ...item, currentLimit: newLimit };
+            }
+            return item;
+          });
+        });
+      }
+
+      return {
+        ...prev,
+        recording: { ...prev.recording, workflow: updatedWorkflow },
+      };
+    });
+  };
+
+  const handleTargetUrlChange = (newUrl: string) => {
+    setRobot((prev) => {
+      if (!prev) return prev;
+
+      const updatedWorkflow = [...prev.recording.workflow];
+      const lastPairIndex = updatedWorkflow.length - 1;
+
+      if (lastPairIndex >= 0) {
+        const gotoAction = updatedWorkflow[lastPairIndex]?.what?.find(
+          (action) => action.action === "goto"
+        );
+        if (gotoAction && gotoAction.args && gotoAction.args.length > 0) {
+          gotoAction.args[0] = newUrl;
+        }
+      }
+
+      return {
+        ...prev,
+        recording_meta: { ...prev.recording_meta, url: newUrl },
+        recording: { ...prev.recording, workflow: updatedWorkflow },
+      };
+    });
+  };
+
+  const renderAllCredentialFields = () => {
+    return (
+      <>
+        {renderCredentialFields(
+          credentialGroups.usernames,
+          t("Username"),
+          "text"
+        )}
+
+        {renderCredentialFields(credentialGroups.emails, t("Email"), "text")}
+
+        {renderCredentialFields(
+          credentialGroups.passwords,
+          t("Password"),
+          "password"
+        )}
+
+        {renderCredentialFields(credentialGroups.others, t("Other"), "text")}
+      </>
+    );
+  };
+
+  const renderScrapeListLimitFields = () => {
+    if (scrapeListLimits.length === 0) return null;
+
+    return (
+      <>
+        <Typography variant="body1" style={{ marginBottom: "20px" }}>
+          {t("List Limits")}
+        </Typography>
+
+        {scrapeListLimits.map((limitInfo, index) => (
+          <TextField
+            key={`limit-${limitInfo.pairIndex}-${limitInfo.actionIndex}`}
+            label={`${t("List Limit")} ${index + 1}`}
+            type="number"
+            value={limitInfo.currentLimit || ""}
+            onChange={(e) => {
+              const value = parseInt(e.target.value, 10);
+              if (value >= 1) {
+                handleLimitChange(
+                  limitInfo.pairIndex,
+                  limitInfo.actionIndex,
+                  limitInfo.argIndex,
+                  value
+                );
+              }
+            }}
+            inputProps={{ min: 1 }}
+            style={{ marginBottom: "20px" }}
+          />
+        ))}
+      </>
+    );
+  };
+
+  const renderCredentialFields = (
+    selectors: string[],
+    headerText: string,
+    defaultType: "text" | "password" = "text"
+  ) => {
+    if (selectors.length === 0) return null;
+
+    return (
+      <>
+        {selectors.map((selector, index) => {
+          const isVisible = showPasswords[selector];
+
+          return (
+            <TextField
+              key={selector}
+              type={isVisible ? "text" : "password"}
+              label={
+                headerText === "Other" ? `${`Input`} ${index + 1}` : headerText
+              }
+              value={credentials[selector]?.value || ""}
+              onChange={(e) => handleCredentialChange(selector, e.target.value)}
+              fullWidth
+              style={{ marginBottom: "20px" }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label="Show input"
+                      onClick={() => handleClickShowPassword(selector)}
+                      edge="end"
+                      disabled={!credentials[selector]?.value}
+                    >
+                      {isVisible ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          );
+        })}
+      </>
+    );
+  };
+
+  const getTargetUrl = () => {
+    let url = robot?.recording_meta.url;
+
+    if (!url) {
+      const lastPair =
+        robot?.recording.workflow[robot?.recording.workflow.length - 1];
+      url = lastPair?.what.find((action) => action.action === "goto")
+        ?.args?.[0];
+    }
+
+    return url;
+  };
+
+  const handleSave = async () => {
+    if (!robot) return;
+
+    setIsLoading(true);
+    try {
+      const credentialsForPayload = Object.entries(credentials).reduce(
+        (acc, [selector, info]) => {
+          const enforceType = info.type === "password" ? "password" : "text";
+
+          acc[selector] = {
+            value: info.value,
+            type: enforceType,
+          };
+          return acc;
+        },
+        {} as Record<string, CredentialInfo>
+      );
+
+      const targetUrl = getTargetUrl();
+
+      const payload = {
+        name: robot.recording_meta.name,
+        limits: scrapeListLimits.map((limit) => ({
+          pairIndex: limit.pairIndex,
+          actionIndex: limit.actionIndex,
+          argIndex: limit.argIndex,
+          limit: limit.currentLimit,
+        })),
+        credentials: credentialsForPayload,
+        targetUrl: targetUrl,
+      };
+
+      const success = await updateRecording(robot.recording_meta.id, payload);
+
+      if (success) {
+        setRerenderRobots(true);
+        notify("success", t("robot_edit.notifications.update_success"));
+        handleStart(robot);
+        navigate("/robots");
+      } else {
+        notify("error", t("robot_edit.notifications.update_failed"));
+      }
+    } catch (error) {
+      notify("error", t("robot_edit.notifications.update_error"));
+      console.error("Error updating robot:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate("/robots");
+  };
+
+  const lastPair =
+    robot?.recording.workflow[robot?.recording.workflow.length - 1];
+  const targetUrl = lastPair?.what.find((action) => action.action === "goto")
+    ?.args?.[0];
+
+  return (
+    <RobotConfigPage
+      title={t("robot_edit.title")}
+      onSave={handleSave}
+      onCancel={handleCancel}
+      saveButtonText={t("robot_edit.save")}
+      cancelButtonText={t("robot_edit.cancel")}
+      isLoading={isLoading}
+    >
+      <>
+        <Box style={{ display: "flex", flexDirection: "column" }}>
+          {robot && (
+            <>
+              <TextField
+                label={t("robot_edit.change_name")}
+                key="Robot Name"
+                type="text"
+                value={robot.recording_meta.name}
+                onChange={(e) => handleRobotNameChange(e.target.value)}
+                style={{ marginBottom: "20px" }}
+              />
+
+              <TextField
+                label={t("robot_duplication.fields.target_url")}
+                key={t("robot_duplication.fields.target_url")}
+                value={targetUrl || ""}
+                onChange={(e) => handleTargetUrlChange(e.target.value)}
+                style={{ marginBottom: "20px" }}
+              />
+
+              {renderScrapeListLimitFields()}
+            </>
+          )}
+        </Box>
+      </>
+    </RobotConfigPage>
+  );
+};

src/components/robot/pages/RobotSettingsPage.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { TextField, Typography, Box, Card, CardContent } from "@mui/material";
+import { Settings, Info } from "@mui/icons-material";
+import { useGlobalInfoStore } from "../../../context/globalInfo";
+import { getStoredRecording } from "../../../api/storage";
+import { WhereWhatPair } from "maxun-core";
+import { getUserById } from "../../../api/auth";
+import { RobotConfigPage } from "./RobotConfigPage";
+import { useNavigate, useLocation } from "react-router-dom";
+
+interface RobotMeta {
+  name: string;
+  id: string;
+  createdAt: string;
+  pairs: number;
+  updatedAt: string;
+  params: any[];
+  url?: string;
+}
+
+interface RobotWorkflow {
+  workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+  runEvery: number;
+  runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
+  startFrom:
+    | "SUNDAY"
+    | "MONDAY"
+    | "TUESDAY"
+    | "WEDNESDAY"
+    | "THURSDAY"
+    | "FRIDAY"
+    | "SATURDAY";
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+  lastRunAt?: Date;
+  nextRunAt?: Date;
+  cronExpression?: string;
+}
+
+export interface RobotSettings {
+  id: string;
+  userId?: number;
+  recording_meta: RobotMeta;
+  recording: RobotWorkflow;
+  google_sheet_email?: string | null;
+  google_sheet_name?: string | null;
+  google_sheet_id?: string | null;
+  google_access_token?: string | null;
+  google_refresh_token?: string | null;
+  schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+  handleStart: (settings: RobotSettings) => void;
+}
+
+export const RobotSettingsPage = ({ handleStart }: RobotSettingsProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [robot, setRobot] = useState<RobotSettings | null>(null);
+  const { recordingId, notify } = useGlobalInfoStore();
+
+  useEffect(() => {
+    getRobot();
+  }, []);
+
+  const getRobot = async () => {
+    if (recordingId) {
+      try {
+        const robot = await getStoredRecording(recordingId);
+        setRobot(robot);
+      } catch (error) {
+        notify("error", t("robot_settings.errors.robot_not_found"));
+      }
+    } else {
+      notify("error", t("robot_settings.errors.robot_not_found"));
+    }
+  };
+
+  const getTargetUrl = () => {
+    let url = robot?.recording_meta.url;
+
+    if (!url) {
+      const lastPair =
+        robot?.recording.workflow[robot?.recording.workflow.length - 1];
+      url = lastPair?.what.find((action) => action.action === "goto")
+        ?.args?.[0];
+    }
+
+    return url;
+  };
+
+  useEffect(() => {
+    const fetchUserEmail = async () => {
+      if (robot && robot.userId) {
+        try {
+          const userData = await getUserById(robot.userId.toString());
+          if (userData && userData.user) {
+            setUserEmail(userData.user.email);
+          }
+        } catch (error) {
+          console.error("Failed to fetch user email:", error);
+        }
+      }
+    };
+    fetchUserEmail();
+  }, [robot?.userId]);
+
+  const handleCancel = () => {
+    const basePath = location.pathname.includes("/prebuilt-robots")
+      ? "/prebuilt-robots"
+      : "/robots";
+    navigate(basePath);
+  };
+
+  const targetUrl = getTargetUrl();
+
+  return (
+    <RobotConfigPage
+      title={t("robot_settings.title")}
+      onCancel={handleCancel}
+      cancelButtonText={t("Close")}
+      showSaveButton={false}
+    >
+      <>
+        <Box style={{ display: "flex", flexDirection: "column" }}>
+          {robot && (
+            <>
+              <TextField
+                label={t("robot_settings.target_url")}
+                key="Robot Target URL"
+                value={targetUrl}
+                InputProps={{
+                  readOnly: true,
+                }}
+                style={{ marginBottom: "20px" }}
+              />
+              <TextField
+                label={t("robot_settings.robot_id")}
+                key="Robot ID"
+                value={robot.recording_meta.id}
+                InputProps={{
+                  readOnly: true,
+                }}
+                style={{ marginBottom: "20px" }}
+              />
+              {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !==
+                undefined && (
+                <TextField
+                  label={t("robot_settings.robot_limit")}
+                  type="number"
+                  value={
+                    robot.recording.workflow[0].what[0].args[0].limit || ""
+                  }
+                  InputProps={{
+                    readOnly: true,
+                  }}
+                  style={{ marginBottom: "20px" }}
+                />
+              )}
+              <TextField
+                label={t("robot_settings.created_by_user")}
+                key="Created By User"
+                value={userEmail ? userEmail : ""}
+                InputProps={{
+                  readOnly: true,
+                }}
+                style={{ marginBottom: "20px" }}
+              />
+              <TextField
+                label={t("robot_settings.created_at")}
+                key="Robot Created At"
+                value={robot.recording_meta.createdAt}
+                InputProps={{
+                  readOnly: true,
+                }}
+                style={{ marginBottom: "20px" }}
+              />
+            </>
+          )}
+        </Box>
+      </>
+    </RobotConfigPage>
+  );
+};

src/components/robot/pages/ScheduleSettingsPage.tsx

@@ -0,0 +1,373 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  MenuItem,
+  TextField,
+  Typography,
+  Box,
+  Button,
+} from "@mui/material";
+import { Schedule } from "@mui/icons-material";
+import { Dropdown } from "../../ui/DropdownMui";
+import { validMomentTimezones } from "../../../constants/const";
+import { useGlobalInfoStore } from "../../../context/globalInfo";
+import { getSchedule, deleteSchedule } from "../../../api/storage";
+import { RobotConfigPage } from "./RobotConfigPage";
+import { useNavigate, useLocation } from "react-router-dom";
+
+interface ScheduleSettingsProps {
+  handleStart: (settings: ScheduleSettings) => void;
+}
+
+export interface ScheduleSettings {
+  runEvery: number;
+  runEveryUnit: string;
+  startFrom: string;
+  dayOfMonth?: string;
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+}
+
+export const ScheduleSettingsPage = ({
+  handleStart,
+}: ScheduleSettingsProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
+  const [settings, setSettings] = useState<ScheduleSettings>({
+    runEvery: 1,
+    runEveryUnit: "HOURS",
+    startFrom: "MONDAY",
+    dayOfMonth: "1",
+    atTimeStart: "00:00",
+    atTimeEnd: "01:00",
+    timezone: "UTC",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (
+    field: keyof ScheduleSettings,
+    value: string | number | boolean
+  ) => {
+    setSettings((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const units = ["MINUTES", "HOURS", "DAYS", "WEEKS", "MONTHS"];
+
+  const days = [
+    "MONDAY",
+    "TUESDAY",
+    "WEDNESDAY",
+    "THURSDAY",
+    "FRIDAY",
+    "SATURDAY",
+    "SUNDAY",
+  ];
+
+  const { recordingId, notify } = useGlobalInfoStore();
+
+  const deleteRobotSchedule = async () => {
+    if (recordingId) {
+      setIsLoading(true);
+      try {
+        await deleteSchedule(recordingId);
+        setSchedule(null);
+        notify("success", t("Schedule deleted successfully"));
+
+        setSettings({
+          runEvery: 1,
+          runEveryUnit: "HOURS",
+          startFrom: "MONDAY",
+          dayOfMonth: "",
+          atTimeStart: "00:00",
+          atTimeEnd: "01:00",
+          timezone: "UTC",
+        });
+      } catch (error) {
+        notify("error", "Failed to delete schedule");
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("No recording id provided");
+    }
+  };
+
+  const getRobotSchedule = async () => {
+    if (recordingId) {
+      try {
+        const scheduleData = await getSchedule(recordingId);
+        setSchedule(scheduleData);
+      } catch (error) {
+        console.error("Failed to fetch robot schedule:", error);
+      }
+    } else {
+      console.error("No recording id provided");
+    }
+  };
+
+  useEffect(() => {
+    const fetchSchedule = async () => {
+      await getRobotSchedule();
+    };
+    fetchSchedule();
+  }, []);
+
+  const handleSave = async () => {
+    setIsLoading(true);
+    try {
+      await handleStart(settings);
+      const basePath = location.pathname.includes("/prebuilt-robots")
+        ? "/prebuilt-robots"
+        : "/robots";
+      navigate(basePath);
+    } catch (error) {
+      notify("error", "Failed to save schedule");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    const basePath = location.pathname.includes("/prebuilt-robots")
+      ? "/prebuilt-robots"
+      : "/robots";
+    navigate(basePath);
+  };
+
+  const getDayOrdinal = (day: string | undefined) => {
+    if (!day) return "";
+    const lastDigit = day.slice(-1);
+    const lastTwoDigits = day.slice(-2);
+
+    // Special cases for 11, 12, 13
+    if (["11", "12", "13"].includes(lastTwoDigits)) {
+      return t("schedule_settings.labels.on_day.th");
+    }
+
+    // Other cases
+    switch (lastDigit) {
+      case "1":
+        return t("schedule_settings.labels.on_day.st");
+      case "2":
+        return t("schedule_settings.labels.on_day.nd");
+      case "3":
+        return t("schedule_settings.labels.on_day.rd");
+      default:
+        return t("schedule_settings.labels.on_day.th");
+    }
+  };
+
+  const textStyle = {
+    width: "150px",
+    height: "52px",
+    marginRight: "10px",
+  };
+
+  const dropDownStyle = {
+    marginTop: "2px",
+    width: "150px",
+    height: "59px",
+    marginRight: "10px",
+  };
+
+  return (
+    <RobotConfigPage
+      title={t("schedule_settings.title")}
+      onSave={schedule === null ? handleSave : undefined}
+      onCancel={handleCancel}
+      saveButtonText={t("schedule_settings.buttons.save_schedule")}
+      cancelButtonText={t("schedule_settings.buttons.cancel")}
+      showSaveButton={schedule === null}
+      isLoading={isLoading}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          padding: "20px",
+          "& > *": { marginBottom: "20px" },
+        }}
+      >
+        <>
+          {schedule !== null ? (
+            <>
+              <Typography>
+                {t("schedule_settings.run_every")}: {schedule.runEvery}{" "}
+                {schedule.runEveryUnit.toLowerCase()}
+              </Typography>
+              <Typography>
+                {["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
+                  ? t("schedule_settings.start_from")
+                  : t("schedule_settings.start_from")}
+                : {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}
+              </Typography>
+              {schedule.runEveryUnit === "MONTHS" && (
+                <Typography>
+                  {t("schedule_settings.on_day")}: {schedule.dayOfMonth}
+                  {getDayOrdinal(schedule.dayOfMonth)} of the month
+                </Typography>
+              )}
+              <Typography>
+                {t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
+                {schedule.timezone} {t("schedule_settings.timezone")}
+              </Typography>
+              <Box mt={2} display="flex" justifyContent="space-between">
+                <Button
+                  onClick={deleteRobotSchedule}
+                  variant="outlined"
+                  color="error"
+                  disabled={isLoading}
+                >
+                  {isLoading
+                    ? "Deleting..."
+                    : t("schedule_settings.buttons.delete_schedule")}
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                <Typography sx={{ marginRight: "10px" }}>
+                  {t("schedule_settings.labels.run_once_every")}
+                </Typography>
+                <TextField
+                  type="number"
+                  value={settings.runEvery}
+                  onChange={(e) =>
+                    handleChange("runEvery", parseInt(e.target.value))
+                  }
+                  sx={textStyle}
+                  inputProps={{ min: 1 }}
+                />
+                <Dropdown
+                  label=""
+                  id="runEveryUnit"
+                  value={settings.runEveryUnit}
+                  handleSelect={(e) =>
+                    handleChange("runEveryUnit", e.target.value)
+                  }
+                  sx={dropDownStyle}
+                >
+                  {units.map((unit) => (
+                    <MenuItem key={unit} value={unit}>
+                      {" "}
+                      {unit.charAt(0).toUpperCase() +
+                        unit.slice(1).toLowerCase()}
+                    </MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                  {["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
+                    ? t("schedule_settings.labels.start_from_label")
+                    : t("schedule_settings.labels.start_from_label")}
+                </Typography>
+                <Dropdown
+                  label=""
+                  id="startFrom"
+                  value={settings.startFrom}
+                  handleSelect={(e) =>
+                    handleChange("startFrom", e.target.value)
+                  }
+                  sx={dropDownStyle}
+                >
+                  {days.map((day) => (
+                    <MenuItem key={day} value={day}>
+                      {day.charAt(0).toUpperCase() +
+                        day.slice(1).toLowerCase()}
+                    </MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              {settings.runEveryUnit === "MONTHS" && (
+                <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                  <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                    {t("schedule_settings.labels.on_day_of_month")}
+                  </Typography>
+                  <TextField
+                    type="number"
+                    value={settings.dayOfMonth}
+                    onChange={(e) =>
+                      handleChange("dayOfMonth", e.target.value)
+                    }
+                    sx={textStyle}
+                    inputProps={{ min: 1, max: 31 }}
+                  />
+                </Box>
+              )}
+
+              {["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
+                <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                  <Box sx={{ marginRight: "20px" }}>
+                    <Typography sx={{ marginBottom: "5px" }}>
+                      {t("schedule_settings.labels.in_between")}
+                    </Typography>
+                    <TextField
+                      type="time"
+                      value={settings.atTimeStart}
+                      onChange={(e) =>
+                        handleChange("atTimeStart", e.target.value)
+                      }
+                      sx={textStyle}
+                    />
+                    <TextField
+                      type="time"
+                      value={settings.atTimeEnd}
+                      onChange={(e) =>
+                        handleChange("atTimeEnd", e.target.value)
+                      }
+                      sx={textStyle}
+                    />
+                  </Box>
+                </Box>
+              ) : (
+                <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                  <Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
+                    {t("schedule_settings.at_around")}
+                  </Typography>
+                  <TextField
+                    type="time"
+                    value={settings.atTimeStart}
+                    onChange={(e) =>
+                      handleChange("atTimeStart", e.target.value)
+                    }
+                    sx={textStyle}
+                  />
+                </Box>
+              )}
+
+              <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+                <Typography sx={{ marginRight: "10px" }}>
+                  {t("schedule_settings.timezone")}
+                </Typography>
+                <Dropdown
+                  label=""
+                  id="timezone"
+                  value={settings.timezone}
+                  handleSelect={(e) =>
+                    handleChange("timezone", e.target.value)
+                  }
+                  sx={dropDownStyle}
+                >
+                  {validMomentTimezones.map((tz) => (
+                    <MenuItem key={tz} value={tz}>
+                      {tz.charAt(0).toUpperCase() +
+                        tz.slice(1).toLowerCase()}
+                    </MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+            </>
+          )}
+        </>
+      </Box>
+    </RobotConfigPage>
+  );
+};