user CRUD, index CRUD, category CRUD

src/MainLayout/MainLayout.tsx

@@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom";
 import { LayoutWrapper } from "./Layout.styles";
 import { StyledDistance } from "../components/shared/StyledDistance";
 import Header from "../components/Header/Header";
+import { AdminSidebar } from "../components/AdminSidebar/AdminSidebar";
 
 
 const MainLayout = () => {
@@ -10,6 +11,7 @@ const MainLayout = () => {
     <>
       <LayoutWrapper>
         <Header />
+        <AdminSidebar/>
         <StyledDistance />
         <Outlet />
       </LayoutWrapper>

src/api/categories.ts

@@ -0,0 +1,31 @@
+import axiosInstance from "./axiosInstance";
+
+export type CategoryType = {
+  pk: number;
+  name: string;
+};
+
+export const getCategories = async () => {
+  const res = await axiosInstance.get<CategoryType[]>("/api/categories");
+  return res.data;
+};
+
+export const getCategoryById = async (id: number) => {
+  const res = await axiosInstance.get<CategoryType>(`/api/categories/${id}`);
+  return res.data;
+};
+
+export const createCategory = async (name: string) => {
+  const res = await axiosInstance.post(`/api/categories/`, { name });
+  return res.data;
+};
+
+export const updateCategory = async (id: number, name: string) => {
+  const res = await axiosInstance.put(`/api/categories/${id}`, { name });
+  return res.data;
+};
+
+export const deleteCategory = async (id: number) => {
+  const res = await axiosInstance.delete(`/api/categories/${id}`);
+  return res.data;
+};

src/api/indexes.ts

@@ -0,0 +1,41 @@
+import axiosInstance from "./axiosInstance";
+
+export interface IndexResponse {
+  count: number;
+  page_size: number;
+  page: number;
+  total_pages: number;
+  results: IndexType[];
+}
+
+export interface IndexType {
+  id: number;
+  school_index: string;
+}
+
+export const getIndexes = async ( page?: number, search?:string ) => {
+  const res = await axiosInstance.get<IndexResponse>("/api/admin/schools", {
+    params: { page, search },
+  });
+  return res.data;
+};
+
+export const getIndexById = async (id: number) => {
+  const res = await axiosInstance.get<IndexType>(`/api/admin/schools/${id}`);
+  return res.data;
+};
+
+export const createIndex = async (name: string) => {
+  const res = await axiosInstance.post(`/api/admin/schools/`, { school_index: name });
+  return res.data;
+};
+
+export const updateIndex = async (id: number, name: string) => {
+  const res = await axiosInstance.put(`/api/admin/schools/${id}`, { school_index: name });
+  return res.data;
+};
+
+export const deleteIndex = async (id: number) => {
+  const res = await axiosInstance.delete(`/api/admin/schools/${id}`);
+  return res.data;
+};

src/api/users.ts

@@ -1,13 +1,51 @@
+import type { User } from "../components/shared/types/AuthTypes";
 import axiosInstance from "./axiosInstance";
 
+export type UserPayload = {
+  username: string;
+  school_index: number;
+  password?: string;
+  email: string;
+  role: string;
+  is_superuser: boolean;
+};
+
 export const getAllUsers = async (page: number) => {
-  const res = await axiosInstance.get("/api/users", {
+  const res = await axiosInstance.get("/api/admin/users", {
     params: { page },
   });
   return res.data;
 };
 
 export const getUserById = async (id: number) => {
-  const res = await axiosInstance.get(`api/users/${id}`);
+  const res = await axiosInstance.get<User>(`api/admin/users/${id}`);
+  return res.data;
+};
+
+export const deleteUser = async (id: number) => {
+  const res = await axiosInstance.delete(`/api/admin/users/${id}`);
+  return res.data;
+};
+
+export const createUser = async (payload: UserPayload) => {
+  const res = await axiosInstance.post<User>("/api/admin/users", {
+    username: payload.username,
+    school_index: payload.school_index,
+    email: payload.email,
+    password: payload.password,
+    role: payload.role,
+    is_superuser: payload.is_superuser,
+  });
+  return res.data;
+};
+
+export const updateUser = async (id: number, payload: UserPayload) => {
+  const res = await axiosInstance.patch<User>(`/api/admin/users/${id}`, {
+    username: payload.username,
+    school_index: payload.school_index,
+    email: payload.email,
+    role: payload.role,
+    is_superuser: payload.is_superuser,
+  });
   return res.data;
 };

src/components/AdminSidebar/AdminSidebar.tsx

@@ -0,0 +1,81 @@
+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 SchoolIcon from '@mui/icons-material/School';
+import { useAuth } from "../../context/AuthContext";
+import PublishIcon from '@mui/icons-material/Publish';
+type MenuItem = {
+  label: string;
+  icon: React.ReactNode;
+  to: string;
+};
+
+const drawerWidth = 240;
+
+const adminMenu: MenuItem[] = [
+  { label: "Users", icon: <PeopleIcon />, to: "/users" },
+  { label: "School Index", icon: <SchoolIcon />, to: "/indexes" },
+  { label: "Publications", icon: <PublishIcon />, to: "/publications" },
+  { label: "Categories", icon: <CategoryIcon />, to: "/categories" },
+];
+
+const profMenu: MenuItem[] = [
+  { label: "School Index", icon: <HelpOutlineIcon />, to: "/indexes" },
+  { label: "Publications", icon: <QuizIcon />, to: "/publications" },
+];
+
+export const AdminSidebar = () => {
+  const { user } = useAuth();
+
+  const menuItems =
+    user?.is_superuser === true
+      ? adminMenu
+      : user?.role === "prof"
+      ? profMenu
+      : [];
+  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/shared/types/AuthTypes.ts

@@ -6,7 +6,7 @@ export interface school_index_object {
 export interface User {
   id: number;
   username: string;
-  index: school_index_object;
+  school_index_detail: school_index_object;
   school_index: number;
   email: string;
   role: string;

src/hooks/categories/useCategories.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCategories } from "../../api/categories";
+
+
+export const useCategories = () =>
+  useQuery({
+    queryKey: ["categories"],
+    queryFn: getCategories,
+  });

src/hooks/categories/useCreateCategory.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createCategory } from "../../api/categories";
+import { toast } from "react-toastify";
+
+export const useCreateCategory = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => createCategory(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["categories"] });
+      toast.success("Category Created");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};

src/hooks/categories/useDeleteCategory.ts

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

src/hooks/categories/useGetCategoryById.ts

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

src/hooks/categories/useUpdateCategory.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateCategory } from "../../api/categories";
+import { toast } from "react-toastify";
+
+export const useUpdateCategory = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, name }: { id: number; name: string }) =>
+      updateCategory(id, name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["categories"] });
+      toast.success("Category Updated");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};

