Added next SSR and caching for admin/users

app/api/auth/register/route.ts

@@ -1,4 +1,10 @@
-import { AUTH_COOKIE_NAME, BE_BASE_URL } from "@/app/services/constants";
+import { revalidateTag } from "next/cache";
+
+import {
+  AUTH_COOKIE_NAME,
+  BE_BASE_URL,
+  USERS_CACHE_TAG,
+} from "@/app/services/constants";
 import { NextResponse } from "next/server";
 import { cookies } from "next/headers";
 
@@ -59,6 +65,8 @@ export async function POST(request: Request) {
 
     const data = await resp.json();
 
+    revalidateTag(USERS_CACHE_TAG);
+
     return NextResponse.json(
       {
         success: true,

app/api/dashboard/admin/users/[id]/route.ts

@@ -1,5 +1,11 @@
 // app/api/users/[id]/route.ts
-import { AUTH_COOKIE_NAME, BE_BASE_URL } from "@/app/services/constants";
+import { revalidateTag } from "next/cache";
+
+import {
+  AUTH_COOKIE_NAME,
+  BE_BASE_URL,
+  USERS_CACHE_TAG,
+} from "@/app/services/constants";
 import { NextResponse } from "next/server";
 
 // Field mapping: snake_case input -> { snake_case for data, PascalCase for fields }
@@ -93,6 +99,9 @@ export async function PUT(
     });
 
     const data = await response.json();
+    if (response.ok) {
+      revalidateTag(USERS_CACHE_TAG);
+    }
     return NextResponse.json(data, { status: response.status });
   } catch (err: unknown) {
     const errorMessage =
@@ -137,6 +146,10 @@ export async function DELETE(
       data = { success: response.ok };
     }
 
+    if (response.ok) {
+      revalidateTag(USERS_CACHE_TAG);
+    }
+
     return NextResponse.json(data ?? { success: response.ok }, {
       status: response.status,
     });

app/dashboard/admin/users/page.tsx

@@ -1,50 +1,16 @@
 import Users from "@/app/features/Pages/Admin/Users/users";
-import { cookies } from "next/headers";
+import { IUser } from "@/app/features/Pages/Admin/Users/interfaces";
-import { getBaseUrl } from "@/app/services/constants";
+import { fetchUsers } from "@/app/services/users";
 
-export default async function BackOfficeUsersPage({
+export default async function BackOfficeUsersPage() {
-  searchParams,
+  let users: IUser[] = [];
-}: {
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
-}) {
-  // Await searchParams and extract pagination
-  const params = await searchParams;
-  const limit = params.limit || "10";
-  const page = params.page || "1";
 
-  const baseUrl = getBaseUrl();
+  try {
-
+    users = await fetchUsers();
-  const url = new URL(`${baseUrl}/api/dashboard/admin/users`);
+  } catch (error) {
-  url.searchParams.set("limit", typeof limit === "string" ? limit : limit[0]);
+    console.error("Failed to fetch users:", error);
-  url.searchParams.set("page", typeof page === "string" ? page : page[0]);
-
-  // Forward cookies for auth when calling the internal API route
-  const cookieStore = await cookies();
-  const cookieHeader = cookieStore
-    .getAll()
-    .map((c: { name: string; value: string }) => `${c.name}=${c.value}`)
-    .join("; ");
-
-  const res = await fetch(url.toString(), {
-    headers: {
-      Cookie: cookieHeader,
-    },
-    cache: "no-store",
-  });
-
-  if (!res.ok) {
-    console.error("Failed to fetch users:", res.status, res.statusText);
-    return (
-      <div>
-        <Users users={[]} />
-      </div>
-    );
   }
 
-  const data = await res.json();
-  // Handle different response structures: could be array directly, or wrapped in data/users property
-  const users = Array.isArray(data) ? data : data.users || data.data || [];
-
   return (
     <div>
       <Users users={users} />

app/features/Pages/Admin/Users/users.tsx

@@ -17,8 +17,6 @@ const Users: React.FC<UsersProps> = ({ users }) => {
   const [showAddUser, setShowAddUser] = useState(false);
   const dispatch = useDispatch<AppDispatch>();
 
-  console.log("[Users] - users", users);
-
   return (
     <div>
       <UserTopBar

app/features/UserRoles/DeleteUser/DeleteUser.tsx

@@ -2,15 +2,15 @@
 
 import React from "react";
 import toast from "react-hot-toast";
-import Modal from "@/app/components/Modal/Modal";
+import { useRouter } from "next/navigation";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch } from "@/app/redux/store";
 import { deleteUser, clearError } from "@/app/redux/user/userSlice";
 import { IUser } from "../../Pages/Admin/Users/interfaces";
+import Modal from "@/app/components/Modal/Modal";
 import Spinner from "@/app/components/Spinner/Spinner";
 import { RootState } from "@/app/redux/store";
-
+import { selectUser } from "@/app/redux/auth/selectors";
-import { useRouter } from "next/navigation";
 import "./DeleteUser.scss";
 
 interface DeleteUserProps {
@@ -23,8 +23,10 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
   const dispatch = useDispatch<AppDispatch>();
   const router = useRouter();
   const { status, error } = useSelector((state: RootState) => state.user);
+  const currentUser = useSelector(selectUser);
 
   const loading = status === "loading";
+  const isSelfDeletion = currentUser?.id === user?.id;
 
   const handleDelete = async () => {
     if (!user?.id) {
@@ -32,6 +34,11 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
       return;
     }
 
+    if (isSelfDeletion) {
+      toast.error("You cannot delete your own account");
+      return;
+    }
+
     try {
       const resultAction = await dispatch(deleteUser(user.id));
 
@@ -60,10 +67,6 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
     }
   };
 
-  if (!user) {
-    return null;
-  }
-
   return (
     <Modal open={open} onClose={handleClose} title="Delete User">
       <div className="delete-user__content">
@@ -74,22 +77,24 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
           </p>
         </div>
 
-        <div className="delete-user__user-info">
+        {user && (
-          <div className="delete-user__row">
+          <div className="delete-user__user-info">
-            <label className="delete-user__label">Username</label>
+            <div className="delete-user__row">
-            <div className="delete-user__value">{user.username}</div>
+              <label className="delete-user__label">Username</label>
-          </div>
+              <div className="delete-user__value">{user.username}</div>
-          <div className="delete-user__row">
+            </div>
-            <label className="delete-user__label">Name</label>
+            <div className="delete-user__row">
-            <div className="delete-user__value">
+              <label className="delete-user__label">Name</label>
-              {user.first_name} {user.last_name}
+              <div className="delete-user__value">
+                {user.first_name} {user.last_name}
+              </div>
+            </div>
+            <div className="delete-user__row">
+              <label className="delete-user__label">Email</label>
+              <div className="delete-user__value">{user.email}</div>
             </div>
           </div>
-          <div className="delete-user__row">
+        )}
-            <label className="delete-user__label">Email</label>
-            <div className="delete-user__value">{user.email}</div>
-          </div>
-        </div>
 
         {error && (
           <div className="delete-user__error">
@@ -109,7 +114,7 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
           <button
             type="button"
             onClick={handleDelete}
-            disabled={loading}
+            disabled={loading || isSelfDeletion}
             className="delete-user__button delete-user__button--delete"
           >
             {loading ? (

app/features/UserRoles/userRoleCard.tsx

@@ -150,7 +150,7 @@ export default function UserRoleCard({ user }: Props) {
         >
           {isEditing && <EditUser user={user} />}
         </div>
-        {openDeleteUser && (
+        {openDeleteUser && user && (
           <DeleteUser
             user={user}
             open={openDeleteUser}

app/services/constants.ts

@@ -1,5 +1,6 @@
 export const AUDIT_CACHE_TAG = "audits";
-export const REVALIDATE_SECONDS = 60;
+export const USERS_CACHE_TAG = "users";
+export const REVALIDATE_SECONDS = 100;
 
 export const BE_BASE_URL = process.env.BE_BASE_URL || "";
 export const AUTH_COOKIE_NAME = "auth_token";

app/services/users.ts

@@ -0,0 +1,45 @@
+import { cookies } from "next/headers";
+
+import { IUser } from "@/app/features/Pages/Admin/Users/interfaces";
+import {
+  AUTH_COOKIE_NAME,
+  BE_BASE_URL,
+  REVALIDATE_SECONDS,
+  USERS_CACHE_TAG,
+} from "./constants";
+
+export async function fetchUsers(): Promise<IUser[]> {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;
+
+  if (!token) {
+    throw new Error("Missing auth token");
+  }
+
+  const backendUrl = `${BE_BASE_URL}/api/v1/users`;
+
+  const response = await fetch(backendUrl, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    next: {
+      revalidate: REVALIDATE_SECONDS,
+      tags: [USERS_CACHE_TAG],
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response
+      .json()
+      .catch(() => ({ message: "Failed to fetch users" }));
+    throw new Error(errorData?.message || "Failed to fetch users");
+  }
+
+  const data = await response.json();
+
+  const users = Array.isArray(data) ? data : data.users || data.data || [];
+
+  return users;
+}