Merge branch 'develop' into integration_airtable

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,89 +1,10 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { GlobalInfoProvider } from "./context/globalInfo";
-import { PageWrapper } from "./pages/PageWrappper";
+import { PageWrapper } from "./pages/PageWrapper";
 import i18n from "./i18n";
 import ThemeModeProvider from './context/theme-provider';
 
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#ff00c3",
-      contrastText: "#ffffff",
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          // Default styles for all buttons (optional)
-          textTransform: "none",
-        },
-        containedPrimary: {
-          // Styles for 'contained' variant with 'primary' color
-          "&:hover": {
-            backgroundColor: "#ff66d9",
-          },
-        },
-        outlined: {
-          // Apply white background for all 'outlined' variant buttons
-          backgroundColor: "#ffffff",
-          "&:hover": {
-            backgroundColor: "#f0f0f0", // Optional lighter background on hover
-          },
-        },
-      },
-    },
-    MuiLink: {
-      styleOverrides: {
-        root: {
-          "&:hover": {
-            color: "#ff00c3",
-          },
-        },
-      },
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          // '&:hover': {
-          //   color: "#ff66d9",
-          // },
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          textTransform: "none",
-        },
-      },
-    },
-    MuiAlert: {
-      styleOverrides: {
-        standardInfo: {
-          backgroundColor: "#fce1f4",
-          color: "#ff00c3",
-          "& .MuiAlert-icon": {
-            color: "#ff00c3",
-          },
-        },
-      },
-    },
-    MuiAlertTitle: {
-      styleOverrides: {
-        root: {
-          "& .MuiAlert-icon": {
-            color: "#ffffff",
-          },
-        },
-      },
-    },
-  },
-});
-
 function App() {
   return (
     <ThemeModeProvider>
@@ -93,16 +14,6 @@ function App() {
         </Routes>
       </GlobalInfoProvider>
     </ThemeModeProvider>
-
-    //  <ThemeProvider theme={theme}>
-      
-    //     <GlobalInfoProvider>
-    //       <Routes>
-    //         <Route path="/*" element={<PageWrapper />} />
-    //       </Routes>
-    //     </GlobalInfoProvider>
-     
-    // </ThemeProvider> 
   );
 }
 

src/api/storage.ts

@@ -5,6 +5,15 @@ import { ScheduleSettings } from "../components/robot/ScheduleSettings";
 import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
 import { apiUrl } from "../apiConfig";
 
+interface CredentialInfo {
+  value: string;
+  type: string;
+}
+
+interface Credentials {
+  [key: string]: CredentialInfo;
+}
+
 export const getStoredRecordings = async (): Promise<string[] | null> => {
   try {
     const response = await axios.get(`${apiUrl}/storage/recordings`);
@@ -19,7 +28,7 @@ export const getStoredRecordings = async (): Promise<string[] | null> => {
   }
 };
 
-export const updateRecording = async (id: string, data: { name?: string; limit?: number }): Promise<boolean> => {
+export const updateRecording = async (id: string, data: { name?: string; limit?: number, credentials?: Credentials }): Promise<boolean> => {
   try {
     const response = await axios.put(`${apiUrl}/storage/recordings/${id}`, data);
     if (response.status === 200) {

src/components/dashboard/NavBar.tsx

@@ -4,8 +4,33 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar, Tooltip } from "@mui/material";
-import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language, Brightness7, Brightness4, Description } from "@mui/icons-material";
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Chip,
+  Button,
+  Modal,
+  Tabs,
+  Tab,
+  Box,
+  Snackbar,
+  Tooltip
+} from "@mui/material";
+import {
+  AccountCircle,
+  Logout,
+  Clear,
+  YouTube,
+  X,
+  Update,
+  Close,
+  Language,
+  Description,
+  LightMode,
+  DarkMode
+} from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../recorder/SaveRecording';
@@ -114,7 +139,7 @@ export const NavBar: React.FC<NavBarProps> = ({
           }
         }}
       >
-        {darkMode ? <Brightness7 /> : <Brightness4 />}
+        {darkMode ? <LightMode /> : <DarkMode />}
       </IconButton>
     </Tooltip>
   );
@@ -200,7 +225,7 @@ export const NavBar: React.FC<NavBarProps> = ({
                     border: "#00000099 1px solid",
                     '&:hover': { color: '#ff00c3', border: '#ff00c3 1px solid' }
                   }}>
-                    <Update sx={{ marginRight: '5px' }} /> {t('navbar.upgrade.button')} Maxun
+                    <Update sx={{ marginRight: '5px' }} /> {t('navbar.upgrade.button')}
                   </Button>
                   <Modal open={open} onClose={handleUpdateClose}>
                     <Box

src/components/dashboard/NotFound.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export function NotFoundPage() {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>404 - Page Not Found</h1>
+      <p>Oops! This page does not exist.</p>
+      <a href="/" style={{ textDecoration: 'none' }}>Take me to the homepage</a>
+    </div>
+  );
+}

src/components/integration/IntegrationSettings.tsx

@@ -13,7 +13,9 @@ import axios from "axios";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRecording } from "../../api/storage";
 import { apiUrl } from "../../apiConfig.js";
+
 import Cookies from "js-cookie";
+
 import { useTranslation } from "react-i18next";
 import { SignalCellularConnectedNoInternet0BarSharp } from "@mui/icons-material";
 
@@ -35,7 +37,7 @@ export interface IntegrationSettings {
   
 }
 