src/hooks/indexes/useCreateIndex.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+import { createIndex } from "../../api/indexes";
+
+export const useCreateIndex = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => createIndex(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["indexes"] });
+      toast.success("Index Created");
+    },
+    onError: (error: any) => {
+      let message = "Failed to create index";
+      if (error?.response?.data) {
+        message = Object.values(error.response.data).flat().join("\n");
+      } else if (error?.message) {
+        message = error.message;
+      }
+
+      toast.error(message);
+    },
+  });
+};

src/hooks/indexes/useDeleteIndex.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+import { deleteIndex } from "../../api/indexes";
+
+export const useDeleteIndex = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => deleteIndex(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["indexes"] });
+      toast.success("Index Deleted");
+    },
+    onError: () => {
+      toast.error("Can not delete index assigned to user.");
+    },
+  });
+};

src/hooks/indexes/useGetIndexById.ts

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

src/hooks/indexes/useIndexes.ts

@@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
+import { getIndexes } from "../../api/indexes";
+
+export const useIndexes = (page?: number, search?: string) =>
+  useQuery({
+    queryKey: ["indexes", page, search],
+    queryFn: () => getIndexes(page, search),
+  });

src/hooks/indexes/useUpdateIndex.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+import { updateIndex } from "../../api/indexes";
+
+export const useUpdateIndex = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, name }: { id: number; name: string }) =>
+      updateIndex(id, name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["indexes"] });
+      toast.success("Index Updated");
+    },
+    onError: (error: any) => {
+      let message = "Failed to update index";
+      if (error?.response?.data) {
+        message = Object.values(error.response.data).flat().join("\n");
+      } else if (error?.message) {
+        message = error.message;
+      }
+
+      toast.error(message);
+    },
+  });
+};

