user crud

src/api/usersApi.ts

@@ -0,0 +1,53 @@
+import type { User } from "../components/shared/types/AuthTypes";
+import axiosInstance from "./axiosInstance";
+
+export type UsersResponse = {
+  data: User[];
+  meta: {
+    current_page: number;
+    from: number;
+    last_page: number;
+    per_page: number;
+    to: number;
+    total: number;
+  };
+};
+
+export interface UserPayload {
+  username: string;
+  email: string;
+  password?: string;
+  type: string;
+}
+
+export const getUsers = async (page = 1) => {
+  const res = await axiosInstance.get<UsersResponse>("/api/users", {
+    params: { page },
+  });
+  return res.data;
+};
+
+export const getUserById = async (id: number) => {
+  const res = await axiosInstance.get(`/api/users/${id}`);
+  return res.data.data;
+};
+
+export const deleteUser = async (id: number) => {
+  const res = await axiosInstance.delete(`/api/users/${id}`);
+  return res.data;
+};
+
+export const createUser = async (payload: UserPayload) => {
+  const res = await axiosInstance.post<User>("/api/users", payload);
+  return res.data;
+};
+
+export const updateUser = async (id: number, payload: UserPayload) => {
+  const res = await axiosInstance.put<User>(`/api/users/${id}`, {
+    username: payload.username,
+    email: payload.email,
+    password: payload.password,
+    type: payload.type,
+  });
+  return res.data;
+};

src/components/AdminSidebar/AdminSidebar.tsx

@@ -0,0 +1,88 @@
+import {
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { NavLink } from "react-router-dom";
+
+import PeopleIcon from "@mui/icons-material/People";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import QuizIcon from "@mui/icons-material/Quiz";
+import CategoryIcon from "@mui/icons-material/Category";
+import ArticleIcon from "@mui/icons-material/Article";
+import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
+
+const drawerWidth = 240;
+
+const menuItems = [
+  {
+    label: "Users",
+    icon: <PeopleIcon />,
+    to: "/dashboard/users",
+  },
+  {
+    label: "Questions",
+    icon: <HelpOutlineIcon />,
+    to: "/dashboard/questions",
+  },
+  {
+    label: "Tests",
+    icon: <QuizIcon />,
+    to: "/dashboard/tests",
+  },
+  {
+    label: "User Tests",
+    icon: <AssignmentIndIcon />,
+    to: "/dashboard/userTests",
+  },
+  {
+    label: "Categories",
+    icon: <CategoryIcon />,
+    to: "/dashboard/categories",
+  },
+  {
+    label: "Logs",
+    icon: <ArticleIcon />,
+    to: "/dashboard/logs",
+  },
+];
+
+export const AdminSidebar = () => {
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+
+        [`& .MuiDrawer-paper`]: {
+          width: drawerWidth,
+          top: 70,
+        },
+      }}
+    >
+      <List>
+        {menuItems.map((item) => (
+          <ListItemButton
+            key={item.label}
+            component={NavLink}
+            to={item.to}
+            sx={{
+              "&.active": {
+                bgcolor: "action.selected",
+                "& .MuiListItemIcon-root": {
+                  color: "primary.main",
+                },
+              },
+            }}
+          >
+            <ListItemIcon>{item.icon}</ListItemIcon>
+            <ListItemText primary={item.label} />
+          </ListItemButton>
+        ))}
+      </List>
+    </Drawer>
+  );
+};

src/components/Header/Header.tsx

@@ -29,7 +29,7 @@ function Header() {
     setAnchorElNav(null);
   };
 
-  const goToAdmin = () => navigate("/admin");
+  const goToDashboard = () => navigate("/dashboard");
 
   return (
     <AppBar sx={{ backgroundColor: "#4b2981" }} position="static">
@@ -99,11 +99,11 @@ function Header() {
                     <MenuItem
                       onClick={() => {
                         handleCloseNavMenu();
-                        goToAdmin();
+                        goToDashboard();
                       }}
                     >
                       <Typography textAlign="center">
-                        Admin Dashboard
+                        Dashboard
                       </Typography>
                     </MenuItem>
                   )}
@@ -161,10 +161,10 @@ function Header() {
                 </Button>
                 {user.type === "admin" && (
                   <Button
-                    onClick={goToAdmin}
+                    onClick={goToDashboard}
                     sx={{ my: 2, color: "white", display: "block" }}
                   >
-                    Admin Dashboard
+                    Dashboard
                   </Button>
                 )}
               </>
@@ -176,7 +176,7 @@ function Header() {
                 navigate("/tests");
               }}
             >