-// Helper functions to replace js-cookie functionality
+
 const getCookie = (name: string): string | null => {
   const value = `; ${document.cookie}`;
   const parts = value.split(`; ${name}=`);
@@ -49,6 +51,7 @@ const removeCookie = (name: string): void => {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
 };
 
+
 export const IntegrationSettingsModal = ({
   isOpen,
   handleStart,
@@ -285,6 +288,7 @@ export const IntegrationSettingsModal = ({
     }
   };
 
+
   // Remove Airtable integration
   const removeAirtableIntegration = async () => {
     try {
@@ -314,6 +318,7 @@ export const IntegrationSettingsModal = ({
       }
     } catch (error) {
       setError("Error authenticating with Airtable");
+
     }
   };
 

src/components/pickers/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSocketStore } from '../../context/socket';
-import { Coordinates } from './canvas';
+import { Coordinates } from '../recorder/canvas';
 
 interface DatePickerProps {
   coordinates: Coordinates;

src/components/recorder/AddWhatCondModal.tsx

@@ -3,7 +3,6 @@ import { GenericModal } from "../ui/GenericModal";
 import { modalStyle } from "./AddWhereCondModal";
 import { Button, MenuItem, TextField, Typography } from "@mui/material";
 import React, { useRef } from "react";
-import { Dropdown as MuiDropdown } from "../ui/DropdownMui";
 import { KeyValueForm } from "./KeyValueForm";
 import { ClearButton } from "../ui/buttons/ClearButton";
 import { useSocketStore } from "../../context/socket";

src/components/recorder/Highlighter.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import styled from "styled-components";
 
 interface HighlighterProps {

src/components/recorder/LeftSidePanel.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useState } from "react";
 import { getActiveWorkflow, getParamsOfActiveWorkflow } from "../../api/workflow";
 import { useSocketStore } from '../../context/socket';
 import { WhereWhatPair, WorkflowFile } from "maxun-core";
-import { SidePanelHeader } from "./SidePanelHeader";
 import { emptyWorkflow } from "../../shared/constants";
 import { LeftSidePanelContent } from "./LeftSidePanelContent";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";

src/components/recorder/LeftSidePanelContent.tsx

@@ -1,15 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import Box from "@mui/material/Box";
 import { Pair } from "./Pair";
 import { WhereWhatPair, WorkflowFile } from "maxun-core";
 import { useSocketStore } from "../../context/socket";
-import { Add } from "@mui/icons-material";
 import { Socket } from "socket.io-client";
 import { AddButton } from "../ui/buttons/AddButton";
 import { AddPair } from "../../api/workflow";
 import { GenericModal } from "../ui/GenericModal";
 import { PairEditForm } from "./PairEditForm";
-import { Fab, Tooltip, Typography } from "@mui/material";
+import { Tooltip } from "@mui/material";
 
 interface LeftSidePanelContentProps {
   workflow: WorkflowFile;

src/components/recorder/PairDetail.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { WhereWhatPair } from "maxun-core";
-import { Box, Button, IconButton, MenuItem, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import { IconButton, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import { Close, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 import TreeView from '@mui/lab/TreeView';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -11,7 +11,6 @@ import { WarningText } from "../ui/texts";
 import NotificationImportantIcon from '@mui/icons-material/NotificationImportant';
 import { RemoveButton } from "../ui/buttons/RemoveButton";
 import { AddWhereCondModal } from "./AddWhereCondModal";
-import { UpdatePair } from "../../api/workflow";
 import { useSocketStore } from "../../context/socket";
 import { AddWhatCondModal } from "./AddWhatCondModal";
 

src/components/recorder/RightSidePanel.tsx

@@ -3,7 +3,6 @@ import { Button, Paper, Box, TextField, IconButton } from "@mui/material";
 import EditIcon from '@mui/icons-material/Edit';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import DocumentScannerIcon from '@mui/icons-material/DocumentScanner';
-import { SimpleBox } from "../ui/Box";
 import { WorkflowFile } from "maxun-core";
 import Typography from "@mui/material/Typography";
 import { useGlobalInfoStore } from "../../context/globalInfo";
@@ -12,15 +11,12 @@ import { useBrowserSteps } from '../../context/browserSteps';
 import { useSocketStore } from '../../context/socket';
 import { ScreenshotSettings } from '../../shared/types';
 import InputAdornment from '@mui/material/InputAdornment';
-import { SidePanelHeader } from './SidePanelHeader';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
-import { emptyWorkflow } from "../../shared/constants";
 import { getActiveWorkflow } from "../../api/workflow";
-import DeleteIcon from '@mui/icons-material/Delete';
 import ActionDescriptionBox from '../action/ActionDescriptionBox';
 import { useThemeMode } from '../../context/theme-provider';
 import { useTranslation } from 'react-i18next';

src/components/recorder/SaveRecording.tsx

@@ -22,7 +22,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
   const [recordingName, setRecordingName] = useState<string>(fileName);
   const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
 
-  const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
+  const { browserId, setBrowserId, notify, recordings, isLogin } = useGlobalInfoStore();
   const { socket } = useSocketStore();
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
@@ -59,7 +59,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
   // releases resources and changes the view for main page by clearing the global browserId
   const saveRecording = async () => {
     if (user) {
-      const payload = { fileName: recordingName, userId: user.id };
+      const payload = { fileName: recordingName, userId: user.id, isLogin: isLogin };
       socket?.emit('save', payload);
       setWaitingForSave(true);
       console.log(`Saving the recording as ${recordingName} for userId ${user.id}`);

src/components/recorder/canvas.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useSocketStore } from '../../context/socket';
-import { getMappedCoordinates } from "../../helpers/inputHelpers";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useActionContext } from '../../context/browserActions';
 import DatePicker from '../pickers/DatePicker';

src/components/robot/Recordings.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from "react";
+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 { IntegrationSettings, IntegrationSettingsModal } from "../integration/IntegrationSettings";
-import { RobotSettings, RobotSettingsModal } from "./RobotSettings";
+import { IntegrationSettingsModal } from "../integration/IntegrationSettings";
+import { RobotSettingsModal } from "./RobotSettings";
 import { RobotEditModal } from "./RobotEdit";
 import { RobotDuplicationModal } from "./RobotDuplicate";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { useTranslation } from "react-i18next";
 
 interface RecordingsProps {
   handleEditRecording: (id: string, fileName: string) => void;
@@ -26,6 +28,8 @@ export const Recordings = ({
   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[]) => {
     setParams(params);
@@ -39,6 +43,31 @@ export const Recordings = ({
     navigate("/robots"); // Navigate back to the main robots page
   };
 
+  useEffect(() => {
+    // Helper function to get and clear a cookie
+    const getAndClearCookie = (name: string) => {
+      const value = document.cookie
+        .split('; ')
+        .find(row => row.startsWith(`${name}=`))
+        ?.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 robotId = getAndClearCookie('robot_auth_robotId');
+
+    if (authStatus === 'success' && robotId) {
+      notify(authStatus, t("recordingtable.notifications.auth_success"));
+
+      handleNavigate(`/robots/${robotId}/integrate`, robotId, "", []);''  
+    }
+  }, []);
+
   // Determine which modal to open based on the current route
   const getCurrentModal = () => {
     const currentPath = location.pathname;

src/components/robot/RecordingsTable.tsx

@@ -8,11 +8,35 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
-import { useEffect } from "react";
+import { memo, useCallback, useEffect, useMemo } from "react";
 import { WorkflowFile } from "maxun-core";
 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, MoreHoriz } from "@mui/icons-material";
+import {
+  IconButton,
+  Button,
+  Box,
+  Typography,
+  TextField,
+  MenuItem,
+  Menu,
+  ListItemIcon,
+  ListItemText,
+  CircularProgress,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  Checkbox,
+} from "@mui/material";
+import {
+  Schedule,
+  DeleteForever,
+  Edit,
+  PlayCircle,
+  Settings,
+  Power,
+  ContentCopy,
+  MoreHoriz
+} from "@mui/icons-material";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
 import { Add } from "@mui/icons-material";
@@ -52,90 +76,162 @@ interface RecordingsTableProps {
   handleDuplicateRobot: (id: string, name: string, params: string[]) => void;
 }
 
-export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
+// Virtualized row component for efficient rendering
+const TableRowMemoized = memo(({ row, columns, handlers }: any) => {
+  return (
+    <TableRow hover role="checkbox" tabIndex={-1}>
+      {columns.map((column: Column) => {
+        const value: any = row[column.id];
+        if (value !== undefined) {
+          return (
+            <MemoizedTableCell key={column.id} align={column.align}>
+              {value}
+            </MemoizedTableCell>
+          );
+        } else {
+          switch (column.id) {
+            case 'interpret':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedInterpretButton handleInterpret={() => handlers.handleRunRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'schedule':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedScheduleButton handleSchedule={() => handlers.handleScheduleRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'integrate':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedIntegrateButton handleIntegrate={() => handlers.handleIntegrateRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'options':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedOptionsButton
+                    handleEdit={() => handlers.handleEditRobot(row.id, row.name, row.params || [])}
+                    handleDuplicate={() => handlers.handleDuplicateRobot(row.id, row.name, row.params || [])}
+                    handleDelete={() => handlers.handleDelete(row.id)}
+                  />
+                </MemoizedTableCell>
+              );
+            case 'settings':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedSettingsButton handleSettings={() => handlers.handleSettingsRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            default:
+              return null;
+          }
+        }
+      })}
+    </TableRow>
+  );
+});
+
+
+export const RecordingsTable = ({
+  handleEditRecording,
+  handleRunRecording,
+  handleScheduleRecording,
+  handleIntegrateRecording,
+  handleSettingsRecording,
+  handleEditRobot,
+  handleDuplicateRobot }: RecordingsTableProps) => {
   const { t } = useTranslation();
   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('');
+  const [isLoading, setIsLoading] = React.useState(true);
 
-  const columns: readonly Column[] = [
+  const columns = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
     { id: 'name', label: t('recordingtable.name'), minWidth: 80 },
-    {
-      id: 'schedule',
-      label: t('recordingtable.schedule'),
-      minWidth: 80,
-    },
-    {
-      id: 'integrate',
-      label: t('recordingtable.integrate'),
-      minWidth: 80,
-    },
-    {
-      id: 'settings',
-      label: t('recordingtable.settings'),
-      minWidth: 80,
-    },
-    {
-      id: 'options',
-      label: t('recordingtable.options'),
-      minWidth: 80,
-    },
-  ];
+    { id: 'schedule', label: t('recordingtable.schedule'), minWidth: 80 },
+    { id: 'integrate', label: t('recordingtable.integrate'), minWidth: 80 },
+    { id: 'settings', label: t('recordingtable.settings'), minWidth: 80 },
+    { id: 'options', label: t('recordingtable.options'), minWidth: 80 },
+  ], [t]);
 
-  const { notify, setRecordings, browserId, setBrowserId, setInitialUrl, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
+  const {
+    notify,
+    setRecordings,
+    browserId,
+    setBrowserId,
+    setInitialUrl,
+    recordingUrl,
+    setRecordingUrl,
+    isLogin,
+    setIsLogin,
+    recordingName,
+    setRecordingName,
+    recordingId,
+    setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
 
-  const handleChangePage = (event: unknown, newPage: number) => {
+  const handleChangePage = useCallback((event: unknown, newPage: number) => {
     setPage(newPage);
-  };
+  }, []);
 
   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
     setPage(0);
-  };
+  }, []);
 
-  const fetchRecordings = async () => {
-    const recordings = await getStoredRecordings();
-    if (recordings) {
-      const parsedRows: Data[] = [];
-      recordings.map((recording: any, index: number) => {
-        if (recording && recording.recording_meta) {
-          parsedRows.push({
-            id: index,
-            ...recording.recording_meta,
-            content: recording.recording
-          });
-        }
-      });
-      setRecordings(parsedRows.map((recording) => recording.name));
-      setRows(parsedRows);
-    } else {
-      console.log('No recordings found.');
+  const fetchRecordings = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const recordings = await getStoredRecordings();
+      if (recordings) {
+        const parsedRows = recordings
+          .map((recording: any, index: number) => {
+            if (recording?.recording_meta) {
+              return {
+                id: index,
+                ...recording.recording_meta,
+                content: recording.recording
+              };
+            }
+            return null;
+          })
+          .filter(Boolean);
+
+        setRecordings(parsedRows.map((recording) => recording.name));
+        setRows(parsedRows);
+      }
+    } catch (error) {
+      console.error('Error fetching recordings:', error);
+      notify('error', t('recordingtable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
-  }
+  }, [setRecordings, notify, t]);
 
-  const handleNewRecording = async () => {
+  const handleNewRecording = useCallback(async () => {
     if (browserId) {
       setBrowserId(null);
       await stopRecording(browserId);
     }
     setModalOpen(true);
-  };
+  }, [browserId]);
 
-  const handleStartRecording = () => {
+  const handleStartRecording = useCallback(() => {
     setBrowserId('new-recording');
     setRecordingName('');
     setRecordingId('');
     navigate('/recording');
-  }
+  }, [navigate]);
 
   const startRecording = () => {
     setModalOpen(false);
@@ -151,14 +247,61 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     if (rows.length === 0) {
       fetchRecordings();
     }
-  }, []);
+  }, [fetchRecordings]);
 
+  function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+  
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [value, delay]);
+  
+    return debouncedValue;
+  }
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
   // Filter rows based on search term
-  const filteredRows = rows.filter((row) =>
-    row.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredRows = useMemo(() => {
+    const searchLower = debouncedSearchTerm.toLowerCase();
+    return debouncedSearchTerm
+      ? rows.filter(row => row.name.toLowerCase().includes(searchLower))
+      : rows;
+  }, [rows, debouncedSearchTerm]);
 
+  const visibleRows = useMemo(() => {
+    const start = page * rowsPerPage;
+    return filteredRows.slice(start, start + rowsPerPage);
+  }, [filteredRows, page, rowsPerPage]);
+
+  const handlers = useMemo(() => ({
+    handleRunRecording,
+    handleScheduleRecording,
+    handleIntegrateRecording,
+    handleSettingsRecording,
+    handleEditRobot,
+    handleDuplicateRobot,
+    handleDelete: async (id: string) => {
+      const hasRuns = await checkRunsForRecording(id);
+      if (hasRuns) {
+        notify('warning', t('recordingtable.notifications.delete_warning'));
+        return;
+      }
+
+      const success = await deleteRecordingFromStorage(id);
+      if (success) {
+        setRows([]);
+        notify('success', t('recordingtable.notifications.delete_success'));
+        fetchRecordings();
+      }
+    }
+  }), [handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot, notify, t]);
 
   return (
     <React.Fragment>
@@ -200,103 +343,42 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
           </IconButton>
         </Box>
       </Box>
-      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
-        <Table stickyHeader aria-label="sticky table">
-          <TableHead>
-            <TableRow>
-              {columns.map((column) => (
-                <TableCell
-                  key={column.id}
-                  align={column.align}
-                  style={{ minWidth: column.minWidth }}
-                >
-                  {column.label}
-                </TableCell>
+      {isLoading ? (
+        <Box display="flex" justifyContent="center" alignItems="center" height="50%">
+          <CircularProgress />
+        </Box>
+      ) : (
+        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
+          <Table stickyHeader aria-label="sticky table">
+            <TableHead>
+              <TableRow>
+                {columns.map((column) => (
+                  <MemoizedTableCell
+                    key={column.id}
+                    // align={column.align}
+                    style={{ minWidth: column.minWidth }}
+                  >
+                    {column.label}
+                  </MemoizedTableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {visibleRows.map((row) => (
+                <TableRowMemoized
+                  key={row.id}
+                  row={row}
+                  columns={columns}
+                  handlers={handlers}
+                />
               ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {filteredRows.length !== 0 ? filteredRows
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row) => {
-                return (
-                  <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
-                    {columns.map((column) => {
-                      // @ts-ignore
-                      const value: any = row[column.id];
-                      if (value !== undefined) {
-                        return (
-                          <TableCell key={column.id} align={column.align}>
-                            {value}
-                          </TableCell>
-                        );
-                      } else {
-                        switch (column.id) {
-                          case 'interpret':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
-                              </TableCell>
-                            );
-                          case 'schedule':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <ScheduleButton handleSchedule={() => handleScheduleRecording(row.id, row.name, row.params || [])} />
-                              </TableCell>
-                            );
-                          case 'integrate':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
-                              </TableCell>
-                            );
-                          case 'options':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <OptionsButton
-                                  handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
-                                  handleDuplicate={() => {
-                                    handleDuplicateRobot(row.id, row.name, row.params || []);
-                                  }}
-                                  handleDelete={() => {
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
 
-                                    checkRunsForRecording(row.id).then((result: boolean) => {
-                                      if (result) {
-                                        notify('warning', t('recordingtable.notifications.delete_warning'));
-                                      }
-                                    })
-
-                                    deleteRecordingFromStorage(row.id).then((result: boolean) => {
-                                      if (result) {
-                                        setRows([]);
-                                        notify('success', t('recordingtable.notifications.delete_success'));
-                                        fetchRecordings();
-                                      }
-                                    })
-                                  }}
-                                />
-                              </TableCell>
-                            );
-                          case 'settings':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <SettingsButton handleSettings={() => handleSettingsRecording(row.id, row.name, row.params || [])} />
-                              </TableCell>
-                            );
-                          default:
-                            return null;
-                        }
-                      }
-                    })}
-                  </TableRow>
-                );
-              })
-              : null}
-          </TableBody>
-        </Table>
-      </TableContainer>
       <TablePagination
-        rowsPerPageOptions={[10, 25, 50]}
+        rowsPerPageOptions={[10, 25, 50, 100]}
         component="div"
         count={filteredRows.length}
         rowsPerPage={rowsPerPage}
@@ -305,7 +387,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
         onRowsPerPageChange={handleChangeRowsPerPage}
       />
       <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} modalStyle={modalStyle}>
-        <div style={{ padding: '20px' }}>
+        <div style={{ padding: '10px' }}>
           <Typography variant="h6" gutterBottom>{t('recordingtable.modal.title')}</Typography>
           <TextField
             label={t('recordingtable.modal.label')}
@@ -313,8 +395,22 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             fullWidth
             value={recordingUrl}
             onChange={setBrowserRecordingUrl}
-            style={{ marginBottom: '20px', marginTop: '20px' }}
+            style={{ marginBottom: '10px', marginTop: '20px' }}
           />
+
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={isLogin}
+                onChange={(e) => setIsLogin(e.target.checked)}
+                color="primary"
+              />
+            }
+            label={t('recordingtable.modal.login_title')}
+            style={{ marginBottom: '10px' }}
+          />
+
+          <br />
           <Button
             variant="contained"
             color="primary"
@@ -447,6 +543,15 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
   );
 };
 
+const MemoizedTableCell = memo(TableCell);
+
+// Memoized action buttons
+const MemoizedInterpretButton = memo(InterpretButton);
+const MemoizedScheduleButton = memo(ScheduleButton);
+const MemoizedIntegrateButton = memo(IntegrateButton);
+const MemoizedSettingsButton = memo(SettingsButton);
+const MemoizedOptionsButton = memo(OptionsButton);
+
 const modalStyle = {
   top: '50%',
   left: '50%',

src/components/robot/RobotDuplicate.tsx

@@ -5,7 +5,6 @@ import { modalStyle } from "../recorder/AddWhereCondModal";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { duplicateRecording, getStoredRecording } from '../../api/storage';
 import { WhereWhatPair } from 'maxun-core';
-import { getUserById } from "../../api/auth";
 import { useTranslation } from 'react-i18next';
 
 interface RobotMeta {

src/components/robot/RobotEdit.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GenericModal } from "../ui/GenericModal";
-import { TextField, Typography, Box, Button } from "@mui/material";
+import { TextField, Typography, Box, Button, IconButton, InputAdornment } from "@mui/material";
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { modalStyle } from "../recorder/AddWhereCondModal";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { getStoredRecording, updateRecording } from '../../api/storage';
@@ -20,11 +21,6 @@ interface RobotWorkflow {
     workflow: WhereWhatPair[];
 }
 
-interface RobotEditOptions {
-    name: string;
-    limit?: number;
-}
-
 interface ScheduleConfig {
     runEvery: number;
     runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
@@ -57,10 +53,61 @@ interface RobotSettingsProps {
     initialSettings?: RobotSettings | null;
 }
 
+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[];
+}
+
 export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
     const { t } = useTranslation();
     const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const [credentials, setCredentials] = useState<Credentials>({});
     const { recordingId, notify } = useGlobalInfoStore();
+    const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
+        passwords: [],
+        emails: [],
+        usernames: [],
+        others: []
+    });
+    const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
+
+    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(() => {
         if (isOpen) {
@@ -68,6 +115,112 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         }
     }, [isOpen]);
 
+    useEffect(() => {
+        if (robot?.recording?.workflow) {
+            const extractedCredentials = extractInitialCredentials(robot.recording.workflow);
+            setCredentials(extractedCredentials);
+            setCredentialGroups(groupCredentialsByType(extractedCredentials));
+        }
+    }, [robot]);
+
+    const extractInitialCredentials = (workflow: any[]): Credentials => {
+        const credentials: Credentials = {};
+
+        // Helper function to check if a character is printable
+        const isPrintableCharacter = (char: string): boolean => {
+            return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
+        };
+
+        // Process each step in the workflow
+        workflow.forEach(step => {
+            if (!step.what) return;
+
+            // Keep track of the current input field being processed
+            let currentSelector = '';
+            let currentValue = '';
+            let currentType = '';
+
+            // Process actions in sequence to maintain correct text state
+            step.what.forEach((action: any) => {
+                if (
+                    (action.action === 'type' || action.action === 'press') &&
+                    action.args?.length >= 2 &&
+                    typeof action.args[1] === 'string'
+                ) {
+                    const selector: string = action.args[0];
+                    const character: string = action.args[1];
+                    const inputType: string = action.args[2] || '';
+
+                    // Detect `input[type="password"]`
+                    if (!currentType && inputType.toLowerCase() === 'password') {
+                        currentType = 'password';
+                    }
+
+                    // If we're dealing with a new selector, store the previous one
+                    if (currentSelector && selector !== currentSelector) {
+                        if (!credentials[currentSelector]) {
+                            credentials[currentSelector] = {
+                                value: currentValue,
+                                type: currentType
+                            };
+                        } else {
+                            credentials[currentSelector].value = currentValue;
+                        }
+                    }
+
+                    // Update current tracking variables
+                    if (selector !== currentSelector) {
+                        currentSelector = selector;
+                        currentValue = credentials[selector]?.value || '';
+                        currentType = inputType || credentials[selector]?.type || '';
+                    }
+
+                    // Handle different types of key actions
+                    if (character === 'Backspace') {
+                        // Remove the last character when backspace is pressed
+                        currentValue = currentValue.slice(0, -1);
+                    } else if (isPrintableCharacter(character)) {
+                        // Add the character to the current value
+                        currentValue += character;
+                    }
+                    // Note: We ignore other special keys like 'Shift', 'Enter', etc.
+                }
+            });
+
+            // Store the final state of the last processed selector
+            if (currentSelector) {
+                credentials[currentSelector] = {
+                    value: currentValue,
+                    type: currentType
+                };
+            }
+        });
+
+        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) {
             const robot = await getStoredRecording(recordingId);
@@ -75,7 +228,14 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         } 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) =>
@@ -83,12 +243,21 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         );
     };
 
+    const handleCredentialChange = (selector: string, value: string) => {
+        setCredentials(prev => ({
+            ...prev,
+            [selector]: {
+                ...prev[selector],
+                value
+            }
+        }));
+    };
+
     const handleLimitChange = (newLimit: number) => {
         setRobot((prev) => {
             if (!prev) return prev;
 
             const updatedWorkflow = [...prev.recording.workflow];
-
             if (
                 updatedWorkflow.length > 0 &&
                 updatedWorkflow[0]?.what &&
@@ -104,20 +273,101 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         });
     };
 
+    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 renderCredentialFields = (selectors: string[], headerText: string, defaultType: 'text' | 'password' = 'text') => {
+        if (selectors.length === 0) return null;
+
+        return (
+            <>
+                {/* <Typography variant="h6" style={{ marginBottom: '20px' }}>
+                    {headerText}
+                </Typography> */}
+                {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)}
+                            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 handleSave = async () => {
         if (!robot) return;
 
         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 payload = {
                 name: robot.recording_meta.name,
                 limit: robot.recording.workflow[0]?.what[0]?.args?.[0]?.limit,
+                credentials: credentialsForPayload,
             };
 
             const success = await updateRecording(robot.recording_meta.id, payload);
 
             if (success) {
                 notify('success', t('robot_edit.notifications.update_success'));
-                handleStart(robot); // Inform parent about the updated robot
+                handleStart(robot);
                 handleClose();
 
                 setTimeout(() => {
@@ -143,55 +393,63 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
                     {t('robot_edit.title')}
                 </Typography>
                 <Box style={{ display: 'flex', flexDirection: 'column' }}>
-                    {
-                        robot && (
-                            <>
+                    {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' }}
+                            />
+
+                            {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
                                 <TextField
-                                    label={t('robot_edit.change_name')}
-                                    key="Robot Name"
-                                    type='text'
-                                    value={robot.recording_meta.name}
-                                    onChange={(e) => handleRobotNameChange(e.target.value)}
+                                    label={t('robot_edit.robot_limit')}
+                                    type="number"
+                                    value={robot.recording.workflow[0].what[0].args[0].limit || ''}
+                                    onChange={(e) => {
+                                        const value = parseInt(e.target.value, 10);
+                                        if (value >= 1) {
+                                            handleLimitChange(value);
+                                        }
+                                    }}
+                                    inputProps={{ min: 1 }}
                                     style={{ marginBottom: '20px' }}
                                 />
-                                {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
-                                    <TextField
-                                        label={t('robot_edit.robot_limit')}
-                                        type="number"
-                                        value={robot.recording.workflow[0].what[0].args[0].limit || ''}
-                                        onChange={(e) => {
-                                            const value = parseInt(e.target.value, 10);
-                                            if (value >= 1) {
-                                                handleLimitChange(value);
-                                            }
-                                        }}
-                                        inputProps={{ min: 1 }}
-                                        style={{ marginBottom: '20px' }}
-                                    />
-                                )}
+                            )}
 
-                                <Box mt={2} display="flex" justifyContent="flex-end">
-                                    <Button variant="contained" color="primary" onClick={handleSave}>
-                                        {t('robot_edit.save')}
-                                    </Button>
-                                    <Button
-                                        onClick={handleClose}
-                                        color="primary"
-                                        variant="outlined"
-                                        style={{ marginLeft: '10px' }}
-                                        sx={{
-                                            color: '#ff00c3 !important',
-                                            borderColor: '#ff00c3 !important',
-                                            backgroundColor: 'whitesmoke !important',
-                                        }}>
-                                        {t('robot_edit.cancel')}
-                                    </Button>
-                                </Box>
-                            </>
-                        )
-                    }
+                            {(Object.keys(credentials).length > 0) && (
+                                <>
+                                    <Typography variant="body1" style={{ marginBottom: '20px' }}>
+                                        {t('Input Texts')}
+                                    </Typography>
+                                    {renderAllCredentialFields()}
+                                </>
+                            )}
+
+                            <Box mt={2} display="flex" justifyContent="flex-end">
+                                <Button variant="contained" color="primary" onClick={handleSave}>
+                                    {t('robot_edit.save')}
+                                </Button>
+                                <Button
+                                    onClick={handleClose}
+                                    color="primary"
+                                    variant="outlined"
+                                    style={{ marginLeft: '10px' }}
+                                    sx={{
+                                        color: '#ff00c3 !important',
+                                        borderColor: '#ff00c3 !important',
+                                        backgroundColor: 'whitesmoke !important',
+                                    }}>
+                                    {t('robot_edit.cancel')}
+                                </Button>
+                            </Box>
+                        </>
+                    )}
                 </Box>
             </>
         </GenericModal>
     );
-};
+};

src/components/robot/ScheduleSettings.tsx

@@ -190,7 +190,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                   sx={dropDownStyle}
                 >
                   {units.map((unit) => (
-                    <MenuItem key={unit} value={unit}>{unit}</MenuItem>
+                    <MenuItem key={unit} value={unit}> {unit.charAt(0).toUpperCase() + unit.slice(1).toLowerCase()}</MenuItem>
                   ))}
                 </Dropdown>
               </Box>
@@ -207,7 +207,9 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                   sx={dropDownStyle}
                 >
                   {days.map((day) => (
-                    <MenuItem key={day} value={day}>{day}</MenuItem>
+                    <MenuItem key={day} value={day}>
+                      {day.charAt(0).toUpperCase() + day.slice(1).toLowerCase()}
+                    </MenuItem>
                   ))}
                 </Dropdown>
               </Box>
@@ -265,7 +267,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                   sx={dropDownStyle}
                 >
                   {validMomentTimezones.map((tz) => (
-                    <MenuItem key={tz} value={tz}>{tz}</MenuItem>
+                    <MenuItem key={tz} value={tz}>{tz.charAt(0).toUpperCase() + tz.slice(1).toLowerCase()}</MenuItem>
                   ))}
                 </Dropdown>
               </Box>

src/components/run/InterpretationButtons.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, Stack, Typography, CircularProgress } from "@mui/material";
-import { PlayCircle } from "@mui/icons-material";
 import React, { useCallback, useEffect, useState } from "react";
-import { interpretCurrentRecording, stopCurrentInterpretation } from "../../api/recording";
+import { interpretCurrentRecording } from "../../api/recording";
 import { useSocketStore } from "../../context/socket";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { GenericModal } from "../ui/GenericModal";

src/components/run/RunContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Tabs, Typography, Tab, Paper, Button } from "@mui/material";
+import { Box, Tabs, Typography, Tab, Paper, Button, CircularProgress } from "@mui/material";
 import Highlight from "react-highlight";
 import * as React from "react";
 import { Data } from "./RunsTable";
@@ -148,9 +148,15 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
           </Button> : null}
         </TabPanel>
         <TabPanel value='output' sx={{ width: '700px' }}>
-          {!row || !row.serializableOutput || !row.binaryOutput
+          {interpretationInProgress ? (
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <CircularProgress size={22} sx={{ marginRight: '10px' }} />
+              {t('run_content.loading')}
+            </Box>
+          ) : (!row || !row.serializableOutput || !row.binaryOutput
             || (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
-            ? <Typography>{t('run_content.empty_output')}</Typography> : null}
+            ? <Typography>{t('run_content.empty_output')}</Typography> 
+            : null)}
 
           {row.serializableOutput &&
             Object.keys(row.serializableOutput).length !== 0 &&

src/components/run/RunSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from "react";
 import { GenericModal } from "../ui/GenericModal";
 import { MenuItem, TextField, Typography, Switch, FormControlLabel } from "@mui/material";
 import { Dropdown } from "../ui/DropdownMui";
@@ -28,6 +28,23 @@ export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, par
   });
 
   const [showInterpreterSettings, setShowInterpreterSettings] = useState(false);
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      hasRun.current = false;
+      return;
+    }
+
+    if (!showInterpreterSettings && !hasRun.current) {
+      hasRun.current = true;
+      handleStart(settings);
+    }
+  }, [isOpen, showInterpreterSettings, settings, handleStart]);
+
+  if (!showInterpreterSettings) {
+    return null;
+  }
 
   return (
     <GenericModal
@@ -35,18 +52,22 @@ export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, par
       onClose={handleClose}
       modalStyle={modalStyle}
     >
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        marginLeft: '65px',
-      }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          marginLeft: "65px",
+        }}
+      >
         {isTask && (
           <React.Fragment>
-            <Typography sx={{ margin: '20px 0px' }}>Recording parameters:</Typography>
+            <Typography sx={{ margin: "20px 0px" }}>
+              Recording parameters:
+            </Typography>
             {params?.map((item, index) => (
               <TextField
-                sx={{ marginBottom: '15px' }}
+                sx={{ marginBottom: "15px" }}
                 key={`param-${index}`}
                 type="string"
                 label={item}
@@ -65,15 +86,22 @@ export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, par
         )}
 
         <FormControlLabel
-          control={<Switch checked={showInterpreterSettings} onChange={() => setShowInterpreterSettings(!showInterpreterSettings)} />}
+          control={
+            <Switch
+              checked={showInterpreterSettings}
+              onChange={() =>
+                setShowInterpreterSettings(!showInterpreterSettings)
+              }
+            />
+          }
           label="Developer Mode Settings"
-          sx={{ margin: '20px 0px' }}
+          sx={{ margin: "20px 0px" }}
         />
 
         {showInterpreterSettings && (
           <React.Fragment>
             <TextField
-              sx={{ marginBottom: '15px' }}
+              sx={{ marginBottom: "15px" }}
               type="number"
               label="Max Concurrency"
               required
@@ -86,7 +114,7 @@ export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, par
               defaultValue={settings.maxConcurrency}
             />
             <TextField
-              sx={{ marginBottom: '15px' }}
+              sx={{ marginBottom: "15px" }}
               type="number"
               label="Max Repeats"
               required
@@ -115,7 +143,13 @@ export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, par
           </React.Fragment>
         )}
 
-        <Button variant="contained" onClick={() => handleStart(settings)} sx={{ marginTop: '20px' }}>Run Robot</Button>
+        <Button
+          variant="contained"
+          onClick={() => handleStart(settings)}
+          sx={{ marginTop: "20px" }}
+        >
+          Run Robot
+        </Button>
       </div>
     </GenericModal>
   );

src/components/run/RunsTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
@@ -9,7 +9,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
-import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField, CircularProgress, Tooltip } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
@@ -17,8 +17,8 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
+import { ArrowDownward, ArrowUpward, UnfoldMore } from '@mui/icons-material';
 
-// Export columns before the component
 export const columns: readonly Column[] = [
   { id: 'runStatus', label: 'Status', minWidth: 80 },
   { id: 'name', label: 'Name', minWidth: 80 },
@@ -28,6 +28,15 @@ export const columns: readonly Column[] = [
   { id: 'delete', label: 'Delete', minWidth: 80 },
 ];
 
+type SortDirection = 'asc' | 'desc' | 'none';
+
+interface AccordionSortConfig {
+  [robotMetaId: string]: {
+    field: keyof Data | null;
+    direction: SortDirection;
+  };
+}
+
 interface Column {
   id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
   label: string;
@@ -70,91 +79,223 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  // Update column labels using translation if needed
-  const translatedColumns = columns.map(column => ({
-    ...column,
-    label: t(`runstable.${column.id}`, column.label)
-  }));
+  const [accordionSortConfigs, setAccordionSortConfigs] = useState<AccordionSortConfig>({});
+
+  const handleSort = useCallback((columnId: keyof Data, robotMetaId: string) => {
+    setAccordionSortConfigs(prevConfigs => {
+      const currentConfig = prevConfigs[robotMetaId] || { field: null, direction: 'none' };
+      const newDirection: SortDirection = 
+        currentConfig.field !== columnId ? 'asc' :
+        currentConfig.direction === 'none' ? 'asc' :
+        currentConfig.direction === 'asc' ? 'desc' : 'none';
+
+      return {
+        ...prevConfigs,
+        [robotMetaId]: {
+          field: newDirection === 'none' ? null : columnId,
+          direction: newDirection,
+        }
+      };
+    });
+  }, []);
+
+  const translatedColumns = useMemo(() => 
+    columns.map(column => ({
+      ...column,
+      label: t(`runstable.${column.id}`, column.label)
+    })),
+    [t]
+  );
 
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
 
-  const handleAccordionChange = (robotMetaId: string, isExpanded: boolean) => {
-    if (isExpanded) {
-      navigate(`/runs/${robotMetaId}`);
-    } else {
-      navigate(`/runs`);
-    }
-  };
+  const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
+    navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
+  }, [navigate]);
 
-  const handleChangePage = (event: unknown, newPage: number) => {
+  const handleChangePage = useCallback((event: unknown, newPage: number) => {
     setPage(newPage);
-  };
+  }, []);
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
-  };
+  }, []);
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(event.target.value);
-    setPage(0);
-  };
+  const debouncedSearch = useCallback((fn: Function, delay: number) => {
+    let timeoutId: NodeJS.Timeout;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  }, []);
 
