import * as icon from '@mdi/js'; import Head from 'next/head' import React from 'react' import axios from 'axios'; import type { ReactElement } from 'react' import LayoutAuthenticated from '../layouts/Authenticated' import SectionMain from '../components/SectionMain' import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton' import CardBox from '../components/CardBox' import { getPageTitle } from '../config' 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 }>; }; const ClientPortal = () => { const [clients, setClients] = React.useState>([]); const [clientId, setClientId] = React.useState(''); const [portalClient, setPortalClient] = React.useState(null); React.useEffect(() => { async function loadClients() { const response = await axios.get('/coaching/clients'); setClients(response.data); if (response.data.length > 0) { setClientId(response.data[0].id); } } loadClients(); }, []); 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')} {''} {portalClient && (

Your coaching workspace

{portalClient.name}

{portalClient.goals}

Shared session notes

{(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}

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