src/hooks/users/useCreateUser.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createUser, type UserPayload } from "../../api/users";
+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,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+import { deleteUser } from "../../api/users";
+
+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,19 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+import { updateUser, type UserPayload } from "../../api/users";
+
+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/users";
+
+export const useUserById = (id?: number) => {
+  return useQuery({
+    queryKey: ["user", id],
+    queryFn: () => getUserById(id!),
+    enabled: !!id,
+  });
+};

src/pages/CategoriesPage/CategoriesPage.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Container,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+import { useCategories } from "../../hooks/categories/useCategories";
+import { useDeleteCategory } from "../../hooks/categories/useDeleteCategory";
+
+const CategoriesPage = () => {
+  const [deleteCategoryId, setDeleteCategoryId] = useState<number | null>(null);
+
+  const { data, isLoading, isError } = useCategories();
+  const deleteMutation = useDeleteCategory();
+  const navigate = useNavigate();
+
+  const handleCreateCategory = () => {
+    navigate("/categories/create");
+  };
+
+  const handleUpdateCategory = (id: number) => {
+    navigate(`/categories/${id}/update`);
+  };
+
+  const handleDeleteCategory = () => {
+    if (deleteCategoryId !== null) {
+      deleteMutation.mutate(deleteCategoryId, {
+        onSuccess: () => setDeleteCategoryId(null),
+      });
+    }
+  };
+
+  if (isLoading) return <CircularProgress />;
+  if (isError)
+    return <Typography color="error">Error loading categories.</Typography>;
+
+  return (
+    <Container>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
+        <Typography variant="h4">Categories</Typography>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleCreateCategory}
+        >
+          Create Category
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">ID</TableCell>
+              <TableCell align="center">Index</TableCell>
+              <TableCell align="center">Actions</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data?.map((category) => (
+              <TableRow key={category.pk}>
+                <TableCell align="center">{category.pk}</TableCell>
+                <TableCell align="center">{category.name}</TableCell>
+                <TableCell align="center">
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    sx={{ mr: 1 }}
+                    onClick={() => handleUpdateCategory(category.pk)}
+                  >
+                    Update
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    onClick={() => setDeleteCategoryId(category.pk)}
+                  >
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Dialog
+        open={deleteCategoryId !== null}
+        onClose={() => setDeleteCategoryId(null)}
+      >
+        <DialogTitle>Confirm Delete</DialogTitle>
+        <DialogContent>
+          Are you sure you want to delete this category?
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteCategoryId(null)}>Cancel</Button>
+          <Button
+            color="error"
+            onClick={handleDeleteCategory}
+            disabled={deleteMutation.isPending}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default CategoriesPage;

src/pages/CategoryForm/CategoryForm.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+import { useCreateCategory } from "../../hooks/categories/useCreateCategory";
+import { useUpdateCategory } from "../../hooks/categories/useUpdateCategory";
+import { useCategoryById } from "../../hooks/categories/useGetCategoryById";
+
+const CategoryForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const isUpdate = Boolean(id);
+  const navigate = useNavigate();
+
+  const [name, setName] = useState("");
+
+  const { data: category, isLoading } = useCategoryById(
+    id ? Number(id) : undefined
+  );
+
+  const createCategoryMutation = useCreateCategory();
+  const updateCategoryMutation = useUpdateCategory();
+
+  useEffect(() => {
+    if (category) {
+      setName(category.name);
+    }
+  }, [category]);
+
+  if (isUpdate && isLoading) return <CircularProgress />;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isUpdate && id) {
+      updateCategoryMutation.mutate(
+        { id: Number(id), name },
+        { onSuccess: () => navigate("/categories") }
+      );
+    } else {
+      createCategoryMutation.mutate(name, {
+        onSuccess: () => navigate("/categories"),
+      });
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 500, mx: "auto", mt: 5 }}>
+      <Typography variant="h5" mb={3}>
+        {isUpdate ? "Update Category" : "Create Category"}
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <TextField
+          label="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 3 }}
+        />
+
+        <Button variant="contained" color="primary" type="submit">
+          {isUpdate ? "Update" : "Create"}
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default CategoryForm;

