B2B-88: add starter kit structure and elements

app/home/[account]/members/_lib/server/members-page.loader.ts

@@ -0,0 +1,79 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
+import { Database } from '~/lib/database.types';
+
+/**
+ * Load data for the members page
+ * @param client
+ * @param slug
+ */
+export async function loadMembersPageData(
+  client: SupabaseClient<Database>,
+  slug: string,
+) {
+  return Promise.all([
+    loadAccountMembers(client, slug),
+    loadInvitations(client, slug),
+    canAddMember,
+    loadTeamWorkspace(slug),
+  ]);
+}
+
+/**
+ * @name canAddMember
+ * @description Check if the current user can add a member to the account
+ *
+ * This needs additional logic to determine if the user can add a member to the account
+ * Please implement the logic and return a boolean value
+ *
+ * The same check needs to be added when creating an invitation
+ *
+ */
+async function canAddMember() {
+  return Promise.resolve(true);
+}
+
+/**
+ * Load account members
+ * @param client
+ * @param account
+ */
+async function loadAccountMembers(
+  client: SupabaseClient<Database>,
+  account: string,
+) {
+  const { data, error } = await client.rpc('get_account_members', {
+    account_slug: account,
+  });
+
+  if (error) {
+    console.error(error);
+    throw error;
+  }
+
+  return data ?? [];
+}
+
+/**
+ * Load account invitations
+ * @param client
+ * @param account
+ */
+async function loadInvitations(
+  client: SupabaseClient<Database>,
+  account: string,
+) {
+  const { data, error } = await client.rpc('get_account_invitations', {
+    account_slug: account,
+  });
+
+  if (error) {
+    console.error(error);
+    throw error;
+  }
+
+  return data ?? [];
+}

app/home/[account]/members/page.tsx

@@ -0,0 +1,135 @@
+import { PlusCircle } from 'lucide-react';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import {
+  AccountInvitationsTable,
+  AccountMembersTable,
+  InviteMembersDialogContainer,
+} from '@kit/team-accounts/components';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { TeamAccountLayoutPageHeader } from '../_components/team-account-layout-page-header';
+import { loadMembersPageData } from './_lib/server/members-page.loader';
+
+interface TeamAccountMembersPageProps {
+  params: Promise<{ account: string }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:members.pageTitle');
+
+  return {
+    title,
+  };
+};
+
+async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
+  const client = getSupabaseServerClient();
+  const slug = (await params).account;
+
+  const [members, invitations, canAddMember, { user, account }] =
+    await loadMembersPageData(client, slug);
+
+  const canManageRoles = account.permissions.includes('roles.manage');
+  const canManageInvitations = account.permissions.includes('invites.manage');
+
+  const isPrimaryOwner = account.primary_owner_user_id === user.id;
+  const currentUserRoleHierarchy = account.role_hierarchy_level;
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.members'} />}
+        description={<AppBreadcrumbs />}
+        account={account.slug}
+      />
+
+      <PageBody>
+        <div className={'flex w-full max-w-4xl flex-col space-y-4 pb-32'}>
+          <Card>
+            <CardHeader className={'flex flex-row justify-between'}>
+              <div className={'flex flex-col space-y-1.5'}>
+                <CardTitle>
+                  <Trans i18nKey={'common:accountMembers'} />
+                </CardTitle>
+
+                <CardDescription>
+                  <Trans i18nKey={'common:membersTabDescription'} />
+                </CardDescription>
+              </div>
+
+              <If condition={canManageInvitations && canAddMember}>
+                <InviteMembersDialogContainer
+                  userRoleHierarchy={currentUserRoleHierarchy}
+                  accountSlug={account.slug}
+                >
+                  <Button size={'sm'} data-test={'invite-members-form-trigger'}>
+                    <PlusCircle className={'mr-2 w-4'} />
+
+                    <span>
+                      <Trans i18nKey={'teams:inviteMembersButton'} />
+                    </span>
+                  </Button>
+                </InviteMembersDialogContainer>
+              </If>
+            </CardHeader>
+
+            <CardContent>
+              <AccountMembersTable
+                userRoleHierarchy={currentUserRoleHierarchy}
+                currentUserId={user.id}
+                currentAccountId={account.id}
+                members={members}
+                isPrimaryOwner={isPrimaryOwner}
+                canManageRoles={canManageRoles}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className={'flex flex-row justify-between'}>
+              <div className={'flex flex-col space-y-1.5'}>
+                <CardTitle>
+                  <Trans i18nKey={'teams:pendingInvitesHeading'} />
+                </CardTitle>
+
+                <CardDescription>
+                  <Trans i18nKey={'teams:pendingInvitesDescription'} />
+                </CardDescription>
+              </div>
+            </CardHeader>
+
+            <CardContent>
+              <AccountInvitationsTable
+                permissions={{
+                  canUpdateInvitation: canManageRoles,
+                  canRemoveInvitation: canManageRoles,
+                  currentUserRoleHierarchy,
+                }}
+                invitations={invitations}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(TeamAccountMembersPage);