add roles input on resource and make spacing more consistent

src/app/[orgId]/settings/resources/page.tsx

@@ -4,6 +4,10 @@ import ResourcesTable, { ResourceRow } from "./components/ResourcesTable";
 import { AxiosResponse } from "axios";
 import { ListResourcesResponse } from "@server/routers/resource";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+import { GetOrgResponse } from "@server/routers/org";
+import OrgProvider from "@app/providers/OrgProvider";
 
 type ResourcesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -22,6 +26,24 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
         console.error("Error fetching resources", e);
     }
 
+    let org = null;
+    try {
+        const getOrg = cache(async () =>
+            internal.get<AxiosResponse<GetOrgResponse>>(
+                `/org/${params.orgId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrg();
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
     const resourceRows: ResourceRow[] = resources.map((resource) => {
         return {
             id: resource.resourceId,
@@ -39,7 +61,9 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
                 description="Create secure proxies to your private applications"
             />
 
-            <ResourcesTable resources={resourceRows} orgId={params.orgId} />
+            <OrgProvider org={org}>
+                <ResourcesTable resources={resourceRows} orgId={params.orgId} />
+            </OrgProvider>
         </>
     );
 }