TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update, crud user done

Browse Source
This commit is contained in:
wayanrivan
2026-07-08 10:39:03 +07:00
parent bf8daa74fa
commit 9b5941956f
8 changed files with 201 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/demo2/navbar/NavbarMenu.tsx
View File

@ -52,7 +52,7 @@ const STATIC_MENU: MappedMenu[] = [
title: 'User Management', title: 'User Management',
path: '-', path: '-',
children: [ children: [
{ title: 'User List', path: COMING_SOON_PATH }, { title: 'User List', path: '/settings/user-management/manage-user' },
{ title: 'Group Role List', path: COMING_SOON_PATH }, { title: 'Group Role List', path: COMING_SOON_PATH },
{ title: 'Role List', path: COMING_SOON_PATH } { title: 'Role List', path: COMING_SOON_PATH }
] ]

4
src/pages/settings/user/manage-user/ManageUserPage.tsx
View File

@ -20,9 +20,9 @@ export default function ManageUserPage() {
<span className="text-sm hover:underline">Dashboard</span> <span className="text-sm hover:underline">Dashboard</span>
</Link> </Link>
<Link underline="none" color="inherit"> {/* <Link underline="none" color="inherit">
<span className="text-sm">Settings</span> <span className="text-sm">Settings</span>
</Link> </Link> */}
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">User Management</span> <span className="text-sm">User Management</span>

165
src/pages/settings/user/manage-user/blocks/AddDialog.tsx
View File

@ -41,8 +41,7 @@ import {
validateFormCreateUser validateFormCreateUser
} from './Types'; } from './Types';
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_USER = apiConfig.service_user;
const API_URL = apiConfig.service_dashboard;
type PasswordType = 'password' | 'retype_password'; type PasswordType = 'password' | 'retype_password';
@ -116,7 +115,7 @@ const AddDialog = () => {
setIsSubmitting(true); setIsSubmitting(true);
try { try {
const response = await PostData(`${API_URL}/user/create`, formField); const response = await PostData(`${API_URL_USER}/user/create`, formField);
if (response?.status) { if (response?.status) {
handleAddDialog(false); handleAddDialog(false);
@ -143,74 +142,74 @@ const AddDialog = () => {
[formField] [formField]
); );
const fetchRoles = useCallback(async () => { // const fetchRoles = useCallback(async () => {
const params = { // const params = {
limit: 100, // limit: 100,
page: 1, // page: 1,
with_deleted: false, // with_deleted: false,
order_field: 'name', // order_field: 'name',
order_direction: 'ASC', // order_direction: 'ASC',
filter: JSON.stringify({ // filter: JSON.stringify({
status: 'Y' // status: 'Y'
}) // })
}; // };
const response = await GetData(`${API_URL}/user_role/list`, params); // const response = await GetData(`${API_URL}/user_role/list`, params);
if (response?.status) { // if (response?.status) {
const roleList = response.data?.list || []; // const roleList = response.data?.list || [];
setRoles(roleList); // setRoles(roleList);
} else { // } else {
setRoles(() => []); // setRoles(() => []);
} // }
}, []); // }, []);
const getCustomerList = async (sorting: any, filterValue: string) => { // const getCustomerList = async (sorting: any, filterValue: string) => {
const filter: any = // const filter: any =
filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } }; // filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting; // sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting;
const query: any = { // const query: any = {
limit: 100, // limit: 100,
page: 1, // page: 1,
with_deleted: false, // with_deleted: false,
order_field: sorting[0].id, // order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC' // order_direction: sorting[0].desc ? 'DESC' : 'ASC'
}; // };
if (filter && Object.keys(filter).length > 0) { // if (filter && Object.keys(filter).length > 0) {
query.filter = JSON.stringify(filter); // query.filter = JSON.stringify(filter);
} // }
try { // try {
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query); // const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
if (response?.status) { // if (response?.status) {
setCustomers(response?.data.list); // setCustomers(response?.data.list);
} else { // } else {
toast.error(response?.message); // toast.error(response?.message);
} // }
} catch (error) { // } catch (error) {
toast.error('Failed to fetch customer list'); // toast.error('Failed to fetch customer list');
} finally { // } finally {
setIsLoading(false); // setIsLoading(false);
} // }
}; // };
const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => { // const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setIsLoading(true); // setIsLoading(true);
setSearchTerm(e.target.value); // setSearchTerm(e.target.value);
setSelectedCustomerName(e.target.value); // setSelectedCustomerName(e.target.value);
setDropdownOpen(true); // setDropdownOpen(true);
const timer = setTimeout(() => { // const timer = setTimeout(() => {
getCustomerList([{ id: 'fullname', desc: false }], e.target.value); // getCustomerList([{ id: 'fullname', desc: false }], e.target.value);
}, 500); // }, 500);
return () => clearTimeout(timer); // return () => clearTimeout(timer);
}; // };
const handleCustomerSelect = (customer: CustomerProps) => { // const handleCustomerSelect = (customer: CustomerProps) => {
setFormField({ ...formField, customerid: customer.id }); // setFormField({ ...formField, customerid: customer.id });
setSelectedCustomerName(customer.fullname); // setSelectedCustomerName(customer.fullname);
setDropdownOpen(false); // setDropdownOpen(false);
}; // };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -230,9 +229,9 @@ const AddDialog = () => {
.filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase())) .filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase()))
.slice(0, 10); .slice(0, 10);
useEffect(() => { // useEffect(() => {
fetchRoles(); // fetchRoles();
}, [fetchRoles]); // }, [fetchRoles]);
useEffect(() => { useEffect(() => {
const validation = validatePassword(formField.password, formField.retype_password); const validation = validatePassword(formField.password, formField.retype_password);
@ -248,20 +247,20 @@ const AddDialog = () => {
} }
}, [showAddDialog]); }, [showAddDialog]);
useEffect(() => { // useEffect(() => {
getCustomerList([{ id: 'created_at', desc: false }], ''); // getCustomerList([{ id: 'created_at', desc: false }], '');
const handleClickOutside = (event: any) => { // const handleClickOutside = (event: any) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { // if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setDropdownOpen(false); // setDropdownOpen(false);
} // }
}; // };
document.addEventListener('mousedown', handleClickOutside); // document.addEventListener('mousedown', handleClickOutside);
return () => { // return () => {
document.removeEventListener('mousedown', handleClickOutside); // document.removeEventListener('mousedown', handleClickOutside);
}; // };
}, []); // }, []);
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => { const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
event.preventDefault(); event.preventDefault();
@ -331,7 +330,7 @@ const AddDialog = () => {
</div> </div>
{/* Customer */} {/* Customer */}
<div className="flex gap-2.5"> {/* <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label> <label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<div className="grow flex flex-col" ref={dropdownRef}> <div className="grow flex flex-col" ref={dropdownRef}>
<Input <Input
@ -366,7 +365,7 @@ const AddDialog = () => {
<span className="text-red-500 text-xs mt-1">{errors.customerid}</span> <span className="text-red-500 text-xs mt-1">{errors.customerid}</span>
)} )}
</div> </div>
</div> </div> */}
{/* Email */} {/* Email */}
<div className="flex gap-2.5"> <div className="flex gap-2.5">
@ -387,7 +386,7 @@ const AddDialog = () => {
</div> </div>
{/* Role */} {/* Role */}
<div className="flex gap-2.5"> {/* <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Role</label> <label className="form-label flex items-center gap-1 max-w-56">Role</label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Select <Select
@ -414,7 +413,7 @@ const AddDialog = () => {
<span className="text-red-500 text-xs mt-1">{errors.id_role}</span> <span className="text-red-500 text-xs mt-1">{errors.id_role}</span>
)} )}
</div> </div>
</div> </div> */}
{/* Status */} {/* Status */}
<div className="flex gap-2.5"> <div className="flex gap-2.5">

2
src/pages/settings/user/manage-user/blocks/DeleteDialog.tsx
View File

@ -16,7 +16,7 @@ import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { EnforceSwitch } from '@/components/switch'; import { EnforceSwitch } from '@/components/switch';
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_user;
const DeleteDialog = () => { const DeleteDialog = () => {
const { showDeleteDialog, handleDeleteDialog, selectedUser } = useUserContext(); const { showDeleteDialog, handleDeleteDialog, selectedUser } = useUserContext();

140
src/pages/settings/user/manage-user/blocks/EditDialog.tsx
View File

@ -39,8 +39,8 @@ import {
validateFormCreateUser validateFormCreateUser
} from './Types'; } from './Types';
const API_URL_CUSTOMER = apiConfig.service_customer; // const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_user;
const EditDialog = () => { const EditDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
@ -109,59 +109,59 @@ const EditDialog = () => {
[selectedUser, formField] [selectedUser, formField]
); );
const doFetchUserRole = useCallback(async (sorting: any) => { // const doFetchUserRole = useCallback(async (sorting: any) => {
try { // try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; // sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/user_role/list`, { // const response = await GetData(`${API_URL}/user_role/list`, {
limit: 100, // limit: 100,
page: 1, // page: 1,
with_deleted: false, // with_deleted: false,
order_field: sorting[0].id, // order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' // order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
}); // });
setRoles(response?.data.list); // setRoles(response?.data.list);
} catch (error) { // } catch (error) {
console.error('Error fetching role', error); // console.error('Error fetching role', error);
} // }
}, []); // }, []);
const getCustomerList = async (sorting: any, filterValue: string) => { // const getCustomerList = async (sorting: any, filterValue: string) => {
const filter: any = // const filter: any =
filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } }; // filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting; // sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting;
const query: any = { // const query: any = {
limit: 100, // limit: 100,
page: 1, // page: 1,
with_deleted: false, // with_deleted: false,
order_field: sorting[0].id, // order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC' // order_direction: sorting[0].desc ? 'DESC' : 'ASC'
}; // };
if (filter && Object.keys(filter).length > 0) { // if (filter && Object.keys(filter).length > 0) {
query.filter = JSON.stringify(filter); // query.filter = JSON.stringify(filter);
} // }
try { // try {
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query); // const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
if (response?.status) { // if (response?.status) {
setCustomers(response?.data.list); // setCustomers(response?.data.list);
} else { // } else {
toast.error(response?.message); // toast.error(response?.message);
} // }
} catch (error) { // } catch (error) {
toast.error('Failed to fetch customer list'); // toast.error('Failed to fetch customer list');
} finally { // } finally {
setIsLoadingCustomer(false); // setIsLoadingCustomer(false);
} // }
}; // };
const doFetchUserData = useCallback(async (id: string) => { const doFetchUserData = useCallback(async (id: string) => {
setIsFetching(true); setIsFetching(true);
const response = await GetData(`${API_URL}/user/detail/${id}`, { id }); const response = await GetData(`${API_URL}/user/profile/${id}`, { id });
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
@ -169,9 +169,9 @@ const EditDialog = () => {
name: response.data.name, name: response.data.name,
username: response.data.username, username: response.data.username,
email: response.data.email, email: response.data.email,
id_role: response.data.idRole, // id_role: response.data.idRole,
status: response.data.status, status: response.data.status,
customerid: response.data.customer?.id || '' // customerid: response.data.customer?.id || ''
})); }));
} else { } else {
setFormField((prev) => ({ setFormField((prev) => ({
@ -179,30 +179,30 @@ const EditDialog = () => {
name: '', name: '',
username: '', username: '',
email: '', email: '',
id_role: '', // id_role: '',
status: '', status: '',
customerid: '' // customerid: ''
})); }));
} }
setIsFetching(false); setIsFetching(false);
}, []); }, []);
const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => { // const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setIsLoadingCustomer(true); // setIsLoadingCustomer(true);
setSearchTerm(e.target.value); // setSearchTerm(e.target.value);
setSelectedCustomerName(e.target.value); // setSelectedCustomerName(e.target.value);
setDropdownOpen(true); // setDropdownOpen(true);
const timer = setTimeout(() => { // const timer = setTimeout(() => {
getCustomerList([{ id: 'fullname', desc: false }], e.target.value); // getCustomerList([{ id: 'fullname', desc: false }], e.target.value);
}, 500); // }, 500);
return () => clearTimeout(timer); // return () => clearTimeout(timer);
}; // };
const handleCustomerSelect = (customer: CustomerProps) => { // const handleCustomerSelect = (customer: CustomerProps) => {
setFormField({ ...formField, customerid: customer.id }); // setFormField({ ...formField, customerid: customer.id });
setSelectedCustomerName(customer.fullname); // setSelectedCustomerName(customer.fullname);
setDropdownOpen(false); // setDropdownOpen(false);
}; // };
const filteredCustomer = customers const filteredCustomer = customers
.filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase())) .filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase()))
@ -216,8 +216,8 @@ const EditDialog = () => {
}, [showEditDialog]); }, [showEditDialog]);
useEffect(() => { useEffect(() => {
getCustomerList([{ id: 'created_at', desc: false }], ''); // getCustomerList([{ id: 'created_at', desc: false }], '');
doFetchUserRole([{ id: 'name', desc: false }]); // doFetchUserRole([{ id: 'name', desc: false }]);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -316,7 +316,7 @@ const EditDialog = () => {
</div> </div>
{/* Customer */} {/* Customer */}
<div className="flex gap-2.5"> {/* <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label> <label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<div className="grow flex flex-col" ref={dropdownRef}> <div className="grow flex flex-col" ref={dropdownRef}>
<Input <Input
@ -351,7 +351,7 @@ const EditDialog = () => {
<span className="text-red-500 text-xs mt-1">{errors.customerid}</span> <span className="text-red-500 text-xs mt-1">{errors.customerid}</span>
)} )}
</div> </div>
</div> </div> */}
{/* Email */} {/* Email */}
<div className="flex gap-2.5"> <div className="flex gap-2.5">
@ -374,7 +374,7 @@ const EditDialog = () => {
</div> </div>
{/* Role */} {/* Role */}
<div className="flex gap-2.5"> {/* <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Role</label> <label className="form-label flex items-center gap-1 max-w-56">Role</label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Select <Select
@ -401,7 +401,7 @@ const EditDialog = () => {
<span className="text-red-500 text-xs mt-1">{errors.id_role}</span> <span className="text-red-500 text-xs mt-1">{errors.id_role}</span>
)} )}
</div> </div>
</div> </div> */}
{/* Status */} {/* Status */}
<div className="flex gap-2.5"> <div className="flex gap-2.5">

14
src/pages/settings/user/manage-user/blocks/Types.ts
View File

@ -21,7 +21,7 @@ export interface CreateUserParams {
password: string; password: string;
retype_password: string; retype_password: string;
name: string; name: string;
id_role: string; // id_role: string;
status: string; status: string;
} }
@ -31,18 +31,18 @@ export const initialStateCreateUser: {
password: string; password: string;
retype_password: string; retype_password: string;
name: string; name: string;
id_role: string; // id_role: string;
status: string; status: string;
customerid: string; // customerid: string;
} = { } = {
email: '', email: '',
username: '', username: '',
password: '', password: '',
retype_password: '', retype_password: '',
name: '', name: '',
id_role: '', // id_role: '',
status: '', status: '',
customerid: '' // customerid: ''
}; };
export const validateFormCreateUser = ( export const validateFormCreateUser = (
@ -56,7 +56,7 @@ export const validateFormCreateUser = (
{ key: 'name', label: 'Name' }, { key: 'name', label: 'Name' },
{ key: 'username', label: 'Username' }, { key: 'username', label: 'Username' },
{ key: 'email', label: 'Email' }, { key: 'email', label: 'Email' },
{ key: 'id_role', label: 'Role' }, // { key: 'id_role', label: 'Role' },
{ key: 'status', label: 'Status' }, { key: 'status', label: 'Status' },
{ key: 'password', label: 'Password' }, { key: 'password', label: 'Password' },
{ key: 'retype_password', label: 'Retype Password' } { key: 'retype_password', label: 'Retype Password' }
@ -65,7 +65,7 @@ export const validateFormCreateUser = (
{ key: 'name', label: 'Name' }, { key: 'name', label: 'Name' },
{ key: 'username', label: 'Username' }, { key: 'username', label: 'Username' },
{ key: 'email', label: 'Email' }, { key: 'email', label: 'Email' },
{ key: 'id_role', label: 'Role' }, // { key: 'id_role', label: 'Role' },
{ key: 'status', label: 'Status' } { key: 'status', label: 'Status' }
]; ];

79
src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
View File

@ -35,10 +35,10 @@ interface SelectedUser {
name: string; name: string;
email: string; email: string;
username: string; username: string;
role: string; // role: string;
new_password: string; new_password: string;
check_new_password: string; check_new_password: string;
customer: string; // customer: string;
} }
const initialProps: ContextProps = { const initialProps: ContextProps = {
@ -57,7 +57,7 @@ const initialProps: ContextProps = {
const ManageUserContext = createContext<ContextProps>(initialProps); const ManageUserContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_user;
const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) => { const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) => {
/* state */ /* state */
@ -98,16 +98,16 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
enableSorting: true, enableSorting: true,
enableHiding: false enableHiding: false
}, },
{ // {
accessorFn: (row) => row.customer?.username, // accessorFn: (row) => row.customer?.username,
id: 'Users.customer', // id: 'Users.customer',
header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />, // header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
enableSorting: true, // enableSorting: true,
enableHiding: false, // enableHiding: false,
meta: { // meta: {
headerClassName: 'w-[300px]' // headerClassName: 'w-[300px]'
} // }
}, // },
{ {
accessorFn: (row) => row.email, accessorFn: (row) => row.email,
id: 'email', id: 'email',
@ -128,23 +128,23 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
headerClassName: 'w-[250px]' headerClassName: 'w-[250px]'
} }
}, },
{ // {
accessorFn: (row) => row.role.name, // accessorFn: (row) => row.role.name,
id: 'Users.role', // id: 'Users.role',
header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />, // header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />,
enableSorting: true, // enableSorting: true,
enableHiding: false, // enableHiding: false,
cell: (data: any) => { // cell: (data: any) => {
const { role } = data.row.original; // const { role } = data.row.original;
// console.log('role :', role); // // console.log('role :', role);
let html = <p className="text-danger italic">Unassigned</p>; // let html = <p className="text-danger italic">Unassigned</p>;
if (role && role.name) html = role.name; // if (role && role.name) html = role.name;
return html; // return html;
}, // },
meta: { // meta: {
headerClassName: 'w-[350px]' // headerClassName: 'w-[350px]'
} // }
}, // },
{ {
accessorFn: (row) => row.status, accessorFn: (row) => row.status,
id: 'status', id: 'status',
@ -192,8 +192,8 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
setSelectedUser(row.id); setSelectedUser(row.id);
}} }}
> >
<QrCode className="w-4 h-4 mr-2" /> {/* <QrCode className="w-4 h-4 mr-2" />
QR Code QR Code */}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => handleEditDialog(true, row.id)}> <DropdownMenuItem onClick={() => handleEditDialog(true, row.id)}>
<Pencil className="w-4 h-4 mr-2" /> <Pencil className="w-4 h-4 mr-2" />
@ -223,16 +223,16 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
// ➕ Tambahkan prefix ke field dari tabel Users // ➕ Tambahkan prefix ke field dari tabel Users
const mappedSorting = sorting.map((sort: any) => ({ const mappedSorting = sorting.map((sort: any) => ({
...sort, ...sort,
id: USER_TABLE_COLUMNS.includes(sort.id) ? `Users.${sort.id}` : sort.id id: USER_TABLE_COLUMNS.includes(sort.id) ? `${sort.id}` : sort.id
})); }));
const orderField = mappedSorting[0]?.id ?? 'Users.username'; const orderField = mappedSorting[0]?.id ?? 'username';
const orderDirection = mappedSorting[0]?.desc === false ? 'DESC' : 'ASC'; const orderDirection = mappedSorting[0]?.desc === false ? 'DESC' : 'ASC';
filter = filter =
filter.length == 0 filter.length == 0
? {} ? {}
: { 'Users.username': { like: `%${filter[0].value?.toLowerCase()}%` } }; : { 'username': { like: `%${filter[0].value?.toLowerCase()}%` } };
const response = await GetData(`${API_URL}/user/list`, { const response = await GetData(`${API_URL}/user/list`, {
limit: limit, limit: limit,
page: page + 1, page: page + 1,
@ -241,7 +241,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
order_direction: orderDirection, order_direction: orderDirection,
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
// console.log('response api:', response); console.log('response api:', response);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
}; };
@ -267,17 +267,12 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolBar />} toolbar={<ListToolBar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'Users.created_at', desc: false }]} sorting={[{ id: 'created_at', desc: false }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
doGetListData(pageIndex, pageSize, sorting, columnFilters) doGetListData(pageIndex, pageSize, sorting, columnFilters)
} }
> >
<Dialog open={showQr} onOpenChange={setShowQr}>
<DialogContent>
<GenerateQr idCustomer={selectedUser} />
</DialogContent>
</Dialog>
{children} {children}
</DataGridProvider> </DataGridProvider>
</ManageUserContext.Provider> </ManageUserContext.Provider>