-  const fetchRuns = async () => {
-    const runs = await getStoredRuns();
-    if (runs) {
-      const parsedRows: Data[] = runs.map((run: any, index: number) => ({
-        id: index,
-        ...run,
-      }));
-      setRows(parsedRows);
-    } else {
-      notify('error', t('runstable.notifications.no_runs'));
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const debouncedSetSearch = debouncedSearch((value: string) => {
+      setSearchTerm(value);
+      setPage(0);
+    }, 300);
+    debouncedSetSearch(event.target.value);
+  }, [debouncedSearch]);
+
+  const fetchRuns = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const runs = await getStoredRuns();
+      if (runs) {
+        const parsedRows: Data[] = runs.map((run: any, index: number) => ({
+          id: index,
+          ...run,
+        }));
+        setRows(parsedRows);
+      } else {
+        notify('error', t('runstable.notifications.no_runs'));
+      }
+    } catch (error) {
+      notify('error', t('runstable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
-  };
+  }, [notify, t]);
 
   useEffect(() => {
-    if (rows.length === 0 || rerenderRuns) {
-      fetchRuns();
-      setRerenderRuns(false);
-    }
-  }, [rerenderRuns, rows.length, setRerenderRuns]);
+    let mounted = true;
 
-  const handleDelete = () => {
+    if (rows.length === 0 || rerenderRuns) {
+      fetchRuns().then(() => {
+        if (mounted) {
+          setRerenderRuns(false);
+        }
+      });
+    }
+
+    return () => {
+      mounted = false;
+    };
+  }, [rerenderRuns, rows.length, setRerenderRuns, fetchRuns]);
+
+  const handleDelete = useCallback(() => {
     setRows([]);
     notify('success', t('runstable.notifications.delete_success'));
     fetchRuns();
-  };
+  }, [notify, t, fetchRuns]);
 
   // Filter rows based on search term