src/pages/IndexForm/IndexForm.tsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useGetIndexById } from "../../hooks/indexes/useGetIndexById";
+import { useCreateIndex } from "../../hooks/indexes/useCreateIndex";
+import { useUpdateIndex } from "../../hooks/indexes/useUpdateIndex";
+
+
+
+const IndexForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const isUpdate = Boolean(id);
+  const navigate = useNavigate();
+
+  const [indexText, setIndexText] = useState("");
+
+  const { data: index, isLoading } = useGetIndexById(
+    id ? Number(id) : undefined
+  );
+
+  const createMutation = useCreateIndex();
+  const updateMutation = useUpdateIndex();
+
+
+  useEffect(() => {
+    if (index) {
+      setIndexText(index.school_index);
+    }
+  }, [index]);
+
+  if (isUpdate && isLoading) return <CircularProgress />;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isUpdate && id) {
+      updateMutation.mutate(
+        { id: Number(id), name: indexText },
+        { onSuccess: () => navigate("/indexes") }
+      );
+    } else {
+      createMutation.mutate(indexText, {
+        onSuccess: () => navigate("/indexes"),
+      });
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 500, mx: "auto", mt: 5 }}>
+      <Typography variant="h5" mb={3}>
+        {isUpdate ? "Update Index" : "Create Index"}
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <TextField
+          label="Name"
+          value={indexText}
+          onChange={(e) => setIndexText(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 3 }}
+        />
+
+        <Button variant="contained" color="primary" type="submit">
+          {isUpdate ? "Update" : "Create"}
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default IndexForm;
+

src/pages/IndexesPage/IndexesPage.tsx

