Finance Chief design system

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/cn';
import { NAV_ICONS, type NavIconName } from '@/components/navIcons';

/*
 * Four sections. Investments and Scenarios moved INTO Dashboard as sub-tabs — they answer "where do
 * I stand", same as Home, and listing them here made the nav look like four equal places when it was
 * really two questions and two utilities. See dashboardTabs.ts.
 *
 * Ask and Profile are the other two sections, but they are rendered as their own rows below rather
 * than listed here: Ask carries the accent icon and the ⌘K hint, Profile its own active treatment.
 * Four peers to a reader, three shapes in the markup.
 */
const SECTIONS: { href: string; label: string; icon: NavIconName }[] = [
    { href: '/', label: 'Dashboard', icon: 'dashboard' },
    { href: '/spending', label: 'Spending', icon: 'spending' },
];

/* One row, both states: icon always; label + colorized icon only in the rail
   (via the .we-lbl / .we-ic-* rules in globals.css). Tooltip only in the pill. */
const row =
    'relative flex h-10 shrink-0 items-center gap-2.5 rounded-pill px-2.5 text-label transition-colors duration-fast ease-out-soft';

/**
 * NavDock — the desktop nav: a floating liquid-glass pill (icon-only, vertically
 * centered, content flowing past behind it) that MORPHS into a Golden-Gate
 * edge-to-edge rail on ⌘\. One physical object, two states; the grid tracks +
 * pill geometry interpolate together (CSS in globals.css). Mobile web keeps the
 * floating BottomTabBar instead.
 */
/*
 * `onToggle` is gone from the dock, not from the app.
 *
 * Hers, 1 October 2026: the monogram, the dividers and the chevron all came out — "I really don't
 * think we need it." She is right that four icons with tooltips need no chrome around them.
 *
 * The consequence worth stating: the labelled rail is now reachable by ⌘\ only. That is a keyboard
 * affordance with no visible door, which normally fails the chair test — but the rail only ever
 * added labels to icons that already have tooltips, so nothing is reachable solely through it.
 */
export function NavDock({ rail }: { rail: boolean }) {
    const pathname = usePathname();
    const isActive = (href: string) => (href === '/' ? pathname === '/' : pathname.startsWith(href));

    return (
        <nav aria-label="Primary" className="we-dock glass-chrome">
            {SECTIONS.map((s) => {
                const active = isActive(s.href);
                return (
                    <Link
                        key={s.href}
                        href={s.href}
                        aria-current={active ? 'page' : undefined}
                        data-tour={`nav-${s.label.toLowerCase()}`}
                        className={cn(
                            row,
                            active
                                ? 'bg-accent-soft text-accent'
                                : 'text-foreground-secondary hover:bg-surface-2 hover:text-foreground',
                        )}
                    >
                        <span className={cn('shrink-0', `we-ic-${s.icon}`, active && 'text-accent')}>
                            {NAV_ICONS[s.icon]}
                        </span>
                        <span className="we-lbl">{s.label}</span>
                        <span className="we-tip" role="presentation">
                            {s.label}
                        </span>
                    </Link>
                );
            })}

            <div className="flex shrink-0 flex-col gap-0.5">
                {/*
                    CLICKING goes to the Ask PAGE. ⌘K still opens the palette.
                    
                    Ask became a real page, and the dock kept opening the modal — so the one nav entry
                    labelled Ask led somewhere other than the thing called Ask. Both render the same
                    component, so this was never two surfaces, but it was two answers to one click, and
                    a control has to telegraph where it goes.
                    
                    The keyboard shortcut keeps the palette because that is what a palette is for:
                    summoned from anywhere without leaving the page you are on.
                */}
                <Link
                    href="/ask"
                    aria-current={isActive('/ask') ? 'page' : undefined}
                    className={cn(
                        row,
                        isActive('/ask')
                            ? 'bg-surface-2 text-foreground'
                            : 'text-foreground-secondary hover:bg-surface-2 hover:text-foreground',
                    )}
                >
                    <span className="shrink-0 text-accent">{NAV_ICONS.ask}</span>
                    <span className="we-lbl">
                        Ask <span className="text-foreground-tertiary">· ⌘K</span>
                    </span>
                    <span className="we-tip" role="presentation">
                        Ask · ⌘K
                    </span>
                </Link>
                <Link
                    href="/profile"
                    aria-current={isActive('/profile') ? 'page' : undefined}
                    className={cn(
                        row,
                        isActive('/profile')
                            ? 'bg-accent-soft text-accent'
                            : 'text-foreground-secondary hover:bg-surface-2 hover:text-foreground',
                    )}
                >
                    <span className="shrink-0">{NAV_ICONS.profile}</span>
                    <span className="we-lbl">Profile</span>
                    <span className="we-tip" role="presentation">
                        Profile
                    </span>
                </Link>
            </div>
        </nav>
    );
}

