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.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -1,3 +1,5 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
 import {
   BillingPortalCard,
   CurrentSubscriptionCard,
@@ -39,6 +41,31 @@ async function TeamAccountBillingPage({ params }: Params) {
   const canManageBilling =
     workspace.account.permissions.includes('billing.manage');
 
+  const Checkout = () => {
+    if (!canManageBilling) {
+      return <CannotManageBillingAlert />;
+    }
+
+    return (
+      <TeamAccountCheckoutForm customerId={customerId} accountId={accountId} />
+    );
+  };
+
+  const BillingPortal = () => {
+    if (!canManageBilling || !customerId) {
+      return null;
+    }
+
+    return (
+      <form action={createBillingPortalSession}>
+        <input type="hidden" name={'accountId'} value={accountId} />
+        <input type="hidden" name={'slug'} value={params.account} />
+
+        <BillingPortalCard />
+      </form>
+    );
+  };
+
   return (
     <>
       <PageHeader
@@ -48,39 +75,25 @@ async function TeamAccountBillingPage({ params }: Params) {
 
       <PageBody>
         <div className={'mx-auto w-full'}>
-          <If condition={!canManageBilling}>
-            <CannotManageBillingAlert />
-          </If>
-
           <div>
             <div className={'flex flex-col space-y-6'}>
               <If
                 condition={subscription}
                 fallback={
-                  <If condition={canManageBilling}>
-                    <TeamAccountCheckoutForm
-                      customerId={customerId}
-                      accountId={accountId}
-                    />
-                  </If>
+                  <>
+                    <Checkout />
+                  </>
                 }
               >
-                {(data) => (
+                {(subscription) => (
                   <CurrentSubscriptionCard
-                    subscription={data}
+                    subscription={subscription}
                     config={billingConfig}
                   />
                 )}
               </If>
 
-              <If condition={customerId && canManageBilling}>
-                <form action={createBillingPortalSession}>
-                  <input type="hidden" name={'accountId'} value={accountId} />
-                  <input type="hidden" name={'slug'} value={params.account} />
-
-                  <BillingPortalCard />
-                </form>
-              </If>
+              <BillingPortal />
             </div>
           </div>
         </div>
@@ -93,7 +106,9 @@ export default withI18n(TeamAccountBillingPage);
 
 function CannotManageBillingAlert() {
   return (
-    <Alert>
+    <Alert variant={'warning'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
       <AlertTitle>
         <Trans i18nKey={'billing:cannotManageBillingAlertTitle'} />
       </AlertTitle>

apps/web/app/(dashboard)/home/[account]/members/page.tsx

@@ -131,10 +131,12 @@ async function TeamAccountMembersPage({ params }: Params) {
               <If condition={canManageInvitations}>
                 <InviteMembersDialogContainer
                   userRoleHierarchy={currentUserRoleHierarchy}
-                  account={account.slug}
+                  accountId={account.id}
+                  accountSlug={account.slug}
                 >
                   <Button size={'sm'}>
                     <PlusCircle className={'mr-2 w-4'} />
+
                     <span>
                       <Trans i18nKey={'teams:inviteMembersButton'} />
                     </span>