// import { Fragment } from 'react'; // import { Link, useNavigate } from 'react-router-dom'; // import { DataTable, DataTableSortStatus } from 'mantine-datatable'; // import { useEffect, useState } from 'react'; // import Tippy from '@tippyjs/react'; // import 'tippy.js/dist/tippy.css'; // import sortBy from 'lodash/sortBy'; // import { useDispatch, useSelector } from 'react-redux'; // import { IRootState } from '../../store'; // import { setPageTitle } from '../../store/themeConfigSlice'; // import Swal from 'sweetalert2'; // import { showMessage } from '../../general'; // import { deleteUser, updatePassword, viewUser } from '../../API'; // import { Modal } from '@mantine/core'; // import { Dialog, Transition } from '@headlessui/react'; // import { hasAccess } from '../../../../../utils/hasAccess'; // const UserManagement = () => { // const dispatch = useDispatch(); // const navigate = useNavigate(); // const PAGE_SIZES = [10, 20, 30, 50, 100]; // const [page, setPage] = useState(1); // const [pageSize, setPageSize] = useState(PAGE_SIZES[0]); // const [initialRecords, setInitialRecords] = useState([]); // const [recordsData, setRecordsData] = useState([]); // const [totalRecords, setTotalRecords] = useState(0); // const [search, setSearch] = useState(''); // const [sortStatus, setSortStatus] = useState({ columnAccessor: 'name', direction: 'asc' }); // const [loading, setLoading] = useState(false); // const [changePasswordModalOpen, setChangePasswordModalOpen] = useState(false); // const [selectedUser, setSelectedUser] = useState(null); // const [showPassword, setShowPassword] = useState(false); // const [passwordForm, setPasswordForm] = useState({ newPassword: '', confirmPassword: '' }); // const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl'; // const permissions = JSON.parse(localStorage.getItem("permissions") || "[]"); // const userType = localStorage.getItem('userType') // // console.log("User Permissons", permissions) // const fetchUsers = async () => { // setLoading(true); // try { // const response = await viewUser() // console.log('fetch user response ', response.data) // if (response.status == true) { // const formatted = response.data.map((user: any, i: number) => ({ // id: i + 1, // _id: user._id, // name: capitalize(user.name), // email: user.email, // role: capitalize(user.role), // createdAt: user.created_at, // convert snake_case to camelCase // })); // setInitialRecords(formatted) // setTotalRecords(formatted.length) // } // } catch (err) { // console.error(err); // } finally { // setLoading(false); // } // }; // useEffect(() => { // dispatch(setPageTitle('User Management')); // fetchUsers(); // }, []); // useEffect(() => setPage(1), [pageSize]); // useEffect(() => { // let sorted = sortBy(initialRecords, sortStatus.columnAccessor); // sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted; // const filtered = sorted.filter(item => // (item.name || '').toLowerCase().includes(search.toLowerCase()) || // (item.email || '').toLowerCase().includes(search.toLowerCase()) || // (item.role || '').toLowerCase().includes(search.toLowerCase()) || // (item.status || '').toLowerCase().includes(search.toLowerCase()) // ); // const from = (page - 1) * pageSize; // const to = from + pageSize; // setRecordsData(filtered.slice(from, to)); // setTotalRecords(filtered.length); // }, [page, pageSize, search, sortStatus, initialRecords]); // const deleteUserData = async (userId: string) => { // try { // const result = await Swal.fire({ // title: 'Are you sure?', // text: 'This role will be permanently deleted!', // icon: 'warning', // showCancelButton: true, // confirmButtonColor: '#d33', // cancelButtonColor: '#3085d6', // confirmButtonText: 'Yes, delete it!', // }); // if (result.isConfirmed) { // setLoading(true); // const data = await deleteUser(userId) // if (data.status == true) { // Swal.fire({ // title: 'User Deleted!', // text: `${data.message}`, // icon: 'success', // confirmButtonText: 'OK' // }); // fetchUsers() // } // } // } catch (error) { // Swal.fire({ // title: 'Error!', // text: `${error.message}`, // icon: 'error', // confirmButtonText: 'OK' // }); // } // }; // const handlePasswordFormChange = (e: React.ChangeEvent) => { // const { name, value } = e.target; // setPasswordForm((prev) => ({ ...prev, [name]: value })); // }; // const handlePasswordModal = (row) => { // console.log("passoword row", row) // setSelectedUser(row); // or row._id, depending on how you're handling user // setChangePasswordModalOpen(true); // } // const submitUpdatePassoerd = async () => { // try { // const payload = { // id: selectedUser._id, // password: passwordForm.newPassword // } // const resposne = await updatePassword(payload) // if (resposne.status == true) { // Swal.fire({ // title: 'Password Updated!', // text: `${resposne.message}`, // icon: 'success', // confirmButtonText: 'OK' // }); // } // } catch (error) { // console.log('error while update password', error) // Swal.fire({ // title: 'Error!', // text: `${error.message}`, // icon: 'error', // confirmButtonText: 'OK' // }) // } // } // return ( //
//
// {hasAccess(permissions, "Users", "add") && ( // // Add User // // )} //
//
//
//
Users
//
// setSearch(e.target.value)} // /> //
//
// {loading ? ( //
//
//
// ) : ( //
// new Date(createdAt).toLocaleString() // }, // { // accessor: 'action', // title: 'Action', // titleClassName: '!text-center', // render: (row) => ( //
// // // // // // // // // { // hasAccess(permissions, "Users", "edit") && ( // // // // // // // // ) // } // { // hasAccess(permissions, "Users", "delete") && ( // // deleteUserData(row._id)}> // // // // ) // } // { // userType == 'admin' && ( // // ) // } //
// ), // }, // ]} // totalRecords={totalRecords} // recordsPerPage={pageSize} // page={page} // onPageChange={setPage} // recordsPerPageOptions={PAGE_SIZES} // onRecordsPerPageChange={setPageSize} // sortStatus={sortStatus} // onSortStatusChange={setSortStatus} // minHeight={200} // paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`} // /> //
// )} //
// // setChangePasswordModalOpen(false)}> // //
// //
//
// // // {/* Header */} //
//
Change Password for {selectedUser?.name || 'User'}
// //
// {/* Form Body */} //
//
//
//
// // //
//
// // // //
//
// // //
//
//
//
// // //
//
//
// //
// ); // }; // function capitalize(text: string): string { // return text ? text.charAt(0).toUpperCase() + text.slice(1).toLowerCase() : ''; // } // export default UserManagement; import { Fragment } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { DataTable, DataTableSortStatus } from 'mantine-datatable'; import { useEffect, useState } from 'react'; import Tippy from '@tippyjs/react'; import 'tippy.js/dist/tippy.css'; import sortBy from 'lodash/sortBy'; import { useDispatch, useSelector } from 'react-redux'; import { IRootState } from '../../store'; import { setPageTitle } from '../../store/themeConfigSlice'; import Swal from 'sweetalert2'; import { showMessage } from '../../general'; import { deleteUser, updatePassword, viewUser } from '../../API'; import { Dialog, Transition } from '@headlessui/react'; import { hasAccess } from '../../../../../utils/hasAccess'; import { FaEye, FaEdit, FaTrash, FaKey, FaUserPlus } from 'react-icons/fa'; import { HiEye, HiEyeOff } from 'react-icons/hi'; import { useLoader } from '../../store/LoaderProvider'; const UserManagement = () => { const dispatch = useDispatch(); const navigate = useNavigate(); const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode); const PAGE_SIZES = [10, 20, 30, 50, 100]; const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(PAGE_SIZES[0]); const [initialRecords, setInitialRecords] = useState([]); const [recordsData, setRecordsData] = useState([]); const [totalRecords, setTotalRecords] = useState(0); const [search, setSearch] = useState(''); const [sortStatus, setSortStatus] = useState({ columnAccessor: 'name', direction: 'asc' }); const [loading, setLoading] = useState(false); const [changePasswordModalOpen, setChangePasswordModalOpen] = useState(false); const [selectedUser, setSelectedUser] = useState(null); const [showPassword, setShowPassword] = useState(false); const [passwordForm, setPasswordForm] = useState({ newPassword: '', confirmPassword: '' }); const { showLoader, hideLoader } = useLoader(); const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl'; const permissions = JSON.parse(localStorage.getItem("permissions") || "[]"); const userType = localStorage.getItem('userType'); const fetchUsers = async () => { showLoader( ); try { const response = await viewUser(); if (response.status == true) { const formatted = response.data.map((user: any, i: number) => { // Handle timestamp conversion - if it's an integer timestamp (unix timestamp) let createdAtFormatted = 'N/A'; if (user.created_at) { // If it's already an integer (unix timestamp in seconds) if (typeof user.created_at === 'number') { createdAtFormatted = new Date(user.created_at * 1000).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } // If it's still a MongoDB date object or string else if (typeof user.created_at === 'object' && user.created_at.$date) { createdAtFormatted = new Date(user.created_at.$date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } // If it's a string date else if (typeof user.created_at === 'string') { createdAtFormatted = new Date(user.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } } return { id: i + 1, _id: user._id, name: capitalize(user.name), email: user.email, role: capitalize(user.role), createdAt: createdAtFormatted, createdAtRaw: user.created_at // Keep raw for sorting }; }); setInitialRecords(formatted); setTotalRecords(formatted.length); } } catch (err) { console.error(err); } finally { hideLoader( ); } }; useEffect(() => { dispatch(setPageTitle('User Management')); fetchUsers(); }, []); useEffect(() => setPage(1), [pageSize]); useEffect(() => { let sorted = sortBy(initialRecords, sortStatus.columnAccessor); sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted; const filtered = sorted.filter(item => (item.name || '').toLowerCase().includes(search.toLowerCase()) || (item.email || '').toLowerCase().includes(search.toLowerCase()) || (item.role || '').toLowerCase().includes(search.toLowerCase()) ); const from = (page - 1) * pageSize; const to = from + pageSize; setRecordsData(filtered.slice(from, to)); setTotalRecords(filtered.length); }, [page, pageSize, search, sortStatus, initialRecords]); const deleteUserData = async (userId: string) => { try { const result = await Swal.fire({ title: 'Are you sure?', text: 'This user will be permanently deleted!', icon: 'warning', showCancelButton: true, confirmButtonColor: '#e7515a', cancelButtonColor: '#2196f3', confirmButtonText: 'Yes, delete it!', customClass: { confirmButton: 'bg-[#5c4d2f] text-white px-4 py-2 rounded hover:bg-[#4a3e27]', cancelButton: 'px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors', actions: 'space-x-3' // adds gap between confirm & cancel buttons }, buttonsStyling: false }); if (result.isConfirmed) { showLoader( ); const data = await deleteUser(userId); if (data.status == true) { showMessage(data.message, data.status); fetchUsers(); } } } catch (error) { showMessage(error.message, 'error'); } finally { hideLoader( ); } }; const handlePasswordFormChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setPasswordForm((prev) => ({ ...prev, [name]: value })); }; const handlePasswordModal = (row: any) => { setSelectedUser(row); setChangePasswordModalOpen(true); }; const submitUpdatePassword = async () => { try { if (passwordForm.newPassword !== passwordForm.confirmPassword) { showMessage("Passwords don't match", 'error'); return; } const payload = { id: selectedUser._id, password: passwordForm.newPassword }; const response = await updatePassword(payload); if (response.status == true) { showMessage(response.message, response.status); setChangePasswordModalOpen(false); setPasswordForm({ newPassword: '', confirmPassword: '' }); } } catch (error) { showMessage(error.message, 'error'); } }; return (
User Management
{/*

Manage all system users and permissions

*/}
setSearch(e.target.value)} />
{hasAccess(permissions, "Users", "add") && ( Add User )}
{loading ? (
) : (
( {name} ) }, { accessor: 'email', title: 'Email', sortable: true, render: ({ email }) => ( {email} ) }, { accessor: 'role', title: 'Role', sortable: true, render: ({ role }) => ( {role} ) }, { accessor: 'createdAt', title: 'Created At', sortable: true, render: ({ createdAt }) => ( {createdAt} ) }, { accessor: 'action', title: 'Actions', titleClassName: '!text-center', render: (row) => (
{hasAccess(permissions, "Users", "edit") && ( )} {hasAccess(permissions, "Users", "delete") && ( )} {userType == 'admin' && ( )}
), }, ]} totalRecords={totalRecords} recordsPerPage={pageSize} page={page} onPageChange={setPage} recordsPerPageOptions={PAGE_SIZES} onRecordsPerPageChange={setPageSize} sortStatus={sortStatus} onSortStatusChange={setSortStatus} minHeight={200} rowClassName={(record) => `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}` } paginationText={({ from, to, totalRecords }) => ( Showing {from} to {to} of {totalRecords} entries )} />
)}
{/* Change Password Modal */} setChangePasswordModalOpen(false)}>
Change Password for {selectedUser?.name || 'User'}
{ e.preventDefault(); submitUpdatePassword(); }}>
); }; // function capitalize(text: string): string { // return text ? text.charAt(0).toUpperCase() + text.slice(1).toLowerCase() : ''; // } function capitalize(text: string): string { if (!text) return ''; return text .split(' ') // Split by spaces .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(' '); // Join back into a single string } export default UserManagement;