User Management Dashboard - Copy this React, Tailwind Component to your project
"use client"; import { useState, useEffect } from "react"; import axios from "axios"; const FormsTable = () => { const [users, setUsers] = useState([]); const [searchMUJid, setSearchMUJid] = useState(""); const [debouncedSearchMUJid, setDebouncedSearchMUJid] = useState(""); const [selectedUserForms, setSelectedUserForms] = useState(null); const [isGlideOutOpen, setIsGlideOutOpen] = useState(false); useEffect(() => { const handler = setTimeout(() => { setDebouncedSearchMUJid(searchMUJid); }, 300); // Debounce delay of 300ms return () => { clearTimeout(handler); }; }, [searchMUJid]); useEffect(() => { fetchUsers(debouncedSearchMUJid); }, [debouncedSearchMUJid]); const fetchUsers = async (MUJid) => { try { const response = await axios.get(`/api/admin/manageUser`, { params: { MUJid }, }); setUsers(response.data.users || []); } catch (error) { console.error("Error fetching users:", error); } }; const handleSearchChange = (e) => { setSearchMUJid(e.target.value); }; const handleRowClick = async (mujid) => { try { const response = await axios.get(`/api/form`, { params: { mujid }, }); setSelectedUserForms(response.data.forms); setIsGlideOutOpen(true); } catch (error) { console.error("Error fetching form details:", error); } }; const usersWithFormFilled = users.filter((user) => user.isFormFilled); const usersWithoutFormFilled = users.filter((user) => !user.isFormFilled); return ( <div className="p 4"> <div className="flex mb 4"> <input type="text" placeholder="Search by MUJid" value={searchMUJid} onChange={handleSearchChange} className="border border gray 300 p 2 rounded l md" /> </div> <h2 className="text xl font bold mb 4">Users with Form Filled</h2> <table className="min w full bg white mb 4"> <thead> <tr> <th className="py 2 px 4 border b">MUJid</th> <th className="py 2 px 4 border b">Name</th> <th className="py 2 px 4 border b">Form Filled</th> </tr> </thead> <tbody> {usersWithFormFilled.map((user) => ( <tr key={user._id} className="cursor pointer" onClick={() => handleRowClick(user.mujid)}> <td className="py 2 px 4 border b">{user.mujid}</td> <td className="py 2 px 4 border b">{user.name}</td> <td className="py 2 px 4 border b">true</td> </tr> ))} </tbody> </table> <h2 className="text xl font bold mb 4">Users without Form Filled</h2> <table className="min w full bg white"> <thead> <tr> <th className="py 2 px 4 border b">MUJid</th> <th className="py 2 px 4 border b">Name</th> <th className="py 2 px 4 border b">Form Filled</th> </tr> </thead> <tbody> {usersWithoutFormFilled.map((user) => ( <tr key={user._id} className="cursor pointer"> <td className="py 2 px 4 border b">{user.mujid}</td> <td className="py 2 px 4 border b">{user.name}</td> <td className="py 2 px 4 border b">false</td> </tr> ))} </tbody> </table> {isGlideOutOpen && ( <div className="fixed inset 0 bg gray 600 bg opacity 50 flex justify end"> <div className="bg white w 1/3 h full p 4"> <button onClick={() => setIsGlideOutOpen(false)} className="mb 4"> Close </button> <h2 className="text xl font bold mb 4">Form Details</h2> {selectedUserForms ? ( <div> {selectedUserForms.map((form, index) => ( <div key={index} className="mb 4"> <p> <strong>mujId:</strong> {form.mujid} </p> <p> <strong>Name:</strong> {form.Name} </p> <p> <strong>Email:</strong> {form.email} </p> <p> <strong>All Selected Courses:</strong>{" "} {form.allSelectedCourses ? ( <ul> {Object.entries(form.allSelectedCourses).map( ([key, value], idx) => ( <li key={idx}> <strong className="text rose 800"> For Semester {key}: </strong> <ul> <li> <strong>Lab Courses:</strong>{" "} {value.labCourses} </li> <li> <strong>Theory Courses:</strong>{" "} {value.theoryCourses} </li> </ul> </li> ) )} </ul> ) : ( "N/A" )} </p> <p> <strong>Semester Term:</strong>{" "} {form.isEven ? "Even Term" : "Odd Term"} </p> </div> ))} </div> ) : ( <p>No form details available.</p> )} </div> </div> )} </div> ); }; export default FormsTable; make this pretty and dynamic also add animations using framer