2
src/routing/AppRoutingSetup.tsx
View File

@ -64,6 +64,7 @@ const AppRoutingSetup = (): ReactElement => {
<Route path="/" element={<DashboardHomePage />} /> <Route path="/" element={<DashboardHomePage />} />
<Route path="/account/home/user-profile" element={<AccountUserProfilePage />} /> <Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
<Route path="/coming-soon" element={<ComingSoonPage />} /> <Route path="/coming-soon" element={<ComingSoonPage />} />
<Route path="/settings/user-management/manage-user" element={<ManageUserPage />} />
{/* <Route path="/master-data" element={<MasterData />} /> {/* <Route path="/master-data" element={<MasterData />} />
<Route path="/master-data/municipios" element={<Municipios />} /> <Route path="/master-data/municipios" element={<Municipios />} />
@ -128,7 +129,6 @@ const AppRoutingSetup = (): ReactElement => {
<Route path="/menu/welcome" element={<Welcome />} /> <Route path="/menu/welcome" element={<Welcome />} />
<Route path="/message/inbox" element={<Inbox />} /> <Route path="/message/inbox" element={<Inbox />} />
<Route path="/webservice/webservice-management" element={<ManageWebServices />} /> <Route path="/webservice/webservice-management" element={<ManageWebServices />} />
<Route path="/settings/user-management/manage-user" element={<ManageUserPage />} />
<Route path="/settings/user-management/log-activity" element={<LogActivityPage />} /> <Route path="/settings/user-management/log-activity" element={<LogActivityPage />} />
<Route <Route
path="/settings/user-management/manage-position" path="/settings/user-management/manage-position"