@@ -0,0 +1,137 @@
+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 { useNavigate } from "react-router-dom";
+import Container from "../../components/shared/Container/Container";
+import { useIndexes } from "../../hooks/indexes/useIndexes";
+import { useDeleteIndex } from "../../hooks/indexes/useDeleteIndex";
+
+const IndexesPage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [deleteUserId, setDeleteUserId] = useState<number | null>(null);
+  const { data, isLoading, isError } = useIndexes(currentPage);
+  console.log(data);
+  const deleteMutation = useDeleteIndex();
+  const navigate = useNavigate();
+
+    const handleCreateIndex = () => {
+    navigate("/indexes/create");
+  };
+
+  const handleUpdateIndex = (id: number) => {
+    navigate(`/indexes/${id}/update`);
+  };
+
+  const handleDeleteIndex = () => {
+    if (deleteUserId !== null) {
+      deleteMutation.mutate(deleteUserId, {
+        onSuccess: () => setDeleteUserId(null),
+      });
+    }
+  };
+
+  if (isLoading) return <CircularProgress />;
+  if (isError)
+    return <Typography color="error">Error loading indexes.</Typography>;
+
+  return (
+    <Container>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
+        <Typography variant="h4">Indexes</Typography>
+         <Button
+          variant="contained"
+          color="primary"
+          onClick={handleCreateIndex}
+        >
+          Create Index
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">ID</TableCell>
+              <TableCell align="center">Index</TableCell>
+              <TableCell align="center">Actions</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data?.results.map((index) => (
+              <TableRow key={index.id}>
+                <TableCell align="center">{index.id}</TableCell>
+                <TableCell align="center">{index.school_index}</TableCell>
+                <TableCell align="center">
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    sx={{ mr: 1 }}
+                    onClick={() => handleUpdateIndex(index.id)}
+                  >
+                    Update
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    onClick={() => setDeleteUserId(index.id)}
+                  >
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Pagination
+        color="primary"
+        shape="rounded"
+        count={data?.total_pages}
+        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={handleDeleteIndex}
+            disabled={deleteMutation.isPending}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default IndexesPage;

src/pages/ProfilePage/ProfilePage.tsx

@@ -30,7 +30,7 @@ const ProfilePage = () => {
           E-mail: {user?.email}
         </Typography>
         <Typography variant="body1" mb={2}>
-          Index: {user?.school_index}
+          Index: {user?.school_index_detail.school_index}
         </Typography>
         <Typography variant="body1" mb={2}>
           Status: {user?.is_superuser ? "Admin" : "User"}

src/pages/UserForm/UserForm.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { toast } from "react-toastify";
+
+import { useUserById } from "../../hooks/users/useUserById";
+import { useCreateUser } from "../../hooks/users/useCreateUser";
+import { useUpdateUser } from "../../hooks/users/useUpdateUser";
+import type { UserPayload } from "../../api/users";
+import { useIndexes } from "../../hooks/indexes/useIndexes";
+
+const UserForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const isUpdate = Boolean(id);
+  const navigate = useNavigate();
+
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [indexInput, setIndexInput] = useState("");
+  const [role, setRole] = useState("common");
+  const [isSuperuser, setIsSuperuser] = useState(false);
+
+  const { data: user, isLoading: isLoadingUser } = useUserById(
+    id ? Number(id) : undefined
+  );
+
+  const { data: indexesData, isFetching } = useIndexes(undefined, indexInput);
+
+  const createUserMutation = useCreateUser();
+  const updateUserMutation = useUpdateUser();
+
+  useEffect(() => {
+    if (user) {
+      setUsername(user.username);
+      setEmail(user.email);
+      setRole(user.role);
+      setIsSuperuser(user.is_superuser);
+      setIndexInput(user.school_index_detail?.school_index ?? "");
+    }
+  }, [user]);
+
+  if (isUpdate && isLoadingUser) return <CircularProgress />;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!indexInput.trim()) {
+      toast.error("School index is required");
+      return;
+    }
+
+    const matchedIndex = indexesData?.results?.find(
+      (i) => i.school_index === indexInput
+    );
+
+    if (!matchedIndex) {
+      toast.error("School index does not exist");
+      return;
+    }
+
+    const payload: UserPayload = {
+      username,
+      email,
+      role,
+      is_superuser: isSuperuser,
+      school_index: matchedIndex.id,
+    };
+
+    if (isUpdate && id) {
+      updateUserMutation.mutate(
+        { id: Number(id), payload },
+        { onSuccess: () => navigate("/users") }
+      );
+    } else {
+      createUserMutation.mutate(payload, {
+        onSuccess: () => navigate("/users"),
+      });
+    }
+  };
+
+  const matchedIndex = indexInput
+    ? indexesData?.results?.find((i) => i.school_index === indexInput)
+    : undefined;
+
+  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="School index"
+          value={indexInput}
+          onChange={(e) => setIndexInput(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 2 }}
+          helperText={
+            !indexInput
+              ? "Enter an existing school index"
+              : isFetching
+              ? "Checking index…"
+              : matchedIndex
+              ? "Index exists"
+              : "Index does not exist"
+          }
+        />
+
+        <TextField
+          select
+          label="Role"
+          value={role}
+          onChange={(e) => setRole(e.target.value)}
+          fullWidth
+          sx={{ mb: 3 }}
+        >
+          <option value="common">Common</option>
+          <option value="prof">Professor</option>
+        </TextField>
+
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isSuperuser}
+              onChange={() => setIsSuperuser((v) => !v)}
+            />
+          }
+          label="Is Superuser?"
+        />
+
+        <Button variant="contained" type="submit">
+          {isUpdate ? "Update" : "Create"}
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default UserForm;