'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { Ask, ASK_CHIPS } from '@/components/Ask';

/**
 * CommandPalette — ⌘K drops a liquid-glass sheet over the dashboard and hands
 * you the Ask bar. This is where the NLQ lives now: one keystroke away from
 * every screen instead of a fixture on one page. Esc or the scrim dismisses.
 */
export function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
    useEffect(() => {
        if (!open) return;
        const prev = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        function onKey(e: KeyboardEvent) {
            if (e.key === 'Escape') onClose();
        }
        window.addEventListener('keydown', onKey);
        return () => {
            document.body.style.overflow = prev;
            window.removeEventListener('keydown', onKey);
        };
    }, [open, onClose]);

    if (!open) return null;

    return (
        <div
            role="dialog"
            aria-modal="true"
            aria-label="Ask Finance Chief"
            className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto px-4 pb-10 pt-20 sm:pt-28"
        >
            <div className="we-scrim absolute inset-0" onClick={onClose} aria-hidden />
            <div className="glass-chrome relative w-full max-w-2xl rounded-hero p-4 sm:p-5">
                <div className="mb-3 flex items-baseline justify-between gap-3 px-1">
                    <p className="font-serif text-heading italic text-foreground">Ask</p>
                    <p className="text-micro text-foreground-tertiary">
                        esc to close · <kbd>⌘G</kbd>{' '}
                        <Link href="/god" onClick={onClose} className="hover:text-foreground">
                            God Mode
                        </Link>
                    </p>
                </div>
                <Ask autoFocus bare chips={ASK_CHIPS} />
                {/* Jump rows — the palette is also the fastest door into the Explore stages. */}
                <div className="mt-3 flex flex-wrap items-center gap-2 px-1">
                    <span className="text-micro font-medium uppercase tracking-caps text-foreground-tertiary">
                        Jump to
                    </span>
                    <Link
                        href="/explore/spending"
                        onClick={onClose}
                        className="rounded-pill border border-border px-3 py-1 text-caption text-foreground-secondary transition-colors duration-fast ease-out-soft hover:border-accent hover:text-accent"
                    >
                        Explore spending
                    </Link>
                    <Link
                        href="/scenarios"
                        onClick={onClose}
                        className="rounded-pill border border-border px-3 py-1 text-caption text-foreground-secondary transition-colors duration-fast ease-out-soft hover:border-accent hover:text-accent"
                    >
                        Scenario studio
                    </Link>
                </div>
            </div>
        </div>
    );
}

import { isSampleVisit } from '@/lib/config/visit';

/**
 * A fixed, unobtrusive marker shown only in the public demo — signals the figures are a fictional
 * sample, not real personal finances. Renders nothing when this request may see her data.
 */
export async function DemoBadge() {
    if (!(await isSampleVisit())) return null;
    return (
        <div
            title="Fictional sample data — not real personal finances"
            className="fixed bottom-28 right-4 z-50 flex items-center gap-2 rounded-pill border border-accent bg-accent-soft px-3 py-1.5 text-caption font-medium text-accent shadow-lg sm:bottom-4"
        >
            <span className="inline-block h-1.5 w-1.5 rounded-pill bg-accent" />
            <span className="sm:hidden">Demo</span>
            <span className="hidden sm:inline">Demo data · fictional sample</span>
        </div>
    );
}

'use client';

import { useState } from 'react';
import {
    Area,
    ComposedChart,
    Line,
    ReferenceLine,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis,
} from 'recharts';
import type { MonteCarloResult } from '@/lib/logic/monteCarlo';
import { cn } from '@/lib/cn';
import { AnimatedNumber, Money, Stat, Surface, chart } from '@/components/ui';
import { probPct } from '@/lib/format';

