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

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +393 -8
7 changed files with 393 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5ba6f847dd - Show all commits

BIN
public/avatar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 MiB

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

@ -71,7 +71,7 @@ export default function Header() {
<Stack direction="row" spacing={1.5} alignItems="center">
<Avatar
alt="User Avatar"
src="https://s3-alpha-sig.figma.com/img/dacf/0ff0/1f9d2fd2c30c4d605c4df5e0cf713ec5?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=rcIQTiiBm0HAkIDyXDXxRybg0V-7JweZfG1yWxaHiJLDWGBk1qTnBKTOUEY6DC~hEI5wElvp0gaqjIrbxky6GExQeKo7uqw6gKJ88-daa8D7xWxzOs2ArVFzMEKqO3kDLDVssolGJC0TVyW5iKaryqKz7~D3ucY0h~GY6V-VAP7F5UmxA~H3CF-L72CC1HtMyiGC6nmtDfNo7lNP36o44Os4LSRcIof9xC5nXLo8MQjx9JRKvv6C-B95x2s7ms1~KqKHZWaCjgEcgiCfHwbQK9PgdpSyjSm2ljS4kRCdj6PYleV-D~S82cUGxAXNiay9EmX--QJuQ0MowpFNOJjVgg__"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>

5
src/components/MenuContent/index.tsx
View file

@ -22,6 +22,11 @@ const baseMenuItems = [
icon: <AnalyticsRoundedIcon />,
url: "/panel/admin-list",
},
{
text: "Users",
icon: <AnalyticsRoundedIcon />,
url: "/panel/user-list",
},
];
//Eknoor singh and Jaanvi

313
src/pages/UserList/index.tsx Normal file
View file

@ -0,0 +1,313 @@
import { useEffect, useState } from "react";
import {
Box,
Button,
Typography,
TextField,
InputAdornment,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Pagination,
IconButton,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import TuneIcon from "@mui/icons-material/Tune";
import { useDispatch, useSelector } from "react-redux";
import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
import { AppDispatch, RootState } from "../../redux/store/store";
export default function UserList() {
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const usersPerPage = 10;
const dispatch = useDispatch<AppDispatch>();
const users = useSelector((state: RootState) => state.userReducer.users);
useEffect(() => {
dispatch(userList());
}, [dispatch]);
const staticUsers = [
{
name: "Alice Johnson",
email: "alice@example.com",
role: "User",
phone: "+1 234 567 8901",
},
{
name: "Bob Brown",
email: "bob@example.com",
role: "Admin",
phone: "+1 987 654 3210",
},
{
name: "Charlie Davis",
email: "charlie@example.com",
role: "User",
phone: "+1 312 555 7890",
},
{
name: "Alice Johnson",
email: "alice@example.com",
role: "User",
phone: "+1 234 567 8901",
},
{
name: "Bob Brown",
email: "bob@example.com",
role: "Admin",
phone: "+1 987 654 3210",
},
{
name: "Charlie Davis",
email: "charlie@example.com",
role: "User",
phone: "+1 312 555 7890",
},
{
name: "Bob Brown",
email: "bob@example.com",
role: "Admin",
phone: "+1 987 654 3210",
},
{
name: "Charlie Davis",
email: "charlie@example.com",
role: "User",
phone: "+1 312 555 7890",
},
];
const userData = users.length ? users : staticUsers;
const filteredUsers = userData.filter((user) =>
user.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const indexOfLastUser = currentPage * usersPerPage;
const indexOfFirstUser = indexOfLastUser - usersPerPage;
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
const handlePageChange = (event, value) => {
setCurrentPage(value);
};
return (
<Box
sx={{
width: "calc(100% - 48px)",
margin: "0 auto",
padding: "24px",
backgroundColor: "#1C1C1C",
borderRadius: "12px",
}}
>
<Typography
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "18px",
fontFamily: "Gilroy",
}}
>
User List
</Typography>
{/* Search & Buttons Section */}
<Box
sx={{
display: "flex",
gap: "16px",
marginTop: "16px",
alignItems: "center",
fontFamily: "Gilroy",
}}
>
<TextField
variant="outlined"
placeholder="Search Users"
sx={{
width: "422px",
backgroundColor: "#272727",
borderRadius: "12px",
input: { color: "#FFFFFF" },
"& .MuiOutlinedInput-root": {
borderRadius: "12px",
"& fieldset": { borderColor: "#FFFFFF" },
"&:hover fieldset": { borderColor: "#FFFFFF" },
"&.Mui-focused fieldset": {
borderColor: "#52ACDF",
},
},
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon sx={{ color: "#FFFFFF" }} />
</InputAdornment>
),
}}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
width: "100%",
}}
>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "184px",
"&:hover": { backgroundColor: "#439BC1" },
}}
>
Add User
</Button>
</Box>
<IconButton
sx={{
width: "44px",
height: "44px",
borderRadius: "8px",
backgroundColor: "#272727",
color: "#52ACDF",
"&:hover": { backgroundColor: "#333333" },
}}
>
<TuneIcon />
</IconButton>
</Box>
{/* Table Section */}
<TableContainer
component={Paper}
sx={{
marginTop: "24px",
backgroundColor: "#1C1C1C",
borderRadius: "12px",
overflow: "hidden",
}}
>
<Table>
<TableHead sx={{ backgroundColor: "#272727" }}>
<TableRow>
{["Name", "Email", "Role", "Phone", "Action"].map(
(header) => (
<TableCell
key={header}
sx={{
color: "#FFFFFF",
fontWeight: "bold",
}}
>
{header}
</TableCell>
)
)}
</TableRow>
</TableHead>
<TableBody>
{currentUsers.map((user, index) => (
<TableRow
key={index}
sx={{ backgroundColor: "#1C1C1C" }}
>
<TableCell
sx={{
color: "#FFFFFF",
borderBottom: "1px solid #2A2A2A",
}}
>
{user.name}
</TableCell>
<TableCell
sx={{
color: "#FFFFFF",
borderBottom: "1px solid #2A2A2A",
}}
>
{user.email}
</TableCell>
<TableCell
sx={{
color: "#FFFFFF",
borderBottom: "1px solid #2A2A2A",
}}
>
{user.role}
</TableCell>
<TableCell
sx={{
color: "#FFFFFF",
borderBottom: "1px solid #2A2A2A",
}}
>
{user.phone}
</TableCell>
<TableCell
sx={{
color: "#FFFFFF",
borderBottom: "1px solid #2A2A2A",
}}
>
<IconButton size="small">
<MoreHorizIcon
sx={{ color: "#FFFFFF" }}
/>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{/* Pagination */}
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
marginTop: "16px",
}}
>
<Typography
sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
>
Page Number :
</Typography>
<Pagination
count={Math.ceil(filteredUsers.length / usersPerPage)}
page={currentPage}
onChange={handlePageChange}
siblingCount={0}
boundaryCount={0}
sx={{
"& .MuiPaginationItem-root": {
color: "white",
borderRadius: "0px",
},
"& .MuiPaginationItem-page.Mui-selected": {
backgroundColor: "transparent",
fontWeight: "bold",
color: "#FFFFFF",
},
}}
/>
</Box>
</Box>
);
}

