little progress and icon changed

public/locales/en.json

@@ -49,5 +49,18 @@
       "feedback":"Join Maxun Cloud",
       "apidocs":"API Docs"
 
+    },
+    "runstable":{
+      "runs":"All Runs",
+      "runStatus":"Status",
+      "runName":"Name",
+      "startedAt":"Started At",
+      "finishedAt":"Finished At",
+      "delete":"Delete",
+      "settings":"Settings",
+      "search":"Search Runs..."
+
+
+
     }
   } 

public/locales/ja.json

@@ -37,7 +37,8 @@
       },
       "edit": "編集",
       "delete": "削除",
-      "duplicate": "複製"
+      "duplicate": "複製",
+      "search": "ロボットを検索..."
   },
   "mainmenu": {
       "recordings": "ロボット",
@@ -46,5 +47,15 @@
       "apikey": "APIキー",
       "feedback": "Maxunクラウドに参加する",
       "apidocs": "APIドキュメント"
+  },
+  "runstable": {
+      "runs": "すべての実行",
+      "runStatus": "ステータス",
+      "runName": "名前",
+      "startedAt": "開始日時",
+      "finishedAt": "終了日時",
+      "delete": "削除",
+      "settings": "設定",
+      "search": "実行を検索..."
   }
 }

src/components/molecules/NavBar.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { IconButton, Menu, MenuItem, Typography, Chip } from "@mui/material";
-import { AccountCircle, Logout, Clear } from "@mui/icons-material";
+import { AccountCircle, Logout, Clear, Language } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "../../context/auth";
 import { SaveRecording } from "../molecules/SaveRecording";
@@ -159,7 +159,7 @@ export const NavBar: React.FC<NavBarProps> = ({
                   <Logout sx={{ marginRight: "5px" }} /> {t("logout")}
                 </MenuItem>
               </Menu>
-              {/* Language dropdown */}
+              
             </>
           ) : (
             <>
@@ -190,7 +190,9 @@ export const NavBar: React.FC<NavBarProps> = ({
               marginRight: "10px",
             }}
           >
-            <Typography variant="body1">{t("language")}</Typography>
+            <Typography variant="body1">
+              <Language />
+              </Typography>
           </IconButton>
           <Menu
             anchorEl={langAnchorEl}

src/components/molecules/RunsTable.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useEffect, useState } from "react";
+import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -7,14 +9,24 @@ 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, useState } from "react";
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
+
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
-import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SearchIcon from '@mui/icons-material/Search';
+
+// Export columns before the component
+export const columns: readonly Column[] = [
+  { id: 'runStatus', label: 'Status', minWidth: 80 },
+  { id: 'name', label: 'Name', minWidth: 80 },
+  { id: 'startedAt', label: 'Started At', minWidth: 80 },
+  { id: 'finishedAt', label: 'Finished At', minWidth: 80 },
+  { id: 'settings', label: 'Settings', minWidth: 80 },
+  { id: 'delete', label: 'Delete', minWidth: 80 },
+];
 
 interface Column {
   id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
@@ -24,16 +36,7 @@ interface Column {
   format?: (value: string) => string;
 }
 
-export const columns: readonly Column[] = [
-  { id: 'runStatus', label: 'Status', minWidth: 80 },
-  { id: 'name', label: 'Robot Name', minWidth: 80 },
-  { id: 'startedAt', label: 'Started at', minWidth: 80 },
-  { id: 'finishedAt', label: 'Finished at', minWidth: 80 },
-  { id: 'settings', label: 'Settings', minWidth: 80 },
-  { id: 'delete', label: 'Delete', minWidth: 80 },
-];
-
-export interface Data {
+interface Data {
   id: number;
   status: string;
   name: string;
@@ -58,15 +61,25 @@ interface RunsTableProps {
   runningRecordingName: string;
 }
 
-export const RunsTable = (
-  { currentInterpretationLog, abortRunHandler, runId, runningRecordingName }: RunsTableProps) => {
+export const RunsTable: React.FC<RunsTableProps> = ({ 
+  currentInterpretationLog, 
+  abortRunHandler, 
+  runId, 
+  runningRecordingName 
+}) => {
+  const { t } = useTranslation();
+
+  // Update column labels using translation if needed
+  const translatedColumns = columns.map(column => ({
+    ...column,
+    label: t(`runstable.${column.id}`, column.label)
+  }));
+
   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) => {
@@ -86,16 +99,13 @@ export const RunsTable = (
   const fetchRuns = async () => {
     const runs = await getStoredRuns();
     if (runs) {
-      const parsedRows: Data[] = [];
-      runs.map((run: any, index) => {
-        parsedRows.push({
-          id: index,
-          ...run,
-        });
-      });
+      const parsedRows: Data[] = runs.map((run: any, index: number) => ({
+        id: index,
+        ...run,
+      }));
       setRows(parsedRows);
     } else {
-      notify('error', 'No runs found. Please try again.')
+      notify('error', 'No runs found. Please try again.');
     }
   };
 
@@ -104,7 +114,7 @@ export const RunsTable = (
       fetchRuns();
       setRerenderRuns(false);
     }
-  }, [rerenderRuns]);
+  }, [rerenderRuns, rows.length, setRerenderRuns]);
 
   const handleDelete = () => {
     setRows([]);
@@ -112,7 +122,6 @@ export const RunsTable = (
     fetchRuns();
   };
 
-
   // Filter rows based on search term
   const filteredRows = rows.filter((row) =>
     row.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -120,7 +129,6 @@ export const RunsTable = (
 
   // Group filtered rows by robot meta id
   const groupedRows = filteredRows.reduce((acc, row) => {
-
     if (!acc[row.robotMetaId]) {
       acc[row.robotMetaId] = [];
     }
@@ -132,11 +140,11 @@ export const RunsTable = (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
         <Typography variant="h6" gutterBottom>
-          All Runs
+          {t('runstable.runs', 'Runs')}
         </Typography>
         <TextField
           size="small"
-          placeholder="Search runs..."
+          placeholder={t('runstable.search', 'Search runs...')}
           value={searchTerm}
           onChange={handleSearchChange}
           InputProps={{
@@ -149,16 +157,14 @@ 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">
                 <TableHead>
                   <TableRow>
                     <TableCell />
-                    {columns.map((column) => (
+                    {translatedColumns.map((column) => (
                       <TableCell
                         key={column.id}
                         align={column.align}
@@ -200,4 +206,4 @@ export const RunsTable = (
       />
     </React.Fragment>
   );
-};
+};

src/pages/Register.tsx

@@ -83,7 +83,7 @@ const Register = () => {
       >
         <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
+          {t('register.title')}
         </Typography>
         <TextField
           fullWidth