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

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

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

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

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

2
src/routing/AppRoutingSetup.tsx
View File

@ -64,6 +64,7 @@ const AppRoutingSetup = (): ReactElement => {
<Route path="/" element={<DashboardHomePage />} />
<Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
<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/municipios" element={<Municipios />} />
@ -128,7 +129,6 @@ const AppRoutingSetup = (): ReactElement => {
<Route path="/menu/welcome" element={<Welcome />} />
<Route path="/message/inbox" element={<Inbox />} />
<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/manage-position"