4
src/redux/reducers.ts
View file

@ -3,11 +3,13 @@ import { combineReducers } from "@reduxjs/toolkit";
import authReducer from "./slices/authSlice";
import adminReducer from "./slices/adminSlice";
import profileReducer from "./slices/profileSlice";
import userReducer from "./slices/userSlice.ts";
const rootReducer = combineReducers({
authReducer,
adminReducer,
profileReducer
profileReducer,
userReducer,
});
export type RootState = ReturnType<typeof rootReducer>;

59
src/redux/slices/userSlice.ts Normal file
View file

@ -0,0 +1,59 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
// Define TypeScript types
interface User {
id: number;
name: string;
email: string;
phone?: string;
location?: string;
managerAssigned?: string;
vehicle?: string;
}
interface UserState {
users: User[];
loading: boolean;
error: string | null;
}
// Initial state
const initialState: UserState = {
users: [],
loading: false,
error: null,
};
// Async thunk to fetch user list
export const userList = createAsyncThunk<User[]>("users/fetchUsers", async () => {
try {
const response = await axios.get<User[]>("/api/users"); // Adjust the API endpoint as needed
return response.data;
} catch (error: any) {
throw new Error(error.response?.data?.message || "Failed to fetch users");
}
});
const userSlice = createSlice({
name: "users",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(userList.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(userList.fulfilled, (state, action: PayloadAction<User[]>) => {
state.loading = false;
state.users = action.payload;
})
.addCase(userList.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || "Failed to fetch users";
});
},
});
export default userSlice.reducer;

18
src/router.tsx
View file

@ -1,8 +1,4 @@
import {
Routes as BaseRoutes,
Navigate,
Route,
} from "react-router-dom";
import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout";
@ -15,6 +11,7 @@ const Vehicles = lazy(() => import("./pages/Vehicles"));
const AdminList = lazy(() => import("./pages/AdminList"));
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const NotFoundPage = lazy(() => import("./pages/NotFound"));
const UserList = lazy(() => import("./pages/UserList"));
interface ProtectedRouteProps {
caps: string[];
@ -77,6 +74,15 @@ export default function AppRouter() {
/>
}
/>
<Route
path="user-list"
element={
<ProtectedRoute
caps={[]}
component={<UserList />}
/>
}
/>
<Route
path="profile"
@ -90,7 +96,7 @@ export default function AppRouter() {
</Route>
{/* Catch-all Route */}
<Route path="*" element={<NotFoundPage/>} />
<Route path="*" element={<NotFoundPage />} />
</BaseRoutes>
</Suspense>
);