Merge pull request #719 from getmaxun/config-pages

feat: modal to UI pages

public/locales/de.json

@@ -442,6 +442,9 @@
         "created_at": "Erstellungsdatum des Roboters",
         "errors": {
             "robot_not_found": "Roboterdetails konnten nicht gefunden werden. Bitte versuchen Sie es erneut."
+        },
+        "buttons": {
+            "close": "Schließen"
         }
     },
     "robot_edit": {

public/locales/en.json

@@ -442,6 +442,9 @@
       "created_at": "Robot Created At",
       "errors": {
         "robot_not_found": "Could not find robot details. Please try again."
+      },
+      "buttons": {
+        "close": "Close"
       }
     },
     "robot_edit": {

public/locales/es.json

@@ -460,6 +460,9 @@
     "created_at": "Fecha de Creación del Robot",
     "errors": {
       "robot_not_found": "No se pudieron encontrar los detalles del robot. Inténtelo de nuevo."
+    },
+    "buttons": {
+      "close": "Cerrar"
     }
   },
   "robot_edit": {

public/locales/ja.json

@@ -442,6 +442,9 @@
         "created_at": "作成日時",
         "errors": {
             "robot_not_found": "ロボットの詳細が見つかりませんでした。もう一度試してください。"
+        },
+        "buttons": {
+            "close": "閉じる"
         }
     },
     "robot_edit": {

public/locales/tr.json

@@ -442,6 +442,9 @@
     "created_at": "Oluşturulma",
     "errors": {
       "robot_not_found": "Robot bulunamadı. Tekrar deneyin."
+    },
+    "buttons": {
+      "close": "Kapat"
     }
   },
   "robot_edit": {

public/locales/zh.json

@@ -442,6 +442,9 @@
     "created_at": "机器人创建时间",
     "errors": {
       "robot_not_found": "无法找到机器人详细信息。请重试。"
+    },
+    "buttons": {
+      "close": "关闭"
     }
   },
   "robot_edit": {

src/components/robot/Recordings.tsx

@@ -2,11 +2,14 @@ import React, { useEffect, useState } from "react";
 import { RecordingsTable } from "./RecordingsTable";
 import { Grid } from "@mui/material";
 import { RunSettings, RunSettingsModal } from "../run/RunSettings";
-import { ScheduleSettings, ScheduleSettingsModal } from "./ScheduleSettings";
+import {
-import { IntegrationSettingsModal } from "../integration/IntegrationSettings";
+  ScheduleSettings,
-import { RobotSettingsModal } from "./RobotSettings";
+  ScheduleSettingsPage,
-import { RobotEditModal } from "./RobotEdit";
+} from "./pages/ScheduleSettingsPage";
-import { RobotDuplicationModal } from "./RobotDuplicate";
+import { RobotIntegrationPage } from "./pages/RobotIntegrationPage";
+import { RobotSettingsPage } from "./pages/RobotSettingsPage";
+import { RobotEditPage } from "./pages/RobotEditPage";
+import { RobotDuplicatePage } from "./pages/RobotDuplicatePage";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useTranslation } from "react-i18next";
@@ -26,12 +29,16 @@ export const Recordings = ({
 }: RecordingsProps) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { selectedRecordingId } = useParams();
   const [params, setParams] = useState<string[]>([]);
   const { notify } = useGlobalInfoStore();
   const { t } = useTranslation();
 
