diff --git a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
index ecf99cd..a18ec29 100644
--- a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
@@ -153,9 +153,9 @@ const EditDialog = () => {
         email: response.data.email,
         id_role: response.data.idRole,
         status: response.data.status,
-        customerid: response.data.customerid
+        customerid: response.data.customer.id
       }));
-      // console.log('Customer ID dari user detail:', response.data.customerid);
+      // console.log('Customer ID from API:', response?.data.customerid);
     } else {
       setFormField((prev) => ({
         ...prev,
@@ -170,16 +170,6 @@ const EditDialog = () => {
     // console.log('Fetched ID Role:', response?.data.id_role);
   }, []);
 
-  useEffect(() => {
-    if (selectedUser) {
-      doFetchUserData(selectedUser);
-    }
-  }, [selectedUser]);
-
-  useEffect(() => {
-    getCustomerList([{ id: 'id', desc: false }]);
-  }, []);
-
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -188,6 +178,7 @@ const EditDialog = () => {
 
   useEffect(() => {
     const fetchAllData = async () => {
+      await getCustomerList([{ id: 'id', desc: false }]);
       await doFetchUserRole([{ id: 'name', desc: false }]);
       if (selectedUser) {
         await doFetchUserData(selectedUser);
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index 70eb5be..2e76deb 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -15,7 +15,7 @@ const ListToolBar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search users"
+                placeholder="Search Users"
                 value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
                   table.getColumn('username')?.setFilterValue(event.target.value)
diff --git a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
index 31c3c48..2e2b2dd 100644
--- a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
+++ b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
@@ -78,7 +78,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.username,
+        accessorKey: 'username',
         id: 'username',
         header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
         enableSorting: true,
@@ -88,27 +88,27 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         accessorFn: (row) => row.customer?.username,
         id: 'customer',
         header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[300px]'
         }
       },
       {
-        accessorFn: (row) => row.email,
+        accessorKey: 'email',
         id: 'email',
         header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[350px]'
         }
       },
       {
-        accessorFn: (row) => row.name,
+        accessorKey: 'name',
         id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
@@ -118,7 +118,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         accessorFn: (row) => row.role.name,
         id: 'role_name',
         header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         cell: (data: any) => {
           const { role } = data.row.original;
@@ -132,7 +132,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         }
       },
       {
-        accessorFn: (row) => row.status,
+        accessorKey: 'status',
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
@@ -190,18 +190,31 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const doGetListData = async (page: number, limit: number, sorting: any, filter: any) => {
+    const mappedFilter = filter.reduce((acc: any, curr: any) => {
+      let key = curr.id;
+
+      // mapping kolom ke nama kolom lengkap (agar tidak ambigu di backend)
+      if (key === 'username') key = 'Users.username';
+      if (key === 'customer') key = 'Customers.username';
+      if (key === 'role_name') key = 'Roles.name';
+      if (key === 'email') key = 'Users.email';
+      if (key === 'name') key = 'Users.name';
+
+      acc[key] = curr.value.toLowerCase();
+      return acc;
+    }, {});
+
     sorting = sorting.length == 0 ? [{ id: 'Users.username', desc: false }] : sorting;
-    filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
+    filter = Object.keys(mappedFilter).length === 0 ? {} : mappedFilter;
     const response = await GetData(`${API_URL}/user/list`, {
       limit: limit,
       page: page + 1,
       with_deleted: false,
       order_field: sorting[0].id,
-      order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+      order_direction: sorting[0].desc === false ? 'DESC' : 'ASC',
       filter: JSON.stringify(filter)
     });
     // console.log('response api:', response);
-
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -228,9 +241,10 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         layout={{ card: true }}
         sorting={[{ id: 'Users.username', desc: false }]}
         serverSide={true}
-        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
-          doGetListData(pageIndex, pageSize, sorting, columnFilters)
-        }
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => {
+          // console.log('FILTER SENT:', columnFilters);
+          return doGetListData(pageIndex, pageSize, sorting, columnFilters);
+        }}
       >
         {children}
       </DataGridProvider>