Align workspace colors with landing palette

This commit is contained in:
Flatlogic Bot 2026-06-09 13:13:08 +00:00
parent 88c1db36fd
commit 130333c0df
5 changed files with 149 additions and 149 deletions

View File

@ -136,19 +136,19 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
const activePath = router.pathname.split('/')[1];
return (
<div className='min-h-screen bg-[#f7f5f1] text-[#17201b]'>
<div className='min-h-screen bg-[#fffdf9] text-[#19192d]'>
<aside
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 ${
className={`fixed inset-y-0 left-0 z-40 w-64 border-r border-[#19192d]/10 bg-[#fffdf9] 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'
}`}
>
<div className='flex items-center justify-between'>
<Link href='/dashboard' className='flex items-center gap-3'>
<span className='grid h-8 w-8 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-[#b17a1e]/50 bg-[#35b7a5] text-sm font-black text-white'>
CW
</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-[#b17a1e]'>
AppWizzy
</span>
<span className='block text-lg font-semibold'>
@ -158,18 +158,18 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
</Link>
<button
type='button'
className='grid h-8 w-8 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-[#19192d]/10 text-[#72798a] lg:hidden'
onClick={() => setIsAsideOpen(false)}
>
<BaseIcon path={mdiClose} size={18} />
</button>
</div>
<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]'>
<div className='mt-5 rounded-lg border border-[#19192d]/10 bg-white p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#b17a1e]'>
Today
</p>
<p className='mt-2 text-sm leading-6 text-[#5f6b64]'>
<p className='mt-2 text-sm leading-6 text-[#72798a]'>
Prepare, follow up, and keep every coaching relationship warm
between sessions.
</p>
@ -186,8 +186,8 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
href={item.href}
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-semibold transition ${
isActive
? 'bg-[#245c4c] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]'
: 'text-[#56645d] hover:bg-[#efeae0] hover:text-[#17201b]'
? 'bg-[#35b7a5] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]'
: 'text-[#72798a] hover:bg-[#fbf8f1] hover:text-[#19192d]'
}`}
>
<BaseIcon path={item.icon} size={18} />
@ -197,8 +197,8 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
})}
</nav>
<div className='absolute inset-x-4 bottom-5 rounded-lg border border-[#ded8cc] bg-[#f0ede6] p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.18em] text-[#9a6a2f]'>
<div className='absolute inset-x-4 bottom-5 rounded-lg border border-[#19192d]/10 bg-[#fbf8f1] p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.18em] text-[#b17a1e]'>
Signed in
</p>
<p className='mt-2 truncate text-sm font-semibold'>
@ -206,7 +206,7 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
</p>
<button
type='button'
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'
className='mt-4 flex w-full items-center justify-center gap-2 rounded-full bg-[#19192d] px-3 py-1.5 text-sm font-semibold text-white'
onClick={() => {
dispatch(logoutUser());
router.push('/login');
@ -222,32 +222,32 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
<button
type='button'
aria-label='Close menu'
className='fixed inset-0 z-30 bg-[#17201b]/40 lg:hidden'
className='fixed inset-0 z-30 bg-[#19192d]/40 lg:hidden'
onClick={() => setIsAsideOpen(false)}
/>
)}
<div className='lg:pl-64'>
<header className='sticky top-0 z-20 border-b border-[#ded8cc]/80 bg-[#f7f5f1]/92 px-3 py-2 backdrop-blur lg:px-8'>
<header className='sticky top-0 z-20 border-b border-[#19192d]/10/80 bg-[#fffdf9]/92 px-3 py-2 backdrop-blur lg:px-8'>
<div className='flex items-center justify-between'>
<button
type='button'
className='grid h-8 w-8 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-[#19192d]/10 bg-white text-[#72798a] lg:hidden'
onClick={() => setIsAsideOpen(true)}
>
<BaseIcon path={mdiMenu} size={18} />
</button>
<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-[#b17a1e]'>
Workspace status
</p>
<p className='mt-1 text-sm text-[#647068]'>
<p className='mt-1 text-sm text-[#72798a]'>
Review sessions, clients, tasks, and shared client materials.
</p>
</div>
<Link
href='/'
className='rounded-full border border-[#ded8cc] bg-white px-3 py-1.5 text-sm font-semibold text-[#17201b] shadow-sm'
className='rounded-full border border-[#19192d]/10 bg-white px-3 py-1.5 text-sm font-semibold text-[#19192d] shadow-sm'
>
Public site
</Link>

View File

@ -37,7 +37,7 @@ function Panel({
}) {
return (
<section
className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
>
{children}
</section>
@ -87,8 +87,8 @@ const ClientPortal = () => {
<SectionMain>
<div className='mx-auto max-w-7xl'>
<div className='mb-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
<div className='rounded-lg bg-[#17201b] p-5 text-white'>
<div className='flex items-center gap-3 text-[#d8b15e]'>
<div className='rounded-lg bg-[#19192d] p-5 text-white'>
<div className='flex items-center gap-3 text-[#b17a1e]'>
<BaseIcon path={mdiAccountCircle} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Client portal
@ -97,19 +97,19 @@ const ClientPortal = () => {
<h1 className='mt-3 text-xl font-semibold'>
Client portal preview
</h1>
<p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
<p className='mt-2 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
Preview the client-facing workspace with shared notes,
commitments, resources, and a pre-session reflection prompt.
</p>
</div>
<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-[#b17a1e]'>
Preview as client
</label>
<select
value={clientId}
onChange={(event) => setClientId(event.target.value)}
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'
className='mt-4 w-full rounded-lg border border-[#19192d]/10 bg-white px-3 py-2 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
>
{clients.map((client) => (
<option key={client.id} value={client.id}>
@ -117,7 +117,7 @@ const ClientPortal = () => {
</option>
))}
</select>
<p className='mt-4 text-sm leading-6 text-[#68736c]'>
<p className='mt-4 text-sm leading-6 text-[#72798a]'>
MVP note: this is still a coach-visible preview. Final client
access should be a client role or magic-link route.
</p>
@ -127,28 +127,28 @@ const ClientPortal = () => {
{portalClient && (
<div className='grid gap-4 xl:grid-cols-[1.05fr_0.95fr]'>
<Panel className='overflow-hidden'>
<div className='bg-[#fbfaf6] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<div className='bg-[#fffdf9] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
Your coaching workspace
</p>
<h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
<h2 className='mt-2 text-xl font-semibold text-[#19192d]'>
{portalClient.name}
</h2>
<p className='mt-4 max-w-2xl leading-6 text-[#4f5a53]'>
<p className='mt-4 max-w-2xl leading-6 text-[#72798a]'>
{portalClient.goals}
</p>
</div>
<div className='p-5'>
<div className='flex items-center gap-3'>
<span className='grid h-8 w-8 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
<span className='grid h-8 w-8 place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
<BaseIcon path={mdiMessageReplyTextOutline} size={18} />
</span>
<div>
<h3 className='text-lg font-semibold text-[#17201b]'>
<h3 className='text-lg font-semibold text-[#19192d]'>
Shared session notes
</h3>
<p className='text-sm text-[#68736c]'>
<p className='text-sm text-[#72798a]'>
Only coach-approved notes appear here.
</p>
</div>
@ -158,12 +158,12 @@ const ClientPortal = () => {
{(portalClient.sessions || []).map((session) => (
<div
key={session.id}
className='rounded-lg border border-[#ded8cc] bg-white p-5'
className='rounded-lg border border-[#19192d]/10 bg-white p-5'
>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{session.title}
</p>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
{session.shared_client_notes}
</p>
</div>
@ -174,8 +174,8 @@ const ClientPortal = () => {
<div className='space-y-6'>
<Panel>
<div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-lg font-semibold text-[#17201b]'>
<div className='border-b border-[#19192d]/10 p-5'>
<h3 className='text-lg font-semibold text-[#19192d]'>
Commitments
</h3>
</div>
@ -183,16 +183,16 @@ const ClientPortal = () => {
{(portalClient.action_items || []).map((item) => (
<div
key={item.id}
className='flex gap-3 rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4'
className='flex gap-3 rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4'
>
<span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#245c4c] text-white'>
<span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#35b7a5] text-white'>
<BaseIcon path={mdiCheckCircleOutline} size={18} />
</span>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{item.title}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{item.status.replace('_', ' ')}
</p>
</div>
@ -202,8 +202,8 @@ const ClientPortal = () => {
</Panel>
<Panel>
<div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-lg font-semibold text-[#17201b]'>
<div className='border-b border-[#19192d]/10 p-5'>
<h3 className='text-lg font-semibold text-[#19192d]'>
Resources
</h3>
</div>
@ -212,17 +212,17 @@ const ClientPortal = () => {
<a
key={resource.id}
href={resource.url}
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-[#19192d]/10 bg-white p-4 transition hover:bg-[#fffdf9]'
>
<div className='flex gap-3'>
<span className='grid h-8 w-8 place-items-center rounded-full bg-[#f0ede6] text-[#9a6a2f]'>
<span className='grid h-8 w-8 place-items-center rounded-full bg-[#fbf8f1] text-[#b17a1e]'>
<BaseIcon path={mdiBookOpenVariant} size={18} />
</span>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{resource.title}
</p>
<p className='mt-1 text-sm leading-6 text-[#68736c]'>
<p className='mt-1 text-sm leading-6 text-[#72798a]'>
{resource.description}
</p>
</div>
@ -230,21 +230,21 @@ const ClientPortal = () => {
<BaseIcon
path={mdiChevronRight}
size={18}
className='text-[#245c4c]'
className='text-[#35b7a5]'
/>
</a>
))}
</div>
</Panel>
<Panel className='bg-[#e8f1ec] p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#245c4c]'>
<Panel className='bg-[#f3fbf8] p-4'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
Pre-session reflection
</p>
<h3 className='mt-2 text-lg font-semibold text-[#17201b]'>
<h3 className='mt-2 text-lg font-semibold text-[#19192d]'>
What changed since last time?
</h3>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
Final MVP should let the client answer this before a
session, then feed the response into the coach prep brief.
</p>

View File

@ -55,7 +55,7 @@ function Panel({
}) {
return (
<section
className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
>
{children}
</section>
@ -64,7 +64,7 @@ function Panel({
function EmptyState({ label }: { label: string }) {
return (
<p className='rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-4 text-sm text-[#68736c]'>
<p className='rounded-lg border border-dashed border-[#19192d]/10 bg-[#fffdf9] p-4 text-sm text-[#72798a]'>
{label}
</p>
);
@ -113,33 +113,33 @@ const Clients = () => {
</Head>
<SectionMain>
<div className='mx-auto max-w-7xl'>
<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 className='mb-4 flex flex-col justify-between gap-4 rounded-lg bg-[#19192d] p-5 text-white md:flex-row md:items-end'>
<div>
<div className='flex items-center gap-3 text-[#d8b15e]'>
<div className='flex items-center gap-3 text-[#b17a1e]'>
<BaseIcon path={mdiAccountGroup} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Client CRM
</span>
</div>
<h1 className='mt-3 text-xl font-semibold'>Client records</h1>
<p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
<p className='mt-2 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
Open a client record to review goals, coach notes, recent
sessions, and commitments.
</p>
</div>
<div className='rounded-full bg-white/10 px-3 py-1.5 text-sm font-semibold text-[#f5ead5]'>
<div className='rounded-full bg-white/10 px-3 py-1.5 text-sm font-semibold text-[#fbf8f1]'>
{clients.length} clients
</div>
</div>
<div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
<Panel className='overflow-hidden'>
<div className='border-b border-[#ded8cc] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<div className='border-b border-[#19192d]/10 p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
Coaching relationships
</p>
</div>
<div className='divide-y divide-[#eee8dc]'>
<div className='divide-y divide-[#19192d]/10'>
{clients.map((client) => (
<button
key={client.id}
@ -147,20 +147,20 @@ const Clients = () => {
onClick={() => selectClient(client.id)}
className={`block w-full p-5 text-left transition ${
selectedClient?.id === client.id
? 'bg-[#e8f1ec]'
: 'bg-white hover:bg-[#fbfaf6]'
? 'bg-[#f3fbf8]'
: 'bg-white hover:bg-[#fffdf9]'
}`}
>
<div className='flex items-start justify-between gap-3'>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{client.name}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{client.role_title} · {client.company}
</p>
</div>
<span className='rounded-full bg-[#f0ede6] px-3 py-1 text-xs font-semibold text-[#6e5730]'>
<span className='rounded-full bg-[#fbf8f1] px-3 py-1 text-xs font-semibold text-[#b17a1e]'>
{client.status}
</span>
</div>
@ -173,7 +173,7 @@ const Clients = () => {
.map((tag) => (
<span
key={tag}
className='rounded-full bg-white px-3 py-1 text-xs text-[#68736c]'
className='rounded-full bg-white px-3 py-1 text-xs text-[#72798a]'
>
{tag}
</span>
@ -189,22 +189,22 @@ const Clients = () => {
<Panel className='p-4'>
<div className='flex flex-col justify-between gap-4 md:flex-row md:items-start'>
<div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
{selectedClient.package?.title || 'Coaching client'}
</p>
<h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
<h2 className='mt-2 text-xl font-semibold text-[#19192d]'>
{selectedClient.name}
</h2>
<p className='mt-2 text-[#68736c]'>
<p className='mt-2 text-[#72798a]'>
{selectedClient.email}
</p>
</div>
<div className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4 md:min-w-56'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
<div className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4 md:min-w-56'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
<BaseIcon path={mdiCalendarClock} size={18} />
Next session
</div>
<p className='mt-2 text-sm text-[#68736c]'>
<p className='mt-2 text-sm text-[#72798a]'>
{selectedClient.next_session_at ||
'No session scheduled'}
</p>
@ -212,21 +212,21 @@ const Clients = () => {
</div>
<div className='mt-4 grid gap-4 lg:grid-cols-2'>
<div className='rounded-lg bg-[#f7f5f1] p-5'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
<div className='rounded-lg bg-[#fffdf9] p-5'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
<BaseIcon path={mdiTarget} size={18} />
Goals
</div>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
{selectedClient.goals}
</p>
</div>
<div className='rounded-lg bg-[#f7f5f1] p-5'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
<div className='rounded-lg bg-[#fffdf9] p-5'>
<div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
<BaseIcon path={mdiFileDocumentOutline} size={18} />
Private coach notes
</div>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
{selectedClient.notes}
</p>
</div>
@ -235,8 +235,8 @@ const Clients = () => {
<div className='grid gap-4 lg:grid-cols-2'>
<Panel>
<div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-lg font-semibold text-[#17201b]'>
<div className='border-b border-[#19192d]/10 p-5'>
<h3 className='text-lg font-semibold text-[#19192d]'>
Session timeline
</h3>
</div>
@ -245,12 +245,12 @@ const Clients = () => {
(selectedClient.sessions || []).map((session) => (
<div
key={session.id}
className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4'
className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4'
>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{session.title}
</p>
<p className='mt-2 text-sm leading-6 text-[#68736c]'>
<p className='mt-2 text-sm leading-6 text-[#72798a]'>
{session.ai_summary}
</p>
</div>
@ -262,8 +262,8 @@ const Clients = () => {
</Panel>
<Panel>
<div className='border-b border-[#ded8cc] p-5'>
<h3 className='text-lg font-semibold text-[#17201b]'>
<div className='border-b border-[#19192d]/10 p-5'>
<h3 className='text-lg font-semibold text-[#19192d]'>
Open commitments
</h3>
</div>
@ -272,19 +272,19 @@ const Clients = () => {
(selectedClient.action_items || []).map((item) => (
<div
key={item.id}
className='flex gap-3 rounded-lg border border-[#ded8cc] bg-white p-4'
className='flex gap-3 rounded-lg border border-[#19192d]/10 bg-white p-4'
>
<span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
<span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
<BaseIcon
path={mdiCheckCircleOutline}
size={18}
/>
</span>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{item.title}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{item.status.replace('_', ' ')}
</p>
</div>

View File

@ -68,7 +68,7 @@ function ShellCard({
}) {
return (
<section
className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
>
{children}
</section>
@ -125,8 +125,8 @@ const Dashboard = () => {
<SectionMain>
<div className='mx-auto max-w-7xl'>
<div className='grid gap-4 xl:grid-cols-[1.1fr_0.9fr]'>
<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='rounded-lg bg-[#19192d] p-5 text-white shadow-[0_24px_80px_rgba(23,32,27,0.18)]'>
<div className='flex items-center gap-3 text-[#b17a1e]'>
<BaseIcon path={mdiViewDashboardOutline} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Workspace overview
@ -136,14 +136,14 @@ const Dashboard = () => {
Manage upcoming sessions, client notes, commitments, and
follow-up drafts.
</h1>
<p className='mt-3 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
<p className='mt-3 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
Review scheduled sessions, open tasks, recent notes, and drafts
that need approval.
</p>
<div className='mt-5 flex flex-wrap gap-3'>
<Link
href='/session-memory'
className='rounded-full bg-[#d8b15e] px-4 py-2 text-sm font-semibold text-[#17201b]'
className='rounded-full bg-[#b17a1e] px-4 py-2 text-sm font-semibold text-[#19192d]'
>
Generate session memory
</Link>
@ -157,30 +157,30 @@ const Dashboard = () => {
</div>
<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-[#b17a1e]'>
Next session prep
</p>
{nextSession ? (
<div>
<h2 className='mt-4 text-lg font-semibold text-[#17201b]'>
<h2 className='mt-4 text-lg font-semibold text-[#19192d]'>
{nextSession.client?.name || 'Client session'}
</h2>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{nextSession.title}
</p>
<p className='mt-5 leading-6 text-[#4f5a53]'>
<p className='mt-5 leading-6 text-[#72798a]'>
{nextSession.ai_summary}
</p>
<Link
href='/session-memory'
className='mt-4 inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
className='mt-4 inline-flex items-center gap-2 rounded-full bg-[#35b7a5] px-3 py-1.5 text-sm font-semibold text-white'
>
Review memory
<BaseIcon path={mdiArrowRight} size={18} />
</Link>
</div>
) : (
<p className='mt-4 leading-6 text-[#68736c]'>
<p className='mt-4 leading-6 text-[#72798a]'>
{loading
? 'Loading your coaching workspace...'
: 'No upcoming session memory yet.'}
@ -195,14 +195,14 @@ const Dashboard = () => {
<ShellCard className='h-full p-5 transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(23,32,27,0.1)]'>
<div className='flex items-start justify-between gap-4'>
<div>
<p className='text-sm font-semibold text-[#68736c]'>
<p className='text-sm font-semibold text-[#72798a]'>
{stat.label}
</p>
<p className='mt-2 text-2xl font-semibold text-[#17201b]'>
<p className='mt-2 text-2xl font-semibold text-[#19192d]'>
{loading ? '...' : stat.value}
</p>
</div>
<span className='grid h-9 w-9 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
<span className='grid h-9 w-9 place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
<BaseIcon path={stat.icon} size={19} />
</span>
</div>
@ -213,10 +213,10 @@ const Dashboard = () => {
<div className='mt-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
<ShellCard>
<div className='border-b border-[#ded8cc] p-4'>
<div className='border-b border-[#19192d]/10 p-4'>
<div className='flex items-center justify-between gap-4'>
<div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
Client records
</p>
<h2 className='mt-2 text-lg font-semibold'>
@ -224,30 +224,30 @@ const Dashboard = () => {
</h2>
</div>
<Link
className='text-sm font-semibold text-[#245c4c]'
className='text-sm font-semibold text-[#35b7a5]'
href='/clients'
>
View all
</Link>
</div>
</div>
<div className='divide-y divide-[#eee8dc]'>
<div className='divide-y divide-[#19192d]/10'>
{summary.activeClients.map((client) => (
<Link
key={client.id}
href={`/clients?clientId=${client.id}`}
className='block p-5 transition hover:bg-[#fbfaf6]'
className='block p-5 transition hover:bg-[#fffdf9]'
>
<div className='flex items-start justify-between gap-4'>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{client.name}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{client.role_title} · {client.company}
</p>
</div>
<span className='rounded-full bg-[#f0ede6] px-3 py-1 text-xs font-semibold text-[#6e5730]'>
<span className='rounded-full bg-[#fbf8f1] px-3 py-1 text-xs font-semibold text-[#b17a1e]'>
{client.package?.title || 'Coaching'}
</span>
</div>
@ -257,10 +257,10 @@ const Dashboard = () => {
</ShellCard>
<ShellCard>
<div className='border-b border-[#ded8cc] p-4'>
<div className='border-b border-[#19192d]/10 p-4'>
<div className='flex items-center justify-between gap-4'>
<div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
Recent intelligence
</p>
<h2 className='mt-2 text-lg font-semibold'>
@ -268,23 +268,23 @@ const Dashboard = () => {
</h2>
</div>
<Link
className='text-sm font-semibold text-[#245c4c]'
className='text-sm font-semibold text-[#35b7a5]'
href='/session-memory'
>
Open
</Link>
</div>
</div>
<div className='divide-y divide-[#eee8dc]'>
<div className='divide-y divide-[#19192d]/10'>
{summary.nextSessions.map((session) => (
<div key={session.id} className='p-5'>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{session.title}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{session.client?.name}
</p>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
{session.ai_summary}
</p>
</div>

View File

@ -39,7 +39,7 @@ function Panel({
}) {
return (
<section
className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
>
{children}
</section>
@ -54,11 +54,11 @@ function OutputBlock({
children: React.ReactNode;
}) {
return (
<div className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'>
<div className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-5'>
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#b17a1e]'>
{title}
</p>
<div className='mt-3 leading-6 text-[#4f5a53]'>{children}</div>
<div className='mt-3 leading-6 text-[#72798a]'>{children}</div>
</div>
);
}
@ -107,8 +107,8 @@ const SessionMemory = () => {
</Head>
<SectionMain>
<div className='mx-auto max-w-7xl'>
<div className='mb-4 rounded-lg bg-[#17201b] p-5 text-white'>
<div className='flex items-center gap-3 text-[#d8b15e]'>
<div className='mb-4 rounded-lg bg-[#19192d] p-5 text-white'>
<div className='flex items-center gap-3 text-[#b17a1e]'>
<BaseIcon path={mdiFileDocumentEditOutline} size={18} />
<span className='text-xs font-semibold uppercase tracking-[0.22em]'>
Session Memory
@ -118,7 +118,7 @@ const SessionMemory = () => {
Turn rough notes into follow-up, commitments, and next-session
prep.
</h1>
<p className='mt-2 max-w-3xl text-sm leading-6 text-[#d9d5ca]'>
<p className='mt-2 max-w-3xl text-sm leading-6 text-[#fffdf9]'>
Paste session notes or a transcript, generate structured output,
then review and save the result before sharing anything with a
client.
@ -127,20 +127,20 @@ const SessionMemory = () => {
<div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
<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-[#b17a1e]'>
Raw session input
</p>
<h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
<h2 className='mt-2 text-lg font-semibold text-[#19192d]'>
Extract a session
</h2>
<label className='mb-2 mt-4 block text-sm font-semibold text-[#526159]'>
<label className='mb-2 mt-4 block text-sm font-semibold text-[#72798a]'>
Client
</label>
<select
value={clientId}
onChange={(event) => setClientId(event.target.value)}
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'
className='w-full rounded-lg border border-[#19192d]/10 bg-white px-3 py-2 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
>
{clients.map((client) => (
<option key={client.id} value={client.id}>
@ -149,13 +149,13 @@ const SessionMemory = () => {
))}
</select>
<label className='mb-2 mt-5 block text-sm font-semibold text-[#526159]'>
<label className='mb-2 mt-5 block text-sm font-semibold text-[#72798a]'>
Transcript or raw notes
</label>
<textarea
value={transcript}
onChange={(event) => setTranscript(event.target.value)}
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'
className='min-h-[220px] w-full rounded-lg border border-[#19192d]/10 bg-[#fffdf9] px-3 py-2 leading-6 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
placeholder='Paste session transcript, coach notes, commitments, blockers, or a rough debrief...'
/>
<div className='mt-5'>
@ -172,14 +172,14 @@ const SessionMemory = () => {
<Panel className='p-4'>
<div className='flex items-start justify-between gap-4'>
<div>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
<p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
AI draft
</p>
<h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
<h2 className='mt-2 text-lg font-semibold text-[#19192d]'>
Review before sharing
</h2>
</div>
<span className='rounded-full bg-[#e8f1ec] px-3 py-1 text-xs font-semibold text-[#245c4c]'>
<span className='rounded-full bg-[#f3fbf8] px-3 py-1 text-xs font-semibold text-[#35b7a5]'>
Coach approved
</span>
</div>
@ -200,14 +200,14 @@ const SessionMemory = () => {
<div className='flex flex-wrap gap-3'>
<button
type='button'
className='inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
className='inline-flex items-center gap-2 rounded-full bg-[#35b7a5] px-3 py-1.5 text-sm font-semibold text-white'
>
<BaseIcon path={mdiCheckCircleOutline} size={18} />
Save final memory
</button>
<button
type='button'
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]'
className='inline-flex items-center gap-2 rounded-full border border-[#19192d]/10 bg-white px-3 py-1.5 text-sm font-semibold text-[#19192d]'
>
<BaseIcon path={mdiContentCopy} size={18} />
Copy follow-up
@ -215,13 +215,13 @@ const SessionMemory = () => {
</div>
</div>
) : (
<div className='mt-4 rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-4'>
<div className='mt-4 rounded-lg border border-dashed border-[#19192d]/10 bg-[#fffdf9] p-4'>
<BaseIcon
path={mdiLightbulbOnOutline}
size={22}
className='text-[#d8b15e]'
className='text-[#b17a1e]'
/>
<p className='mt-4 leading-6 text-[#68736c]'>
<p className='mt-4 leading-6 text-[#72798a]'>
Generate a structured memory through the AppWizzy AI
proxy. The result should stay reviewable: summary,
commitments, blockers, homework, follow-up, and prep for
@ -232,33 +232,33 @@ const SessionMemory = () => {
</Panel>
<Panel>
<div className='border-b border-[#ded8cc] p-5'>
<h2 className='text-lg font-semibold text-[#17201b]'>
<div className='border-b border-[#19192d]/10 p-5'>
<h2 className='text-lg font-semibold text-[#19192d]'>
Recent memories
</h2>
</div>
<div className='divide-y divide-[#eee8dc]'>
<div className='divide-y divide-[#19192d]/10'>
{sessions.map((session) => (
<div key={session.id} className='p-5'>
<div className='flex items-start justify-between gap-4'>
<div>
<p className='font-semibold text-[#17201b]'>
<p className='font-semibold text-[#19192d]'>
{session.title}
</p>
<p className='mt-1 text-sm text-[#68736c]'>
<p className='mt-1 text-sm text-[#72798a]'>
{session.client?.name}
</p>
</div>
<BaseIcon
path={mdiSendOutline}
size={18}
className='text-[#245c4c]'
className='text-[#35b7a5]'
/>
</div>
<p className='mt-3 leading-6 text-[#4f5a53]'>
<p className='mt-3 leading-6 text-[#72798a]'>
{session.ai_summary}
</p>
<p className='mt-3 text-sm font-semibold text-[#245c4c]'>
<p className='mt-3 text-sm font-semibold text-[#35b7a5]'>
{session.key_topics}
</p>
</div>