jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

add functionality to search and password visibility and responsivess added in somepage

Browse source
This commit is contained in:
jaanvi 2025-03-03 13:36:37 +05:30
parent 42300867a7
commit d21f4f5d27
8 changed files with 199 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/AddEditCategoryModal/index.tsx
View file

@ -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}

2
src/components/AppNavbar/index.tsx
View file

@ -73,7 +73,7 @@ export default function AppNavbar() {
Dashboard
</Typography>
</Stack>
<ColorModeIconDropdown />
{/* <ColorModeIconDropdown /> */}
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
<MenuRoundedIcon />
</MenuButton>

25
src/components/CustomTable/index.tsx
View file

@ -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]) ? (

35
src/components/Header/index.tsx
View file

@ -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">

10
src/pages/AddEditRolePage/index.tsx
View file

@ -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>
);

57
src/pages/AdminList/index.tsx
View file

@ -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"

1
src/pages/Auth/Login/index.tsx
View file

@ -109,7 +109,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Card
variant="outlined"
sx={{
maxWidth: "400px",
width: { xs: "80%", sm: "80%", md: "100%" },
}}

64
src/pages/RoleList/index.tsx
View file

@ -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>