const CR = 1e7;
const cr = (inr: number) => +(inr / CR).toFixed(1);

/**
 * Probabilistic forecast — the honest twin of the deterministic trajectory.
 * Speaks the one chart grammar: the cone paints on mount, a ghost crosshair
 * follows the pointer, and scrubbing a year re-anchors the three percentile
 * stats to that year (labels say so) — the header is the readout.
 */
export function MonteCarloForecast({
    mc,
    goalINR,
    scenarioLabel,
}: {
    mc: MonteCarloResult;
    goalINR: number;
    scenarioLabel: string;
}) {
    const data = mc.years.map((year, i) => ({
        year,
        outer: [cr(mc.p10INR[i]), cr(mc.p90INR[i])], // P10–P90
        inner: [cr(mc.p25INR[i]), cr(mc.p75INR[i])], // P25–P75
        mid: cr(mc.p50INR[i]),
    }));
    const prob = probPct(mc.probGoalINR);
    const goalCr = Math.round(goalINR / CR);
    const probTone = prob >= 75 ? 'text-positive' : prob >= 50 ? 'text-accent' : 'text-caution';

    const [hover, setHover] = useState<number | null>(null);
    const i = hover != null ? mc.years.indexOf(hover) : mc.years.length - 1;
    const scrubbing = hover != null;
    const yearLabel = scrubbing ? ` · ${hover}` : '';

    return (
        <Surface padding="lg">
            <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <h2 className="text-label text-foreground-secondary">Probability forecast · {scenarioLabel}</h2>
                    <p className="mt-1 max-w-xl text-caption text-foreground-tertiary">
                        {mc.sims.toLocaleString()} simulated futures — each year&apos;s return drawn from history (~
                        {Math.round(mc.meanReturn * 100)}% average, ±{Math.round(mc.volReturn * 100)}% swings) rather
                        than a fixed rate. The cone is where your net worth actually lands; the band&apos;s width is
                        market uncertainty made visible. Scrub the cone to read any year.
                    </p>
                </div>
                <div className="text-right">
                    <p className={cn('text-title', probTone)}>
                        <AnimatedNumber value={prob} format={(n) => `${Math.round(n)}%`} plain />
                    </p>
                    <p className="text-caption text-foreground-tertiary">of outcomes clear ₹{goalCr} Cr</p>
                </div>
            </div>

            {/* the readout — re-anchors to the scrubbed year */}
            <div className="mt-5 grid grid-cols-3 gap-3">
                <Stat
                    size="compact"
                    tone="danger"
                    label={`Unlucky — 1 in 10 end below${yearLabel}`}
                    value={<Money value={mc.p10INR[i]} currency="inr" />}
                    sub="only 1 in 10 end worse"
                />
                <Stat
                    size="compact"
                    tone="accent"
                    label={`Typical${yearLabel}`}
                    value={<Money value={mc.p50INR[i]} currency="inr" />}
                    sub={scrubbing ? 'half end above, half below' : 'half of futures end above this'}
                />
                <Stat
                    size="compact"
                    tone="positive"
                    label={`Lucky — 1 in 10 end above${yearLabel}`}
                    value={<Money value={mc.p90INR[i]} currency="inr" />}
                    sub="only 1 in 10 end better"
                />
            </div>

            <div className="mt-5 h-64 w-full select-none">
                <ResponsiveContainer width="100%" height="100%">
                    <ComposedChart
                        data={data}
                        margin={{ top: 8, right: 16, bottom: 4, left: 0 }}
                        onMouseMove={(e) => setHover(e?.activeLabel != null ? Number(e.activeLabel) : null)}
                        onMouseLeave={() => setHover(null)}
                    >
                        <XAxis dataKey="year" tick={chart.axisTick} axisLine={{ stroke: chart.gridStroke }} tickLine={false} />
                        <YAxis tick={chart.axisTick} axisLine={false} tickLine={false} width={44} tickFormatter={(v) => `₹${v}`} />
                        <Tooltip content={() => null} cursor={chart.ghostCursor} />
                        <Area type="monotone" dataKey="outer" stroke="none" fill={chart.band.outer} {...chart.paintOn} />
                        <Area type="monotone" dataKey="inner" stroke="none" fill={chart.band.inner} {...chart.paintOn} />
                        <Line type="monotone" dataKey="mid" stroke={chart.accentLine} strokeWidth={2.5} dot={false} {...chart.paintOn} />
                        <ReferenceLine
                            y={goalCr}
                            stroke={chart.goalLine}
                            strokeDasharray="4 4"
                            label={{ value: `₹${goalCr} Cr goal`, fontSize: 10, fill: chart.goalLine, position: 'insideTopRight' }}
                        />
                    </ComposedChart>
                </ResponsiveContainer>
            </div>
            <div className="mt-3 flex flex-wrap gap-3 text-micro text-foreground-tertiary">
                <span className="flex items-center gap-1.5">
                    <span className="inline-block h-2 w-3 rounded-pill" style={{ background: chart.accentLine }} />
                    the typical future
                </span>
                <span className="flex items-center gap-1.5">
                    <span className="inline-block h-2 w-3 rounded-badge" style={{ background: chart.band.inner }} />
                    half of all futures
                </span>
                <span className="flex items-center gap-1.5">
                    <span className="inline-block h-2 w-3 rounded-badge" style={{ background: chart.band.outer }} />
                    8 in 10 futures
                </span>
            </div>
        </Surface>
    );
}

