Create Home page (Before and After Login)

ui/src/app/(index)/_components/AfterLogin.tsx

@@ -0,0 +1,99 @@
+import User from '@/access/User';
+import Role from '@/access/Role';
+import Image from 'next/image';
+import {KeyRound} from 'lucide-react';
+import UserInfoItem from '@/app/(index)/_components/UserInfoItem';
+
+const AfterLogin = (
+    {
+        currentUser,
+        numberOfGroupings,
+        numberOfMemberships
+    }: {
+        currentUser: User,
+        numberOfGroupings: number,
+        numberOfMemberships: number
+    }) => {
+    const isAdmin = currentUser.roles.includes(Role.ADMIN);
+    const isOwner = currentUser.roles.includes(Role.OWNER);
+    const getHighestRole = () => {
+        if (isAdmin) {
+            return 'Admin';
+        } else if (isOwner) {
+            return 'Owner';
+        } else {
+            return 'Member';
+        }
+    }
+
+    return (
+        <main>
+            <div className="bg-seafoam pt-5 pb-5">
+                <div className="container bg-seafoam pt-7 pb-7">
+                    <div className="grid sm:grid-cols-12 text-center justify-center items-center gap-4">
+                        <div className="sm:col-span-3 md:col-span-2">
+                            <div className="flex justify-center items-center rounded-full
+                            h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0">
+                                <Image
+                                    src="/uhgroupings/user-solid.svg"
+                                    alt="user-solid"
+                                    width={56}
+                                    height={64}
+                                />
+                                <div
+                                    className="bg-blue-background rounded-full flex justify-center
+                                    items-center h-[30px] w-[30px] absolute left-3 bottom-0 ml-16">
+                                    <KeyRound className="fill-white stroke-none p-0.5"/>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="sm:col-span-9 md:col-span-10 text-center md:text-left">
+                            <h1 className="whitespace-nowrap text-1.75">Welcome, <span
+                                className="text-text-color">{currentUser.firstName}</span>!</h1>
+                            <h1 className="whitespace-nowrap text-1.75">Role: <span
+                                className="text-text-color">{getHighestRole()}</span></h1>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="container grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-10 mb-10">
+                {isAdmin && <UserInfoItem
+                    alt={'key-soild'}
+                    src={'uhgroupings/key-solid.svg'}
+                    number={0}
+                    show={false}
+                    title={'Administration'}
+                    description={'Manage the list of Administrators for this service. ' +
+                        'Search for and manage any grouping on behalf of the owner.'}
+                    link={'/admin'}
+                    text={'Admin'}
+                />}
+                <UserInfoItem
+                    alt={'id-card'}
+                    src={'uhgroupings/id-card-solid.svg'}
+                    number={numberOfMemberships}
+                    show={true}
+                    title={'Memberships'}
+                    description={'View and manage my memberships. ' +
+                        'Search for new groupings to join as a member.'}
+                    link={'/memberships'}
+                    text={'Memberships'}
+                />
+                {isOwner && <UserInfoItem
+                    alt={'wrench-solid'}
+                    src={'uhgroupings/wrench-solid.svg'}
+                    number={numberOfGroupings}
+                    show={true}
+                    title={'Groupings'}
+                    description={'Review members, manage Include and Exclude lists, ' +
+                        'configure preferences, and export members.'}
+                    link={'/groupings'}
+                    text={'Groupings'}
+                />}
+            </div>
+        </main>
+    );
+}
+
+export default AfterLogin;

ui/src/app/(index)/_components/Announcement.tsx

@@ -0,0 +1,19 @@
+'use client';
+import {Alert, AlertDescription, AlertTitle} from '@/components/ui/alert';
+import {Terminal} from 'lucide-react';
+
+const Announcement = ({announcement}: { announcement: string }
+) => {
+
+    return (
+        <Alert className="bg-[#fff2b2] mb-2">
+            <Terminal className="h-4 w-4" />
+            <AlertTitle>Announcement</AlertTitle>
+            <AlertDescription>
+                {announcement}
+            </AlertDescription>
+        </Alert>
+    );
+};
+
+export default Announcement;

ui/src/app/(index)/_components/BeforeLogin.tsx

