✨ roles table

src/app/[orgId]/settings/access/roles/page.tsx

@@ -11,24 +11,32 @@ import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
 
 export default async function RolesPage(props: RolesPageProps) {
     const params = await props.params;
+    const searchParams = new URLSearchParams(await props.searchParams);
 
     let roles: ListRolesResponse["roles"] = [];
+    let pagination: ListRolesResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
     let hasInvitations = false;
 
     const res = await internal
         .get<
             AxiosResponse<ListRolesResponse>
-        >(`/org/${params.orgId}/roles`, await authCookieHeader())
+        >(`/org/${params.orgId}/roles?${searchParams.toString()}`, await authCookieHeader())
         .catch((e) => {});
 
     if (res && res.status === 200) {
         roles = res.data.data.roles;
+        pagination = res.data.data.pagination;
     }
 
     const invitationsRes = await internal
@@ -63,7 +71,14 @@ export default async function RolesPage(props: RolesPageProps) {
                 description={t("accessRolesDescription")}
             />
             <OrgProvider org={org}>
-                <RolesTable roles={roleRows} />
+                <RolesTable
+                    roles={roleRows}
+                    rowCount={pagination.total}
+                    pagination={{
+                        pageIndex: pagination.page - 1,
+                        pageSize: pagination.pageSize
+                    }}
+                />
             </OrgProvider>
         </>
     );