Merge pull request #31 from AkshataKatwal16/admin

Issue feat : fix UI changes

public/locales/en/common.json

@@ -12,6 +12,8 @@
     "REASON_FOR_DELETION": "Reason for Deletion",
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
     "DUPLICATED_USER": "Duplicate User",
+
+    "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?",

src/components/ActionIcon.tsx

@@ -0,0 +1,64 @@
+// components/ActionCell.tsx
+
+import React from "react";
+import {
+  Box,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from "@mui/material";
+// import EditIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+// import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { useTranslation } from "next-i18next";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+interface ActionCellProps {
+  onEdit: (rowData: any) => void;
+  onDelete: (rowData: any) => void;
+  rowData: any;
+}
+
+const ActionIcon: React.FC<ActionCellProps> = ({
+  rowData,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "20px",
+      }}
+    >
+       <Box
+        onClick={() => {
+          onDelete(rowData);
+        }}
+        style={{ cursor: "pointer" }}
+      >
+        <DeleteIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+      </Box>
+      <Box
+        onClick={() => {
+          onEdit(rowData);
+        }}
+        style={{
+          cursor: "pointer",
+          opacity: 0.5, // Reduced opacity to make it appear disabled
+          pointerEvents: "auto", // Enable pointer events to allow click
+        }}
+      >
+        <EditIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+      </Box>
+
+    </Box>
+  );
+};
+
+export default ActionIcon;

src/components/FormControl.tsx

@@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from "next-i18next";
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -28,6 +28,7 @@ interface MultipleSelectCheckmarksProps {
 }
 
 const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ names, codes, tagName, selectedCategories, onCategoryChange, disabled = false }) => {
+  const { t } = useTranslation();
   const handleChange = (event: SelectChangeEvent<typeof selectedCategories>) => {
     const {
       target: { value },
@@ -39,7 +40,7 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ nam
 
   return (
     <div>
-      <FormControl sx={{ m: 1, width: 300 }} disabled={disabled}>
+      <FormControl sx={{ m: 1, width: 200 }} disabled={disabled}>
         <InputLabel id="multiple-checkbox-label">{tagName}</InputLabel>
         <Select
           labelId="multiple-checkbox-label"
@@ -52,7 +53,7 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ nam
           MenuProps={MenuProps}
         >
           <MenuItem value="">
-            <em>None</em>
+            <em> {t("COMMON.ALL")}</em>
           </MenuItem>
           {names.map((name) => (
             <MenuItem key={name} value={name}>

src/components/HeaderComponent.tsx

@@ -156,7 +156,7 @@ const HeaderComponent = ({
           <Grid container spacing={isMobile ? 1 : 2}>
             <Grid item xs={12} sm={isMediumScreen ? 12 : 4}>
               <MultipleSelectCheckmarks
-                names={allStates.map((state) => state.label)}
+                names={allStates.map((state) => state.label?.toLowerCase().charAt(0).toUpperCase() + state.label?.toLowerCase().slice(1))}
                 codes={allStates.map((state) => state.value)}
                 tagName={t("FACILITATORS.ALL_STATES")}
                 selectedCategories={selectedState}

src/components/KaTableComponent.tsx

@@ -8,7 +8,7 @@ import "ka-table/style.css";
 import { IPagingProps } from "ka-table/props";
 import { updatePageIndex, updatePageSize } from "ka-table/actionCreators";
 import ActionCell from "./ActionCell";
-
+import ActionIcon from "./ActionIcon";
 interface KaTableComponentProps {
   columns: ITableProps["columns"];
   data?: ITableProps["data"];
@@ -17,7 +17,8 @@ interface KaTableComponentProps {
   PagesSelector?: any;
   PageSizeSelector?: any;
   pageSizes?:any
-
+  onDelete?:any
+  onEdit?:any
 
   extraActions: {
     name: string;
@@ -37,7 +38,8 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   PageSizeSelector,
 
   extraActions,
-
+  onEdit,
+   onDelete,
   showIcons,
   pageSizes
 }) => {
@@ -70,7 +72,8 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
             content: (props) => {
               if (props.column.key === "actions") {
                 return (
-                  <ActionCell
+                  <>
+                  {/* <ActionCell
                     rowData={props.rowData}
                     extraActions={extraActions}
                     showIcons={showIcons}
@@ -80,7 +83,14 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                     onDelete={function (rowData: any): void {
                       throw new Error("Function not implemented.");
                     }}
+                  /> */}
+                  <ActionIcon
+                  rowData={props.rowData}
+                   onEdit={onEdit}
+                   onDelete={onDelete}
                   />
+                  </>
+
                 );
               }
               return null;

src/components/UserTable.tsx

@@ -92,7 +92,7 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
   const [selectedUserId, setSelectedUserId] = useState("");
   const [selectedReason, setSelectedReason] = useState("");
   const [otherReason, setOtherReason] = useState("");
-  const [confirmButtonDisable, setConfirmButtonDisable] = useState(true);
+  const [confirmButtonDisable, setConfirmButtonDisable] = useState(false);
   const [filters, setFilters] = useState<FilterDetails>({
     role: role,
     status: "active",
@@ -205,6 +205,7 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
   };
 
   const handleDelete = (rowData: any) => {
+
     setIsDeleteModalOpen(true);
     setSelectedUserId(rowData.userId);
     //const userData="";
@@ -322,6 +323,8 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
           pageSizes={pageSizeArray}
           extraActions={extraActions}
           showIcons={true}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
         />
       <DeleteUserModal
         open={isDeleteModalOpen}

src/components/layouts/header/Profile.tsx

@@ -82,7 +82,11 @@ const Profile = () => {
               fontWeight="700"
               sx={{
                 ml: 1,
-              }}
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+               // whiteSpace: 'nowrap',
+                // maxWidth: '200px',  
+                          }}
             >
               {userName ? userName : ""}
             </Typography>

src/components/layouts/sidebar/MenuItems.js

@@ -66,4 +66,4 @@ const Menuitems = [
   },
 ];
 
-export default Menuitems;
+export default Menuitems;