import { mdiAccountCircle, mdiBookOpenVariant, mdiCheckCircleOutline, mdiChevronRight, mdiMessageReplyTextOutline, } from '@mdi/js'; import axios from 'axios'; import Head from 'next/head'; import React from 'react'; import type { ReactElement } from 'react'; import BaseIcon from '../components/BaseIcon'; import SectionMain from '../components/SectionMain'; import { getPageTitle } from '../config'; import LayoutAuthenticated from '../layouts/Authenticated'; import { useAppSelector } from '../stores/hooks'; type PortalClient = { id: string; name: string; goals?: string; sessions?: Array<{ id: string; title: string; shared_client_notes?: string }>; action_items?: Array<{ id: string; title: string; status: string }>; resources?: Array<{ id: string; title: string; description?: string; url?: string; }>; }; function Panel({ children, className = '', }: { children: React.ReactNode; className?: string; }) { return (
{children}
); } const ClientPortal = () => { const { currentUser } = useAppSelector((state) => state.auth); const [clients, setClients] = React.useState< Array<{ id: string; name: string; email?: string }> >([]); const [clientId, setClientId] = React.useState(''); const [portalClient, setPortalClient] = React.useState( null, ); const isClientUser = currentUser?.app_role?.name === 'Client'; React.useEffect(() => { async function loadClients() { const response = await axios.get('/coaching/clients'); setClients(response.data); if (response.data.length > 0) { const currentClient = response.data.find((client) => { return client.email === currentUser?.email; }); if (isClientUser && currentClient) { setClientId(currentClient.id); return; } setClientId(response.data[0].id); } } loadClients(); }, [currentUser?.email, isClientUser]); React.useEffect(() => { async function loadPortal() { if (!clientId) { return; } const response = await axios.get(`/coaching/client-portal/${clientId}`); setPortalClient(response.data); } loadPortal(); }, [clientId]); return ( <> {getPageTitle('Client Portal')}
Client portal

{isClientUser ? 'Your client portal' : 'Client portal preview'}

{isClientUser ? 'Review shared notes, commitments, resources, and reflections for your coaching work.' : 'Preview the client-facing workspace with shared notes, commitments, resources, and a pre-session reflection prompt.'}

{!isClientUser && (

Coaches can preview what each client sees before sharing notes, commitments, or resources.

)}
{portalClient && (

Your coaching workspace

{portalClient.name}

{portalClient.goals}

Shared session notes

Only coach-approved notes appear here.

{(portalClient.sessions || []).map((session) => (

{session.title}

{session.shared_client_notes}

))}

Commitments

{(portalClient.action_items || []).map((item) => (

{item.title}

{item.status.replace('_', ' ')}

))}

Resources

{(portalClient.resources || []).map((resource) => (

{resource.title}

{resource.description}

))}

Pre-session reflection

What changed since last time?

Final MVP should let the client answer this before a session, then feed the response into the coach prep brief.

)}
); }; ClientPortal.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ClientPortal;