-              <Typography textAlign="center">Tests</Typography>
+            Tests
             </Button>
           </Box>
         </Toolbar>

src/hooks/users/useCreateUser.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createUser, type UserPayload } from "../../api/usersApi";
+import { toast } from "react-toastify";
+
+export const useCreateUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: UserPayload) => createUser(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      toast.success("User Created");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};

src/hooks/users/useDeleteUser.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteUser } from "../../api/usersApi";
+import { toast } from "react-toastify";
+
+export const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => deleteUser(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      toast.success("User Deleted!");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};

src/hooks/users/useUpdateUser.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateUser, type UserPayload } from "../../api/usersApi";
+import { toast } from "react-toastify";
+
+export const useUpdateUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: number; payload: UserPayload }) =>
+      updateUser(id, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      toast.success("User Updated");
+    },
+    onError: (error) =>{
+      toast.error(error.message);
+    }
+  });
+};

src/hooks/users/useUserById.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getUserById } from "../../api/usersApi";
+
+export const useUserById = (id?: number) => {
+  return useQuery({
+    queryKey: ["user", id],
+    queryFn: () => getUserById(id!),
+    enabled: !!id,
+  });
+};

src/hooks/users/useUsers.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getUsers } from "../../api/usersApi";
+
+export const useUsers = (page = 1) => {
+  return useQuery({
+    queryKey: ["users", page],
+    queryFn: () => getUsers(page),
+    staleTime: 1000 * 60,
+  });
+};

src/layouts/AdminLayout/AdminLayout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { AdminSidebar } from "../../components/AdminSidebar/AdminSidebar";
+import { LayoutWrapper } from "../MainLayout/Layout.styles";
+import Header from "../../components/Header/Header";
+import { StyledDistance } from "../../components/shared/StyledDistance";
+
+const AdminLayout = () => {
+  return (
+    <LayoutWrapper>
+      <Header />
+      <StyledDistance />
+      <AdminSidebar />
+      <Outlet />
+    </LayoutWrapper>
+  );
+};
+
+export default AdminLayout;

src/pages/UserForm/UserForm.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  MenuItem,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useUserById } from "../../hooks/users/useUserById";
+import { useCreateUser } from "../../hooks/users/useCreateUser";
+import { useUpdateUser } from "../../hooks/users/useUpdateUser";
+
+
+const UserForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const isUpdate = Boolean(id);
+  const navigate = useNavigate();
+
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [type, setType] = useState("user");
+
+  const { data: user, isLoading: isLoadingUser } = useUserById(
+    id ? Number(id) : undefined
+  );
+
+  const createUserMutation = useCreateUser();
+  const updateUserMutation = useUpdateUser();
+
+  useEffect(() => {
+    if (user) {
+      setUsername(user.username);
+      setEmail(user.email);
+      setType(user.type);
+    }
+  }, [user]);
+
+  if (isUpdate && isLoadingUser) return <CircularProgress />;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const payload = { username, email, type, ...(password && { password }) };
+
+    if (isUpdate && id) {
+      console.log(payload);
+      console.log(id);
+      updateUserMutation.mutate(
+        { id: Number(id), payload },
+        { onSuccess: () => navigate("/dashboard/users") }
+      );
+    } else {
+      createUserMutation.mutate(payload, {
+        onSuccess: () => navigate("/dashboard/users"),
+      });
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 500, mx: "auto", mt: 5 }}>
+      <Typography variant="h5" mb={3}>
+        {isUpdate ? "Update User" : "Create User"}
+      </Typography>
+      <form onSubmit={handleSubmit}>
+        <TextField
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 2 }}
+        />
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 2 }}
+        />
+        <TextField
+          label="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          fullWidth
+          sx={{ mb: 2 }}
+          placeholder={isUpdate ? "Leave blank to keep current password" : ""}
+          required={!isUpdate}
+        />
+        <TextField
+          select
+          label="Type"
+          value={type}
+          onChange={(e) => setType(e.target.value)}
+          fullWidth
+          sx={{ mb: 3 }}
+        >
+          <MenuItem value="user">User</MenuItem>
+          <MenuItem value="admin">Admin</MenuItem>
+          <MenuItem value="creator">Creator</MenuItem>
+        </TextField>
+        <Button variant="contained" color="primary" type="submit">
+          {isUpdate ? "Update" : "Create"}
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default UserForm;