'use client';

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import type { DataSourceStatus, FreshnessState } from '@/lib/logic/freshness';
import { relativeAgo } from '@/lib/format';
import { cn } from '@/lib/cn';
import { Badge, Button, Surface } from '@/components/ui';
import { SyncNowButton } from '@/components/SyncNowButton';

/** fresh = green, due = amber, overdue = red. */
const DOT: Record<FreshnessState, string> = {
    fresh: 'bg-positive',
    due: 'bg-caution',
    overdue: 'bg-danger',
};

const inputCls =
    'h-9 w-28 rounded-field border border-border bg-surface-2 px-2 tnum text-body text-foreground ' +
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background';

function cadenceWord(days: number): string {
    if (days >= 90) return 'quarterly';
    if (days >= 30) return 'monthly';
    return `every ${days}d`;
}

function statusLine(s: DataSourceStatus): string {
    // Worked out, not fetched — so there is no "last synced" to report, and nothing to go stale.
    if (s.kind === 'derived') return s.suggestionNote ?? 'Computed from known terms — always current';
    if (s.kind === 'auto') {
        if (!s.lastUpdated) return 'Not connected';
        return `Synced ${relativeAgo(s.lastUpdated)} · auto ${cadenceWord(s.cadenceDays)}`;
    }
    if (s.kind === 'ai') {
        if (!s.lastUpdated) return 'Not yet valued · Sync to AI-value';
        return `AI-valued ${relativeAgo(s.lastUpdated)} · auto ${cadenceWord(s.cadenceDays)}`;
    }
    if (!s.lastUpdated) return 'Never set';
    if (s.state === 'fresh') return `Updated ${relativeAgo(s.lastUpdated)} · review ${cadenceWord(s.cadenceDays)}`;
    if (s.state === 'due') return `Update due · last ${relativeAgo(s.lastUpdated)}`;
    return `Overdue · last updated ${relativeAgo(s.lastUpdated)}`;
}

/** Edit affordance: always rendered (so touch devices show it), subtle until row-hover on desktop. */
function Pencil() {
    return (
        <svg
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
        >
            <path d="M12 20h9" />
            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
        </svg>
    );
}

/**
 * The data "control center": Sync-now force-refreshes every auto/AI source; manual sources (mortgage,
 * India lands) carry a pencil to pin a value and a reminder when due. The India flat is AI-driven —
 * it shows the AI's ₹/sqft rate and isn't hand-edited.
 */
