Refactor Supabase server client and improve team management features

Refactored Supabase server component client to improve type safety. Improved team account management by adjusting role data providers to consider account IDs, and adjusted invite member functionality to use account IDs and slugs. Enhanced invitation update dialog by adding account parameter. Fixed database webhook URLs in seed.sql. Overall, these changes enhance the robustness and usability of the team management functionalities.

packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -42,11 +42,13 @@ type InviteModel = ReturnType<typeof createEmptyInviteModel>;
 type Role = string;
 
 export function InviteMembersDialogContainer({
-  account,
+  accountSlug,
+  accountId,
   userRoleHierarchy,
   children,
 }: React.PropsWithChildren<{
-  account: string;
+  accountSlug: string;
+  accountId: string;
   userRoleHierarchy: number;
 }>) {
   const [pending, startTransition] = useTransition();
@@ -67,7 +69,10 @@ export function InviteMembersDialogContainer({
           </DialogDescription>
         </DialogHeader>
 
-        <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
+        <RolesDataProvider
+          accountId={accountId}
+          maxRoleHierarchy={userRoleHierarchy}
+        >
           {(roles) => (
             <InviteMembersForm
               pending={pending}
@@ -75,7 +80,7 @@ export function InviteMembersDialogContainer({
               onSubmit={(data) => {
                 startTransition(async () => {
                   await createInvitationsAction({
-                    account,
+                    accountSlug,
                     invitations: data.invitations,
                   });
 

packages/features/team-accounts/src/components/members/roles-data-provider.tsx

@@ -5,17 +5,15 @@ import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
 export function RolesDataProvider(props: {
   maxRoleHierarchy: number;
+  accountId: string;
   children: (roles: string[]) => React.ReactNode;
 }) {
-  const rolesQuery = useFetchRoles({
-    maxRoleHierarchy: props.maxRoleHierarchy,
-  });
+  const rolesQuery = useFetchRoles(props);
 
   if (rolesQuery.isLoading) {
     return <LoadingOverlay fullPage={false} />;
   }
 
-  // TODO handle error
   if (rolesQuery.isError) {
     return null;
   }
@@ -23,7 +21,7 @@ export function RolesDataProvider(props: {
   return <>{props.children(rolesQuery.data ?? [])}</>;
 }
 
-function useFetchRoles(props: { maxRoleHierarchy: number }) {
+function useFetchRoles(props: { maxRoleHierarchy: number; accountId: string }) {
   const supabase = useSupabase();
 
   return useQuery({
@@ -33,6 +31,7 @@ function useFetchRoles(props: { maxRoleHierarchy: number }) {
         .from('roles')
         .select('name')
         .gte('hierarchy_level', props.maxRoleHierarchy)
+        .or(`account_id.eq.${props.accountId}, account_id.is.null`)
         .order('hierarchy_level', { ascending: true });
 
       if (error) {

packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx

@@ -60,7 +60,10 @@ export const UpdateMemberRoleDialog: React.FC<{
           </DialogDescription>
         </DialogHeader>
 
-        <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
+        <RolesDataProvider
+          accountId={accountId}
+          maxRoleHierarchy={userRoleHierarchy}
+        >
           {(data) => (
             <UpdateMemberForm
               setIsOpen={setIsOpen}