From d21f4f5d2765672d696a5486cb23078c84daa26e Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Mon, 3 Mar 2025 13:36:37 +0530
Subject: [PATCH] add functionality to search and password visibility and
 responsivess added in somepage

---
 src/components/AddEditCategoryModal/index.tsx | 76 ++++++++++++++-----
 src/components/AppNavbar/index.tsx            |  2 +-
 src/components/CustomTable/index.tsx          | 25 ++++--
 src/components/Header/index.tsx               | 35 +++++++--
 src/pages/AddEditRolePage/index.tsx           | 10 ++-
 src/pages/AdminList/index.tsx                 | 57 +++++++++++---
 src/pages/Auth/Login/index.tsx                |  1 -
 src/pages/RoleList/index.tsx                  | 64 +++++++++++-----
 8 files changed, 199 insertions(+), 71 deletions(-)

diff --git a/src/components/AddEditCategoryModal/index.tsx b/src/components/AddEditCategoryModal/index.tsx
index 2033bbc..521bbba 100644
--- a/src/components/AddEditCategoryModal/index.tsx
+++ b/src/components/AddEditCategoryModal/index.tsx
@@ -6,10 +6,12 @@ import {
 	DialogActions,
 	DialogContent,
 	DialogTitle,
+	IconButton,
 	TextField,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useForm, Controller } from "react-hook-form";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 
 //By Jaanvi : Edit Model :: 11-feb-25
 interface AddEditCategoryModalProps {
@@ -86,6 +88,8 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 		}
 	}, [editRow, setValue, reset]);
 
+	const [showPassword, setShowPassword] = React.useState(false);
+
 	return (
 		<Dialog
 			open={open}
@@ -172,26 +176,58 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 						/>
 					)}
 				/>
-				{!editRow &&<Controller
-					name="password"
-					control={control}
-					rules={{
-						required: "password is required",
-					}}
-					render={({ field }) => (
-						<TextField
-							{...field}
-							required
-							margin="dense"
-							label="Password"
-							type="password"
-							fullWidth
-							variant="standard"
-							error={!!errors.password}
-							helperText={errors.password?.message}
-						/>
-					)}
-				/>}
+				{!editRow && (
+					<Controller
+						name="password"
+						control={control}
+						rules={{
+							required: "password is required",
+						}}
+						render={({ field }) => (
+							<>
+							<Box sx={{position:"relative" }}>
+								<TextField
+									{...field}
+									required
+									margin="dense"
+									label="Password"
+									type={showPassword ? "text" : "password"}
+									id="password"
+									autoComplete="current-password"
+									autoFocus
+									fullWidth
+									variant="standard"
+									error={!!errors.password}
+									helperText={errors.password?.message}
+								/>
+								<IconButton
+									sx={{
+										position: "absolute",
+										top: "60%",
+										right: "10px",
+										background: "none",
+										borderColor: "transparent",
+										transform: "translateY(-50%)",
+										"&:hover": {
+											backgroundColor: "transparent",
+											borderColor: "transparent",
+										},
+									}}
+									onClick={() =>
+										setShowPassword((prev) => !prev)
+									}
+								>
+									{showPassword ? (
+										<VisibilityOff />
+									) : (
+										<Visibility />
+									)}
+								</IconButton>
+								</Box>
+							</>
+						)}
+					/>
+				)}
 				<Controller
 					name="phone"
 					control={control}
diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx
index 49933ef..5652b4f 100644
--- a/src/components/AppNavbar/index.tsx
+++ b/src/components/AppNavbar/index.tsx
@@ -73,7 +73,7 @@ export default function AppNavbar() {
 							Dashboard
 						</Typography>
 					</Stack>
-					<ColorModeIconDropdown />
+					{/* <ColorModeIconDropdown /> */}
 					<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
 						<MenuRoundedIcon />
 					</MenuButton>
diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx
index e995eca..4927964 100644
--- a/src/components/CustomTable/index.tsx
+++ b/src/components/CustomTable/index.tsx
@@ -127,7 +127,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	return (
 		<Box sx={{ overflowX: "auto", width: "100%" }}>
 			<TableContainer component={Paper}>
-				<Table sx={{ minWidth: 700 }} aria-label="customized table">
+				<Table
+					sx={{
+						minWidth: 700,
+						width: "100%",
+						tableLayout: "auto",
+					}}
+					aria-label="customized table"
+				>
 					<TableHead>
 						<TableRow>
 							{columns.map((column) => (
@@ -136,7 +143,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
 									align={column.align || "left"}
 									sx={{
 										whiteSpace: "nowrap", // Prevent wrapping
-										fontSize: { xs: "12px", sm: "14px" }, // Responsively adjust font size
+										// fontSize: { xs: "12px", sm: "14px" },
+										fontSize: {
+											xs: "10px",
+											sm: "12px",
+											md: "14px",
+										}, // Adjust font size responsively
+										padding: { xs: "8px", sm: "12px" },
 									}}
 								>
 									{column.label}
@@ -154,9 +167,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
 										sx={{
 											whiteSpace: "nowrap", // Prevent wrapping
 											fontSize: {
-												xs: "12px",
-												sm: "14px",
-											}, // Responsively adjust font size
+												xs: "10px",
+												sm: "12px",
+												md: "14px",
+											}, // Adjust font size responsively
+											padding: { xs: "8px", sm: "12px" },
 										}}
 									>
 										{isImage(row[column.id]) ? (
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 563cea5..4c3f027 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -12,10 +12,10 @@ import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
 import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
 
 export default function Header() {
-		const [showNotifications, setShowNotifications] = React.useState(false);
-		const toggleNotifications = () => {
-			setShowNotifications((prev) => !prev);
-		};
+	const [showNotifications, setShowNotifications] = React.useState(false);
+	const toggleNotifications = () => {
+		setShowNotifications((prev) => !prev);
+	};
 
 	return (
 		<Box
@@ -27,6 +27,7 @@ export default function Header() {
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
+				flexDirection: { xs: "column", sm: "row" },
 			}}
 		>
 			<Box sx={{ flexGrow: 1 }} />
@@ -35,11 +36,16 @@ export default function Header() {
 				spacing={3}
 				alignItems="center"
 				justifyContent="flex-end"
+				sx={{
+					width: "100%",
+					justifyContent: { xs: "center", sm: "flex-end" },
+					marginTop: { xs: 2, sm: 0 },
+				}}
 			>
 				{/* Search Bar */}
 				<Box
 					sx={{
-						width: "360px",
+						width: { xs: "100%", sm: "360px" },
 						height: "44px",
 						backgroundColor: "#FFFFFF",
 						borderRadius: "8px",
@@ -51,12 +57,24 @@ export default function Header() {
 				>
 					<SearchIcon sx={{ color: "#202020" }} />
 					<InputBase
-						sx={{ marginLeft: 1, flex: 1, color: "#202020" }}
+						sx={{
+							marginLeft: 1,
+							flex: 1,
+							color: "#202020",
+							fontSize: { xs: "12px", sm: "14px" },
+						}}
 					/>
 				</Box>
 
 				{/* Notification and Profile Section */}
-				<Stack direction="row" spacing={2} alignItems="center">
+				<Stack
+					direction="row"
+					spacing={2}
+					alignItems="center"
+					sx={{
+						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
+					}}
+				>
 					{/* Custom Bell Icon */}
 					<MenuButton
 						showBadge
@@ -89,12 +107,13 @@ export default function Header() {
 							p: 2,
 							position: "absolute",
 							top: "55px",
-							right: "280px",
+							right: { xs: "10px", sm: "280px" },
 							bgcolor: "#FFFFFF",
 							boxShadow: 1,
 							borderRadius: 1,
 							zIndex: 1300,
 							cursor: "pointer",
+							width: "250px",
 						}}
 					>
 						{/* <Typography variant="h6" color="text.primary">
diff --git a/src/pages/AddEditRolePage/index.tsx b/src/pages/AddEditRolePage/index.tsx
index 65bd82d..3ee8144 100644
--- a/src/pages/AddEditRolePage/index.tsx
+++ b/src/pages/AddEditRolePage/index.tsx
@@ -157,14 +157,17 @@ const AddEditRolePage: React.FC = () => {
 			</Box>
 
 			{/* Role Name Input */}
-			<Box sx={{ mb: 2 }}>
+			<Box sx={{ mb: 2}}>
+				<label >Role Name</label>
 				<TextField
-					label="Role Name"
+					placeholder="Enter role name"
 					value={roleName}
 					onChange={handleRoleNameChange}
 					fullWidth
+					required
 					variant="outlined"
-					sx={{ mb: 2 }}
+					
+					sx={{ mb: 2 ,mt:2}}
 				/>
 			</Box>
 
@@ -270,7 +273,6 @@ const AddEditRolePage: React.FC = () => {
 				autoHideDuration={3000}
 				onClose={() => setOpenSnackbar(false)}
 				message="Role added successfully!"
-				
 			/>
 		</Box>
 	);
diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx
index f554794..f579f75 100644
--- a/src/pages/AdminList/index.tsx
+++ b/src/pages/AdminList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, TextField, Typography } from "@mui/material";
 import AddEditCategoryModal from "../../components/AddEditCategoryModal";
 import { useForm } from "react-hook-form";
 import CustomTable, { Column } from "../../components/CustomTable";
@@ -10,6 +10,7 @@ import {
 	createAdmin,
 } from "../../redux/slices/adminSlice";
 import { AppDispatch, RootState } from "../../redux/store/store";
+import SearchIcon from "@mui/icons-material/Search";
 
 export default function AdminList() {
 	const [modalOpen, setModalOpen] = useState(false);
@@ -22,7 +23,7 @@ export default function AdminList() {
 	const dispatch = useDispatch<AppDispatch>();
 
 	const admins = useSelector((state: RootState) => state.adminReducer.admins);
-
+	const [searchTerm, setSearchTerm] = useState("");
 	useEffect(() => {
 		dispatch(adminList());
 	}, [dispatch]);
@@ -84,9 +85,18 @@ export default function AdminList() {
 		{ id: "registeredAddress", label: "Address" },
 		{ id: "action", label: "Action", align: "center" },
 	];
+	const filteredAdmins = admins?.filter(
+		(admin) =>
+			admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+			admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+			admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
+			admin.registeredAddress
+				.toLowerCase()
+				.includes(searchTerm.toLowerCase())
+	);
 
-	const categoryRows = admins?.length
-		? admins?.map(
+	const categoryRows = filteredAdmins?.length
+		? filteredAdmins?.map(
 				(
 					admin: {
 						id: string;
@@ -109,6 +119,19 @@ export default function AdminList() {
 
 	return (
 		<>
+			<Typography
+				component="h2"
+				variant="h6"
+				sx={{
+					fontWeight: 600,
+					mb: { xs: 2, sm: 0 },
+					width: "100%",
+					display: "flex",
+				}}
+			>
+				Admins
+			</Typography>
+
 			<Box
 				sx={{
 					width: "100%",
@@ -119,13 +142,25 @@ export default function AdminList() {
 					mb: 2, // Add margin bottom for spacing
 				}}
 			>
-				<Typography
-					component="h2"
-					variant="h6"
-					sx={{ fontWeight: 600, mb: { xs: 2, sm: 0 } }}
-				>
-					Admins
-				</Typography>
+				<TextField
+					variant="outlined"
+					size="small"
+					placeholder="Search..."
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					sx={{
+						width: { xs: "100%", sm: "30%" }, 
+						marginBottom: { xs: 2, sm: 0 }, 
+					}}
+					InputProps={{
+						startAdornment: (
+							<SearchIcon
+								sx={{ color: "#202020", marginRight: 1 }}
+							/>
+						),
+					}}
+				/>
+
 				<Button
 					variant="contained"
 					size="medium"
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index 26ba675..7f9184d 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -109,7 +109,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						<Card
 							variant="outlined"
 							sx={{
-								
 								maxWidth: "400px",
 								width: { xs: "80%", sm: "80%", md: "100%" },
 							}}
diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx
index 58344bf..464afdd 100644
--- a/src/pages/RoleList/index.tsx
+++ b/src/pages/RoleList/index.tsx
@@ -13,6 +13,7 @@ import {
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { useNavigate } from "react-router-dom";
 import AddEditRolePage from "../AddEditRolePage";
+import SearchIcon from "@mui/icons-material/Search";
 
 export default function RoleList() {
 	const [modalOpen, setModalOpen] = useState(false);
@@ -71,25 +72,31 @@ export default function RoleList() {
 		{ id: "action", label: "Action", align: "center" },
 	];
 
-	const categoryRows = roles?.map((role: Role, index: number) => ({
-		id: role.id,
-		srno: index + 1,
-		name: role.name,
-		status: (
-			<Chip
-				label={role.status === 1 ? "Active" : "Inactive"}
-				color={role.status === 1 ? "primary" : "default"}
-				variant="outlined"
-				sx={{
-					fontWeight: 600,
-					width: "80px",
-					textAlign: "center",
-					borderRadius: "4px",
-				}}
-			/>
-		),
-		statusValue: role.status,
-	}));
+	const filterRoles = roles?.filter((role) =>
+		role.name.toLocaleLowerCase().includes(searchTerm.toLowerCase())
+	);
+
+	const categoryRows = filterRoles?.length
+		? filterRoles?.map((role: Role, index: number) => ({
+				id: role.id,
+				srno: index + 1,
+				name: role.name,
+				status: (
+					<Chip
+						label={role.status === 1 ? "Active" : "Inactive"}
+						color={role.status === 1 ? "primary" : "default"}
+						variant="outlined"
+						sx={{
+							fontWeight: 600,
+							width: "80px",
+							textAlign: "center",
+							borderRadius: "4px",
+						}}
+					/>
+				),
+				statusValue: role.status,
+		  }))
+		: [];
 
 	return (
 		<>
@@ -97,9 +104,10 @@ export default function RoleList() {
 				sx={{
 					width: "100%",
 					display: "flex",
+					flexDirection: { xs: "column", sm: "row" },
 					justifyContent: "space-between",
 					alignItems: "center",
-					mb: 2,
+					mb: 2, 
 				}}
 			>
 				<TextField
@@ -108,12 +116,26 @@ export default function RoleList() {
 					placeholder="Search..."
 					value={searchTerm}
 					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{ width: "30%" }}
+					sx={{
+						width: { xs: "100%", sm: "30%" },
+						marginBottom: { xs: 2, sm: 0 },
+					}}
+					InputProps={{
+						startAdornment: (
+							<SearchIcon
+								sx={{ color: "#202020", marginRight: 1 }}
+							/>
+						),
+					}}
 				/>
 				<Button
 					variant="contained"
 					size="small"
 					onClick={handleClickOpen}
+					sx={{
+						textAlign: "center",
+						width: { xs: "100%", sm: "auto" },
+					}}
 				>
 					Add Role
 				</Button>