TailAdmin React Dashboard Customization — User Management Page Setup

Hello guys, how are you? Welcome back to my blog therichpost.com. Today in this post I will show you TailAdmin React Dashboard Customization — User Management Page Setup.

Here are the two videos in first we will do dashboard installation and in second we will do customization:

For react js new comers, please check the below links:

1. Reactjs Tutorials
2. Nextjs
3. Bootstrap 5
4. React Free Ecommerce Templates
5. React Free Admins

Guys here is the code snippet and please use carefully:

1.Guys very first we need to create UserManagement folder inside src/pages folder and the create index.tsx file inside UserManagement folder and add below code inside it:

import  { useState, ChangeEvent, FormEvent } from "react";
import PageMeta from "../../components/common/PageMeta";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

export default function UserManagement() {
  const [users, setUsers] = useState<User[]>([
    { id: 1, name: "Ajay Sharma", email: "ajay@example.com", role: "Admin" },
    { id: 2, name: "John Doe", email: "john@example.com", role: "Editor" },
  ]);

  const [newUser, setNewUser] = useState<Omit<User, "id">>({
    name: "",
    email: "",
    role: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setNewUser({ ...newUser, [e.target.name]: e.target.value });
  };

  const handleAddUser = (e: FormEvent) => {
    e.preventDefault();
    if (newUser.name && newUser.email && newUser.role) {
      setUsers([...users, { id: users.length + 1, ...newUser }]);
      setNewUser({ name: "", email: "", role: "" });
    }
  };

  return (
    <>
      <PageMeta
        title="User Management | TailAdmin - React Dashboard Template"
        description="Manage and view users in TailAdmin React Dashboard Template"
      />

      <div className="grid grid-cols-12 gap-4 md:gap-6">
        <div className="col-span-12">
          <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">
            User Management
          </h1>

          {/* Add User Form */}
          <form
            onSubmit={handleAddUser}
            className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6"
          >
            <h2 className="text-lg font-semibold mb-4 dark:text-gray-100">
              Add New User
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <input
                type="text"
                name="name"
                placeholder="Name"
                value={newUser.name}
                onChange={handleChange}
                className="border p-2 rounded dark:bg-gray-700 dark:text-white"
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                value={newUser.email}
                onChange={handleChange}
                className="border p-2 rounded dark:bg-gray-700 dark:text-white"
              />
              <input
                type="text"
                name="role"
                placeholder="Role"
                value={newUser.role}
                onChange={handleChange}
                className="border p-2 rounded dark:bg-gray-700 dark:text-white"
              />
            </div>
            <button
              type="submit"
              className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
            >
              Add User
            </button>
          </form>

          {/* User Table */}
          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <h2 className="text-lg font-semibold mb-4 dark:text-gray-100">
              User List
            </h2>
            <table className="min-w-full table-auto">
              <thead>
                <tr className="text-left text-gray-600 dark:text-gray-300 border-b">
                  <th className="py-2 px-4">#</th>
                  <th className="py-2 px-4">Name</th>
                  <th className="py-2 px-4">Email</th>
                  <th className="py-2 px-4">Role</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr
                    key={user.id}
                    className="border-b hover:bg-gray-50 dark:hover:bg-gray-700"
                  >
                    <td className="py-2 px-4">{user.id}</td>
                    <td className="py-2 px-4">{user.name}</td>
                    <td className="py-2 px-4">{user.email}</td>
                    <td className="py-2 px-4">{user.role}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

2. Add route in src/App.tsx:

import UserManagement from "./pages/UserManagement";
export default function App() {
  return (
    <>
      <Router>
        <ScrollToTop />
        <Routes>
          {/* Dashboard Layout */}
          <Route element={<AppLayout />}>
            <Route index path="/" element={<Home />} />

            {/* Others Page */}
            <Route path="/profile" element={<UserProfiles />} />
            <Route path="/calendar" element={<Calendar />} />
            <Route path="/blank" element={<Blank />} />

            {/*User Management */}
            <Route path="/users" element={<UserManagement />} />
....

3.Guys in the last we need to show nav link inside sidebar so we need to add below code inside src/layout/AppSidebar.tsx file:

...
 {
    icon: <UserCircleIcon />,
    name: "User Management",
    path: "/users",
  },

This is it guys and if you will have any kind of query then feel free to contact me.

Ajay

Thanks