Create headers for /admin /groupings /memberships

ui/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "camaro": "^6.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

ui/src/app/about/page.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 const About = () => (
     <main>
-        <div className="bg-seafoam pt-10 pb-10">
+        <div className="bg-seafoam py-10">
             <div className="container">
                 <div className="grid gap-2">
                     <h1 className="text-center text-4xl font-medium">What is a UH Grouping?</h1>

ui/src/app/admin/page.tsx

@@ -0,0 +1,58 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+
+const Admin = () => {
+    return ( 
+        <main>
+            <div className="bg-seafoam pt-3">
+                <div className="container">
+                    <h1 className="mb-1 font-bold text-[2rem] text-center md:text-left">UH Groupings Administration</h1>
+                    <p className="pb-8 text-xl text-center md:text-left">
+                        Search for and manage any grouping on behalf of its owner. 
+                        Manage the list of UH Groupings administrators.
+                    </p>
+                </div>
+                <Tabs defaultValue="manage-groupings">
+                    <div className="container">
+                        <TabsList variant="outline">
+                            <TabsTrigger 
+                                value="manage-groupings" variant="outline" >
+                                    Manage Groupings
+                            </TabsTrigger>
+                            <TabsTrigger 
+                                value="manage-admins" variant="outline" >
+                                    Manage Admins
+                            </TabsTrigger>
+                            <TabsTrigger 
+                                value="manage-person" variant="outline" >
+                                    Manage Person
+                            </TabsTrigger>
+                        </TabsList>
+                    </div>
+                    <TabsContent value="manage-groupings">
+                        <div className="bg-white">
+                            <div className="container">
+                                {/* GroupingsTable goes here */}
+                            </div>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="manage-admins">
+                        <div className="bg-white">
+                            <div className="container">
+                                {/* AdminTable goes here */}
+                            </div>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="manage-person">
+                        <div className="bg-white">
+                            <div className="container">
+                                {/* PersonTable goes here */}
+                            </div>
+                        </div>
+                    </TabsContent>
+                </Tabs>
+            </div>
+        </main>
+    );
+}
+
+export default Admin;

ui/src/app/groupings/page.tsx

@@ -0,0 +1,22 @@
+const Groupings = () => {
+    return ( 
+        <main>
+            <div className="bg-seafoam pt-3">
+                <div className="container">
+                    <h1 className="mb-1 font-bold text-[2rem] text-center md:text-left">Manage My Groupings</h1>
+                    <p className="pb-3 text-xl text-center md:text-left">
+                        View and manage groupings I own. Manage members, 
+                        configure grouping options and sync destinations.
+                    </p>
+                </div>
+                <div className="bg-white">
+                    <div className="container">
+                        {/* GroupingsTable goes here */}
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}
+
+export default Groupings;

ui/src/app/memberships/page.tsx

@@ -0,0 +1,46 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+const Memberships = () => {
+    return ( 
+        <main>
+            <div className="bg-seafoam pt-3">
+                <div className="container">
+                    <h1 className="mb-1 font-bold text-[2rem] text-center md:text-left">Manage My Memberships</h1>
+                    <p className="pb-8 text-xl text-center md:text-left">
+                        View and manage my memberships. Search for new groupings to join as a member.
+                    </p>
+                </div>
+                <Tabs defaultValue="current-memberships">
+                    <div className="container">
+                        <TabsList variant="outline">
+                            <TabsTrigger 
+                                value="current-memberships" variant="outline">
+                                    Current Memberships
+                            </TabsTrigger>
+                            <TabsTrigger 
+                                value="membership-opportunities" variant="outline">
+                                    Membership Opportunities
+                            </TabsTrigger>
+                        </TabsList>
+                    </div>
+                    <TabsContent value="current-memberships">
+                        <div className="bg-white">
+                            <div className="container">
+                                {/* MembershipsTable goes here */}
+                            </div>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="membership-opportunities">
+                        <div className="bg-white">
+                            <div className="container">
+                                {/* MembershipsTable goes here */}
+                            </div>
+                        </div>
+                    </TabsContent>
+                </Tabs>
+            </div>
+        </main>
+    );
+}
+
+export default Memberships;

ui/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/components/ui/utils'
+import { cn } from '@/components/ui/utils';
 
 const buttonVariants = cva(
     `inline-flex items-center justify-center whitespace-nowrap rounded-[0.25rem] text-base font-normal ring-offset-white

ui/src/components/ui/sheet.tsx

@@ -1,11 +1,11 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
 
-import { cn } from '@/components/ui/utils'
+import { cn } from '@/components/ui/utils';
 
 const Sheet = SheetPrimitive.Root;
 

ui/src/components/ui/tabs.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './utils';
+
+const Tabs = TabsPrimitive.Root
+
+const tabsListVariants = cva(
+    'inline-flex',
+    {
+        variants: {
+            variant: {
+                default: 'items-center justify-center h-10 rounded-md bg-muted p-1 text-muted-foreground',
+                outline: '',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
+const tabsTriggerVariants = cva(
+    'inline-flex items-center justify-center',
+    {
+        variants: {
+            variant: {
+                default: `whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background 
+                    transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring 
+                    focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 
+                    data-[state=active]:bg-background data-[state=active]:text-foreground 
+                    data-[state=active]:shadow-sm`,
+                outline: `px-4 py-2 text-base font-medium ring-offset-background transition-all 
+                    data-[state=active]:bg-white data-[state=active]:rounded-t data-[state=active]:border-b-5 
+                    data-[state=active]:border-black data-[state=active]:text-foreground text-muted-foreground`,
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
+interface TabsListProps
+    extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    TabsListProps
+>(({ className, variant, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(tabsListVariants({ variant, className }))}
+        {...props}
+    />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+interface TabsTriggerProps
+    extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    TabsTriggerProps
+>(({ className, variant, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(tabsTriggerVariants({ variant, className }))}
+        {...props}
+    />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            `ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring 
+            focus-visible:ring-offset-2`,
+            className
+        )}
+        {...props}
+    />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

ui/tests/app/admin/page.test.tsx

@@ -0,0 +1,20 @@
+import Admin from '@/app/admin/page';
+import { render, screen } from '@testing-library/react';
+
+describe('Admin', () => {
+
+    it('should render the Admin page with the appropriate header and tabs', () => {
+        render(<Admin />);
+        expect(screen.getByRole('main')).toBeInTheDocument();
+
+        expect(screen.getByRole('heading', { name: 'UH Groupings Administration' })).toBeInTheDocument();
+        expect(screen.getByText('Search for and manage any grouping on behalf of its owner. ' + 
+            'Manage the list of UH Groupings administrators.')).toBeInTheDocument();
+
+        expect(screen.getByRole('tablist')).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Manage Groupings' })).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Manage Admins' })).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Manage Person' })).toBeInTheDocument();
+    });
+
+});

ui/tests/app/groupings/page.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import Groupings from '@/app/groupings/page';
+
+describe('Groupings', () => {
+
+    it('should render the Groupings page with the appropriate header', () => {
+        render(<Groupings />);
+        expect(screen.getByRole('main')).toBeInTheDocument();
+
+        expect(screen.getByRole('heading', { name: 'Manage My Groupings' })).toBeInTheDocument();
+        expect(screen.getByText('View and manage groupings I own. ' +
+            'Manage members, configure grouping options and sync destinations.')).toBeInTheDocument();
+    });
+
+});

ui/tests/app/memberships/page.test.tsx

@@ -0,0 +1,19 @@
+import Memberships from '@/app/memberships/page';
+import { render, screen } from '@testing-library/react';
+
+describe('Memberships', () => {
+
+    it('should render the Memberhsips page with the appropriate header and tabs', () => {
+        render(<Memberships />);
+        expect(screen.getByRole('main')).toBeInTheDocument();
+
+        expect(screen.getByRole('heading', { name: 'Manage My Memberships' })).toBeInTheDocument();
+        expect(screen.getByText('View and manage my memberships. ' + 
+            'Search for new groupings to join as a member.')).toBeInTheDocument();
+
+        expect(screen.getByRole('tablist')).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Current Memberships' })).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Membership Opportunities' })).toBeInTheDocument();
+    });
+
+});