From 82cbfd35f4f677a456e3c1a50b98ec9b18847741 Mon Sep 17 00:00:00 2001
From: upendraTekdi <upendra_k@tekditechnologies.com>
Date: Fri, 19 Jul 2024 14:58:13 +0530
Subject: [PATCH] add tooltips on icons

---
 public/locales/en/common.json              |   8 +-
 public/locales/hi/common.json              |   6 +-
 public/locales/mr/common.json              |   4 +-
 public/locales/or/common.json              |   4 +-
 src/components/ActionIcon.tsx              |  16 +--
 src/components/HeaderComponent.tsx         | 108 ++++++++++---------
 src/components/layouts/sidebar/Sidebar.tsx | 117 +++++++++++----------
 7 files changed, 144 insertions(+), 119 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 14b00d04..e174e770 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -12,8 +12,8 @@
     "REASON_FOR_DELETION": "Reason for Deletion",
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
     "DUPLICATED_USER": "Duplicate User",
-    
-    "ALL":"All",
+
+    "ALL": "All",
     "NO_GO_BACK": "No, go back",
     "YES": "Yes",
     "SURE_REASSIGN_CENTER": "Are you sure you want to re-assign Center to this user?",
@@ -21,7 +21,9 @@
     "SORT": "Sort",
     "EDIT_COHORT_NAME": "Edit Cohort",
     "NAME": "Name",
-    "UPDATE_COHORT": "Update Cohort"
+    "UPDATE_COHORT": "Update Cohort",
+    "EDIT": "Edit",
+    "DELETE": "Delete"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index 52efd6bb..52b8fc4c 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -1,7 +1,9 @@
 {
   "COMMON": {
     "LANGUAGE": "भाषा",
-    "LOADING": "लोडिंग"
+    "LOADING": "लोडिंग",
+    "EDIT": "संपादित करें",
+    "DELETE": "हटाएं"
   },
   "LOGIN_PAGE": {
     "USERNAME": "उपयोगकर्ता नाम",
@@ -18,8 +20,6 @@
     "SORT": "क्रमबद्ध करें",
     "EDIT_COHORT_NAME": "समूह संपादित करें",
     "UPDATE_COHORT": "अद्यतन समूह"
-    
-   
   },
   "COHORTS": {
     "SEARCHBAR_PLACEHOLDER": "कोहॉर्ट्स खोजें.."
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
index e6b807a9..098aad14 100644
--- a/public/locales/mr/common.json
+++ b/public/locales/mr/common.json
@@ -6,7 +6,9 @@
     "SORT": "क्रमवारी लावा",
     "EDIT_COHORT_NAME": "समूह संपादित करा",
     "NAME": "नाव",
-    "UPDATE_COHORT": "कोहॉर्ट अपडेट करा"
+    "UPDATE_COHORT": "कोहॉर्ट अपडेट करा",
+    "EDIT": "संपादित करा",
+    "DELETE": "हटवा"
   },
   "LOGIN_PAGE": {
     "USERNAME": "वापरकर्तानाव",
diff --git a/public/locales/or/common.json b/public/locales/or/common.json
index e7ec4048..34468b70 100644
--- a/public/locales/or/common.json
+++ b/public/locales/or/common.json
@@ -5,7 +5,9 @@
     "UPDATE_COHORT": "କୋହୋର୍ଟ୍ ଅଦ୍ୟତନ କରନ୍ତୁ",
     "SORT": "ସର୍ଟ",
     "OTHER": "ଅନ୍ୟ",
-    "NAME": "ନାମ"
+    "NAME": "ନାମ",
+    "EDIT": "ସଂପାଦନା",
+    "DELETE": "ବିଲୋପ"
   },
   "LOGIN_PAGE": {
     "USERNAME": "ଉପଯୋଗକର୍ତା ନାମ",
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
index d3ac9839..fba33dd0 100644
--- a/src/components/ActionIcon.tsx
+++ b/src/components/ActionIcon.tsx
@@ -9,6 +9,7 @@ import {
   ListItemText,
   Menu,
   MenuItem,
+  Tooltip,
 } from "@mui/material";
 // import EditIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 // import DeleteIcon from '@mui/icons-material/DeleteOutlined';
@@ -28,6 +29,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
   onEdit,
   onDelete,
 }) => {
+  const { t } = useTranslation();
   return (
     <Box
       sx={{
@@ -36,7 +38,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
         gap: "20px",
       }}
     >
-       <Box
+      <Box
         onClick={() => {
           onEdit(rowData);
         }}
@@ -46,18 +48,20 @@ const ActionIcon: React.FC<ActionCellProps> = ({
           pointerEvents: "auto", // Enable pointer events to allow click
         }}
       >
-        <EditIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+        <Tooltip title={t("COMMON.EDIT")}>
+          <EditIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+        </Tooltip>
       </Box>
-       <Box
+      <Box
         onClick={() => {
           onDelete(rowData);
         }}
         style={{ cursor: "pointer" }}
       >
-        <DeleteIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+        <Tooltip title={t("COMMON.DELETE")}>
+          <DeleteIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+        </Tooltip>
       </Box>
-     
-     
     </Box>
   );
 };
diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
index b2bff244..dcc95c6c 100644
--- a/src/components/HeaderComponent.tsx
+++ b/src/components/HeaderComponent.tsx
@@ -9,6 +9,7 @@ import {
   Grid,
   Button,
   InputLabel,
+  Tooltip,
 } from "@mui/material";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import AddIcon from "@mui/icons-material/Add";
@@ -85,7 +86,6 @@ const HeaderComponent = ({
       //   handleDistrictChange([], []);
       //   handleBlockChange([], []);
       // }
-    
     }
     try {
       const response = await getDistrictList(selectedCodes);
@@ -215,46 +215,50 @@ const HeaderComponent = ({
           />
         </Box>
         <Box display={"flex"} gap={1}>
-          <FormControl sx={{ minWidth: "120px" }}>
-            <Select
-              value={selectedFilter}
-              onChange={handleFilterChange}
-              displayEmpty
-              style={{
-                borderRadius: "8px",
-                height: "40px",
-                fontSize: "14px",
-              }}
-            >
-              <MenuItem value="All">
-                <em>All</em>
-              </MenuItem>
-              {Filter?.map((filter, index) => (
-                <MenuItem value={filter} key={index}>
-                  {filter}
+          <Tooltip title="Filter">
+            <FormControl sx={{ minWidth: "120px" }}>
+              <Select
+                value={selectedFilter}
+                onChange={handleFilterChange}
+                displayEmpty
+                style={{
+                  borderRadius: "8px",
+                  height: "40px",
+                  fontSize: "14px",
+                }}
+              >
+                <MenuItem value="All">
+                  <em>All</em>
                 </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControl sx={{ minWidth: "120px" }}>
-            <Select
-              value={selectedSort}
-              onChange={handleSortChange}
-              displayEmpty
-              style={{
-                borderRadius: "8px",
-                height: "40px",
-                fontSize: "14px",
-              }}
-            >
-              <MenuItem value="Sort">{t("COMMON.SORT")}</MenuItem>
-              {Sort.map((state, index) => (
-                <MenuItem value={state} key={index}>
-                  {state}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+                {Filter?.map((filter, index) => (
+                  <MenuItem value={filter} key={index}>
+                    {filter}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Tooltip>
+          <Tooltip title={t("COMMON.SORT")}>
+            <FormControl sx={{ minWidth: "120px" }}>
+              <Select
+                value={selectedSort}
+                onChange={handleSortChange}
+                displayEmpty
+                style={{
+                  borderRadius: "8px",
+                  height: "40px",
+                  fontSize: "14px",
+                }}
+              >
+                <MenuItem value="Sort">{t("COMMON.SORT")}</MenuItem>
+                {Sort.map((state, index) => (
+                  <MenuItem value={state} key={index}>
+                    {state}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Tooltip>
         </Box>
       </Box>
       <Box
@@ -270,17 +274,19 @@ const HeaderComponent = ({
           boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
         }}
       >
-        <Button
-          //  variant="contained"
-          startIcon={<AddIcon />}
-          sx={{
-            textTransform: "none",
-            fontSize: "14px",
-            color: theme.palette.primary["100"],
-          }}
-        >
-          {t("COMMON.ADD_NEW")}
-        </Button>
+        <Tooltip title={t("COMMON.ADD_NEW")}>
+          <Button
+            //  variant="contained"
+            startIcon={<AddIcon />}
+            sx={{
+              textTransform: "none",
+              fontSize: "14px",
+              color: theme.palette.primary["100"],
+            }}
+          >
+            {t("COMMON.ADD_NEW")}
+          </Button>
+        </Tooltip>
       </Box>
       {children}
     </Box>
diff --git a/src/components/layouts/sidebar/Sidebar.tsx b/src/components/layouts/sidebar/Sidebar.tsx
index e2f8613b..da6d70a1 100644
--- a/src/components/layouts/sidebar/Sidebar.tsx
+++ b/src/components/layouts/sidebar/Sidebar.tsx
@@ -10,7 +10,8 @@ import {
   ListItemIcon,
   ListItemText,
   Collapse,
-  Typography
+  Typography,
+  Tooltip,
 } from "@mui/material";
 import FeatherIcon from "feather-icons-react";
 import LogoIcon from "../logo/LogoIcon";
@@ -42,65 +43,73 @@ const Sidebar = ({
       <LogoIcon />
       <Box mt={2}>
         <List>
-          {Menuitems.map((item, index) => (
+          {Menuitems?.map((item, index) => (
             <List component="li" disablePadding key={item.title}>
-              <ListItem
-                button
-                onClick={() => {
-                  if (item.subOptions) {
-                    handleClick(index);
-                  } else {
-                    router.push(item.href);
-                    onSidebarClose();
-                  }
-                }}
-                selected={location === item.href}
-                sx={{
-                  mb: 1,
-                  ...(location === item.href && {
-                    color: "white",
-                    backgroundColor: (theme) =>
-                      `${theme.palette.primary.main}!important`,
-                  }),
-                }}
-              >
-                <ListItemIcon>
-                  <FeatherIcon icon={item.icon} />
-                </ListItemIcon>
-                <ListItemText>
-                  <Typography variant="h2" sx={{ fontWeight: 'bold' }}>
-                    {t(item.title)}
-                  </Typography>
-                </ListItemText>
-                {item.subOptions ? (
-                  open === index ? <ExpandLess /> : <ExpandMore />
-                ) : null}
-              </ListItem>
+              <Tooltip placement="right-start" title={t(item.title)}>
+                <ListItem
+                  button
+                  onClick={() => {
+                    if (item.subOptions) {
+                      handleClick(index);
+                    } else {
+                      router.push(item.href);
+                      onSidebarClose();
+                    }
+                  }}
+                  selected={location === item.href}
+                  sx={{
+                    mb: 1,
+                    ...(location === item.href && {
+                      color: "white",
+                      backgroundColor: (theme) =>
+                        `${theme.palette.primary.main}!important`,
+                    }),
+                  }}
+                >
+                  <ListItemIcon>
+                    <FeatherIcon icon={item.icon} />
+                  </ListItemIcon>
+                  <ListItemText>
+                    <Typography variant="h2" sx={{ fontWeight: "bold" }}>
+                      {t(item.title)}
+                    </Typography>
+                  </ListItemText>
+                  {item.subOptions ? (
+                    open === index ? (
+                      <ExpandLess />
+                    ) : (
+                      <ExpandMore />
+                    )
+                  ) : null}
+                </ListItem>
+              </Tooltip>
 
               {item.subOptions && (
                 <Collapse in={open === index} timeout="auto" unmountOnExit>
                   <List component="div" disablePadding>
                     {item.subOptions.map((subItem) => (
-                      <ListItem
-                        button
-                        key={subItem.title}
-                        onClick={() => {
-                          router.push(subItem.href);
-                          onSidebarClose();
-                        }}
-                        selected={location === subItem.href}
-                        sx={{
-                          pl: 8,
-                          mb: 1,
-                          ...(location === subItem.href && {
-                            color: "white",
-                            backgroundColor: (theme) =>
-                              `${theme.palette.primary.main}!important`,
-                          }),
-                        }}
-                      >
-                        <ListItemText>{t(subItem.title)}</ListItemText>
-                      </ListItem>
+                      <Tooltip title={t(subItem.title)} placement="right-start">
+                        <ListItem
+                          button
+                          key={subItem.title}
+                          onClick={() => {
+                            router.push(subItem.href);
+                            onSidebarClose();
+                          }}
+                          selected={location === subItem.href}
+                          sx={{
+                            pl: 8,
+                            mb: 1,
+                            ...(location === subItem.href && {
+                              color: "white",
+                              backgroundColor: (theme) =>
+                                `${theme.palette.primary.main}!important`,
+                            }),
+                          }}
+                        >
+                          <ListItemText>{t(subItem.title)}</ListItemText>
+                        </ListItem>
+                      </Tooltip>
                     ))}
                   </List>
                 </Collapse>