@@ -0,0 +1,29 @@
+import {Button} from '@/components/ui/button';
+import Link from 'next/link';
+import {ArrowRight} from 'lucide-react';
+import UHGroupingsInfo from '@/components/UHGroupingsInfo';
+
+const BeforeLogin = () => {
+    return (
+        <main className="bg-seafoam pb-10">
+            <UHGroupingsInfo variant={'home'}/>
+            <div className="row">
+                <div className="text-center">
+                    <LearnMoreButton/>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+const LearnMoreButton = () => {
+    return (
+        <Link href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
+            <Button size="lg" variant="default">
+                Learn More <ArrowRight className="ml-1"/>
+            </Button>
+        </Link>
+    );
+};
+
+export default BeforeLogin;

ui/src/app/(index)/_components/LoginButton.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import {Button} from '@/components/ui/button';
+import Role from '@/access/Role';
+import User from '@/access/User';
+import {login, logout} from '@/access/AuthenticationService';
+
+const LoginButton = ({currentUser}: { currentUser: User; }) => (
+    <>
+        {!currentUser.roles.includes(Role.UH) ? (
+            <Button
+                size="lg"
+                variant="default"
+                onClick={() => login()}>
+                Login Here
+            </Button>
+        ) : (
+            <Button
+                size="lg"
+                variant="default"
+                onClick={() => logout()}>
+                Logout
+            </Button>
+        )}
+    </>
+);
+
+export default LoginButton;

ui/src/app/(index)/_components/UserInfoItem.tsx

@@ -0,0 +1,49 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import {Button} from '@/components/ui/button';
+
+const UserInfoItem = (
+    {
+        alt,
+        src,
+        number,
+        show,
+        title,
+        description,
+        link,
+        text
+    }: {
+        alt: string,
+        src: string,
+        number: number,
+        show: boolean,
+        title: string,
+        description: string,
+        link: string,
+        text: string
+    }) => {
+    return (
+        <div className="flex flex-col justify-between">
+            <div>
+                <div className="flex items-center mb-1">
+                    <Image
+                        alt={alt}
+                        src={src}
+                        width={alt === 'id-card' ? 54 : 48}
+                        height={48}
+                        style={{maxWidth: alt === 'id-card' ? 54 : 48, height: 'auto'}}
+                        className="mr-5 mb-4"
+                    />
+                    {show && <span className="text-2.5 text-text-color">{number}</span>}
+                </div>
+                <h2 className="text-2xl text-text-color mb-2">{title}</h2>
+                <p className="mb-4">{description}</p>
+            </div>
+            <Link href={link}>
+                <Button>{text}</Button>
+            </Link>
+        </div>
+    );
+}
+
+export default UserInfoItem;

ui/src/app/(index)/page.tsx

@@ -1,7 +1,69 @@
-const Home = () => {
+import Image from 'next/image';
+import BeforeLogin from '@/app/(index)/_components/BeforeLogin';
+import AfterLogin from '@/app/(index)/_components/AfterLogin';
+import {getCurrentUser} from '@/access/AuthenticationService';
+import Role from '@/access/Role';
+import LoginButton from '@/app/(index)/_components/LoginButton';
+import {getAnnouncements, getNumberOfGroupings, getNumberOfMemberships} from '@/services/GroupingsApiService';
+import Announcement from '@/app/(index)/_components/Announcement';
+
+const Home = async () => {
+    const [currentUser, numberOfGroupings, numberOfMemberships, announcements] = await Promise.all([
+        getCurrentUser(),
+        getNumberOfGroupings(),
+        getNumberOfMemberships(),
+        getAnnouncements()
+    ]);
+
+    const activeAnnouncements = announcements?.announcements
+        ?.filter((announcement) => announcement.state !== 'Active')
+        ?.map((announcement) => announcement.message) || [];
+
     return (
-        null
+        <main>
+            <div className="container mt-5 mb-5">
+                {activeAnnouncements.map((announcement: string, index: number) => (
+                    <Announcement announcement={announcement} key={index}/>
+                ))}
+                <div className="flex flex-row py-8 px-0.5 justify-between">
+                    <div className="md:w-7/12 flex items-center">
+                        <div>
+                            <h1 className="sr-only">UH Groupings</h1>
+                            <Image
+                                src="uhgroupings/uh-groupings-text.svg"
+                                alt="UH Groupings logotype"
+                                width={337.5}
+                                height={52.5}
+                                className="w-[210px] h-[32.67px] sm:w-1/2 sm:h-auto md:w-[337.5px] md:h-[52.5px]"
+                            />
+
+                            <p className="text-xl mt-1"> Manage your groupings in one place, use them in many.</p>
+                            <div className="mt-4">
+                                {!currentUser.roles.includes(Role.UH) &&
+                                    <LoginButton currentUser={currentUser}/>}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="hidden lg:block md:w-5/12">
+                        <Image
+                            src="/uhgroupings/uh-groupings-logo-large.svg"
+                            alt="UH Groupings"
+                            width={365.5}
+                            height={292.5}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {currentUser.roles.includes(Role.UH) ? (
+                <AfterLogin
+                    currentUser={currentUser}
+                    numberOfGroupings={numberOfGroupings}
+                    numberOfMemberships={numberOfMemberships}/>
+            ) : (
+                <BeforeLogin/>
+            )}
+        </main>
     );
 }
-
 export default Home;