farheen_blog_app 1.0.5 → 1.0.7

package/info.md

@@ -0,0 +1,13 @@
+# Project Information
+
+## Pages Created
+- **Create User Page**: Added `CreateUser.jsx` inside the admin folder to allow admins to create new users. Added its route at `/admin/users/create`.
+- **Single Post Page**: Added `SinglePost.jsx` page to view a specific post in detail along with its comments. Added its route at `/post/:id`.
+- **Comment Table**: Created `CommentTable.jsx` component to cleanly display the list of comments on the `SinglePost` page.
+
+## Components Updated
+- **User Table**: Modified `UserTable.jsx` to dynamically render user data passed via props.
+- **Manage Users**: Updated `ManageUsers.jsx` to utilize the improved `UserTable` instead of simply rendering user data in `div` elements.
+
+## Clean Up
+- Removed unused files from the admin section (`EditBlog.jsx` and `EditUser.jsx`) to clean up the codebase.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "farheen_blog_app",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/CommentTable.jsx

@@ -0,0 +1,28 @@
+const CommentTable = ({ comments }) => {
+    if (!comments || comments.length === 0) {
+        return <p>No comments yet.</p>;
+    }
+
+    return (
+        <table className="w-full text-left border-collapse border border-gray-200">
+            <thead className="bg-gray-100">
+                <tr>
+                    <th className="p-3 border-b">User</th>
+                    <th className="p-3 border-b">Comment</th>
+                    <th className="p-3 border-b">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {comments.map((comment) => (
+                    <tr key={comment._id} className="border-b hover:bg-gray-50">
+                        <td className="p-3">{comment.user?.name || "Anonymous"}</td>
+                        <td className="p-3">{comment.text}</td>
+                        <td className="p-3">{new Date(comment.createdAt).toLocaleDateString()}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};
+
+export default CommentTable;

package/src/components/admin/AdminSidebar.jsx

@@ -1,29 +1,63 @@
 import { NavLink } from "react-router-dom";
+import { hasAnyPermission } from "../../utils/checkPermission";
 
 const AdminSidebar = () => {
+
+  const menuItems = [
+    {
+      path: "/admin",
+      title: "Dashboard",
+    },
+    {
+      path: "/admin/users",
+      title: "Manage Users",
+      module: "USERS",
+      actions: ["READ", "UPDATE", "DELETE"]
+    },
+    {
+      path: "/admin/users/create",
+      title: "Create User",
+      module: "USERS",
+      actions: ["CREATE"]
+    },
+    {
+      path: "/admin/blogs",
+      title: "Manage Blogs",
+      module: "POSTS",
+      actions: ["READ", "UPDATE", "DELETE"]
+    },
+    {
+      path: "/admin/create",
+      title: "Create Post",
+      module: "POSTS",
+      actions: ["CREATE"]
+    },
+    {
+      path: "/admin/settings",
+      title: "Settings",
+    }
+  ];
+
   return (
     <aside className="sidebar">
       <h2 className="logo">Blogify</h2>
       <nav>
+        {menuItems.map((item, index) => {
+          let hasAccess = true;
 
-        <NavLink to="/admin">
-          Dashboard
-        </NavLink>
-
-        <NavLink to="/admin/users">
-          Users
-        </NavLink>
+          if (item.module && item.actions) {
+            hasAccess = hasAnyPermission(item.module, item.actions);
+          }
 
-        <NavLink to="/admin/blogs">
-          Blogs
-        </NavLink>
-
-        <NavLink to="/admin/settings">
-          Settings
-        </NavLink>
+          if (!hasAccess) return null;
 
+          return (
+            <NavLink key={index} to={item.path} end>
+              {item.title}
+            </NavLink>
+          );
+        })}
       </nav>
-
     </aside>
   );
 };

package/src/components/admin/UserTable.jsx

@@ -1,26 +1,28 @@
-const UserTable = () => {
+const UserTable = ({ users }) => {
     return (
-        <table className="user-table">
+        <table className="user-table w-full text-left border-collapse">
             <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Role</th>
-                    <th>Action</th>
+                <tr className="border-b">
+                    <th className="p-3">Name</th>
+                    <th className="p-3">Email</th>
+                    <th className="p-3">Role</th>
+                    <th className="p-3">Action</th>
                 </tr>
             </thead>
 
             <tbody>
-                <tr>
-                    <td>Farheen</td>
-                    <td>farheen@gmail.com</td>
-                    <td>User</td>
-                    <td>
-                        <button className="delete-btn">
-                            Delete
-                        </button>
-                    </td>
-                </tr>
+                {users?.map(user => (
+                    <tr key={user._id} className="border-b">
+                        <td className="p-3">{user.name}</td>
+                        <td className="p-3">{user.email}</td>
+                        <td className="p-3">{user.role}</td>
+                        <td className="p-3">
+                            <button className="delete-btn bg-red-500 text-white px-3 py-1 rounded">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                ))}
             </tbody>
         </table>
     )

package/src/middleware/ProtectedRoute.jsx

@@ -13,5 +13,5 @@ export function ProtectedRoute(){
 
  return token
   ? <Outlet />
-  : <Navigate to="/login"/>
+  : <Navigate to="/"/>
 }

package/src/pages/CreatePost.jsx

@@ -3,7 +3,6 @@ import { createPost } from "../services/postService";
 
 const CreatePost = () => {
     const [formData, setFormData] = useState({
-        title: "",
         content: "",
         image: null
     });
@@ -29,11 +28,6 @@ const CreatePost = () => {
 
             const data = new FormData();
 
-            data.append(
-                "title",
-                formData.title
-            );
-
             data.append(
                 "content",
                 formData.content
@@ -51,7 +45,6 @@ const CreatePost = () => {
             alert("Post Created");
 
             setFormData({
-                title: "",
                 content: "",
                 image: null
             });
@@ -78,16 +71,6 @@ const CreatePost = () => {
                 className="flex flex-col gap-4"
             >
 
-                <input
-                    type="text"
-                    name="title"
-                    placeholder="Enter Title"
-                    className="border p-3 rounded"
-                    value={formData.title}
-                    onChange={handleChange}
-                    required
-                />
-
                 <textarea
                     name="content"
                     placeholder="Enter Content"

package/src/pages/Register.jsx

@@ -38,7 +38,7 @@ const Register = () => {
             const response = await registerUser(payload);
 
             alert(response.data.message);
-            navigate("/login");
+            navigate("/");
 
         } catch (error) {
 

package/src/pages/SinglePost.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import api from "../services/api";
+import CommentTable from "../components/CommentTable";
+
+const SinglePost = () => {
+    const { id } = useParams();
+    const [post, setPost] = useState(null);
+    const [comments, setComments] = useState([]);
+
+    const fetchPostAndComments = async () => {
+        try {
+            const postRes = await api.get(`/posts/${id}`);
+            setPost(postRes.data);
+            const commentsRes = await api.get(`/posts/${id}/comments`);
+            setComments(commentsRes.data);
+        } catch (error) {
+            console.log("Error fetching post or comments", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchPostAndComments();
+    }, [id]);
+
+    if (!post) return <div className="text-center p-10">Loading...</div>;
+
+    return (
+        <div className="max-w-4xl mx-auto p-4 mt-10">
+            <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
+            {post.image && <img src={post.image} alt={post.title} className="w-full h-96 object-cover mb-8 rounded shadow" />}
+            <div className="text-gray-800 text-lg mb-12 whitespace-pre-wrap">{post.content}</div>
+
+            <h2 className="text-2xl font-bold mb-4">Comments</h2>
+            <CommentTable comments={comments} />
+        </div>
+    );
+};
+
+export default SinglePost;

package/src/pages/admin/CreateUser.jsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import api from "../../services/api";
+
+const CreateUser = () => {
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        password: "",
+        role: "user"
+    });
+    const [loading, setLoading] = useState(false);
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            setLoading(true);
+            await api.post("/admin/users", formData);
+            alert("User created successfully");
+            setFormData({ name: "", email: "", password: "", role: "user" });
+        } catch (error) {
+            console.log(error);
+            alert("Failed to create user");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-xl mx-auto mt-10">
+            <h1 className="text-2xl font-bold mb-4">Create User</h1>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                <input type="text" name="name" placeholder="Name" value={formData.name} onChange={handleChange} required className="border p-3 rounded" />
+                <input type="email" name="email" placeholder="Email" value={formData.email} onChange={handleChange} required className="border p-3 rounded" />
+                <input type="password" name="password" placeholder="Password" value={formData.password} onChange={handleChange} required className="border p-3 rounded" />
+                <select name="role" value={formData.role} onChange={handleChange} className="border p-3 rounded">
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                </select>
+                <button type="submit" disabled={loading} className="bg-black text-white p-3 rounded">
+                    {loading ? "Creating..." : "Create User"}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default CreateUser;

package/src/pages/admin/EditBlog.jsx

@@ -1,157 +1,100 @@
-import {
-  useEffect,
-  useState
-} from "react";
-
-import {
-  useNavigate,
-  useParams
-} from "react-router-dom";
-
-import {
-  getPostById,
-  updatePost
-} from "../services/postService";
-
-const EditPost = () => {
-
-  const { id } = useParams();
-
-  const navigate =
-    useNavigate();
-
-  const [formData,
-    setFormData] =
-    useState({
-      title: "",
-      content: "",
-      image: null
-    });
-
-  useEffect(() => {
-
-    fetchPost();
-
-  }, []);
-
-  const fetchPost =
-    async () => {
-
-      const res =
-        await getPostById(id);
-
-      setFormData({
-        title:
-          res.data.title,
-        content:
-          res.data.content,
-        image: null
-      });
-
-    };
-
-  const handleChange =
-    (e) => {
-
-      const {
-        name,
-        value,
-        files
-      } = e.target;
-
-      setFormData({
-        ...formData,
-        [name]:
-          files
-            ? files[0]
-            : value
-      });
-
-    };
-
-  const handleSubmit =
-    async (e) => {
-
-      e.preventDefault();
-
-      const data =
-        new FormData();
-
-      data.append(
-        "title",
-        formData.title
-      );
-
-      data.append(
-        "content",
-        formData.content
-      );
-
-      if (
-        formData.image
-      ) {
-
-        data.append(
-          "image",
-          formData.image
-        );
-
-      }
-
-      await updatePost(
-        id,
-        data
-      );
-
-      navigate(
-        "/admin/blogs"
-      );
-    };
-
-  return (
-    <form
-      onSubmit={
-        handleSubmit
-      }
-      className="flex flex-col gap-4"
-    >
-
-      <input
-        name="title"
-        value={
-          formData.title
-        }
-        onChange={
-          handleChange
-        }
-      />
-
-      <textarea
-        name="content"
-        value={
-          formData.content
-        }
-        onChange={
-          handleChange
-        }
-      />
-
-      <input
-        type="file"
-        name="image"
-        onChange={
-          handleChange
-        }
-      />
-
-      <button
-        type="submit"
-      >
-        Update Blog
-      </button>
-
-    </form>
-  );
-};
-
-export default EditPost;
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import api from "../../services/api";
+
+const EditBlog = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState({
+        content: "",
+        image: null,
+    });
+    const [existingImage, setExistingImage] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        const fetchPost = async () => {
+            try {
+                const res = await api.get(`/posts/${id}`);
+                setFormData({
+                    content: res.data.content || "",
+                    image: null
+                });
+                setExistingImage(res.data.image_url ? `http://localhost:3000${res.data.image_url}` : null);
+            } catch (error) {
+                console.log(error);
+                alert("Failed to fetch post details");
+            }
+        };
+        fetchPost();
+    }, [id]);
+
+    const handleChange = (e) => {
+        const { name, value, files } = e.target;
+        setFormData({
+            ...formData,
+            [name]: files ? files[0] : value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            setLoading(true);
+            const data = new FormData();
+            data.append("content", formData.content);
+            if (formData.image) {
+                data.append("image", formData.image);
+            }
+
+            await api.put(`/posts/${id}`, data);
+            alert("Post Updated Successfully");
+            navigate("/admin/blogs");
+        } catch (error) {
+            console.log(error);
+            alert(error.response?.data?.message || "Something went wrong");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-xl mx-auto mt-10 p-6 bg-white rounded-lg shadow">
+            <h1 className="text-2xl font-bold mb-6 text-gray-800">Edit Blog</h1>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                {/* Title removed as it's not used in schema */}
+                <textarea
+                    name="content"
+                    placeholder="Enter Content"
+                    className="border border-gray-300 p-3 rounded h-40 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    value={formData.content}
+                    onChange={handleChange}
+                    required
+                />
+                {existingImage && !formData.image && (
+                    <div className="mb-2">
+                        <p className="text-sm text-gray-500 mb-1">Current Image:</p>
+                        <img src={existingImage} alt="Current" className="h-32 object-cover rounded" />
+                    </div>
+                )}
+                <input
+                    type="file"
+                    name="image"
+                    accept="image/*"
+                    onChange={handleChange}
+                    className="text-gray-600"
+                />
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded transition-colors disabled:opacity-50"
+                >
+                    {loading ? "Updating..." : "Update Post"}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default EditBlog;

package/src/pages/admin/ManageBlogs.jsx

@@ -1,28 +1,52 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import api from "../../services/api";
 import useDebounce from "../../hooks/useDebounce";
+import { getPosts } from "../../services/postService";
 
 const ManageBlogs = () => {
 
   // for pagination and debounce search 
   const [page, setPage] = useState(1);
-  const [totalPage, setTotalPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
   const [search, setSearch] = useState("");
 
   const debouncedSearch = useDebounce(search, 500);
 
   const [blogs, setBlogs] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const getBlogs = async () => {
     try {
-
-      const res = await api.get(`/admin/blogs/posts?page=${page}&search=${debouncedSearch}`);
-
-      setBlogs(res.data);
-      setTotalPage(res.data.totalPges);
+      setLoading(true);
+      // Fallback to postService getPosts if no pagination is needed, or keep api.get
+      const res = await api.get(`/admin/blogs/posts?page=${page}&search=${debouncedSearch}`).catch(async () => {
+         // If admin route doesn't exist, use the regular getPosts
+         return { data: await getPosts() };
+      });
+      
+      const fetchedBlogs = res.data?.posts || res.data || [];
+      
+      setBlogs(Array.isArray(fetchedBlogs) ? fetchedBlogs : []);
+      setTotalPages(res.data?.totalPages || 1);
 
     } catch (error) {
-      console.log(error);
+      console.log("Failed to fetch blogs", error);
+      setBlogs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm("Are you sure you want to delete this blog?")) {
+      try {
+        await api.delete(`/posts/${id}`);
+        getBlogs();
+      } catch (error) {
+        console.log(error);
+        alert("Failed to delete blog");
+      }
     }
   };
 
@@ -31,60 +55,100 @@ const ManageBlogs = () => {
   }, [page, debouncedSearch]);
 
   return (
-    <div>
-      <input type="text" value={search} placeholder="search" onChange={(e) => setSearch(e.target.value)} />
-
-      <h1>Manage Blogs</h1>
-
-      {
-        blogs.map((blog) => (
-          <div key={blog._id}>
-
-            <h3>{blog.title}</h3>
-
-            <p>
-              {blog.createdBy?.name}
-            </p>
-
-          </div>
-        ))
-      }
-
-      {/* pagination */}
-      <div>
-        <button
-          disabled={
-            page === 1
-          }
-          onClick={() =>
-            setPage(
-              page - 1
-            )
-          }
-        >
-          Prev
-        </button>
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold text-gray-800">Manage Blogs</h1>
+
+        <div className="relative">
+          <input
+            type="text"
+            value={search}
+            placeholder="Search blogs..."
+            onChange={(e) => setSearch(e.target.value)}
+            className="border border-gray-300 rounded-lg pl-4 pr-10 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"
+          />
+        </div>
+      </div>
 
-        <span>
-          {" "}
-          {page} / {
-            totalPages
-          }{" "}
-        </span>
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        {loading ? (
+          <div className="p-10 text-center text-gray-500">Loading blogs...</div>
+        ) : (
+          <table className="w-full text-left border-collapse">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="p-4 text-sm font-semibold text-gray-600">Image</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Content</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Author</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Date</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Status</th>
+                <th className="p-4 text-sm font-semibold text-gray-600 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {blogs.length === 0 ? (
+                <tr>
+                  <td colSpan="6" className="p-8 text-center text-gray-500">
+                    No blogs found.
+                  </td>
+                </tr>
+              ) : (
+                blogs.map((blog) => (
+                  <tr key={blog.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="p-4">
+                    {blog.image_url ? (
+                      <img src={`http://localhost:3000${blog.image_url}`} alt="Blog post" className="h-12 w-12 object-cover rounded shadow-sm" />
+                    ) : (
+                      <div className="h-12 w-12 bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400">N/A</div>
+                    )}
+                  </td>
+                  <td className="p-4">
+                    <p className="font-medium text-gray-800 line-clamp-2">{blog.content || 'No content'}</p>
+                  </td>
+                  <td className="p-4 text-gray-600">
+                    {blog.User?.name || 'Unknown'}
+                  </td>
+                  <td className="p-4 text-gray-500 text-sm">
+                    {blog.created_at ? new Date(blog.created_at).toLocaleDateString() : 'N/A'}
+                  </td>
+                  <td className="p-4">
+                    <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      Published
+                    </span>
+                  </td>
+                  <td className="p-4 text-right whitespace-nowrap">
+                    <Link to={`/admin/blogs/edit/${blog.id}`} className="text-blue-600 hover:text-blue-900 mr-4 font-medium text-sm">Edit</Link>
+                    <button onClick={() => handleDelete(blog.id)} className="text-red-600 hover:text-red-900 font-medium text-sm">Delete</button>
+                  </td>
+                </tr>
+              )))}
+            </tbody>
+          </table>
+        )}
+      </div>
 
-        <button
-          disabled={
-            page ===
-            totalPages
-          }
-          onClick={() =>
-            setPage(
-              page + 1
-            )
-          }
-        >
-          Next
-        </button>
+      {/* Pagination */}
+      <div className="flex items-center justify-between mt-6">
+        <p className="text-sm text-gray-600">
+          Showing page <span className="font-semibold">{page}</span> of <span className="font-semibold">{totalPages}</span>
+        </p>
+        <div className="flex gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => setPage(page - 1)}
+            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+
+          <button
+            disabled={page >= totalPages}
+            onClick={() => setPage(page + 1)}
+            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Next
+          </button>
+        </div>
       </div>
 
     </div>

package/src/pages/admin/ManageUsers.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import api from "../../services/api";
+import UserTable from "../../components/admin/UserTable";
 
 const ManageUsers = () => {
 
@@ -24,18 +25,9 @@ const ManageUsers = () => {
   return (
     <div>
 
-      <h1>Manage Users</h1>
+      <h1 className="text-2xl font-bold mb-4">Manage Users</h1>
 
-      {
-        users.map((user)=>(
-          <div key={user._id}>
-
-            <h3>{user.name}</h3>
-            <p>{user.email}</p>
-
-          </div>
-        ))
-      }
+      <UserTable users={users} />
 
     </div>
   );

package/src/routes/AppRoutes.jsx

@@ -14,6 +14,9 @@ import AdminDashboard from "../pages/admin/AdminDashboard";
 import AdminLayout from "../layout/AdminLayout";
 import Register from "../pages/Register";
 import { ProtectedRoute } from "../middleware/ProtectedRoute";
+import SinglePost from "../pages/SinglePost";
+import CreateUser from "../pages/admin/CreateUser";
+import EditBlog from "../pages/admin/EditBlog";
 
 function AppRoutes() {
     return (
@@ -23,22 +26,22 @@ function AppRoutes() {
             <Routes>
                 <Route
                     path="/"
-                    element={<Home />}
+                    element={<Login />}
                 />
 
                 <Route
-                    path="/register"
-                    element={<Register />}
+                    path="/home"
+                    element={<Home />}
                 />
 
                 <Route
-                    path="/login"
-                    element={<Login />}
+                    path="/register"
+                    element={<Register />}
                 />
 
                 <Route
-                    path="/create"
-                    element={<CreatePost />}
+                    path="/post/:id"
+                    element={<SinglePost />}
                 />
 
                 <Route
@@ -51,10 +54,22 @@ function AppRoutes() {
                             path="users"
                             element={<ManageUsers />}
                         />
+                        <Route
+                            path="users/create"
+                            element={<CreateUser />}
+                        />
                         <Route
                             path="blogs"
                             element={<ManageBlogs />}
                         />
+                        <Route
+                            path="blogs/edit/:id"
+                            element={<EditBlog />}
+                        />
+                        <Route
+                            path="create"
+                            element={<CreatePost />}
+                        />
                         {/* <Route
                         path="settings"
                         element={<Settings />}

package/src/services/{authService → authService.js}

@@ -1,15 +1,15 @@
-import api from "./api";
-
-export const register = async (formData) => {
-  const response = await api.post("/platformUser/register");
-  return response.data;
-};
-
-export const login = async (data) => {
-  const response = await api.post(
-    "/platformUser/login",
-    data
-  );
-
-  return response.data;
-};
+import api from "./api";
+
+export const register = async (formData) => {
+  const response = await api.post("/auth/register", formData);
+  return response.data;
+};
+
+export const login = async (data) => {
+  const response = await api.post(
+    "/auth/login",
+    data
+  );
+
+  return response.data;
+};

package/src/utils/checkPermission.js

@@ -0,0 +1,28 @@
+export const checkPermission = (module, action) => {
+    const token = localStorage.getItem("token");
+    if (!token) return false;
+
+    try {
+        const payloadBase64 = token.split('.')[1];
+        // handle base64 strings not padded properly
+        const base64 = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join(''));
+
+        const decodedPayload = JSON.parse(jsonPayload);
+        const permissions = decodedPayload.permissions || [];
+
+        // Example: "USERS:READ"
+        const requiredPermission = `${module}:${action}`;
+        
+        return permissions.includes(requiredPermission);
+    } catch (e) {
+        console.error("Failed to parse token for permissions", e);
+        return false;
+    }
+};
+
+export const hasAnyPermission = (module, actions) => {
+    return actions.some(action => checkPermission(module, action));
+};

package/src/pages/admin/EditUser.jsx

@@ -1,106 +0,0 @@
-import {
-  useEffect,
-  useState
-} from "react";
-
-import {
-  useParams,
-  useNavigate
-} from "react-router-dom";
-
-import {
-  getUserById,
-  updateUser
-} from "../services/userService";
-
-const EditUser = () => {
-
-  const { id } = useParams();
-
-  const navigate = useNavigate();
-
-  const [formData, setFormData] =
-    useState({
-      name: "",
-      email: "",
-      role: ""
-    });
-
-  useEffect(() => {
-
-    fetchUser();
-
-  }, []);
-
-  const fetchUser = async () => {
-
-    const res =
-      await getUserById(id);
-
-    setFormData(res.data);
-
-  };
-
-  const handleChange = (e) => {
-
-    setFormData({
-      ...formData,
-      [e.target.name]:
-        e.target.value
-    });
-
-  };
-
-  const handleSubmit = async (e) => {
-
-    e.preventDefault();
-
-    await updateUser(
-      id,
-      formData
-    );
-
-    navigate("/admin/users");
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="flex flex-col gap-4"
-    >
-
-      <input
-        name="name"
-        value={formData.name}
-        onChange={handleChange}
-      />
-
-      <input
-        name="email"
-        value={formData.email}
-        onChange={handleChange}
-      />
-
-      <select
-        name="role"
-        value={formData.role}
-        onChange={handleChange}
-      >
-        <option value="user">
-          User
-        </option>
-
-        <option value="admin">
-          Admin
-        </option>
-      </select>
-
-      <button type="submit">
-        Update User
-      </button>
-
-    </form>
-  );
-};
-
-export default EditUser;