admin/40234-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten coaching workspace density

Browse Source
This commit is contained in:
Flatlogic Bot 2026-06-09 13:07:28 +00:00
parent 29f730ab4a
commit c1bdc01129
5 changed files with 98 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/layouts/Authenticated.tsx
View File

@ -138,34 +138,34 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
return ( return (
<div className='min-h-screen bg-[#f7f5f1] text-[#17201b]'> <div className='min-h-screen bg-[#f7f5f1] text-[#17201b]'>
<aside <aside
className={`fixed inset-y-0 left-0 z-40 w-72 border-r border-[#ded8cc] bg-[#fbfaf6] px-4 py-5 shadow-[16px_0_45px_rgba(23,32,27,0.08)] transition-transform duration-300 lg:translate-x-0 ${ className={`fixed inset-y-0 left-0 z-40 w-64 border-r border-[#ded8cc] bg-[#fbfaf6] px-3 py-4 shadow-[16px_0_45px_rgba(23,32,27,0.08)] transition-transform duration-300 lg:translate-x-0 ${
isAsideOpen ? 'translate-x-0' : '-translate-x-full' isAsideOpen ? 'translate-x-0' : '-translate-x-full'
}`} }`}
> >
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<Link href='/dashboard' className='flex items-center gap-3'> <Link href='/dashboard' className='flex items-center gap-3'>
<span className='grid h-10 w-10 place-items-center rounded-full border border-[#d8b15e]/50 bg-[#245c4c] text-sm font-black text-white'> <span className='grid h-8 w-8 place-items-center rounded-full border border-[#d8b15e]/50 bg-[#245c4c] text-sm font-black text-white'>
CW CW
</span> </span>
<span> <span>
<span className='block text-sm font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <span className='block text-sm font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
AppWizzy AppWizzy
</span> </span>
<span className='block text-xl font-semibold'> <span className='block text-lg font-semibold'>
Coaching Workspace Coaching Workspace
</span> </span>
</span> </span>
</Link> </Link>
<button <button
type='button' type='button'
className='grid h-10 w-10 place-items-center rounded-full border border-[#ded8cc] text-[#526159] lg:hidden' className='grid h-8 w-8 place-items-center rounded-full border border-[#ded8cc] text-[#526159] lg:hidden'
onClick={() => setIsAsideOpen(false)} onClick={() => setIsAsideOpen(false)}
> >
<BaseIcon path={mdiClose} size={20} /> <BaseIcon path={mdiClose} size={18} />
</button> </button>
</div> </div>
<div className='mt-8 rounded-lg border border-[#ded8cc] bg-white p-4'> <div className='mt-5 rounded-lg border border-[#ded8cc] bg-white p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'>
Today Today
</p> </p>
@ -175,7 +175,7 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
</p> </p>
</div> </div>
<nav className='mt-6 space-y-1'> <nav className='mt-4 space-y-1'>
{visibleNavItems.map((item) => { {visibleNavItems.map((item) => {
const itemPath = item.href.split('/')[1]; const itemPath = item.href.split('/')[1];
const isActive = itemPath === activePath; const isActive = itemPath === activePath;
@ -184,13 +184,13 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
className={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold transition ${ className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-semibold transition ${
isActive isActive
? 'bg-[#245c4c] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]' ? 'bg-[#245c4c] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]'
: 'text-[#56645d] hover:bg-[#efeae0] hover:text-[#17201b]' : 'text-[#56645d] hover:bg-[#efeae0] hover:text-[#17201b]'
}`} }`}
> >
<BaseIcon path={item.icon} size={20} /> <BaseIcon path={item.icon} size={18} />
<span>{item.label}</span> <span>{item.label}</span>
</Link> </Link>
); );
@ -206,7 +206,7 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
</p> </p>
<button <button
type='button' type='button'
className='mt-4 flex w-full items-center justify-center gap-2 rounded-full bg-[#17201b] px-4 py-2 text-sm font-semibold text-white' className='mt-4 flex w-full items-center justify-center gap-2 rounded-full bg-[#17201b] px-3 py-1.5 text-sm font-semibold text-white'
onClick={() => { onClick={() => {
dispatch(logoutUser()); dispatch(logoutUser());
router.push('/login'); router.push('/login');
@ -227,15 +227,15 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
/> />
)} )}
<div className='lg:pl-72'> <div className='lg:pl-64'>
<header className='sticky top-0 z-20 border-b border-[#ded8cc]/80 bg-[#f7f5f1]/92 px-4 py-3 backdrop-blur lg:px-8'> <header className='sticky top-0 z-20 border-b border-[#ded8cc]/80 bg-[#f7f5f1]/92 px-3 py-2 backdrop-blur lg:px-8'>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<button <button
type='button' type='button'
className='grid h-10 w-10 place-items-center rounded-full border border-[#ded8cc] bg-white text-[#526159] lg:hidden' className='grid h-8 w-8 place-items-center rounded-full border border-[#ded8cc] bg-white text-[#526159] lg:hidden'
onClick={() => setIsAsideOpen(true)} onClick={() => setIsAsideOpen(true)}
> >
<BaseIcon path={mdiMenu} size={22} /> <BaseIcon path={mdiMenu} size={18} />
</button> </button>
<div className='hidden lg:block'> <div className='hidden lg:block'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
@ -247,7 +247,7 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
</div> </div>
<Link <Link
href='/' href='/'
className='rounded-full border border-[#ded8cc] bg-white px-4 py-2 text-sm font-semibold text-[#17201b] shadow-sm' className='rounded-full border border-[#ded8cc] bg-white px-3 py-1.5 text-sm font-semibold text-[#17201b] shadow-sm'
> >
Public site Public site
</Link> </Link>

48
frontend/src/pages/client-portal.tsx
View File

@ -86,30 +86,30 @@ const ClientPortal = () => {
</Head> </Head>
<SectionMain> <SectionMain>
<div className='mx-auto max-w-7xl'> <div className='mx-auto max-w-7xl'>
<div className='mb-6 grid gap-6 xl:grid-cols-[0.95fr_1.05fr]'> <div className='mb-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
<div className='rounded-lg bg-[#17201b] p-7 text-white'> <div className='rounded-lg bg-[#17201b] p-5 text-white'>
<div className='flex items-center gap-3 text-[#d8b15e]'> <div className='flex items-center gap-3 text-[#d8b15e]'>
<BaseIcon path={mdiAccountCircle} size={22} /> <BaseIcon path={mdiAccountCircle} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'> <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Client portal Client portal
</span> </span>
</div> </div>
<h1 className='mt-4 text-4xl font-semibold'> <h1 className='mt-3 text-xl font-semibold'>
Client portal preview Client portal preview
</h1> </h1>
<p className='mt-3 max-w-2xl leading-7 text-[#d9d5ca]'> <p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
Preview the client-facing workspace with shared notes, Preview the client-facing workspace with shared notes,
commitments, resources, and a pre-session reflection prompt. commitments, resources, and a pre-session reflection prompt.
</p> </p>
</div> </div>
<Panel className='p-6'> <Panel className='p-4'>
<label className='block text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <label className='block text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Preview as client Preview as client
</label> </label>
<select <select
value={clientId} value={clientId}
onChange={(event) => setClientId(event.target.value)} onChange={(event) => setClientId(event.target.value)}
className='mt-4 w-full rounded-lg border border-[#d8d1c2] bg-white px-4 py-3 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15' className='mt-4 w-full rounded-lg border border-[#d8d1c2] bg-white px-3 py-2 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
> >
{clients.map((client) => ( {clients.map((client) => (
<option key={client.id} value={client.id}> <option key={client.id} value={client.id}>
@ -125,27 +125,27 @@ const ClientPortal = () => {
</div> </div>
{portalClient && ( {portalClient && (
<div className='grid gap-6 xl:grid-cols-[1.05fr_0.95fr]'> <div className='grid gap-4 xl:grid-cols-[1.05fr_0.95fr]'>
<Panel className='overflow-hidden'> <Panel className='overflow-hidden'>
<div className='bg-[#fbfaf6] p-7'> <div className='bg-[#fbfaf6] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Your coaching workspace Your coaching workspace
</p> </p>
<h2 className='mt-2 text-3xl font-semibold text-[#17201b]'> <h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
{portalClient.name} {portalClient.name}
</h2> </h2>
<p className='mt-4 max-w-2xl leading-7 text-[#4f5a53]'> <p className='mt-4 max-w-2xl leading-6 text-[#4f5a53]'>
{portalClient.goals} {portalClient.goals}
</p> </p>
</div> </div>
<div className='p-7'> <div className='p-5'>
<div className='flex items-center gap-3'> <div className='flex items-center gap-3'>
<span className='grid h-10 w-10 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'> <span className='grid h-8 w-8 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
<BaseIcon path={mdiMessageReplyTextOutline} size={21} /> <BaseIcon path={mdiMessageReplyTextOutline} size={18} />
</span> </span>
<div> <div>
<h3 className='text-xl font-semibold text-[#17201b]'> <h3 className='text-lg font-semibold text-[#17201b]'>
Shared session notes Shared session notes
</h3> </h3>
<p className='text-sm text-[#68736c]'> <p className='text-sm text-[#68736c]'>
@ -163,7 +163,7 @@ const ClientPortal = () => {
<p className='font-semibold text-[#17201b]'> <p className='font-semibold text-[#17201b]'>
{session.title} {session.title}
</p> </p>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
{session.shared_client_notes} {session.shared_client_notes}
</p> </p>
</div> </div>
@ -175,7 +175,7 @@ const ClientPortal = () => {
<div className='space-y-6'> <div className='space-y-6'>
<Panel> <Panel>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-xl font-semibold text-[#17201b]'> <h3 className='text-lg font-semibold text-[#17201b]'>
Commitments Commitments
</h3> </h3>
</div> </div>
@ -203,7 +203,7 @@ const ClientPortal = () => {
<Panel> <Panel>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-xl font-semibold text-[#17201b]'> <h3 className='text-lg font-semibold text-[#17201b]'>
Resources Resources
</h3> </h3>
</div> </div>
@ -215,8 +215,8 @@ const ClientPortal = () => {
className='flex items-center justify-between gap-4 rounded-lg border border-[#ded8cc] bg-white p-4 transition hover:bg-[#fbfaf6]' className='flex items-center justify-between gap-4 rounded-lg border border-[#ded8cc] bg-white p-4 transition hover:bg-[#fbfaf6]'
> >
<div className='flex gap-3'> <div className='flex gap-3'>
<span className='grid h-10 w-10 place-items-center rounded-full bg-[#f0ede6] text-[#9a6a2f]'> <span className='grid h-8 w-8 place-items-center rounded-full bg-[#f0ede6] text-[#9a6a2f]'>
<BaseIcon path={mdiBookOpenVariant} size={20} /> <BaseIcon path={mdiBookOpenVariant} size={18} />
</span> </span>
<div> <div>
<p className='font-semibold text-[#17201b]'> <p className='font-semibold text-[#17201b]'>
@ -229,7 +229,7 @@ const ClientPortal = () => {
</div> </div>
<BaseIcon <BaseIcon
path={mdiChevronRight} path={mdiChevronRight}
size={20} size={18}
className='text-[#245c4c]' className='text-[#245c4c]'
/> />
</a> </a>
@ -237,14 +237,14 @@ const ClientPortal = () => {
</div> </div>
</Panel> </Panel>
<Panel className='bg-[#e8f1ec] p-6'> <Panel className='bg-[#e8f1ec] p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#245c4c]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#245c4c]'>
Pre-session reflection Pre-session reflection
</p> </p>
<h3 className='mt-2 text-2xl font-semibold text-[#17201b]'> <h3 className='mt-2 text-lg font-semibold text-[#17201b]'>
What changed since last time? What changed since last time?
</h3> </h3>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
Final MVP should let the client answer this before a Final MVP should let the client answer this before a
session, then feed the response into the coach prep brief. session, then feed the response into the coach prep brief.
</p> </p>

28
frontend/src/pages/clients.tsx
View File

@ -113,26 +113,26 @@ const Clients = () => {
</Head> </Head>
<SectionMain> <SectionMain>
<div className='mx-auto max-w-7xl'> <div className='mx-auto max-w-7xl'>
<div className='mb-6 flex flex-col justify-between gap-4 rounded-lg bg-[#17201b] p-7 text-white md:flex-row md:items-end'> <div className='mb-4 flex flex-col justify-between gap-4 rounded-lg bg-[#17201b] p-5 text-white md:flex-row md:items-end'>
<div> <div>
<div className='flex items-center gap-3 text-[#d8b15e]'> <div className='flex items-center gap-3 text-[#d8b15e]'>
<BaseIcon path={mdiAccountGroup} size={22} /> <BaseIcon path={mdiAccountGroup} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'> <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Client CRM Client CRM
</span> </span>
</div> </div>
<h1 className='mt-4 text-4xl font-semibold'>Client records</h1> <h1 className='mt-3 text-xl font-semibold'>Client records</h1>
<p className='mt-3 max-w-2xl text-[#d9d5ca]'> <p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
Open a client record to review goals, coach notes, recent Open a client record to review goals, coach notes, recent
sessions, and commitments. sessions, and commitments.
</p> </p>
</div> </div>
<div className='rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-[#f5ead5]'> <div className='rounded-full bg-white/10 px-3 py-1.5 text-sm font-semibold text-[#f5ead5]'>
{clients.length} clients {clients.length} clients
</div> </div>
</div> </div>
<div className='grid gap-6 xl:grid-cols-[0.85fr_1.15fr]'> <div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
<Panel className='overflow-hidden'> <Panel className='overflow-hidden'>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
@ -186,13 +186,13 @@ const Clients = () => {
{selectedClient && ( {selectedClient && (
<div className='space-y-6'> <div className='space-y-6'>
<Panel className='p-6'> <Panel className='p-4'>
<div className='flex flex-col justify-between gap-4 md:flex-row md:items-start'> <div className='flex flex-col justify-between gap-4 md:flex-row md:items-start'>
<div> <div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
{selectedClient.package?.title || 'Coaching client'} {selectedClient.package?.title || 'Coaching client'}
</p> </p>
<h2 className='mt-2 text-3xl font-semibold text-[#17201b]'> <h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
{selectedClient.name} {selectedClient.name}
</h2> </h2>
<p className='mt-2 text-[#68736c]'> <p className='mt-2 text-[#68736c]'>
@ -211,13 +211,13 @@ const Clients = () => {
</div> </div>
</div> </div>
<div className='mt-6 grid gap-4 lg:grid-cols-2'> <div className='mt-4 grid gap-4 lg:grid-cols-2'>
<div className='rounded-lg bg-[#f7f5f1] p-5'> <div className='rounded-lg bg-[#f7f5f1] p-5'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'> <div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
<BaseIcon path={mdiTarget} size={18} /> <BaseIcon path={mdiTarget} size={18} />
Goals Goals
</div> </div>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
{selectedClient.goals} {selectedClient.goals}
</p> </p>
</div> </div>
@ -226,17 +226,17 @@ const Clients = () => {
<BaseIcon path={mdiFileDocumentOutline} size={18} /> <BaseIcon path={mdiFileDocumentOutline} size={18} />
Private coach notes Private coach notes
</div> </div>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
{selectedClient.notes} {selectedClient.notes}
</p> </p>
</div> </div>
</div> </div>
</Panel> </Panel>
<div className='grid gap-6 lg:grid-cols-2'> <div className='grid gap-4 lg:grid-cols-2'>
<Panel> <Panel>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-xl font-semibold text-[#17201b]'> <h3 className='text-lg font-semibold text-[#17201b]'>
Session timeline Session timeline
</h3> </h3>
</div> </div>
@ -263,7 +263,7 @@ const Clients = () => {
<Panel> <Panel>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-xl font-semibold text-[#17201b]'> <h3 className='text-lg font-semibold text-[#17201b]'>
Open commitments Open commitments
</h3> </h3>
</div> </div>

46
frontend/src/pages/dashboard.tsx
View File

@ -124,63 +124,63 @@ const Dashboard = () => {
</Head> </Head>
<SectionMain> <SectionMain>
<div className='mx-auto max-w-7xl'> <div className='mx-auto max-w-7xl'>
<div className='grid gap-6 xl:grid-cols-[1.1fr_0.9fr]'> <div className='grid gap-4 xl:grid-cols-[1.1fr_0.9fr]'>
<div className='rounded-lg bg-[#17201b] p-8 text-white shadow-[0_24px_80px_rgba(23,32,27,0.18)]'> <div className='rounded-lg bg-[#17201b] p-5 text-white shadow-[0_24px_80px_rgba(23,32,27,0.18)]'>
<div className='flex items-center gap-3 text-[#d8b15e]'> <div className='flex items-center gap-3 text-[#d8b15e]'>
<BaseIcon path={mdiViewDashboardOutline} size={22} /> <BaseIcon path={mdiViewDashboardOutline} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'> <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Workspace overview Workspace overview
</span> </span>
</div> </div>
<h1 className='mt-6 max-w-2xl text-4xl font-semibold leading-tight md:text-5xl'> <h1 className='mt-3 max-w-2xl text-xl font-semibold leading-tight'>
Manage upcoming sessions, client notes, commitments, and Manage upcoming sessions, client notes, commitments, and
follow-up drafts. follow-up drafts.
</h1> </h1>
<p className='mt-5 max-w-2xl text-lg leading-8 text-[#d9d5ca]'> <p className='mt-3 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
Review scheduled sessions, open tasks, recent notes, and drafts Review scheduled sessions, open tasks, recent notes, and drafts
that need approval. that need approval.
</p> </p>
<div className='mt-8 flex flex-wrap gap-3'> <div className='mt-5 flex flex-wrap gap-3'>
<Link <Link
href='/session-memory' href='/session-memory'
className='rounded-full bg-[#d8b15e] px-5 py-3 text-sm font-semibold text-[#17201b]' className='rounded-full bg-[#d8b15e] px-4 py-2 text-sm font-semibold text-[#17201b]'
> >
Generate session memory Generate session memory
</Link> </Link>
<Link <Link
href='/clients' href='/clients'
className='rounded-full border border-white/25 px-5 py-3 text-sm font-semibold text-white' className='rounded-full border border-white/25 px-4 py-2 text-sm font-semibold text-white'
> >
Open client records Open client records
</Link> </Link>
</div> </div>
</div> </div>
<ShellCard className='p-6'> <ShellCard className='p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Next session prep Next session prep
</p> </p>
{nextSession ? ( {nextSession ? (
<div> <div>
<h2 className='mt-4 text-2xl font-semibold text-[#17201b]'> <h2 className='mt-4 text-lg font-semibold text-[#17201b]'>
{nextSession.client?.name || 'Client session'} {nextSession.client?.name || 'Client session'}
</h2> </h2>
<p className='mt-1 text-sm text-[#68736c]'> <p className='mt-1 text-sm text-[#68736c]'>
{nextSession.title} {nextSession.title}
</p> </p>
<p className='mt-5 leading-7 text-[#4f5a53]'> <p className='mt-5 leading-6 text-[#4f5a53]'>
{nextSession.ai_summary} {nextSession.ai_summary}
</p> </p>
<Link <Link
href='/session-memory' href='/session-memory'
className='mt-6 inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-4 py-2 text-sm font-semibold text-white' className='mt-4 inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
> >
Review memory Review memory
<BaseIcon path={mdiArrowRight} size={18} /> <BaseIcon path={mdiArrowRight} size={18} />
</Link> </Link>
</div> </div>
) : ( ) : (
<p className='mt-4 leading-7 text-[#68736c]'> <p className='mt-4 leading-6 text-[#68736c]'>
{loading {loading
? 'Loading your coaching workspace...' ? 'Loading your coaching workspace...'
: 'No upcoming session memory yet.'} : 'No upcoming session memory yet.'}
@ -189,7 +189,7 @@ const Dashboard = () => {
</ShellCard> </ShellCard>
</div> </div>
<div className='mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4'> <div className='mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
{stats.map((stat) => ( {stats.map((stat) => (
<Link key={stat.label} href={stat.href}> <Link key={stat.label} href={stat.href}>
<ShellCard className='h-full p-5 transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(23,32,27,0.1)]'> <ShellCard className='h-full p-5 transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(23,32,27,0.1)]'>
@ -198,12 +198,12 @@ const Dashboard = () => {
<p className='text-sm font-semibold text-[#68736c]'> <p className='text-sm font-semibold text-[#68736c]'>
{stat.label} {stat.label}
</p> </p>
<p className='mt-3 text-4xl font-semibold text-[#17201b]'> <p className='mt-2 text-2xl font-semibold text-[#17201b]'>
{loading ? '...' : stat.value} {loading ? '...' : stat.value}
</p> </p>
</div> </div>
<span className='grid h-11 w-11 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'> <span className='grid h-9 w-9 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
<BaseIcon path={stat.icon} size={23} /> <BaseIcon path={stat.icon} size={19} />
</span> </span>
</div> </div>
</ShellCard> </ShellCard>
@ -211,15 +211,15 @@ const Dashboard = () => {
))} ))}
</div> </div>
<div className='mt-6 grid gap-6 xl:grid-cols-[0.95fr_1.05fr]'> <div className='mt-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
<ShellCard> <ShellCard>
<div className='border-b border-[#ded8cc] p-6'> <div className='border-b border-[#ded8cc] p-4'>
<div className='flex items-center justify-between gap-4'> <div className='flex items-center justify-between gap-4'>
<div> <div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Client records Client records
</p> </p>
<h2 className='mt-2 text-2xl font-semibold'> <h2 className='mt-2 text-lg font-semibold'>
Active clients Active clients
</h2> </h2>
</div> </div>
@ -257,13 +257,13 @@ const Dashboard = () => {
</ShellCard> </ShellCard>
<ShellCard> <ShellCard>
<div className='border-b border-[#ded8cc] p-6'> <div className='border-b border-[#ded8cc] p-4'>
<div className='flex items-center justify-between gap-4'> <div className='flex items-center justify-between gap-4'>
<div> <div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Recent intelligence Recent intelligence
</p> </p>
<h2 className='mt-2 text-2xl font-semibold'> <h2 className='mt-2 text-lg font-semibold'>
Session memory Session memory
</h2> </h2>
</div> </div>
@ -284,7 +284,7 @@ const Dashboard = () => {
<p className='mt-1 text-sm text-[#68736c]'> <p className='mt-1 text-sm text-[#68736c]'>
{session.client?.name} {session.client?.name}
</p> </p>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
{session.ai_summary} {session.ai_summary}
</p> </p>
</div> </div>

44
frontend/src/pages/session-memory.tsx
View File

@ -58,7 +58,7 @@ function OutputBlock({
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'>
{title} {title}
</p> </p>
<div className='mt-3 leading-7 text-[#4f5a53]'>{children}</div> <div className='mt-3 leading-6 text-[#4f5a53]'>{children}</div>
</div> </div>
); );
} }
@ -107,40 +107,40 @@ const SessionMemory = () => {
</Head> </Head>
<SectionMain> <SectionMain>
<div className='mx-auto max-w-7xl'> <div className='mx-auto max-w-7xl'>
<div className='mb-6 rounded-lg bg-[#17201b] p-7 text-white'> <div className='mb-4 rounded-lg bg-[#17201b] p-5 text-white'>
<div className='flex items-center gap-3 text-[#d8b15e]'> <div className='flex items-center gap-3 text-[#d8b15e]'>
<BaseIcon path={mdiFileDocumentEditOutline} size={22} /> <BaseIcon path={mdiFileDocumentEditOutline} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'> <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Session Memory Session Memory
</span> </span>
</div> </div>
<h1 className='mt-4 max-w-3xl text-4xl font-semibold'> <h1 className='mt-3 max-w-3xl text-xl font-semibold'>
Turn rough notes into follow-up, commitments, and next-session Turn rough notes into follow-up, commitments, and next-session
prep. prep.
</h1> </h1>
<p className='mt-3 max-w-3xl leading-7 text-[#d9d5ca]'> <p className='mt-2 max-w-3xl text-sm leading-6 text-[#d9d5ca]'>
Paste session notes or a transcript, generate structured output, Paste session notes or a transcript, generate structured output,
then review and save the result before sharing anything with a then review and save the result before sharing anything with a
client. client.
</p> </p>
</div> </div>
<div className='grid gap-6 xl:grid-cols-[0.85fr_1.15fr]'> <div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
<Panel className='p-6'> <Panel className='p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
Raw session input Raw session input
</p> </p>
<h2 className='mt-2 text-2xl font-semibold text-[#17201b]'> <h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
Extract a session Extract a session
</h2> </h2>
<label className='mb-2 mt-6 block text-sm font-semibold text-[#526159]'> <label className='mb-2 mt-4 block text-sm font-semibold text-[#526159]'>
Client Client
</label> </label>
<select <select
value={clientId} value={clientId}
onChange={(event) => setClientId(event.target.value)} onChange={(event) => setClientId(event.target.value)}
className='w-full rounded-lg border border-[#d8d1c2] bg-white px-4 py-3 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15' className='w-full rounded-lg border border-[#d8d1c2] bg-white px-3 py-2 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
> >
{clients.map((client) => ( {clients.map((client) => (
<option key={client.id} value={client.id}> <option key={client.id} value={client.id}>
@ -155,7 +155,7 @@ const SessionMemory = () => {
<textarea <textarea
value={transcript} value={transcript}
onChange={(event) => setTranscript(event.target.value)} onChange={(event) => setTranscript(event.target.value)}
className='min-h-[320px] w-full rounded-lg border border-[#d8d1c2] bg-[#fbfaf6] px-4 py-3 leading-7 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15' className='min-h-[220px] w-full rounded-lg border border-[#d8d1c2] bg-[#fbfaf6] px-3 py-2 leading-6 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
placeholder='Paste session transcript, coach notes, commitments, blockers, or a rough debrief...' placeholder='Paste session transcript, coach notes, commitments, blockers, or a rough debrief...'
/> />
<div className='mt-5'> <div className='mt-5'>
@ -169,13 +169,13 @@ const SessionMemory = () => {
</Panel> </Panel>
<div className='space-y-6'> <div className='space-y-6'>
<Panel className='p-6'> <Panel className='p-4'>
<div className='flex items-start justify-between gap-4'> <div className='flex items-start justify-between gap-4'>
<div> <div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'> <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
AI draft AI draft
</p> </p>
<h2 className='mt-2 text-2xl font-semibold text-[#17201b]'> <h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
Review before sharing Review before sharing
</h2> </h2>
</div> </div>
@ -185,7 +185,7 @@ const SessionMemory = () => {
</div> </div>
{generatedMemory ? ( {generatedMemory ? (
<div className='mt-6 grid gap-4'> <div className='mt-4 grid gap-4'>
<OutputBlock title='Summary'> <OutputBlock title='Summary'>
{generatedMemory.ai_summary} {generatedMemory.ai_summary}
</OutputBlock> </OutputBlock>
@ -200,14 +200,14 @@ const SessionMemory = () => {
<div className='flex flex-wrap gap-3'> <div className='flex flex-wrap gap-3'>
<button <button
type='button' type='button'
className='inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-4 py-2 text-sm font-semibold text-white' className='inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
> >
<BaseIcon path={mdiCheckCircleOutline} size={18} /> <BaseIcon path={mdiCheckCircleOutline} size={18} />
Save final memory Save final memory
</button> </button>
<button <button
type='button' type='button'
className='inline-flex items-center gap-2 rounded-full border border-[#ded8cc] bg-white px-4 py-2 text-sm font-semibold text-[#17201b]' className='inline-flex items-center gap-2 rounded-full border border-[#ded8cc] bg-white px-3 py-1.5 text-sm font-semibold text-[#17201b]'
> >
<BaseIcon path={mdiContentCopy} size={18} /> <BaseIcon path={mdiContentCopy} size={18} />
Copy follow-up Copy follow-up
@ -215,13 +215,13 @@ const SessionMemory = () => {
</div> </div>
</div> </div>
) : ( ) : (
<div className='mt-6 rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-6'> <div className='mt-4 rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-4'>
<BaseIcon <BaseIcon
path={mdiLightbulbOnOutline} path={mdiLightbulbOnOutline}
size={28} size={22}
className='text-[#d8b15e]' className='text-[#d8b15e]'
/> />
<p className='mt-4 leading-7 text-[#68736c]'> <p className='mt-4 leading-6 text-[#68736c]'>
Generate a structured memory through the AppWizzy AI Generate a structured memory through the AppWizzy AI
proxy. The result should stay reviewable: summary, proxy. The result should stay reviewable: summary,
commitments, blockers, homework, follow-up, and prep for commitments, blockers, homework, follow-up, and prep for
@ -233,7 +233,7 @@ const SessionMemory = () => {
<Panel> <Panel>
<div className='border-b border-[#ded8cc] p-5'> <div className='border-b border-[#ded8cc] p-5'>
<h2 className='text-xl font-semibold text-[#17201b]'> <h2 className='text-lg font-semibold text-[#17201b]'>
Recent memories Recent memories
</h2> </h2>
</div> </div>
@ -251,11 +251,11 @@ const SessionMemory = () => {
</div> </div>
<BaseIcon <BaseIcon
path={mdiSendOutline} path={mdiSendOutline}
size={20} size={18}
className='text-[#245c4c]' className='text-[#245c4c]'
/> />
</div> </div>
<p className='mt-3 leading-7 text-[#4f5a53]'> <p className='mt-3 leading-6 text-[#4f5a53]'>
{session.ai_summary} {session.ai_summary}
</p> </p>
<p className='mt-3 text-sm font-semibold text-[#245c4c]'> <p className='mt-3 text-sm font-semibold text-[#245c4c]'>