-  const filteredRows = rows.filter((row) =>
-    row.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredRows = useMemo(() => {
+    let result = rows.filter((row) =>
+      row.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    return result;
+  }, [rows, searchTerm]);
 
   // Group filtered rows by robot meta id
-  const groupedRows = filteredRows.reduce((acc, row) => {
-    if (!acc[row.robotMetaId]) {
-      acc[row.robotMetaId] = [];
+  const groupedRows = useMemo(() => 
+    filteredRows.reduce((acc, row) => {
+      if (!acc[row.robotMetaId]) {
+        acc[row.robotMetaId] = [];
+      }
+      acc[row.robotMetaId].push(row);
+      return acc;
+    }, {} as Record<string, Data[]>),
+    [filteredRows]
+  );
+
+  const parseDateString = (dateStr: string): Date => {
+    try {
+      if (dateStr.includes('PM') || dateStr.includes('AM')) {
+        return new Date(dateStr);
+      }
+      
+      return new Date(dateStr.replace(/(\d+)\/(\d+)\//, '$2/$1/'))
+    } catch {
+      return new Date(0);
     }
-    acc[row.robotMetaId].push(row);
-    return acc;
-  }, {} as Record<string, Data[]>);
+  };
+
+  const renderTableRows = useCallback((data: Data[], robotMetaId: string) => {
+    const start = page * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    let sortedData = [...data];
+    const sortConfig = accordionSortConfigs[robotMetaId];
+    
+    if (sortConfig?.field === 'startedAt' || sortConfig?.field === 'finishedAt') {
+      if (sortConfig.direction !== 'none') {
+        sortedData.sort((a, b) => {
+          const dateA = parseDateString(a[sortConfig.field!]);
+          const dateB = parseDateString(b[sortConfig.field!]);
+          
+          return sortConfig.direction === 'asc' 
+            ? dateA.getTime() - dateB.getTime() 
+            : dateB.getTime() - dateA.getTime();
+        });
+      }
+    }
+    
+    return sortedData
+      .slice(start, end)
+      .map((row) => (
+        <CollapsibleRow
+          key={`row-${row.id}`}
+          row={row}
+          handleDelete={handleDelete}
+          isOpen={runId === row.runId && runningRecordingName === row.name}
+          currentLog={currentInterpretationLog}
+          abortRunHandler={abortRunHandler}
+          runningRecordingName={runningRecordingName}
+        />
+      ));
+  }, [page, rowsPerPage, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete, accordionSortConfigs]);
+
+  const renderSortIcon = useCallback((column: Column, robotMetaId: string) => {
+    const sortConfig = accordionSortConfigs[robotMetaId];
+    if (column.id !== 'startedAt' && column.id !== 'finishedAt') return null;
+
+    if (sortConfig?.field !== column.id) {
+      return (
+        <UnfoldMore 
+          fontSize="small" 
+          sx={{ 
+            opacity: 0.3,
+            transition: 'opacity 0.2s',
+            '.MuiTableCell-root:hover &': {
+              opacity: 1
+            }
+          }} 
+        />
+      );
+    }
+
+    return sortConfig.direction === 'asc' 
+      ? <ArrowUpward fontSize="small" />
+      : sortConfig.direction === 'desc'
+        ? <ArrowDownward fontSize="small" />
+        : <UnfoldMore fontSize="small" />;
+  }, [accordionSortConfigs]);
+
+  if (isLoading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" height="50vh">
+        <CircularProgress />
+      </Box>
+    );
+  }
 
   return (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-        <Typography variant="h6" gutterBottom>
+        <Typography variant="h6" component="h2">
           {t('runstable.runs', 'Runs')}
         </Typography>
         <TextField
           size="small"
           placeholder={t('runstable.search', 'Search runs...')}
-          value={searchTerm}
           onChange={handleSearchChange}
           InputProps={{
             startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
@@ -162,9 +303,14 @@ export const RunsTable: React.FC<RunsTableProps> = ({
           sx={{ width: '250px' }}
         />
       </Box>
+
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-        {Object.entries(groupedRows).map(([id, data]) => (
-          <Accordion key={id} onChange={(event, isExpanded) => handleAccordionChange(id, isExpanded)}>
+        {Object.entries(groupedRows).map(([robotMetaId, data]) => (
+          <Accordion 
+            key={robotMetaId} 
+            onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
+            TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
+          >
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography variant="h6">{data[data.length - 1].name}</Typography>
             </AccordionSummary>
@@ -177,41 +323,65 @@ export const RunsTable: React.FC<RunsTableProps> = ({
                       <TableCell
                         key={column.id}
                         align={column.align}
-                        style={{ minWidth: column.minWidth }}
+                        style={{ 
+                          minWidth: column.minWidth,
+                          cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default'
+                        }}
+                        onClick={() => {
+                          if (column.id === 'startedAt' || column.id === 'finishedAt') {
+                            handleSort(column.id, robotMetaId);
+                          }
+                        }}
                       >
-                        {column.label}
+                        <Tooltip 
+                          title={
+                            (column.id === 'startedAt' || column.id === 'finishedAt')
+                              ? t('runstable.sort_tooltip')
+                              : ''
+                          }
+                        >
+                          <Box sx={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            gap: 1,
+                            '&:hover': {
+                              '& .sort-icon': {
+                                opacity: 1
+                              }
+                            }
+                          }}>
+                            {column.label}
+                            <Box className="sort-icon" sx={{ 
+                              display: 'flex',
+                              alignItems: 'center',
+                              opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3,
+                              transition: 'opacity 0.2s'
+                            }}>
+                              {renderSortIcon(column, robotMetaId)}
+                            </Box>
+                          </Box>
+                        </Tooltip>
                       </TableCell>
                     ))}
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {data
-                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                    .map((row) => (
-                      <CollapsibleRow
-                        row={row}
-                        handleDelete={handleDelete}
-                        key={`row-${row.id}`}
-                        isOpen={runId === row.runId && runningRecordingName === row.name}
-                        currentLog={currentInterpretationLog}
-                        abortRunHandler={abortRunHandler}
-                        runningRecordingName={runningRecordingName}
-                      />
-                    ))}
+                  {renderTableRows(data, robotMetaId)}
                 </TableBody>
               </Table>
             </AccordionDetails>
           </Accordion>
         ))}
       </TableContainer>
+
       <TablePagination
-        rowsPerPageOptions={[10, 25, 50]}
         component="div"
         count={filteredRows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
+        rowsPerPageOptions={[10, 25, 50, 100]}
       />
     </React.Fragment>
   );

src/context/globalInfo.tsx

@@ -10,6 +10,8 @@ interface GlobalInfo {
   notification: AlertSnackbarProps;
   notify: (severity: 'error' | 'warning' | 'info' | 'success', message: string) => void;
   closeNotify: () => void;
+  isLogin: boolean;
+  setIsLogin: (isLogin: boolean) => void;
   recordings: string[];
   setRecordings: (recordings: string[]) => void;
   rerenderRuns: boolean;
@@ -53,6 +55,7 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
   recordingName = '';
   initialUrl = 'https://';
   recordingUrl = 'https://';
+  isLogin = false;
   currentWorkflowActionsState = {
     hasScrapeListAction: false,
     hasScreenshotAction: false,
@@ -75,6 +78,7 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
   const [recordingLength, setRecordingLength] = useState<number>(globalInfoStore.recordingLength);
   const [recordingId, setRecordingId] = useState<string | null>(globalInfoStore.recordingId);
   const [recordingName, setRecordingName] = useState<string>(globalInfoStore.recordingName);
+  const [isLogin, setIsLogin] = useState<boolean>(globalInfoStore.isLogin);
   const [initialUrl, setInitialUrl] = useState<string>(globalInfoStore.initialUrl);
   const [recordingUrl, setRecordingUrl] = useState<string>(globalInfoStore.recordingUrl);
   const [currentWorkflowActionsState, setCurrentWorkflowActionsState] = useState(globalInfoStore.currentWorkflowActionsState);
@@ -127,6 +131,8 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
         setInitialUrl,
         recordingUrl,
         setRecordingUrl,
+        isLogin,
+        setIsLogin,
         currentWorkflowActionsState,
         setCurrentWorkflowActionsState,
         shouldResetInterpretationLog,

src/context/theme-provider.tsx

@@ -86,6 +86,12 @@ const darkTheme = createTheme({
       main: "#ff00c3",
       contrastText: "#ffffff",
     },
+    error: {
+      main: '#f44336',
+      light: '#e57373',
+      dark: '#d32f2f',
+      contrastText: '#ffffff',
+    },
     background: {
       default: '#121212',
       paper: '#1e1e1e',
@@ -124,6 +130,14 @@ const darkTheme = createTheme({
             backgroundColor: 'rgba(255, 0, 195, 0.08)',
             borderColor: '#ff66d9',
           },
+          '&.MuiButton-outlinedError': {
+            borderColor: '#f44336',
+            color: '#f44336',
+            "&:hover": {
+              backgroundColor: 'rgba(244, 67, 54, 0.08)',
+              borderColor: '#d32f2f',
+            },
+          },
         },
       },
     },
@@ -144,6 +158,12 @@ const darkTheme = createTheme({
           "&:hover": {
             backgroundColor: 'rgba(255, 0, 195, 0.08)',
           },
+          '&.MuiIconButton-colorError': {
+            color: '#f44336',
+            "&:hover": {
+              backgroundColor: 'rgba(244, 67, 54, 0.08)',
+            },
+          },
         },
       },
     },
@@ -218,7 +238,7 @@ const darkTheme = createTheme({
 });
 
 const ThemeModeContext = createContext({
-  toggleTheme: () => {},
+  toggleTheme: () => { },
   darkMode: false,
 });
 

src/pages/PageWrapper.tsx

@@ -12,7 +12,7 @@ import Login from './Login';
 import Register from './Register';
 import UserRoute from '../routes/userRoute';
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
-import { Runs } from '../components/run/Runs';
+import { NotFoundPage } from '../components/dashboard/NotFound';
 
 export const PageWrapper = () => {
   const [open, setOpen] = useState(false);
@@ -75,6 +75,7 @@ export const PageWrapper = () => {
                 path="/register"
                 element={<Register />}
               />
+              <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </React.Fragment>
         </SocketProvider>