src/pages/UsersPage/UsersPage.tsx

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  Pagination,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@mui/material";
+import { useUsers } from "../../hooks/users/useUsers";
+import { useDeleteUser } from "../../hooks/users/useDeleteUser";
+import Container from "../../components/shared/Container";
+import { useNavigate } from "react-router-dom";
+
+const UsersPage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [deleteUserId, setDeleteUserId] = useState<number | null>(null);
+  const { data, isLoading, isError } = useUsers(currentPage);
+  const deleteMutation = useDeleteUser();
+  const navigate = useNavigate();
+
+  const handleCreateUser = () => {
+     navigate(`/dashboard/users/create`);
+  };
+
+  const handleUpdateUser = (id: number) => {
+    navigate(`/dashboard/users/${id}/update`);
+  };
+
+  const handleDeleteUser = () => {
+    if (deleteUserId !== null) {
+      deleteMutation.mutate(deleteUserId, {
+        onSuccess: () => setDeleteUserId(null),
+      });
+    }
+  };
+
+  if (isLoading) return <CircularProgress />;
+  if (isError)
+    return <Typography color="error">Error loading users.</Typography>;
+
+  return (
+    <Container>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
+        <Typography variant="h4">Users</Typography>
+        <Button variant="contained" color="primary" onClick={handleCreateUser}>
+          Create User
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Username</TableCell>
+              <TableCell>Email</TableCell>
+              <TableCell>Type</TableCell>
+              <TableCell>Created At</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data?.data.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell>{user.id}</TableCell>
+                <TableCell>{user.username}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.type}</TableCell>
+                <TableCell>
+                  {new Date(user.created_at).toLocaleDateString()}
+                </TableCell>
+                <TableCell>
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    size="small"
+                    onClick={() => handleUpdateUser(user.id)}
+                    sx={{ mr: 1 }}
+                  >
+                    Update
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    onClick={() => setDeleteUserId(user.id)}
+                  >
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Pagination
+        color="primary"
+        shape="rounded"
+        count={data?.meta.last_page}
+        page={currentPage}
+        onChange={(_, value) => setCurrentPage(value)}
+        sx={{ mt: 3, mb: 3, display: "flex", justifyContent: "center" }}
+      />
+
+      <Dialog
+        open={deleteUserId !== null}
+        onClose={() => setDeleteUserId(null)}
+      >
+        <DialogTitle>Confirm Delete</DialogTitle>
+        <DialogContent>
+          Are you sure you want to delete this user?
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteUserId(null)}>Cancel</Button>
+          <Button
+            color="error"
+            onClick={handleDeleteUser}
+            disabled={deleteMutation.isPending}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default UsersPage;

src/router/router.tsx

@@ -12,6 +12,10 @@ import ResetPasswordPage from "../pages/ResetPasswordPage/ResetPasswordPage";
 import SingleQuestionPage from "../pages/SingleQuestionPage/SingleQuestionPage";
 import { TestPage } from "../pages/TestPage/TestPage";
 import TestsPage from "../pages/TestsPage/TestsPage";
+import AdminLayout from "../layouts/AdminLayout/AdminLayout";
+import Container from "../components/shared/Container";
+import UsersPage from "../pages/UsersPage/UsersPage";
+import UserForm from "../pages/UserForm/UserForm";
 
 const router = createBrowserRouter([
   {
@@ -52,15 +56,19 @@ const router = createBrowserRouter([
       },
       {
         path: "/questions/:id",
-        element: <SingleQuestionPage/>
+        element: <SingleQuestionPage />,
       },
       {
         path: "/tests/:id",
-        element: <TestPage/>
+        element: (
+          <ProtectedRoute>
+            <TestPage />
+          </ProtectedRoute>
+        ),
       },
       {
         path: "/tests",
-        element: <TestsPage/>
+        element: <TestsPage />,
       },
       {
         path: "*",
@@ -68,6 +76,26 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: "/dashboard",
+    element: <AdminLayout />,
+    children: [
+      { index: true, element: <UsersPage /> },
+      {
+        path: "users",
+        children: [
+          { index: true, element: <UsersPage /> },
+          { path: "create", element: <UserForm /> },
+          { path: ":id/update", element: <UserForm /> },
+        ],
+      },
+      { path: "questions", element: <Container>questions</Container> },
+      { path: "tests", element: <Container>tests</Container> },
+      { path: "user-tests", element: <Container>User Tests</Container> },
+      { path: "categories", element: <Container>categories</Container> },
+      { path: "logs", element: <Container>logs</Container> },
+    ],
+  },
 ]);
 
 export default router;