-  const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
+  const handleNavigate = (
+    path: string,
+    id: string,
+    name: string,
+    params: string[]
+  ) => {
     setParams(params);
     setRecordingInfo(id, name);
     navigate(path);
@@ -47,35 +54,36 @@ export const Recordings = ({
     // Helper function to get and clear a cookie
     const getAndClearCookie = (name: string) => {
       const value = document.cookie
-        .split('; ')
+        .split("; ")
-        .find(row => row.startsWith(`${name}=`))
+        .find((row) => row.startsWith(`${name}=`))
-        ?.split('=')[1];
+        ?.split("=")[1];
-      
+
       if (value) {
         document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
       }
-      
+
       return value;
     };
 
-    const authStatus = getAndClearCookie('robot_auth_status');
+    const authStatus = getAndClearCookie("robot_auth_status");
-    const airtableAuthStatus = getAndClearCookie('airtable_auth_status');
+    const airtableAuthStatus = getAndClearCookie("airtable_auth_status");
-    const robotId = getAndClearCookie('robot_auth_robotId');
+    const robotId = getAndClearCookie("robot_auth_robotId");
 
-    if (airtableAuthStatus === 'success' && robotId) {
+    if (airtableAuthStatus === "success" && robotId) {
       console.log("Airtable Auth Status:", airtableAuthStatus);
-      notify(airtableAuthStatus, t("recordingtable.notifications.auth_success"));
+      notify(
+        airtableAuthStatus,
+        t("recordingtable.notifications.auth_success")
+      );
       handleNavigate(`/robots/${robotId}/integrate/airtable`, robotId, "", []);
-    } 
+    } else if (authStatus === "success" && robotId) {
-    else if (authStatus === 'success' && robotId) {
       console.log("Google Auth Status:", authStatus);
       notify(authStatus, t("recordingtable.notifications.auth_success"));
       handleNavigate(`/robots/${robotId}/integrate/google`, robotId, "", []);
     }
   }, []);
 
-  // Determine which modal to open based on the current route
+  const getCurrentPageComponent = () => {
-  const getCurrentModal = () => {
     const currentPath = location.pathname;
 
     if (currentPath.endsWith("/run")) {
@@ -89,79 +97,36 @@ export const Recordings = ({
         />
       );
     } else if (currentPath.endsWith("/schedule")) {
+      return <ScheduleSettingsPage handleStart={handleScheduleRecording} />;
+    } else if (currentPath.includes("/integrate")) {
       return (
-        <ScheduleSettingsModal
+        <RobotIntegrationPage handleStart={() => {}} robotPath={"robots"} />
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={handleScheduleRecording}
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/google")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="googleSheets"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/airtable")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="airtable"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/webhook")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="webhook"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
       );
     } else if (currentPath.endsWith("/settings")) {
-      return (
+      return <RobotSettingsPage handleStart={() => {}} />;
-        <RobotSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
     } else if (currentPath.endsWith("/edit")) {
-      return (
+      return <RobotEditPage handleStart={() => {}} />;
-        <RobotEditModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
     } else if (currentPath.endsWith("/duplicate")) {
-      return (
+      return <RobotDuplicatePage handleStart={() => {}} />;
-        <RobotDuplicationModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
     }
     return null;
   };
 
+  const currentPath = location.pathname;
+  const isConfigPage =
+    currentPath.includes("/schedule") ||
+    currentPath.includes("/integrate") ||
+    currentPath.includes("/settings") ||
+    currentPath.includes("/edit") ||
+    currentPath.includes("/duplicate") ||
+    currentPath.includes("/run");
+
+  if (isConfigPage) {
+    return getCurrentPageComponent();
+  }
+
   return (
     <React.Fragment>
-      {getCurrentModal()}
       <Grid container direction="column" sx={{ padding: "30px" }}>
         <Grid item xs>
           <RecordingsTable

src/components/robot/pages/RobotConfigPage.tsx

@@ -0,0 +1,174 @@
+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 !important',
+                borderColor: '#ff00c3 !important',
+                backgroundColor: 'white !important',
+              }} >
+              {backToSelectionText}
+            </Button>
+          )}
+
+          <Box sx={{ display: 'flex', gap: 2 }}>
+          {showCancelButton && (
+            <Button
+              variant="outlined"
+              onClick={handleBack}
+              disabled={isLoading}
+              sx={{
+                color: '#ff00c3 !important',
+                borderColor: '#ff00c3 !important',
+                backgroundColor: 'white !important',
+              }} >
+              {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/RobotIntegrationPage.tsx

@@ -0,0 +1,821 @@
+import React, { useState, useEffect } from "react";
+import {
+  MenuItem,
+  Typography,
+  CircularProgress,
+  Alert,
+  AlertTitle,
+  Button,
+  TextField,
+  IconButton,
+  Box,
+  Chip,
+  Card,
+  CardContent,
+  CardActions,
+  Switch,
+  FormControlLabel,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from "@mui/material";
+import {
+  Add as AddIcon,
+  Delete as DeleteIcon,
+  Edit as EditIcon,
+  Science as ScienceIcon,
+} from "@mui/icons-material";
+import axios from "axios";
+import { useGlobalInfoStore } from "../../../context/globalInfo";
+import { getStoredRecording } from "../../../api/storage";
+import { apiUrl } from "../../../apiConfig.js";
+import { v4 as uuid } from "uuid";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
+import {
+  addWebhook,
+  updateWebhook,
+  removeWebhook,
+  getWebhooks,
+  testWebhook,
+  WebhookConfig,
+} from "../../../api/webhook";
+import { RobotConfigPage } from "./RobotConfigPage";
+
+interface IntegrationProps {
+  handleStart: (data: IntegrationSettings) => void;
+  robotPath?: string;
+  preSelectedIntegrationType?: "googleSheets" | "airtable" | "webhook" | null;
+}
+
+export interface IntegrationSettings {
+  spreadsheetId?: string;
+  spreadsheetName?: string;
+  airtableBaseId?: string;
+  airtableBaseName?: string;
+  airtableTableName?: string;
+  airtableTableId?: string;
+  webhooks?: WebhookConfig[];
+  data: string;
+  integrationType: "googleSheets" | "airtable" | "webhook";
+}
+
+export const RobotIntegrationPage = ({
+  handleStart,
+  robotPath = "robots",
+  preSelectedIntegrationType = null,
+}: IntegrationProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  const pathSegments = location.pathname.split('/');
+  const robotsIndex = pathSegments.findIndex(segment => segment === 'robots' || segment === 'prebuilt-robots');
+  const integrateIndex = pathSegments.findIndex(segment => segment === 'integrate');
+  
+  const robotIdFromUrl = robotsIndex !== -1 && robotsIndex + 1 < pathSegments.length 
+    ? pathSegments[robotsIndex + 1] 
+    : null;
+    
+  const integrationType = integrateIndex !== -1 && integrateIndex + 1 < pathSegments.length 
+    ? pathSegments[integrateIndex + 1] as "googleSheets" | "airtable" | "webhook"
+    : preSelectedIntegrationType || null;
+
+  const [settings, setSettings] = useState<IntegrationSettings>({
+    spreadsheetId: "",
+    spreadsheetName: "",
+    airtableBaseId: "",
+    airtableBaseName: "",
+    airtableTableName: "",
+    airtableTableId: "",
+    webhooks: [],
+    data: "",
+    integrationType: integrationType || "airtable",
+  });
+
+  const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]);
+  const [airtableBases, setAirtableBases] = useState<{ id: string; name: string }[]>([]);
+  const [airtableTables, setAirtableTables] = useState<{ id: string; name: string }[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [showWebhookForm, setShowWebhookForm] = useState(false);
+  const [editingWebhook, setEditingWebhook] = useState<string | null>(null);
+  const [newWebhook, setNewWebhook] = useState<WebhookConfig>({
+    id: "",
+    url: "",
+    events: ["run_completed"],
+    active: true,
+  });
+  const [urlError, setUrlError] = useState<string | null>(null);
+
+  const { recordingId: recordingIdFromStore, notify, setRerenderRobots, setRecordingId } = useGlobalInfoStore();
+  
+  const recordingId = robotIdFromUrl || recordingIdFromStore;
+
+  useEffect(() => {
+    if (robotIdFromUrl && robotIdFromUrl !== recordingIdFromStore) {
+      setRecordingId(robotIdFromUrl);
+    }
+  }, [robotIdFromUrl, recordingIdFromStore, setRecordingId]);
+
+  const [recording, setRecording] = useState<any>(null);
+  const [selectedIntegrationType, setSelectedIntegrationType] = useState<
+    "googleSheets" | "airtable" | "webhook" | null
+  >(integrationType);
+
+  const authenticateWithGoogle = () => {
+    if (!recordingId) {
+      console.error("Cannot authenticate: recordingId is null");
+      return;
+    }
+    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+    const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/googleSheets`;
+    window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
+  };
+  
+  const authenticateWithAirtable = () => {
+    if (!recordingId) {
+      console.error("Cannot authenticate: recordingId is null");
+      return;
+    }
+    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+    const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/airtable`;
+    window.location.href = `${apiUrl}/auth/airtable?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
+  };
+
+  const validateWebhookData = (
+    url: string,
+    events: string[],
+    excludeId?: string
+  ) => {
+    if (!url) {
+      setUrlError("Please provide webhook URL");
+      return false;
+    }
+    try {
+      new URL(url);
+    } catch {
+      setUrlError("Please provide a valid URL");
+      return false;
+    }
+    const existingWebhook = settings.webhooks?.find(
+      (webhook) => webhook.url === url && webhook.id !== excludeId
+    );
+    if (existingWebhook) {
+      setUrlError("This webhook URL is already in use");
+      return false;
+    }
+    if (!events || events.length === 0) {
+      setUrlError("Please select at least one event");
+      return false;
+    }
+    setUrlError(null);
+    return true;
+  };
+
+  const fetchWebhooks = async () => {
+    try {
+      setLoading(true);
+      if (!recordingId) return;
+      const response = await getWebhooks(recordingId);
+      if (response.ok && response.webhooks) {
+        setSettings((prev) => ({ ...prev, webhooks: response.webhooks }));
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error fetching webhooks:", error);
+    }
+  };
+
+  const addWebhookSetting = async () => {
+    if (!validateWebhookData(newWebhook.url, newWebhook.events)) {
+      if (!newWebhook.url) notify("error", "Please provide webhook URL");
+      else if (!newWebhook.events || newWebhook.events.length === 0) notify("error", "Please select at least one event");
+      return;
+    }
+    if (!recordingId) return;
+    try {
+      setLoading(true);
+      const webhookWithId = { ...newWebhook, id: uuid() };
+      const response = await addWebhook(webhookWithId, recordingId);
+      if (response.ok) {
+        setSettings((prev) => ({ ...prev, webhooks: [...(prev.webhooks || []), webhookWithId] }));
+        setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
+        setShowWebhookForm(false);
+        notify("success", "Webhook added successfully");
+      } else {
+        notify("error", response.message || "Failed to add webhook");
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      notify("error", "Failed to add webhook");
+      console.error("Error adding webhook:", error);
+    }
+  };
+
+  const updateWebhookSetting = async () => {
+    if (!validateWebhookData(newWebhook.url, newWebhook.events, editingWebhook || undefined)) return;
+    if (!recordingId || !editingWebhook) return;
+    try {
+      setLoading(true);
+      const response = await updateWebhook({ ...newWebhook, id: editingWebhook }, recordingId);
+      if (response.ok) {
+        setSettings((prev) => ({
+          ...prev,
+          webhooks: (prev.webhooks || []).map((webhook) =>
+            webhook.id === editingWebhook ? { ...newWebhook, id: editingWebhook } : webhook
+          ),
+        }));
+        setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
+        setEditingWebhook(null);
+        setShowWebhookForm(false);
+        notify("success", "Webhook updated successfully");
+      } else {
+        notify("error", response.message || "Failed to update webhook");
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      notify("error", "Failed to update webhook");
+      console.error("Error updating webhook:", error);
+    }
+  };
+
+  const deleteWebhookSetting = async (webhookId: string) => {
+    if (!recordingId) return;
+    try {
+      setLoading(true);  
+      const response = await removeWebhook(webhookId, recordingId);
+      if (response.ok) {
+        setSettings((prev) => ({ ...prev, webhooks: (prev.webhooks || []).filter((webhook) => webhook.id !== webhookId) }));
+        if (recordingId) {
+          const updatedRecording = await getStoredRecording(recordingId);
+          setRecording(updatedRecording);
+        }
+        setRerenderRobots(true);
+        notify("success", "Webhook removed successfully");
+      } else {
+        notify("error", response.error || "Failed to remove webhook");
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      notify("error", "Failed to remove webhook");
+      console.error("Error removing webhook:", error);
+    }
+  };
+
+  const testWebhookSetting = async (webhookId: string) => {
+    if (!recordingId) return;
+    const webhook = settings.webhooks?.find(w => w.id === webhookId);
+    if (!webhook) return;
+    try {
+      setLoading(true);
+      const response = await testWebhook(webhook, recordingId);
+      if (response.ok) {
+        notify("success", "Test webhook sent successfully");
+      } else {
+        notify("error", response.message || "Failed to test webhook");
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      notify("error", "Failed to test webhook");
+      console.error("Error testing webhook:", error);
+    }
+  };
+
+  useEffect(() => {
+    setSelectedIntegrationType(integrationType);
+    setSettings(prev => ({ ...prev, integrationType: integrationType || "airtable" }));
+  }, [integrationType]);
+
+  useEffect(() => {
+    const fetchRecording = async () => {
+      if (recordingId) {
+        try {
+          const recordingData = await getStoredRecording(recordingId);
+          setRecording(recordingData);
+        } catch (error) {
+          console.error("Failed to fetch recording:", error);
+        }
+      }
+    };
+    fetchRecording();
+    if (selectedIntegrationType === "webhook") {
+      fetchWebhooks();
+    }
+  }, [recordingId, selectedIntegrationType]);
+
+  const handleCancel = () => {
+    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+    navigate(basePath);
+  };
+
+  const fetchSpreadsheetFiles = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, { withCredentials: true });
+      setSpreadsheets(response.data);
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error fetching spreadsheet files:", error);
+      notify("error", t("integration_settings.google.errors.fetch_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedSheet = spreadsheets.find((sheet) => sheet.id === e.target.value);
+    if (selectedSheet) {
+      setSettings({ ...settings, spreadsheetId: selectedSheet.id, spreadsheetName: selectedSheet.name });
+    }
+  };
+
+  const updateGoogleSheetId = async () => {
+    try {
+      setLoading(true);
+      await axios.post(`${apiUrl}/auth/gsheets/update`, {
+        spreadsheetId: settings.spreadsheetId,
+        spreadsheetName: settings.spreadsheetName,
+        robotId: recordingId,
+      }, { withCredentials: true });
+      if (recordingId) {
+        const updatedRecording = await getStoredRecording(recordingId);
+        setRecording(updatedRecording);
+      }
+      setRerenderRobots(true);
+      notify("success", t("integration_settings.google.notifications.sheet_selected"));
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error updating Google Sheet ID:", error);
+      notify("error", t("integration_settings.google.errors.update_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const removeGoogleSheetsIntegration = async () => {
+    try {
+      setLoading(true);
+      await axios.post(`${apiUrl}/auth/gsheets/remove`, { robotId: recordingId }, { withCredentials: true });
+      setSpreadsheets([]);
+      setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" });
+      if (recordingId) {
+        const updatedRecording = await getStoredRecording(recordingId);
+        setRecording(updatedRecording);
+      }
+      setRerenderRobots(true);
+      notify("success", t("integration_settings.google.notifications.integration_removed"));
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error removing Google Sheets integration:", error);
+      notify("error", t("integration_settings.google.errors.remove_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const fetchAirtableBases = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(`${apiUrl}/auth/airtable/bases?robotId=${recordingId}`, { withCredentials: true });
+      setAirtableBases(response.data);
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error fetching Airtable bases:", error);
+      notify("error", t("integration_settings.airtable.errors.fetch_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const fetchAirtableTables = async (baseId: string, recordingId: string) => {
+    try {
+      setLoading(true);
+      const response = await axios.get(`${apiUrl}/auth/airtable/tables?robotId=${recordingId}&baseId=${baseId}`, { withCredentials: true });
+      setAirtableTables(response.data);
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error fetching Airtable tables:", error);
+      notify("error", t("integration_settings.airtable.errors.fetch_tables_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const handleAirtableBaseSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedBase = airtableBases.find((base) => base.id === e.target.value);
+    if (selectedBase) {
+      setSettings((prevSettings) => ({ ...prevSettings, airtableBaseId: selectedBase.id, airtableBaseName: selectedBase.name }));
+      if (recordingId) await fetchAirtableTables(selectedBase.id, recordingId);
+    }
+  };
+
+  const handleAirtabletableSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedTable = airtableTables.find((table) => table.id === e.target.value);
+    if (selectedTable) {
+      setSettings((prevSettings) => ({ ...prevSettings, airtableTableId: e.target.value, airtableTableName: selectedTable?.name || "" }));
+    }
+  };
+
+  const updateAirtableBase = async () => {
+    try {
+      setLoading(true);
+      await axios.post(`${apiUrl}/auth/airtable/update`, {
+        baseId: settings.airtableBaseId,
+        baseName: settings.airtableBaseName,
+        robotId: recordingId,
+        tableName: settings.airtableTableName,
+        tableId: settings.airtableTableId,
+      }, { withCredentials: true });
+      if (recordingId) {
+        const updatedRecording = await getStoredRecording(recordingId);
+        setRecording(updatedRecording);
+      }
+      setRerenderRobots(true);
+      notify("success", t("integration_settings.airtable.notifications.base_selected"));
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error updating Airtable base:", error);
+      notify("error", t("integration_settings.airtable.errors.update_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const removeAirtableIntegration = async () => {
+    try {
+      setLoading(true);
+      await axios.post(`${apiUrl}/auth/airtable/remove`, { robotId: recordingId }, { withCredentials: true });
+      setAirtableBases([]);
+      setAirtableTables([]);
+      setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName: "", airtableTableId: "" });
+      if (recordingId) {
+        const updatedRecording = await getStoredRecording(recordingId);
+        setRecording(updatedRecording);
+      }
+      setRerenderRobots(true);
+      notify("success", t("integration_settings.airtable.notifications.integration_removed"));
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error removing Airtable integration:", error);
+      notify("error", t("integration_settings.airtable.errors.remove_error", {
+        message: error.response?.data?.message || error.message,
+      }));
+    }
+  };
+
+  const renderGoogleSheetsIntegration = () => (
+    <>
+      <Typography variant="h6">
+        {t("integration_settings.google.title")}
+      </Typography>
+      {recording?.google_sheet_id ? (
+        <>
+          <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
+            <AlertTitle>{t("integration_settings.google.alerts.success.title")}</AlertTitle>
+            {t("integration_settings.google.alerts.success.content", { sheetName: recording.google_sheet_name })}
+            <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
+              {t("integration_settings.google.alerts.success.here")}
+            </a>
+          </Alert>
+          <Button variant="outlined" color="error" onClick={removeGoogleSheetsIntegration} style={{ marginTop: "15px" }} disabled={loading}>
+            {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.remove_integration")}
+          </Button>
+        </>
+      ) : (
+        <>
+          {!recording?.google_sheet_email ? (
+            <>
+              <p>{t("integration_settings.google.descriptions.sync_info")}</p>
+              <Button variant="contained" color="primary" onClick={authenticateWithGoogle} disabled={loading}>
+                {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.authenticate")}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Typography sx={{ margin: "20px 0px 30px 0px" }}>
+                {t("integration_settings.google.descriptions.authenticated_as", { email: recording.google_sheet_email })}
+              </Typography>
+              {loading ? (
+                <CircularProgress sx={{ marginBottom: "15px" }} />
+              ) : error ? (
+                <Typography color="error">{error}</Typography>
+              ) : spreadsheets.length === 0 ? (
+                <Button variant="outlined" color="primary" onClick={fetchSpreadsheetFiles} disabled={loading}>
+                  {t("integration_settings.google.buttons.fetch_sheets")}
+                </Button>
+              ) : (
+                <>
+                  <TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.google.fields.select_sheet")} required value={settings.spreadsheetId} onChange={handleSpreadsheetSelect} fullWidth>
+                    {spreadsheets.map((sheet) => (<MenuItem key={sheet.id} value={sheet.id}>{sheet.name}</MenuItem>))}
+                  </TextField>
+                  <Button variant="contained" color="primary" onClick={updateGoogleSheetId} style={{ marginTop: "10px" }} disabled={!settings.spreadsheetId || loading}>
+                    {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.submit")}
+                  </Button>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  const renderAirtableIntegration = () => (
+    <>
+      <Typography variant="h6">
+        {t("integration_settings.airtable.title")}
+      </Typography>
+      {recording?.airtable_base_id ? (
+        <>
+          <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
+            <AlertTitle>{t("integration_settings.airtable.alerts.success.title")}</AlertTitle>
+            {t("integration_settings.airtable.alerts.success.content", { baseName: recording.airtable_base_name, tableName: recording.airtable_table_name })}
+            <a href={`https://airtable.com/${recording.airtable_base_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
+              {t("integration_settings.airtable.alerts.success.here")}
+            </a>
+          </Alert>
+          <Button variant="outlined" color="error" onClick={removeAirtableIntegration} style={{ marginTop: "15px" }} disabled={loading}>
+            {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
+          </Button>
+        </>
+      ) : (
+        <>
+          {!recording?.airtable_access_token ? (
+            <>
+              <p>{t("integration_settings.airtable.descriptions.sync_info")}</p>
+              <Button variant="contained" color="primary" onClick={authenticateWithAirtable} disabled={loading}>
+                {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.authenticate")}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Typography sx={{ margin: "20px 0px 30px 0px" }}>
+                {t("integration_settings.airtable.descriptions.authenticated_as")}
+              </Typography>
+              {loading ? (
+                <CircularProgress sx={{ marginBottom: "15px" }} />
+              ) : error ? (
+                <Typography color="error">{error}</Typography>
+              ) : airtableBases.length === 0 ? (
+                <Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "20px" }}>
+                  <Button variant="outlined" color="primary" onClick={fetchAirtableBases} disabled={loading}>
+                    {t("integration_settings.airtable.buttons.fetch_bases")}
+                  </Button>
+                  <Button variant="outlined" color="error" onClick={removeAirtableIntegration} disabled={loading}>
+                    {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
+                  </Button>
+                </Box>
+              ) : (
+                <>
+                  <TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_base")} required value={settings.airtableBaseId} onChange={handleAirtableBaseSelect} fullWidth>
+                    {airtableBases.map((base) => (<MenuItem key={base.id} value={base.id}>{base.name}</MenuItem>))}
+                  </TextField>
+                  <TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_table")} required value={settings.airtableTableId} onChange={handleAirtabletableSelect} fullWidth>
+                    {airtableTables.map((table) => (<MenuItem key={table.id} value={table.id}>{table.name}</MenuItem>))}
+                  </TextField>
+                  <Button variant="contained" color="primary" onClick={updateAirtableBase} style={{ marginTop: "10px" }} disabled={!settings.airtableBaseId || loading}>
+                    {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.submit")}
+                  </Button>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  const getIntegrationTitle = () => {
+    switch (selectedIntegrationType) {
+      case "googleSheets":
+        return "Google Sheets Integration";
+      case "airtable":
+        return "Airtable Integration";
+      case "webhook":
+        return "Webhook Integration";
+      default:
+        return "Integration Settings";
+    }
+  };
+
+  const editWebhookSetting = (webhook: WebhookConfig) => {
+    setNewWebhook(webhook);
+    setEditingWebhook(webhook.id);
+    setShowWebhookForm(true);
+  };
+
+  const resetWebhookForm = () => {
+    setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
+    setShowWebhookForm(false);
+    setEditingWebhook(null);
+    setUrlError(null);
+  };
+
+  const toggleWebhookStatusSetting = async (webhookId: string) => {
+    if (!recordingId) return;
+    try {
+      const webhook = settings.webhooks?.find((w) => w.id === webhookId);
+      if (!webhook) return;
+      const updatedWebhook = { ...webhook, active: !webhook.active };
+      const response = await updateWebhook(updatedWebhook, recordingId);
+      if (response.ok) {
+        const updatedWebhooks = (settings.webhooks || []).map((w) => w.id === webhookId ? updatedWebhook : w);
+        setSettings({ ...settings, webhooks: updatedWebhooks });
+        if (recordingId) {
+          const updatedRecording = await getStoredRecording(recordingId);
+          setRecording(updatedRecording);
+        }
+        setRerenderRobots(true);
+        notify("success", `Webhook ${updatedWebhook.active ? "enabled" : "disabled"}`);
+      } else {
+        notify("error", response.message || "Failed to update webhook");
+      }
+    } catch (error: any) {
+      console.error("Error toggling webhook status:", error);
+      notify("error", "Failed to update webhook");
+    }
+  };
+
+  const formatEventName = (event: string) => {
+    switch (event) {
+      case "run_completed": return "Run finished";
+      case "run_failed": return "Run failed";
+      default: return event;
+    }
+  };
+
+  const formatLastCalled = (lastCalledAt?: string | null) => {
+    if (!lastCalledAt) return "Not called yet";
+    const date = new Date(lastCalledAt);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    if (diffMinutes < 1) return "Just now";
+    else if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
+    else if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+    else if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+    else return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  };
+
+  // --- MAIN RENDER ---
+  if (!selectedIntegrationType && !integrationType) {
+    return (
+      <RobotConfigPage title="Integration Settings" onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} backToSelectionText={"← " + t("right_panel.buttons.back")} onBackToSelection={() => navigate(`/${robotPath}/${recordingId}/integrate`)}>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "20px", width: "100%" }}>
+            <div style={{ display: "flex", gap: "20px" }}>
+              <Button variant="outlined" onClick={() => {
+                  if (!recordingId) return;
+                  setSelectedIntegrationType("googleSheets");
+                  setSettings({ ...settings, integrationType: "googleSheets" });
+                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                  navigate(`${basePath}/${recordingId}/integrate/googleSheets`);
+                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+                <img src="https://ik.imagekit.io/ys1blv5kv/gsheet.svg" alt="Google Sheets" style={{ margin: "6px" }} />
+                Google Sheets
+              </Button>
+              <Button variant="outlined" onClick={() => {
+                  if (!recordingId) return;
+                  setSelectedIntegrationType("airtable");
+                  setSettings({ ...settings, integrationType: "airtable" });
+                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                  navigate(`${basePath}/${recordingId}/integrate/airtable`);
+                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+                <img src="https://ik.imagekit.io/ys1blv5kv/airtable.svg" alt="Airtable" style={{ margin: "6px" }} />
+                Airtable
+              </Button>
+              <Button variant="outlined" onClick={() => {
+                  if (!recordingId) return;
+                  setSelectedIntegrationType("webhook");
+                  setSettings({ ...settings, integrationType: "webhook" });
+                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                  navigate(`${basePath}/${recordingId}/integrate/webhook`);
+                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+                <img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
+                Webhooks
+              </Button>
+              <Button variant="outlined" onClick={() => { window.open("https://docs.maxun.dev/mcp/setup", "_blank", "noopener,noreferrer"); }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+                <img src="/svg/mcp.svg" alt="MCP" style={{ margin: "6px" }} />
+                MCP
+              </Button>
+            </div>
+          </div>
+        </div>
+      </RobotConfigPage>
+    );
+  }
+
+  const handleBack = () => {
+    if (!recordingId) return;
+    setSelectedIntegrationType(null);
+    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+    navigate(`${basePath}/${recordingId}/integrate`);
+  };
+
+  return (
+    <RobotConfigPage title={getIntegrationTitle()} onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} onBackToSelection={handleBack} backToSelectionText={"← " + t("right_panel.buttons.back")}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
+        <div style={{ width: "100%" }}>
+          {(selectedIntegrationType === "googleSheets" || integrationType === "googleSheets") && (
+            <>{renderGoogleSheetsIntegration()}</>
+          )}
+
+          {(selectedIntegrationType === "airtable" || integrationType === "airtable") && (
+            <>{renderAirtableIntegration()}</>
+          )}
+
+          {(selectedIntegrationType === "webhook" || integrationType === "webhook") && (
+            <>
+              <Typography variant="h6" sx={{ marginBottom: "20px" }}>Integrate using Webhooks</Typography>
+              {settings.webhooks && settings.webhooks.length > 0 && (
+                <TableContainer component={Paper} sx={{ marginBottom: "30px", width: "100%" }}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell><strong>Webhook URL</strong></TableCell>
+                        <TableCell><strong>Call when</strong></TableCell>
+                        <TableCell><strong>Last called</strong></TableCell>
+                        <TableCell><strong>Status</strong></TableCell>
+                        <TableCell><strong>Actions</strong></TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {settings.webhooks.map((webhook) => (
+                        <TableRow key={webhook.id}>
+                          <TableCell>{webhook.url}</TableCell>
+                          <TableCell><Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{webhook.events.map((event) => (<Chip key={event} label={formatEventName(event)} size="small" variant="outlined"/>))}</Box></TableCell>
+                          <TableCell>{formatLastCalled(webhook.lastCalledAt)}</TableCell>
+                          <TableCell><Switch checked={webhook.active} onChange={() => toggleWebhookStatusSetting(webhook.id)} size="small"/></TableCell>
+                          <TableCell><Box sx={{ display: "flex", gap: "8px" }}>
+                            <IconButton size="small" onClick={() => testWebhookSetting(webhook.id)} disabled={loading || !webhook.active} title="Test"><ScienceIcon fontSize="small" /></IconButton>
+                            <IconButton size="small" onClick={() => editWebhookSetting(webhook)} disabled={loading} title="Edit"><EditIcon fontSize="small" /></IconButton>
+                            <IconButton size="small" onClick={() => deleteWebhookSetting(webhook.id)} disabled={loading} title="Delete"><DeleteIcon fontSize="small" /></IconButton>
+                          </Box></TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+              {!showWebhookForm && (
+                <Box sx={{ marginBottom: "20px", width: "100%" }}>
+                  <Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "15px" }}>
+                    <TextField label="Webhook URL" placeholder="https://your-api.com/webhook/endpoint" sx={{ flex: 1 }} value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} error={!!urlError} helperText={urlError} required aria-describedby="webhook-url-help"/>
+                    <TextField select label="When" value={newWebhook.events[0] || "run_completed"} onChange={(e) => setNewWebhook({ ...newWebhook, events: [e.target.value] })} sx={{ minWidth: "200px" }} required>
+                      <MenuItem value="run_completed">Run finished</MenuItem>
+                      <MenuItem value="run_failed">Run failed</MenuItem>
+                    </TextField>
+                  </Box>
+                  <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                    <Typography variant="body2" color="textSecondary" sx={{ marginTop: "10px" }}>Refer to the <a href="https://docs.maxun.dev/api/webhooks" style={{ color: "#ff00c3", textDecoration: "none" }}>API documentation</a> for examples and details.</Typography>
+                    <Button variant="contained" startIcon={<AddIcon />} onClick={addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>Add New Webhook</Button>
+                  </Box>
+                </Box>
+              )}
+              {showWebhookForm && (
+                <Card sx={{ width: "100%", marginBottom: "20px" }}>
+                  <CardContent>
+                    <Typography variant="h6" sx={{ marginBottom: "20px" }}>{editingWebhook ? "Edit Webhook" : "Add New Webhook"}</Typography>
+                    <TextField fullWidth label="Webhook URL" value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} sx={{ marginBottom: "15px" }} placeholder="https://your-api.com/webhook/endpoint" required error={!!urlError} helperText={urlError}/>
+                    <TextField fullWidth select label="Call when" value={newWebhook.events} onChange={(e) => setNewWebhook({ ...newWebhook, events: typeof e.target.value === "string" ? [e.target.value] : e.target.value })}
+                      SelectProps={{ multiple: true, renderValue: (selected) => (<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{(selected as string[]).map((value) => (<Chip key={value} label={formatEventName(value)} size="small"/>))}</Box>),}} sx={{ marginBottom: "20px" }} required>
+                      <MenuItem value="run_completed">Run finished</MenuItem>
+                      <MenuItem value="run_failed">Run failed</MenuItem>
+                    </TextField>
+                    <FormControlLabel control={<Switch checked={newWebhook.active} onChange={(e) => setNewWebhook({ ...newWebhook, active: e.target.checked })}/>} label="Active" sx={{ marginBottom: "10px" }}/>
+                  </CardContent>
+                  <CardActions>
+                    <Button variant="contained" color="primary" onClick={editingWebhook ? updateWebhookSetting : addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>
+                      {loading ? (<CircularProgress size={24} />) : editingWebhook ? ("Update Webhook") : ("Add Webhook")}
+                    </Button>
+                    <Button variant="outlined" onClick={resetWebhookForm} disabled={loading}>Cancel</Button>
+                  </CardActions>
+                </Card>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </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("robot_settings.buttons.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>
+  );
+};