Merge branch 'develop' into search_logic

src/api/storage.ts

@@ -5,6 +5,11 @@ import { ScheduleSettings } from "../components/molecules/ScheduleSettings";
 import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
 import { apiUrl } from "../apiConfig";
 
+
+
+
+
+
 export const getStoredRecordings = async (): Promise<string[] | null> => {
   try {
     const response = await axios.get(`${apiUrl}/storage/recordings`);
@@ -19,6 +24,36 @@ export const getStoredRecordings = async (): Promise<string[] | null> => {
   }
 };
 
+export const updateRecording = async (id: string, data: { name?: string; limit?: number }): Promise<boolean> => {
+  try {
+    const response = await axios.put(`${apiUrl}/storage/recordings/${id}`, data);
+    if (response.status === 200) {
+      return true;
+    } else {
+      throw new Error(`Couldn't update recording with id ${id}`);
+    }
+  } catch (error: any) {
+    console.error(`Error updating recording: ${error.message}`);
+    return false;
+  }
+};
+
+export const duplicateRecording = async (id: string, targetUrl: string): Promise<any> => {
+  try {
+    const response = await axios.post(`${apiUrl}/storage/recordings/${id}/duplicate`, {
+      targetUrl,
+    });
+    if (response.status === 201) {
+      return response.data; // Returns the duplicated robot details
+    } else {
+      throw new Error(`Couldn't duplicate recording with id ${id}`);
+    }
+  } catch (error: any) {
+    console.error(`Error duplicating recording: ${error.message}`);
+    return null;
+  }
+};
+
 export const getStoredRuns = async (): Promise<string[] | null> => {
   try {
     const response = await axios.get(`${apiUrl}/storage/runs`);
@@ -47,18 +82,49 @@ export const getStoredRecording = async (id: string) => {
   }
 }
 
+
+
+export const checkRunsForRecording = async (id: string): Promise<boolean> => {
+    
+  
+  try {
+    const response = await axios.get(`${apiUrl}/storage/recordings/${id}/runs`);
+
+    const runs = response.data;
+    console.log(runs.runs.totalCount)
+    return runs.runs.totalCount > 0;
+  } catch (error) {
+    console.error('Error checking runs for recording:', error);
+    return false;
+  }
+};
+
+
 export const deleteRecordingFromStorage = async (id: string): Promise<boolean> => {
+  
+  const hasRuns = await checkRunsForRecording(id);
+  
+  if (hasRuns) {
+    
+    return false;
+  }
   try {
     const response = await axios.delete(`${apiUrl}/storage/recordings/${id}`);
     if (response.status === 200) {
-      return response.data;
+      
+      return true;
     } else {
       throw new Error(`Couldn't delete stored recording ${id}`);
     }
   } catch (error: any) {
     console.log(error);
+    
     return false;
   }
+
+  
+
+  
 };
 
 export const deleteRunFromStorage = async (id: string): Promise<boolean> => {
@@ -93,7 +159,7 @@ export const createRunForStoredRecording = async (id: string, settings: RunSetti
   try {
     const response = await axios.put(
       `${apiUrl}/storage/runs/${id}`,
-      { ...settings });
+      { ...settings }); 
     if (response.status === 200) {
       return response.data;
     } else {

src/components/molecules/IntegrationSettings.tsx

@@ -1,227 +1,323 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { GenericModal } from "../atoms/GenericModal";
-import { MenuItem, Typography, CircularProgress, Alert, AlertTitle, Chip } from "@mui/material";
+import {
+  MenuItem,
+  Typography,
+  CircularProgress,
+  Alert,
+  AlertTitle,
+  Chip,
+} from "@mui/material";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
-import axios from 'axios';
-import { useGlobalInfoStore } from '../../context/globalInfo';
-import { getStoredRecording } from '../../api/storage';
-import { apiUrl } from '../../apiConfig.js';
+import axios from "axios";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { getStoredRecording } from "../../api/storage";
+import { apiUrl } from "../../apiConfig.js";
+import Cookies from 'js-cookie';
 interface IntegrationProps {
-    isOpen: boolean;
-    handleStart: (data: IntegrationSettings) => void;
-    handleClose: () => void;
+  isOpen: boolean;
+  handleStart: (data: IntegrationSettings) => void;
+  handleClose: () => void;
 }
 export interface IntegrationSettings {
-    spreadsheetId: string;
-    spreadsheetName: string;
-    data: string;
+  spreadsheetId: string;
+  spreadsheetName: string;
+  data: string;
 }
 
-export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => {
-    const [settings, setSettings] = useState<IntegrationSettings>({
-        spreadsheetId: '',
-        spreadsheetName: '',
-        data: '',
-    });
+export const IntegrationSettingsModal = ({
+  isOpen,
+  handleStart,
+  handleClose,
+}: IntegrationProps) => {
+  const [settings, setSettings] = useState<IntegrationSettings>({
+    spreadsheetId: "",
+    spreadsheetName: "",
+    data: "",
+  });
 
-    const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
+  const [spreadsheets, setSpreadsheets] = useState<
+    { id: string; name: string }[]
+  >([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-    const { recordingId, notify } = useGlobalInfoStore();
-    const [recording, setRecording] = useState<any>(null);
+  const { recordingId, notify } = useGlobalInfoStore();
+  const [recording, setRecording] = useState<any>(null);
 
-    const authenticateWithGoogle = () => {
-        window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
-    };
+  const authenticateWithGoogle = () => {
+    window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
+  };
 
-    const handleOAuthCallback = async () => {
-        try {
-            const response = await axios.get(`${apiUrl}/auth/google/callback`);
-            const { google_sheet_email, files } = response.data;
-        } catch (error) {
-            setError('Error authenticating with Google');
+  const handleOAuthCallback = async () => {
+    try {
+      const response = await axios.get(`${apiUrl}/auth/google/callback`);
+      const { google_sheet_email, files } = response.data;
+    } catch (error) {
+      setError("Error authenticating with Google");
+    }
+  };
+
+  const fetchSpreadsheetFiles = async () => {
+    try {
+      const response = await axios.get(
+        `${apiUrl}/auth/gsheets/files?robotId=${recordingId}`,
+        {
+          withCredentials: true,
         }
-    };
+      );
+      setSpreadsheets(response.data);
+    } catch (error: any) {
+      console.error(
+        "Error fetching spreadsheet files:",
+        error.response?.data?.message || error.message
+      );
+      notify(
+        "error",
+        `Error fetching spreadsheet files: ${
+          error.response?.data?.message || error.message
+        }`
+      );
+    }
+  };
 
-    const fetchSpreadsheetFiles = async () => {
-        try {
-            const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, {
-                withCredentials: true,
-            });
-            setSpreadsheets(response.data);
-        } catch (error: any) {
-            console.error('Error fetching spreadsheet files:', error.response?.data?.message || error.message);
-            notify('error', `Error fetching spreadsheet files: ${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 {
-            const response = await axios.post(
-                `${apiUrl}/auth/gsheets/update`,
-                { spreadsheetId: settings.spreadsheetId, spreadsheetName: settings.spreadsheetName, robotId: recordingId },
-                { withCredentials: true }
-            );
-            console.log('Google Sheet ID updated:', response.data);
-        } catch (error: any) {
-            console.error('Error updating Google Sheet ID:', error.response?.data?.message || error.message);
-        }
-    };
-
-    const removeIntegration = async () => {
-        try {
-            await axios.post(
-                `${apiUrl}/auth/gsheets/remove`,
-                { robotId: recordingId },
-                { withCredentials: true }
-            );
-
-            setRecording(null);
-            setSpreadsheets([]);
-            setSettings({ spreadsheetId: '', spreadsheetName: '', data: '' });
-        } catch (error: any) {
-            console.error('Error removing Google Sheets integration:', error.response?.data?.message || error.message);
-        }
-    };
-
-    useEffect(() => {
-        // Check if we're on the callback URL
-        const urlParams = new URLSearchParams(window.location.search);
-        const code = urlParams.get('code');
-        if (code) {
-            handleOAuthCallback();
-        }
-
-        const fetchRecordingInfo = async () => {
-            if (!recordingId) return;
-            const recording = await getStoredRecording(recordingId);
-            if (recording) {
-                setRecording(recording);
-            }
-        };
-
-        fetchRecordingInfo();
-    }, [recordingId]);
-
-    return (
-        <GenericModal isOpen={isOpen} onClose={handleClose}>
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '65px' }}>
-                <Typography variant="h6" sx={{ margin: '15px 0px' }}>Integrate with Google Sheet <Chip label="beta" color="primary" variant="outlined" /></Typography>
-
-                {recording && recording.google_sheet_id ? (
-                    <>
-                        <Alert severity="info">
-                            <AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
-                            Every time this robot creates a successful run, its captured data is appended to your {recording.google_sheet_name} Google Sheet. You can check the data updates <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer">here</a>.
-                            <br />
-                            <strong>Note:</strong> The data extracted before integrating with Google Sheets will not be synced in the Google Sheet. Only the data extracted after the integration will be synced.
-                        </Alert>
-                        <Button
-                            variant="outlined"
-                            color="error"
-                            onClick={removeIntegration}
-                            style={{ marginTop: '15px' }}
-                        >
-                            Remove Integration
-                        </Button>
-                    </>
-                ) : (
-                    <>
-                        {!recording?.google_sheet_email ? (
-                            <>
-                                <p>If you enable this option, every time this robot runs a task successfully, its captured data will be appended to your Google Sheet.</p>
-                                <Button
-                                    variant="contained"
-                                    color="primary"
-                                    onClick={authenticateWithGoogle}
-                                    style={{ marginBottom: '15px' }}
-                                >
-                                    Authenticate with Google
-                                </Button>
-                            </>
-                        ) : (
-                            <>
-                                {recording.google_sheet_email && (
-                                    <Typography sx={{ margin: '20px 0px 30px 0px' }}>
-                                        Authenticated as: {recording.google_sheet_email}
-                                    </Typography>
-                                )}
-
-                                {loading ? (
-                                    <CircularProgress sx={{ marginBottom: '15px' }} />
-                                ) : error ? (
-                                    <Typography color="error">{error}</Typography>
-                                ) : spreadsheets.length === 0 ? (
-                                    <>
-                                        <div style={{ display: 'flex', gap: '10px' }}>
-                                            <Button
-                                                variant="outlined"
-                                                color="primary"
-                                                onClick={fetchSpreadsheetFiles}
-                                            >
-                                                Fetch Google Spreadsheets
-                                            </Button>
-                                            <Button
-                                                variant="outlined"
-                                                color="error"
-                                                onClick={removeIntegration}
-                                            >
-                                                Remove Integration
-                                            </Button>
-                                        </div>
-                                    </>
-                                ) : (
-                                    <>
-                                        <TextField
-                                            sx={{ marginBottom: '15px' }}
-                                            select
-                                            label="Select Google Sheet"
-                                            required
-                                            value={settings.spreadsheetId}
-                                            onChange={handleSpreadsheetSelect}
-                                            fullWidth
-                                        >
-                                            {spreadsheets.map(sheet => (
-                                                <MenuItem key={sheet.id} value={sheet.id}>
-                                                    {sheet.name}
-                                                </MenuItem>
-                                            ))}
-                                        </TextField>
-
-                                        {settings.spreadsheetId && (
-                                            <Typography sx={{ marginBottom: '10px' }}>
-                                                Selected Sheet: {spreadsheets.find(s => s.id === settings.spreadsheetId)?.name} (ID: {settings.spreadsheetId})
-                                            </Typography>
-                                        )}
-
-                                        <Button
-                                            variant="contained"
-                                            color="primary"
-                                            onClick={() => {
-                                                updateGoogleSheetId();
-                                                handleStart(settings);
-                                            }}
-                                            style={{ marginTop: '10px' }}
-                                            disabled={!settings.spreadsheetId || loading}
-                                        >
-                                            Submit
-                                        </Button>
-                                    </>
-                                )}
-                            </>
-                        )}
-                    </>
-                )}
-            </div>
-        </GenericModal>
+  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 {
+      const response = await axios.post(
+        `${apiUrl}/auth/gsheets/update`,
+        {
+          spreadsheetId: settings.spreadsheetId,
+          spreadsheetName: settings.spreadsheetName,
+          robotId: recordingId,
+        },
+        { withCredentials: true }
+      );
+      notify(`success`, `Google Sheet selected successfully`)
+      console.log("Google Sheet ID updated:", response.data);
+    } catch (error: any) {
+      console.error(
+        "Error updating Google Sheet ID:",
+        error.response?.data?.message || error.message
+      );
+    }
+  };
+
+  const removeIntegration = async () => {
+    try {
+      await axios.post(
+        `${apiUrl}/auth/gsheets/remove`,
+        { robotId: recordingId },
+        { withCredentials: true }
+      );
+
+      setRecording(null);
+      setSpreadsheets([]);
+      setSettings({ spreadsheetId: "", spreadsheetName: "", data: "" });
+    } catch (error: any) {
+      console.error(
+        "Error removing Google Sheets integration:",
+        error.response?.data?.message || error.message
+      );
+    }
+  };
+
+  useEffect(() => {
+    // Check if there is a success message in cookies
+    const status = Cookies.get("robot_auth_status");
+    const message = Cookies.get("robot_auth_message");
+
+    if (status === "success" && message) {
+      notify("success", message);
+      // Clear the cookies after reading
+      Cookies.remove("robot_auth_status");
+      Cookies.remove("robot_auth_message");
+    }
+
+    // Check if we're on the callback URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get("code");
+    if (code) {
+      handleOAuthCallback();
+    }
+
+    const fetchRecordingInfo = async () => {
+      if (!recordingId) return;
+      const recording = await getStoredRecording(recordingId);
+      if (recording) {
+        setRecording(recording);
+      }
+    };
+
+    fetchRecordingInfo();
+  }, [recordingId]);
+
+  return (
+    <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          marginLeft: "65px",
+        }}
+      >
+        <Typography variant="h6">
+          Integrate with Google Sheet{" "}
+          <Chip label="beta" color="primary" variant="outlined" />
+        </Typography>
+
+        {recording && recording.google_sheet_id ? (
+          <>
+            <Alert severity="info">
+              <AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
+              Every time this robot creates a successful run, its captured data
+              is appended to your {recording.google_sheet_name} Google Sheet.
+              You can check the data updates{" "}
+              <a
+                href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                here
+              </a>
+              .
+              <br />
+              <strong>Note:</strong> The data extracted before integrating with
+              Google Sheets will not be synced in the Google Sheet. Only the
+              data extracted after the integration will be synced.
+            </Alert>
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={removeIntegration}
+              style={{ marginTop: "15px" }}
+            >
+              Remove Integration
+            </Button>
+          </>
+        ) : (
+          <>
+            {!recording?.google_sheet_email ? (
+              <>
+                <p>
+                  If you enable this option, every time this robot runs a task
+                  successfully, its captured data will be appended to your
+                  Google Sheet.
+                </p>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={authenticateWithGoogle}
+                >
+                  Authenticate with Google
+                </Button>
+              </>
+            ) : (
+              <>
+                {recording.google_sheet_email && (
+                  <Typography sx={{ margin: "20px 0px 30px 0px" }}>
+                    Authenticated as: {recording.google_sheet_email}
+                  </Typography>
+                )}
+
+                {loading ? (
+                  <CircularProgress sx={{ marginBottom: "15px" }} />
+                ) : error ? (
+                  <Typography color="error">{error}</Typography>
+                ) : spreadsheets.length === 0 ? (
+                  <>
+                    <div style={{ display: "flex", gap: "10px" }}>
+                      <Button
+                        variant="outlined"
+                        color="primary"
+                        onClick={fetchSpreadsheetFiles}
+                      >
+                        Fetch Google Spreadsheets
+                      </Button>
+                      <Button
+                        variant="outlined"
+                        color="error"
+                        onClick={removeIntegration}
+                      >
+                        Remove Integration
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <TextField
+                      sx={{ marginBottom: "15px" }}
+                      select
+                      label="Select Google Sheet"
+                      required
+                      value={settings.spreadsheetId}
+                      onChange={handleSpreadsheetSelect}
+                      fullWidth
+                    >
+                      {spreadsheets.map((sheet) => (
+                        <MenuItem key={sheet.id} value={sheet.id}>
+                          {sheet.name}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+
+                    {settings.spreadsheetId && (
+                      <Typography sx={{ marginBottom: "10px" }}>
+                        Selected Sheet:{" "}
+                        {
+                          spreadsheets.find(
+                            (s) => s.id === settings.spreadsheetId
+                          )?.name
+                        }{" "}
+                        (ID: {settings.spreadsheetId})
+                      </Typography>
+                    )}
+
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      onClick={() => {
+                        updateGoogleSheetId();
+                        handleStart(settings);
+                      }}
+                      style={{ marginTop: "10px" }}
+                      disabled={!settings.spreadsheetId || loading}
+                    >
+                      Submit
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </GenericModal>
+  );
+};
+
+export const modalStyle = {
+  top: "40%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "50%",
+  backgroundColor: "background.paper",
+  p: 4,
+  height: "fit-content",
+  display: "block",
+  padding: "20px",
 };

src/components/molecules/NavBar.tsx

@@ -65,21 +65,21 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
             {!isRecording ? (
               <>
                 <IconButton
-                component="a"
-                href="https://discord.gg/NFhWDCdb"
-                target="_blank"
-                rel="noopener noreferrer"
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  borderRadius: '5px',
-                  padding: '8px',
-                  marginRight: '10px',
-                }}
+                  component="a"
+                  href="https://discord.gg/5GbPjBUkws"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    borderRadius: '5px',
+                    padding: '8px',
+                    marginRight: '30px',
+                  }}
                 >
-                <DiscordIcon sx={{ marginRight: '5px' }} />
+                  <DiscordIcon sx={{ marginRight: '5px' }} />
                 </IconButton>
-              <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
+                <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
                 <IconButton onClick={handleMenuOpen} sx={{
                   display: 'flex',
                   alignItems: 'center',

src/components/molecules/RecordingsTable.tsx

@@ -9,24 +9,32 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
-import { IconButton, Button, Box, Typography, TextField } from "@mui/material";
-import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power } from "@mui/icons-material";
+
+
 import SearchIcon from '@mui/icons-material/Search';
+import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText } from "@mui/material";
+import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, } from "@mui/icons-material";
+
 import LinkIcon from '@mui/icons-material/Link';
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
+import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
 import { Add } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';
 
+import axios from 'axios';
+import { apiUrl } from '../../apiConfig';
+import { Menu as MenuIcon } from '@mui/icons-material';
+
+
 /** TODO:
  *  1. allow editing existing robot after persisting browser steps
  *  2. show robot settings: id, url, etc. 
 */
 
 interface Column {
-  id: 'interpret' | 'name' | 'delete' | 'schedule' | 'integrate' | 'settings';
+  id: 'interpret' | 'name' | 'options' | 'schedule' | 'integrate' | 'settings';
   label: string;
   minWidth?: number;
   align?: 'right';
@@ -52,8 +60,8 @@ const columns: readonly Column[] = [
     minWidth: 80,
   },
   {
-    id: 'delete',
-    label: 'Delete',
+    id: 'options',
+    label: 'Options',
     minWidth: 80,
   },
 ];
@@ -73,17 +81,17 @@ interface RecordingsTableProps {
   handleScheduleRecording: (id: string, fileName: string, params: string[]) => void;
   handleIntegrateRecording: (id: string, fileName: string, params: string[]) => void;
   handleSettingsRecording: (id: string, fileName: string, params: string[]) => void;
+  handleEditRobot: (id: string, name: string, params: string[]) => void;
+  handleDuplicateRobot: (id: string, name: string, params: string[]) => void;
 }
 
-export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording }: RecordingsTableProps) => {
+export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const [rows, setRows] = React.useState<Data[]>([]);
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState('');
 
-  console.log('rows', rows);
-
   const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
 
@@ -147,11 +155,15 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     }
   }, []);
 
+
   // Filter rows based on search term
   const filteredRows = rows.filter((row) =>
     row.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+   
+
+
   return (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -242,22 +254,33 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
                                 <IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
                               </TableCell>
                             );
-                          case 'delete':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <IconButton aria-label="add" size="small" onClick={() => {
-                                  deleteRecordingFromStorage(row.id).then((result: boolean) => {
-                                    if (result) {
-                                      setRows([]);
-                                      notify('success', 'Recording deleted successfully');
-                                      fetchRecordings();
-                                    }
-                                  })
-                                }}>
-                                  <DeleteForever />
-                                </IconButton>
-                              </TableCell>
-                            );
+                            case 'options':
+                              return (
+                                <TableCell key={column.id} align={column.align}>
+                                  <OptionsButton
+                                    handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
+                                    handleDelete={() => {
+
+                                      checkRunsForRecording(row.id).then((result: boolean) => {
+                                        if (result) {
+                                          notify('warning', 'Cannot delete recording as it has active runs');
+                                        }
+                                      })
+
+                                      deleteRecordingFromStorage(row.id).then((result: boolean) => {
+                                        if (result) {
+                                          setRows([]);
+                                          notify('success', 'Recording deleted successfully');
+                                          fetchRecordings();
+                                        }
+                                      })
+                                    }}
+                                    handleDuplicate={() => {
+                                      handleDuplicateRobot(row.id, row.name, row.params || []);
+                                    }}
+                                  />
+                                </TableCell>
+                              );
                           case 'settings':
                             return (
                               <TableCell key={column.id} align={column.align}>
@@ -370,6 +393,60 @@ const SettingsButton = ({ handleSettings }: SettingsButtonProps) => {
   )
 }
 
+interface OptionsButtonProps {
+  handleEdit: () => void;
+  handleDelete: () => void;
+  handleDuplicate: () => void;
+}
+
+const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsButtonProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        aria-label="options"
+        size="small"
+        onClick={handleClick}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() => { handleEdit(); handleClose(); }}>
+          <ListItemIcon>
+            <Edit fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Edit</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => { handleDelete(); handleClose(); }}>
+          <ListItemIcon>
+            <DeleteForever fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Delete</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
+          <ListItemIcon>
+            <ContentCopy fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Duplicate</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
 const modalStyle = {
   top: '50%',
   left: '50%',

src/components/molecules/RobotDuplicate.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { GenericModal } from "../atoms/GenericModal";
+import { TextField, Typography, Box, Button, Chip } from "@mui/material";
+import { modalStyle } from "./AddWhereCondModal";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { duplicateRecording, getStoredRecording } from '../../api/storage';
+import { WhereWhatPair } from 'maxun-core';
+import { getUserById } from "../../api/auth";
+
+interface RobotMeta {
+    name: string;
+    id: string;
+    createdAt: string;
+    pairs: number;
+    updatedAt: string;
+    params: any[];
+}
+
+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 {
+    isOpen: boolean;
+    handleStart: (settings: RobotSettings) => void;
+    handleClose: () => void;
+    initialSettings?: RobotSettings | null;
+
+}
+
+export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const [targetUrl, setTargetUrl] = useState<string | undefined>('');
+    const { recordingId, notify } = useGlobalInfoStore();
+
+    useEffect(() => {
+        if (isOpen) {
+            getRobot();
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        // Update the targetUrl when the robot data is loaded
+        if (robot) {
+            const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
+            const url = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+            setTargetUrl(url);
+        }
+    }, [robot]);
+
+    const getRobot = async () => {
+        if (recordingId) {
+            const robot = await getStoredRecording(recordingId);
+            setRobot(robot);
+        } else {
+            notify('error', 'Could not find robot details. Please try again.');
+        }
+    }
+
+    // const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
+
+    // // Find the `goto` action in `what` and retrieve its arguments
+    // const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+
+    const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTargetUrl(e.target.value);
+    };
+
+    const handleSave = async () => {
+        if (!robot || !targetUrl) {
+            notify('error', 'Target URL is required.');
+            return;
+        }
+
+        console.log("handle save");
+
+        try {
+            const success = await duplicateRecording(robot.recording_meta.id, targetUrl);
+
+            if (success) {
+                notify('success', 'Target URL updated successfully.');
+                handleStart(robot); // Inform parent about the updated robot
+                handleClose(); // Close the modal
+
+                window.location.reload();
+            } else {
+                notify('error', 'Failed to update the Target URL. Please try again.');
+            }
+        } catch (error) {
+            notify('error', 'An error occurred while updating the Target URL.');
+            console.error('Error updating Target URL:', error);
+        }
+    };
+
+    return (
+        <GenericModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            modalStyle={modalStyle}
+        >
+            <>
+                <Typography variant="h5" style={{ marginBottom: '20px' }}>Duplicate Robot</Typography>
+                <Box style={{ display: 'flex', flexDirection: 'column' }}>
+                    {
+                        robot && (
+                            <>
+                                <span>Robot duplication is useful to extract data from pages with the same structure.</span>
+                                <br />
+                                <span>
+                                    Example: If you've created a robot for <code>producthunt.com/topics/api</code>, you can duplicate it to scrape similar pages 
+                                    like <code>producthunt.com/topics/database</code> without training a robot from scratch.
+                                    </span>
+                                    <br />
+                                <span>
+                                <b>⚠️ Ensure the new page has the same structure as the original page.</b>
+                                </span>
+                                <TextField
+                                    label="Robot Target URL"
+                                    key="Robot Target URL"
+                                    value={targetUrl}
+                                    onChange={handleTargetUrlChange}
+                                    style={{ marginBottom: '20px', marginTop: '30px' }}
+                                />
+                                <Box mt={2} display="flex" justifyContent="flex-end" onClick={handleSave}>
+                                    <Button variant="contained" color="primary">
+                                        Duplicate Robot
+                                    </Button>
+                                    <Button onClick={handleClose} color="primary" variant="outlined" style={{ marginLeft: '10px' }}>
+                                        Cancel
+                                    </Button>
+                                </Box>
+                            </>
+                        )
+                    }
+                </Box>
+            </>
+        </GenericModal>
+    );
+};

src/components/molecules/RobotEdit.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { GenericModal } from "../atoms/GenericModal";
+import { TextField, Typography, Box, Button } from "@mui/material";
+import { modalStyle } from "./AddWhereCondModal";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { getStoredRecording, updateRecording } from '../../api/storage';
+import { WhereWhatPair } from 'maxun-core';
+
+interface RobotMeta {
+    name: string;
+    id: string;
+    createdAt: string;
+    pairs: number;
+    updatedAt: string;
+    params: any[];
+}
+
+interface RobotWorkflow {
+    workflow: WhereWhatPair[];
+}
+
+interface RobotEditOptions {
+    name: string;
+    limit?: number;
+}
+
+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 {
+    isOpen: boolean;
+    handleStart: (settings: RobotSettings) => void;
+    handleClose: () => void;
+    initialSettings?: RobotSettings | null;
+    
+}
+
+export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
+    console.log("robot edit");
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const { recordingId, notify } = useGlobalInfoStore();
+
+    useEffect(() => {
+        if (isOpen) {
+            getRobot();
+        }
+    }, [isOpen]);
+
+    const getRobot = async () => {
+        if (recordingId) {
+            const robot = await getStoredRecording(recordingId);
+            setRobot(robot);
+        } else {
+            notify('error', 'Could not find robot details. Please try again.');
+        }
+    }
+
+    const handleRobotNameChange = (newName: string) => {
+        setRobot((prev) =>
+            prev ? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } } : prev
+        );
+    };
+
+    const handleLimitChange = (newLimit: number) => {
+        setRobot((prev) => {
+            if (!prev) return prev;
+
+            const updatedWorkflow = [...prev.recording.workflow];
+
+            if (
+                updatedWorkflow.length > 0 &&
+                updatedWorkflow[0]?.what &&
+                updatedWorkflow[0].what.length > 0 &&
+                updatedWorkflow[0].what[0].args &&
+                updatedWorkflow[0].what[0].args.length > 0 &&
+                updatedWorkflow[0].what[0].args[0]
+            ) {
+                updatedWorkflow[0].what[0].args[0].limit = newLimit;
+            }
+
+            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
+        });
+    };
+    const handleSave = async () => {
+        if (!robot) return;
+
+        try {
+            const payload = {
+                name: robot.recording_meta.name,
+                limit: robot.recording.workflow[0]?.what[0]?.args?.[0]?.limit,
+            };
+
+            const success = await updateRecording(robot.recording_meta.id, payload);
+
+            if (success) {
+                notify('success', 'Robot updated successfully.');
+                handleStart(robot); // Inform parent about the updated robot
+                handleClose(); // Close the modal
+
+                window.location.reload();
+            } else {
+                notify('error', 'Failed to update the robot. Please try again.');
+            }
+        } catch (error) {
+            notify('error', 'An error occurred while updating the robot.');
+            console.error('Error updating robot:', error);
+        }
+    };
+
+    return (
+        <GenericModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            modalStyle={modalStyle}
+        >
+            <>
+                <Typography variant="h5" style={{ marginBottom: '20px' }}>Edit Robot</Typography>
+                <Box style={{ display: 'flex', flexDirection: 'column' }}>
+                    {
+                        robot && (
+                            <>
+                                <TextField
+                                    label="Change Robot Name"
+                                    key="Change Robot Name"
+                                    type='text'
+                                    value={robot.recording_meta.name}
+                                    onChange={(e) => handleRobotNameChange(e.target.value)}
+                                    style={{ marginBottom: '20px' }}
+                                />
+                                {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
+                                    <TextField
+                                        label="Robot Limit"
+                                        type="number"
+                                        value={robot.recording.workflow[0].what[0].args[0].limit || ''}
+                                        onChange={(e) =>
+                                            handleLimitChange(parseInt(e.target.value, 10) || 0)
+                                        }
+                                        style={{ marginBottom: '20px' }}
+                                    />
+                                )}
+
+                                <Box mt={2} display="flex" justifyContent="flex-end" onClick={handleSave}>
+                                    <Button variant="contained" color="primary">
+                                        Save Changes
+                                    </Button>
+                                    <Button onClick={handleClose} color="primary" variant="outlined" style={{ marginLeft: '10px' }}>
+                                        Cancel
+                                    </Button>
+                                </Box>
+                            </>
+                        )
+                    }
+                </Box>
+            </>
+        </GenericModal>
+    );
+};

src/components/molecules/RobotSettings.tsx

@@ -104,6 +104,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
                             <>
                                 <TextField
                                     label="Robot Target URL"
+                                    key="Robot Target URL"
                                     value={targetUrl}
                                     InputProps={{
                                         readOnly: true,
@@ -112,6 +113,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
                                 />
                                 <TextField
                                     label="Robot ID"
+                                    key="Robot ID"
                                     value={robot.recording_meta.id}
                                     InputProps={{
                                         readOnly: true,
@@ -120,7 +122,8 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
                                 />
                                 <TextField
                                     label="Created By User"
-                                    value={userEmail}
+                                    key="Created By User"
+                                    value={userEmail ? userEmail : ''}
                                     InputProps={{
                                         readOnly: true,
                                     }}
@@ -128,6 +131,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
                                 />
                                 <TextField
                                     label="Robot Created At"
+                                    key="Robot Created At"
                                     value={robot.recording_meta.createdAt}
                                     InputProps={{
                                         readOnly: true,

src/components/molecules/RunContent.tsx

@@ -1,14 +1,11 @@
-import { Box, Tabs, Typography, Tab, Paper } from "@mui/material";
+import { Box, Tabs, Typography, Tab, Paper, Button } from "@mui/material";
 import Highlight from "react-highlight";
-import Button from "@mui/material/Button";
 import * as React from "react";
 import { Data } from "./RunsTable";
 import { TabPanel, TabContext } from "@mui/lab";
-import SettingsIcon from '@mui/icons-material/Settings';
-import ImageIcon from '@mui/icons-material/Image';
 import ArticleIcon from '@mui/icons-material/Article';
+import ImageIcon from '@mui/icons-material/Image';
 import { useEffect, useState } from "react";
-import AssignmentIcon from '@mui/icons-material/Assignment';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -32,7 +29,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
   useEffect(() => {
     setTab(tab);
-  }, [interpretationInProgress])
+  }, [interpretationInProgress]);
 
   useEffect(() => {
     if (row.serializableOutput && Object.keys(row.serializableOutput).length > 0) {
@@ -47,6 +44,29 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     }
   }, [row.serializableOutput]);
 
+  // Function to convert table data to CSV format
+  const convertToCSV = (data: any[], columns: string[]): string => {
+    const header = columns.join(',');
+    const rows = data.map(row =>
+      columns.map(col => JSON.stringify(row[col], null, 2)).join(',')
+    );
+    return [header, ...rows].join('\n');
+  };
+
+  // Function to download CSV file when called
+  const downloadCSV = () => {
+    const csvContent = convertToCSV(tableData, columns);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "data.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <Box sx={{ width: '100%' }}>
       <TabContext value={tab}>
@@ -54,7 +74,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
           <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs">
             <Tab label="Output Data" value='output' />
             <Tab label="Log" value='log' />
-            {/* <Tab label="Input" value='input' /> */}
           </Tabs>
         </Box>
         <TabPanel value='log'>
@@ -94,16 +113,19 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 <ArticleIcon sx={{ marginRight: '15px' }} />
                 Captured Data
               </Typography>
-              {Object.keys(row.serializableOutput).map((key) => {
-                return (
-                  <div key={`number-of-serializable-output-${key}`}>
-                    <Typography sx={{ margin: '20px 0px 20px 0px' }}>
-                      <a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput[key], null, 2)}`}
-                        download={key}>Download as JSON</a>
-                    </Typography>
-                  </div>
-                )
-              })}
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
+                <Typography>
+                  <a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput, null, 2)}`}
+                    download="data.json">
+                    Download as JSON
+                  </a>
+                </Typography>
+                <Typography
+                  onClick={downloadCSV}
+                >
+                  <a style={{ textDecoration: 'none', cursor: 'pointer' }}>Download as CSV</a>
+                </Typography>
+              </Box>
               {tableData.length > 0 ? (
                 <TableContainer component={Paper} sx={{ maxHeight: 440, marginTop: 2 }}>
                   <Table stickyHeader aria-label="sticky table">
@@ -139,12 +161,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
               )}
             </div>
           }
-          {row.binaryOutput
-            && Object.keys(row.binaryOutput).length !== 0 &&
+          {row.binaryOutput && Object.keys(row.binaryOutput).length !== 0 &&
             <div>
               <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
                 <ImageIcon sx={{ marginRight: '15px' }} />
-                Captured Screenshot</Typography>
+                Captured Screenshot
+              </Typography>
               {Object.keys(row.binaryOutput).map((key) => {
                 try {
                   const imageUrl = row.binaryOutput[key];
@@ -152,10 +174,10 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                     <Box key={`number-of-binary-output-${key}`} sx={{
                       width: 'max-content',
                     }}>
-                      <Typography key={`binary-output-key-${key}`} sx={{ margin: '20px 0px 20px 0px' }}>
+                      <Typography sx={{ margin: '20px 0px' }}>
                         <a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>Download Screenshot</a>
                       </Typography>
-                      <img key={`image-${key}`} src={imageUrl} alt={key} height='auto' width='700px' />
+                      <img src={imageUrl} alt={key} height='auto' width='700px' />
                     </Box>
                   )
                 } catch (e) {
@@ -171,4 +193,4 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
       </TabContext>
     </Box>
   );
-}
+};

src/components/molecules/RunsTable.tsx

@@ -63,8 +63,10 @@ export const RunsTable = (
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
+
   const [searchTerm, setSearchTerm] = useState('');
 
+
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
 
   const handleChangePage = (event: unknown, newPage: number) => {
@@ -110,6 +112,7 @@ export const RunsTable = (
     fetchRuns();
   };
 
+
   // Filter rows based on search term
   const filteredRows = rows.filter((row) =>
     row.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -117,6 +120,7 @@ export const RunsTable = (
 
   // Group filtered rows by robot meta id
   const groupedRows = filteredRows.reduce((acc, row) => {
+
     if (!acc[row.robotMetaId]) {
       acc[row.robotMetaId] = [];
     }
@@ -145,7 +149,9 @@ export const RunsTable = (
         {Object.entries(groupedRows).map(([id, data]) => (
           <Accordion key={id}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+
               <Typography variant="h6">{data[data.length - 1].name}</Typography>
+
             </AccordionSummary>
             <AccordionDetails>
               <Table stickyHeader aria-label="sticky table">

src/components/organisms/ApiKey.tsx

@@ -36,6 +36,10 @@ const ApiKeyManager = () => {
   const [copySuccess, setCopySuccess] = useState<boolean>(false);
   const { notify } = useGlobalInfoStore();
 
+  
+
+  
+
   useEffect(() => {
     const fetchApiKey = async () => {
       try {
@@ -49,6 +53,7 @@ const ApiKeyManager = () => {
     };
 
     fetchApiKey();
+    
   }, []);
 
   const generateApiKey = async () => {
@@ -56,6 +61,7 @@ const ApiKeyManager = () => {
     try {
       const { data } = await axios.post(`${apiUrl}/auth/generate-api-key`);
       setApiKey(data.api_key);
+     
       notify('success', `Generated API Key successfully`);
     } catch (error: any) {
       notify('error', `Failed to generate API Key - ${error.message}`);

src/components/organisms/BrowserContent.tsx

@@ -1,12 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import BrowserNavBar from "../molecules/BrowserNavBar";
 import { BrowserWindow } from "./BrowserWindow";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { BrowserTabs } from "../molecules/BrowserTabs";
 import { useSocketStore } from "../../context/socket";
-import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
-import { Box } from '@mui/material';
+import {
+  getCurrentTabs,
+  getCurrentUrl,
+  interpretCurrentRecording,
+} from "../../api/recording";
+import { Box } from "@mui/material";
 import { InterpretationLog } from "../molecules/InterpretationLog";
 
 // TODO: Tab !show currentUrl after recordingUrl global state
@@ -14,107 +18,125 @@ export const BrowserContent = () => {
   const { width } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
 
-  const [tabs, setTabs] = useState<string[]>(['current']);
+  const [tabs, setTabs] = useState<string[]>(["current"]);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [showOutputData, setShowOutputData] = useState(false);
 
-  const handleChangeIndex = useCallback((index: number) => {
-    setTabIndex(index);
-  }, [tabIndex])
+  const handleChangeIndex = useCallback(
+    (index: number) => {
+      setTabIndex(index);
+    },
+    [tabIndex]
+  );
 
-  const handleCloseTab = useCallback((index: number) => {
-    // the tab needs to be closed on the backend
-    socket?.emit('closeTab', {
-      index,
-      isCurrent: tabIndex === index,
-    });
-    // change the current index as current tab gets closed
-    if (tabIndex === index) {
-      if (tabs.length > index + 1) {
-        handleChangeIndex(index);
+  const handleCloseTab = useCallback(
+    (index: number) => {
+      // the tab needs to be closed on the backend
+      socket?.emit("closeTab", {
+        index,
+        isCurrent: tabIndex === index,
+      });
+      // change the current index as current tab gets closed
+      if (tabIndex === index) {
+        if (tabs.length > index + 1) {
+          handleChangeIndex(index);
+        } else {
+          handleChangeIndex(index - 1);
+        }
       } else {
-        handleChangeIndex(index - 1);
+        handleChangeIndex(tabIndex - 1);
       }
-    } else {
-      handleChangeIndex(tabIndex - 1);
-    }
-    // update client tabs
-    setTabs((prevState) => [
-      ...prevState.slice(0, index),
-      ...prevState.slice(index + 1)
-    ])
-  }, [tabs, socket, tabIndex]);
+      // update client tabs
+      setTabs((prevState) => [
+        ...prevState.slice(0, index),
+        ...prevState.slice(index + 1),
+      ]);
+    },
+    [tabs, socket, tabIndex]
+  );
 
   const handleAddNewTab = useCallback(() => {
     // Adds new tab by pressing the plus button
-    socket?.emit('addTab');
+    socket?.emit("addTab");
     // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, 'new tab']);
+    setTabs((prevState) => [...prevState, "new tab"]);
     handleChangeIndex(tabs.length);
   }, [socket, tabs]);
 
-  const handleNewTab = useCallback((tab: string) => {
-    // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, tab]);
-    // changes focus on the new tab - same happens in the remote browser
-    handleChangeIndex(tabs.length);
-    handleTabChange(tabs.length);
-  }, [tabs]);
+  const handleNewTab = useCallback(
+    (tab: string) => {
+      // Adds a new tab to the end of the tabs array and shifts focus
+      setTabs((prevState) => [...prevState, tab]);
+      // changes focus on the new tab - same happens in the remote browser
+      handleChangeIndex(tabs.length);
+      handleTabChange(tabs.length);
+    },
+    [tabs]
+  );
 
-  const handleTabChange = useCallback((index: number) => {
-    // page screencast and focus needs to be changed on backend
-    socket?.emit('changeTab', index);
-  }, [socket]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      // page screencast and focus needs to be changed on backend
+      socket?.emit("changeTab", index);
+    },
+    [socket]
+  );
 
   const handleUrlChanged = (url: string) => {
     const parsedUrl = new URL(url);
     if (parsedUrl.hostname) {
-      const host = parsedUrl.hostname.match(/\b(?!www\.)[a-zA-Z0-9]+/g)?.join('.')
+      const host = parsedUrl.hostname
+        .match(/\b(?!www\.)[a-zA-Z0-9]+/g)
+        ?.join(".");
       if (host && host !== tabs[tabIndex]) {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
           host,
-          ...prevState.slice(tabIndex + 1)
-        ])
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     } else {
-      if (tabs[tabIndex] !== 'new tab') {
+      if (tabs[tabIndex] !== "new tab") {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
-          'new tab',
-          ...prevState.slice(tabIndex + 1)
-        ])
+          "new tab",
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     }
-
   };
 
-  const tabHasBeenClosedHandler = useCallback((index: number) => {
-    handleCloseTab(index);
-  }, [handleCloseTab])
+  const tabHasBeenClosedHandler = useCallback(
+    (index: number) => {
+      handleCloseTab(index);
+    },
+    [handleCloseTab]
+  );
 
   useEffect(() => {
     if (socket) {
-      socket.on('newTab', handleNewTab);
-      socket.on('tabHasBeenClosed', tabHasBeenClosedHandler);
+      socket.on("newTab", handleNewTab);
+      socket.on("tabHasBeenClosed", tabHasBeenClosedHandler);
     }
     return () => {
       if (socket) {
-        socket.off('newTab', handleNewTab);
-        socket.off('tabHasBeenClosed', tabHasBeenClosedHandler);
+        socket.off("newTab", handleNewTab);
+        socket.off("tabHasBeenClosed", tabHasBeenClosedHandler);
       }
-    }
-  }, [socket, handleNewTab])
+    };
+  }, [socket, handleNewTab]);
 
   useEffect(() => {
-    getCurrentTabs().then((response) => {
-      if (response) {
-        setTabs(response);
-      }
-    }).catch((error) => {
-      console.log("Fetching current url failed");
-    })
-  }, [])
+    getCurrentTabs()
+      .then((response) => {
+        if (response) {
+          setTabs(response);
+        }
+      })
+      .catch((error) => {
+        console.log("Fetching current url failed");
+      });
+  }, [handleUrlChanged]);
 
   return (
     <div id="browser">
@@ -134,7 +156,6 @@ export const BrowserContent = () => {
       <BrowserWindow />
     </div>
   );
-}
+};
 
-const BrowserContentWrapper = styled.div`
-`;
+const BrowserContentWrapper = styled.div``;

src/components/organisms/BrowserWindow.tsx

@@ -8,6 +8,7 @@ import { useActionContext } from '../../context/browserActions';
 import { useBrowserSteps, TextStep } from '../../context/browserSteps';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 
+
 interface ElementInfo {
     tagName: string;
     hasOnlyText?: boolean;
@@ -316,7 +317,7 @@ export const BrowserWindow = () => {
         }
     }, [paginationMode, resetPaginationSelector]);
 
-
+  
     return (
         <div onClick={handleClick} style={{ width: '900px' }} id="browser-window">
             {

src/components/organisms/MainMenu.tsx

@@ -3,7 +3,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Code } from "@mui/icons-material";
 import { apiUrl } from "../../apiConfig";
 
 interface MainMenuProps {
@@ -87,8 +87,8 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
         </Tabs>
         <hr />
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
-          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
-            API Docs
+          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Code />}>
+            Website To API
           </Button>
           <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
             Join Maxun Cloud
@@ -103,7 +103,7 @@ const buttonStyles = {
   justifyContent: 'flex-start',
   textAlign: 'left',
   fontSize: 'medium',
-  padding: '6px 16px 6px 22px', 
+  padding: '6px 16px 6px 22px',
   minHeight: '48px',
   minWidth: '100%',
   display: 'flex',

src/components/organisms/Recordings.tsx

@@ -5,6 +5,8 @@ import { RunSettings, RunSettingsModal } from "../molecules/RunSettings";
 import { ScheduleSettings, ScheduleSettingsModal } from "../molecules/ScheduleSettings";
 import { IntegrationSettings, IntegrationSettingsModal } from "../molecules/IntegrationSettings";
 import { RobotSettings, RobotSettingsModal } from "../molecules/RobotSettings";
+import { RobotEditModal } from '../molecules/RobotEdit';
+import { RobotDuplicationModal } from '../molecules/RobotDuplicate';
 
 interface RecordingsProps {
   handleEditRecording: (id: string, fileName: string) => void;
@@ -18,10 +20,14 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
   const [scheduleSettingsAreOpen, setScheduleSettingsAreOpen] = useState(false);
   const [integrateSettingsAreOpen, setIntegrateSettingsAreOpen] = useState(false);
   const [robotSettingsAreOpen, setRobotSettingsAreOpen] = useState(false);
+  const [robotEditAreOpen, setRobotEditAreOpen] = useState(false);
+  const [robotDuplicateAreOpen, setRobotDuplicateAreOpen] = useState(false);
   const [params, setParams] = useState<string[]>([]);
   const [selectedRecordingId, setSelectedRecordingId] = useState<string>('');
   const handleIntegrateRecording = (id: string, settings: IntegrationSettings) => {};
   const handleSettingsRecording = (id: string, settings: RobotSettings) => {};
+  const handleEditRobot = (id: string, settings: RobotSettings) => {};
+  const handleDuplicateRobot = (id: string, settings: RobotSettings) => {};
 
   const handleSettingsAndIntegrate = (id: string, name: string, params: string[]) => {
     if (params.length === 0) {
@@ -75,6 +81,32 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
     }
   }
 
+  const handleEditRobotOption = (id: string, name: string, params: string[]) => {
+    if (params.length === 0) {
+      setRobotEditAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    } else {
+      setParams(params);
+      setRobotEditAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    }
+  }
+
+  const handleDuplicateRobotOption = (id: string, name: string, params: string[]) => {
+    if (params.length === 0) {
+      setRobotDuplicateAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    } else {
+      setParams(params);
+      setRobotDuplicateAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    }
+  }
+
   const handleClose = () => {
     setParams([]);
     setRunSettingsAreOpen(false);
@@ -103,6 +135,20 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
     setSelectedRecordingId('');
   }
 
+  const handleRobotEditClose = () => {
+    setParams([]);
+    setRobotEditAreOpen(false);
+    setRecordingInfo('', '');
+    setSelectedRecordingId('');
+  }
+
+  const handleRobotDuplicateClose = () => {
+    setParams([]);
+    setRobotDuplicateAreOpen(false);
+    setRecordingInfo('', '');
+    setSelectedRecordingId('');
+  }
+
   return (
     <React.Fragment>
       <RunSettingsModal isOpen={runSettingsAreOpen}
@@ -123,6 +169,14 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
         handleClose={handleRobotSettingsClose}
         handleStart={(settings) => handleSettingsRecording(selectedRecordingId, settings)}
       />
+      <RobotEditModal isOpen={robotEditAreOpen} 
+        handleClose={handleRobotEditClose}
+        handleStart={(settings) => handleEditRobot(selectedRecordingId,settings)} 
+      />
+      <RobotDuplicationModal isOpen={robotDuplicateAreOpen}
+        handleClose={handleRobotDuplicateClose}
+        handleStart={(settings) => handleDuplicateRobot(selectedRecordingId, settings)}
+      />
       <Grid container direction="column" sx={{ padding: '30px' }}>
         <Grid item xs>
           <RecordingsTable
@@ -131,6 +185,8 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
             handleScheduleRecording={handleSettingsAndSchedule}
             handleIntegrateRecording={handleSettingsAndIntegrate}
             handleSettingsRecording={handleRobotSettings}
+            handleEditRobot={handleEditRobotOption}
+            handleDuplicateRobot={handleDuplicateRobotOption}
           />
         </Grid>
       </Grid>

src/context/auth.tsx

@@ -90,4 +90,4 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
     );
 };
 
-export { AuthContext, AuthProvider };
+export { AuthContext, AuthProvider };

src/index.css

@@ -28,7 +28,8 @@ a {
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  monospace;
+  color: #ff00c3;
 }
 
 #browser-actions {
@@ -53,9 +54,6 @@ code {
   transform-origin: top left; /* Keep the position fixed */
 }
 
-#browser {
-}
-
 #browser-window {
   overflow-y: auto;
   height: 100%;

src/pages/Login.tsx

@@ -1,119 +1,134 @@
-import axios from 'axios';
-import { useState, useContext, useEffect } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { AuthContext } from '../context/auth';
-import {
-    Box,
-    Typography,
-    TextField,
-    Button,
-    CircularProgress,
-} from '@mui/material';
+import axios from "axios";
+import { useState, useContext, useEffect, FormEvent } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { AuthContext } from "../context/auth";
+import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
 
 const Login = () => {
-    const [form, setForm] = useState({
-        email: '',
-        password: '',
-    });
-    const [loading, setLoading] = useState(false);
-    const { notify } = useGlobalInfoStore();
-    const { email, password } = form;
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const { notify } = useGlobalInfoStore();
+  const { email, password } = form;
 
-    const { state, dispatch } = useContext(AuthContext);
-    const { user } = state;
+  const { state, dispatch } = useContext(AuthContext);
+  const { user } = state;
 
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    useEffect(() => {
-        if (user) {
-            navigate('/');
-        }
-    }, [user, navigate]);
+  useEffect(() => {
+    if (user) {
+      navigate("/");
+    }
+  }, [user, navigate]);
 
-    const handleChange = (e: any) => {
-        const { name, value } = e.target;
-        setForm({ ...form, [name]: value });
-    };
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+    setForm({ ...form, [name]: value });
+  };
 
-    const submitForm = async (e: any) => {
-        e.preventDefault();
-        setLoading(true);
-        try {
-            const { data } = await axios.post(`${apiUrl}/auth/login`, { email, password });
-            dispatch({ type: 'LOGIN', payload: data });
-            notify('success', 'Welcome to Maxun!');
-            window.localStorage.setItem('user', JSON.stringify(data));
-            navigate('/');
-        } catch (err: any) {
-            notify('error', err.response.data || 'Login Failed. Please try again.');
-            setLoading(false);
-        }
-    };
+  const submitForm = async (e: any) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const { data } = await axios.post(`${apiUrl}/auth/login`, {
+        email,
+        password,
+      });
+      dispatch({ type: "LOGIN", payload: data });
+      notify("success", "Welcome to Maxun!");
+      window.localStorage.setItem("user", JSON.stringify(data));
+      navigate("/");
+    } catch (err) {
+      notify("error", "Login Failed. Please try again.");
+      setLoading(false);
+    }
+  };
 
-    return (
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        maxHeight: "100vh",
+        mt: 6,
+        padding: 4,
+      }}
+    >
+    
         <Box
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                mt: 5,
-            }}
+          component="form"
+          onSubmit={submitForm}
+          sx={{
+            textAlign: "center",
+            backgroundColor: "#ffffff",
+            padding: 6,
+            borderRadius: 5,
+            boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            maxWidth: 400,
+            width: "100%",
+          }}
         >
-            <Typography variant="h4" gutterBottom>
-                Welcome Back!
-            </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
-                <TextField
-                    fullWidth
-                    label="Email"
-                    name="email"
-                    value={email}
-                    onChange={handleChange}
-                    margin="normal"
-                    variant="outlined"
-                    required
-                />
-                <TextField
-                    fullWidth
-                    label="Password"
-                    name="password"
-                    type="password"
-                    value={password}
-                    onChange={handleChange}
-                    margin="normal"
-                    variant="outlined"
-                    required
-                />
-
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    color="primary"
-                    sx={{ mt: 2, mb: 2 }}
-                    disabled={loading || !email || !password}
-                >
-                    {loading ? (
-                        <>
-                            <CircularProgress size={20} sx={{ mr: 2 }} />
-                            Loading
-                        </>
-                    ) : (
-                        'Login'
-                    )}
-                </Button>
-
-                <Typography variant="body2" align="center">
-                    Don’t have an account?{' '}
-                    <Link to="/register" style={{ textDecoration: 'none'}}>
-                        Register
-                    </Link>
-                </Typography>
-            </Box>
+          <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+          <Typography variant="h4" gutterBottom>
+            Welcome Back!
+          </Typography>
+          <TextField
+            fullWidth
+            label="Email"
+            name="email"
+            value={email}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+          />
+          <TextField
+            fullWidth
+            label="Password"
+            name="password"
+            type="password"
+            value={password}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 2, mb: 2 }}
+            disabled={loading || !email || !password}
+          >
+            {loading ? (
+              <>
+                <CircularProgress size={20} sx={{ mr: 2 }} />
+                Loading
+              </>
+            ) : (
+              "Login"
+            )}
+          </Button>
+          <Typography variant="body2" align="center">
+            Don’t have an account?{" "}
+            <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
+              Register
+            </Link>
+          </Typography>
         </Box>
-    );
+        </Box>
+     
+  );
 };
 
 export default Login;

src/pages/Register.tsx

@@ -1,117 +1,132 @@
-import { useState, useContext, useEffect } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import axios from 'axios';
-import { AuthContext } from '../context/auth';
-import { TextField, Button, CircularProgress, Typography, Box, Container } from '@mui/material';
+import axios from "axios";
+import { useState, useContext, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { AuthContext } from "../context/auth";
+import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
 
 const Register = () => {
-    const [form, setForm] = useState({
-        email: '',
-        password: '',
-    });
-    const [loading, setLoading] = useState(false);
-    const { notify } = useGlobalInfoStore();
-    const { email, password } = form;
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const { notify } = useGlobalInfoStore();
+  const { email, password } = form;
 
-    const { state, dispatch } = useContext(AuthContext);
-    const { user } = state;
-    const navigate = useNavigate();
+  const { state, dispatch } = useContext(AuthContext);
+  const { user } = state;
 
-    useEffect(() => {
-        if (user !== null) navigate('/');
-    }, [user, navigate]);
+  const navigate = useNavigate();
 
-    const handleChange = (e: any) => {
-        const { name, value } = e.target;
-        setForm({ ...form, [name]: value });
-    };
+  useEffect(() => {
+    if (user) {
+      navigate("/");
+    }
+  }, [user, navigate]);
 
-    const submitForm = async (e: any) => {
-        e.preventDefault();
-        setLoading(true);
-        try {
-            const { data } = await axios.post(`${apiUrl}/auth/register`, {
-                email,
-                password,
-            });
-            dispatch({
-                type: 'LOGIN',
-                payload: data,
-            });
-            notify('success', 'Welcome to Maxun!');
-            window.localStorage.setItem('user', JSON.stringify(data));
-            navigate('/');
-        } catch (err: any) {
-            notify('error', err.response.data || 'Registration Failed. Please try again.');
-        } finally {
-            setLoading(false);
-        }
-    };
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+    setForm({ ...form, [name]: value });
+  };
 
-    return (
-        <Box
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                mt: 5,
-            }}
+  const submitForm = async (e: any) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const { data } = await axios.post(`${apiUrl}/auth/register`, {
+        email,
+        password,
+      });
+      dispatch({ type: "LOGIN", payload: data });
+      notify("success", "Registration Successful!");
+      window.localStorage.setItem("user", JSON.stringify(data));
+      navigate("/");
+    } catch (error:any) {
+      notify("error", error.response.data || "Registration Failed. Please try again.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        maxHeight: "100vh",
+        mt: 6,
+        padding: 4,
+      }}
+    >
+      <Box
+        component="form"
+        onSubmit={submitForm}
+        sx={{
+            textAlign: "center",
+            backgroundColor: "#ffffff",
+            padding: 6,
+            borderRadius: 5,
+            boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            maxWidth: 400,
+            width: "100%",
+          }}
+      >
+        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+        <Typography variant="h4" gutterBottom>
+          Create an Account
+        </Typography>
+        <TextField
+          fullWidth
+          label="Email"
+          name="email"
+          value={email}
+          onChange={handleChange}
+          margin="normal"
+          variant="outlined"
+          required
+        />
+        <TextField
+          fullWidth
+          label="Password"
+          name="password"
+          type="password"
+          value={password}
+          onChange={handleChange}
+          margin="normal"
+          variant="outlined"
+          required
+        />
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          color="primary"
+          sx={{ mt: 2, mb: 2 }}
+          disabled={loading || !email || !password}
         >
-            <Typography variant="h4" gutterBottom>
-                Create an account
-            </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
-                <TextField
-                    margin="normal"
-                    required
-                    fullWidth
-                    id="email"
-                    label="Email Address"
-                    name="email"
-                    value={email}
-                    onChange={handleChange}
-                    autoComplete="email"
-                />
-                <TextField
-                    margin="normal"
-                    required
-                    fullWidth
-                    name="password"
-                    label="Password"
-                    type="password"
-                    id="password"
-                    value={password}
-                    onChange={handleChange}
-                    autoComplete="current-password"
-                />
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    color="primary"
-                    sx={{ mt: 3, mb: 2 }}
-                    disabled={loading || !email || !password}
-                >
-                    {loading ? (
-                        <>
-                            <CircularProgress size={20} sx={{ mr: 2 }} />
-                            Loading
-                        </>
-                    ) : (
-                        'Register'
-                    )}
-                </Button>
-                <Typography variant="body2" align="center">
-                    Already have an account?{' '}
-                    <Link to="/login" style={{ textDecoration: 'none' }}>
-                        Login
-                    </Link>
-                </Typography>
-            </Box>
-        </Box>
-    );
+          {loading ? (
+            <>
+              <CircularProgress size={20} sx={{ mr: 2 }} />
+              Loading
+            </>
+          ) : (
+            "Register"
+          )}
+        </Button>
+        <Typography variant="body2" align="center">
+          Already have an account?{" "}
+          <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
+            Login
+          </Link>
+        </Typography>
+      </Box>
+    </Box>
+  );
 };
 
 export default Register;