export function DataFreshnessCard({ sources, bare = false }: { sources: DataSourceStatus[]; bare?: boolean }) {
    const router = useRouter();
    const [editing, setEditing] = useState<string | null>(null);
    const [value, setValue] = useState('');
    const [saving, setSaving] = useState(false);

    const needsAttention = sources.filter((s) => s.kind === 'manual' && s.state !== 'fresh');

    function startEdit(s: DataSourceStatus) {
        setEditing(s.id);
        setValue(String(s.suggestionInput ?? s.currentInput ?? ''));
    }

    async function save(s: DataSourceStatus) {
        const n = parseFloat(value);
        if (!isFinite(n)) return;
        setSaving(true);
        try {
            await fetch('/api/override', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: s.id, balance: Math.round(n * (s.scale ?? 1)), currency: s.currency }),
            });
            setEditing(null);
            router.refresh();
        } finally {
            setSaving(false);
        }
    }

    const Wrap = bare ? 'div' : Surface;
    return (
        <Wrap {...(bare ? {} : { padding: 'md' as const })}>
            <div className={cn('flex items-start justify-between gap-3', bare && 'justify-end')}>
                {!bare && (
                    <div>
                        <h2 className="text-label font-medium text-foreground">Data sources</h2>
                        <p className="text-caption text-foreground-secondary">
                            Live accounts auto-refresh every few days; manual items remind you when they&apos;re due.
                        </p>
                    </div>
                )}
                <SyncNowButton />
            </div>

            {needsAttention.length > 0 && (
                <p className="mt-3 rounded-field bg-caution-soft px-3 py-2 text-caption text-caution">
                    {needsAttention.length} manual {needsAttention.length === 1 ? 'item needs' : 'items need'} updating:{' '}
                    {needsAttention.map((s) => s.label).join(', ')}.
                </p>
            )}

            <ul className="mt-4 flex flex-col gap-2.5 text-body">
                {sources.map((s) => (
                    <li key={s.id} className="group">
                        <div className="flex items-center justify-between gap-3">
                            <span className="flex min-w-0 items-center gap-2">
                                <span className={cn('inline-block h-2 w-2 shrink-0 rounded-pill', DOT[s.state])} />
                                <span className="truncate text-foreground">{s.label}</span>
                                <Badge tone="neutral" variant="outline" className="shrink-0 uppercase">
                                    {s.kind}
                                </Badge>
                            </span>
                            <span className="flex shrink-0 items-center gap-2 text-right text-caption text-foreground-secondary">
                                {s.valueDisplay && <span className="tnum text-foreground">{s.valueDisplay}</span>}
                                <span className="hidden sm:inline">{statusLine(s)}</span>
                                {s.editable && (
                                    <button
                                        onClick={() => (editing === s.id ? setEditing(null) : startEdit(s))}
                                        aria-label={`Edit ${s.label}`}
                                        title="Edit value"
                                        className="shrink-0 text-foreground-secondary opacity-60 transition-opacity duration-fast ease-out-soft hover:text-foreground hover:opacity-100 group-hover:opacity-100"
                                    >
                                        <Pencil />
                                    </button>
                                )}
                            </span>
                        </div>

                        {editing === s.id && (
                            <div className="mt-2 rounded-field border border-border bg-background-sunken p-2.5">
                                <div className="flex flex-wrap items-center gap-2 text-caption">
                                    <input
                                        type="number"
                                        step="any"
                                        value={value}
                                        onChange={(e) => setValue(e.target.value)}
                                        className={inputCls}
                                    />
                                    <span className="text-foreground-secondary">{s.inputUnit}</span>
                                    {s.suggestionInput != null && (
                                        <button
                                            onClick={() => setValue(String(s.suggestionInput))}
                                            className="rounded-pill border border-border px-2 py-0.5 text-foreground-secondary transition-colors duration-fast ease-out-soft hover:text-foreground"
                                        >
                                            Use AI: {s.suggestionInput} {s.inputUnit}
                                        </button>
                                    )}
                                    <Button variant="primary" size="sm" onClick={() => save(s)} disabled={saving}>
                                        {saving ? 'Saving…' : 'Save'}
                                    </Button>
                                    <Button variant="secondary" size="sm" onClick={() => setEditing(null)}>
                                        Cancel
                                    </Button>
                                </div>
                                {s.suggestionNote && <p className="mt-1.5 text-micro text-foreground-tertiary">AI: {s.suggestionNote}</p>}
                            </div>
                        )}
                    </li>
                ))}
            </ul>
        </Wrap>
    );
}