B2B-88: add starter kit structure and elements

2025-06-08 16:18:30 +03:00
parent 657a36a298
commit e7b25600cb
1280 changed files with 77893 additions and 5688 deletions
--- a/app/home/[account]/members/page.tsx
+++ b/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);