src/pages/UsersPage/UsersPage.tsx

@@ -0,0 +1,140 @@
+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 { useNavigate } from "react-router-dom";
+import Container from "../../components/shared/Container/Container";
+import type { User } from "../../components/shared/types/AuthTypes";
+
+const UsersPage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [deleteUserId, setDeleteUserId] = useState<number | null>(null);
+  const { data, isLoading, isError } = useUsers(currentPage);
+  console.log(data)
+  const deleteMutation = useDeleteUser();
+  const navigate = useNavigate();
+
+
+  const handleUpdateUser = (id: number) => {
+    navigate(`/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>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Username</TableCell>
+              <TableCell>Index</TableCell>
+              <TableCell>Email</TableCell>
+              <TableCell>Role</TableCell>
+              <TableCell>Is Admin</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data?.results.map((user: User) => (
+              <TableRow key={user.id}>
+                <TableCell>{user.id}</TableCell>
+                <TableCell>{user.username}</TableCell>
+                <TableCell>{user.school_index_detail.school_index}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.role}</TableCell>
+                <TableCell>
+                  {user.is_superuser ? "Yes" : "No" }
+                </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.total_pages}
+        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

@@ -3,25 +3,59 @@ import MainLayout from "../MainLayout/MainLayout";
 import { Container } from "@mui/material";
 import LoginPage from "../pages/LoginPage/LoginPage";
 import ProfilePage from "../pages/ProfilePage/ProfilePage";
+import UsersPage from "../pages/UsersPage/UsersPage";
+import UserForm from "../pages/UserForm/UserForm";
+import IndexesPage from "../pages/IndexesPage/IndexesPage";
+import IndexForm from "../pages/IndexForm/IndexForm";
+import CategoriesPage from "../pages/CategoriesPage/CategoriesPage";
+import CategoryForm from "../pages/CategoryForm/CategoryForm";
 
 const router = createBrowserRouter([
-   {
+  {
     path: "/",
     element: <MainLayout />,
     children: [
-        {
-            index: true,
-            element: <Container>index page</Container>
-        },
-        {
-            path: "/login",
-            element: <LoginPage/>
-        },
-        {
-            path: "/profile",
-            element: <ProfilePage/>
-        }
-    ]}
-])
+      {
+        index: true,
+        element: <Container>index page</Container>,
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+      },
+      {
+        path: "/profile",
+        element: <ProfilePage />,
+      },
+      {
+        path: "/users",
+        children: [
+          { index: true, element: <UsersPage /> },
+          { path: ":id/update", element: <UserForm /> },
+        ],
+      },
+      {
+        path: "/indexes",
+        children: [
+          { index: true, element: <IndexesPage /> },
+          { path: "create", element: <IndexForm /> },
+          { path: ":id/update", element: <IndexForm /> },
+        ],
+      },
+      {
+        path: "/publications",
+        element: <Container>Publications Page</Container>,
+      },
+      {
+        path: "/categories",
+        children: [
+          { index: true, element: <CategoriesPage /> },
+          { path: "create", element: <CategoryForm /> },
+          { path: ":id/update", element: <CategoryForm /> },
+        ],
+      },
+    ],
+  },
+]);
 
 export default router;