From 1685acebe3f548b89e671796f0f7e200a8f56824 Mon Sep 17 00:00:00 2001 From: Andrew Roddy Date: Sun, 20 Sep 2026 09:05:43 -0400 Subject: [PATCH 1/2] Updated dashboard --- .../Pages/Financials/NetWorthCalculator.razor | 121 +++++ .../Financials/NetWorthCalculator.razor.css | 146 ++++++ Features/Dashboard/Dashboard.razor | 452 +++++++++++------ Features/Dashboard/Dashboard.razor.css | 480 ++++++++++++++++-- 4 files changed, 1018 insertions(+), 181 deletions(-) diff --git a/Components/Pages/Financials/NetWorthCalculator.razor b/Components/Pages/Financials/NetWorthCalculator.razor index d6cabdf..0f27021 100644 --- a/Components/Pages/Financials/NetWorthCalculator.razor +++ b/Components/Pages/Financials/NetWorthCalculator.razor @@ -1,14 +1,17 @@ @page "/financials" @page "/net-worth" +@attribute [StreamRendering(true)] @rendermode InteractiveServer @using System.ComponentModel.DataAnnotations @using Microsoft.EntityFrameworkCore @using MoneyMirror.Data @using MoneyMirror.Data.Entities @using MoneyMirror.Financial +@using MoneyMirror.HumanCapital @using MoneyMirror.PhysicalAssets @inject MoneyMirrorDbContext DbContext @inject IPhysicalAssetRepository AssetRepository +@inject IMarketPotentialSummaryService MarketPotentialSummaryService Net Worth @@ -60,6 +63,50 @@ + @* + Market potential used to live on the Dashboard, which is now the + landing page. It belongs here, beside the total rather than inside + it: earning power is real but it is not cash, so folding it into + the figure above would make that figure a lie. + *@ +
+
+

Market potential

+ Details → +
+ + @if (IsLoadingPotential) + { +

Estimating...

+ } + else if (PotentialError is not null) + { +

@PotentialError

+ } + else if (!HasProfile) + { +

+ No profile on file yet. Upload a resume to see + what the market pays for what you already know. +

+ } + else if (Compensation is null) + { +

Not available for this profile.

+ } + else + { + + $@Compensation.MinUsd.ToString("N0") – $@Compensation.MaxUsd.ToString("N0") + +

+ AI estimate + across @OccupationCount matched occupation@(OccupationCount == 1 ? "" : "s"). Kept + out of the net worth above on purpose. +

+ } +
+
} + + @* + The Dashboard's inventory panel, moved here: physical capital is a + line in the breakdown above, and this is where you look when you + want to know what is behind that line. Closed by default - the + financial records are what this page is for. + *@ +
+ @* Rendered as a string, not a bool: Blazor omits an attribute whose + value is false, which would drop aria-expanded exactly when the + panel is collapsed and leave the control unannounced. *@ + + @if (ShowInventory) + { +
+ + Manage inventory → +
+ } +
@if (IsFormOpen) @@ -145,6 +215,13 @@ private bool IsEditing { get; set; } private bool IsLoading { get; set; } = true; private string? ErrorMessage { get; set; } + + private bool IsLoadingPotential { get; set; } = true; + private string? PotentialError { get; set; } + private bool HasProfile { get; set; } + private CompensationEstimate? Compensation { get; set; } + private int OccupationCount { get; set; } + private bool ShowInventory { get; set; } private FinancialRecord Draft { get; set; } = NewDraft(RecordKind.Asset); private FinancialRecord? EditingRecord { get; set; } @@ -175,7 +252,23 @@ private static DateTimeOffset ToDateTimeOffset(DateTime date) => new(DateTime.SpecifyKind(date.Date, DateTimeKind.Unspecified), TimeSpan.Zero); + // The records and the market-potential estimate fail independently: a + // provider outage must never take down the financial records, which are + // the point of the page. They run sequentially rather than via + // Task.WhenAll because both reach the same scoped DbContext (directly, + // and via IPhysicalAssetRepository/IProfessionalProfileRepository), + // which EF Core does not allow concurrent operations against. + // + // Records first, and [StreamRendering] on top: the estimate can take a + // minute against a cold cache, and nobody should wait on Nemotron to see + // their own balances. protected override async Task OnInitializedAsync() + { + await LoadRecordsAsync(); + await LoadMarketPotentialAsync(); + } + + private async Task LoadRecordsAsync() { try { @@ -215,6 +308,34 @@ } } + private async Task LoadMarketPotentialAsync() + { + try + { + var summary = await MarketPotentialSummaryService.GetSummaryAsync(); + HasProfile = summary.HasProfile; + if (!HasProfile) + { + return; + } + + OccupationCount = summary.Occupations.Count; + Compensation = summary.Compensation; + } + catch (OccupationMatchingException ex) + { + PotentialError = ex.Message; + } + catch (CompensationEstimationException ex) + { + PotentialError = ex.Message; + } + finally + { + IsLoadingPotential = false; + } + } + private void OpenAddForm(RecordKind kind) { IsEditing = false; EditingRecord = null; Draft = NewDraft(kind); IsFormOpen = true; } private void OpenEditForm(FinancialRecord record) { IsEditing = true; EditingRecord = record; Draft = new(record.Kind, record.Type, record.Name, record.Amount, record.AsOfDate); IsFormOpen = true; } private void CloseForm() { IsFormOpen = false; } diff --git a/Components/Pages/Financials/NetWorthCalculator.razor.css b/Components/Pages/Financials/NetWorthCalculator.razor.css index ba1aa4c..f7fcf31 100644 --- a/Components/Pages/Financials/NetWorthCalculator.razor.css +++ b/Components/Pages/Financials/NetWorthCalculator.razor.css @@ -159,6 +159,138 @@ button { color: var(--negative-text); } +/* =================================================================== + * Market potential + * =================================================================== + * A quieter pane than the net worth one above it. That is the point: + * this figure deliberately does not join the total, so it must not + * compete with it for attention. + */ + +.potential-summary { + margin-bottom: 1.25rem; + padding: 1.125rem; + border: 1px solid var(--glass-hairline); + border-radius: var(--radius-lg); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + box-shadow: var(--shadow-1); +} + +.potential-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 1rem; +} + +.potential-label { + margin: 0; + color: var(--text-muted); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.potential-head a { + color: var(--brand); + font-size: 0.8125rem; + font-weight: 600; + text-decoration: none; + white-space: nowrap; +} + +.potential-head a:hover { + text-decoration: underline; +} + +/* Smaller than .headline-amount by design, and it wraps rather than + shrinking: "$78,000 - $104,000" does not fit one line on a 390px + screen at any size worth reading. */ +.potential-amount { + display: block; + margin-top: 0.35rem; + color: var(--text); + font-family: var(--font-numeric); + font-size: clamp(1.5rem, 7vw, 1.875rem); + font-weight: 700; + font-variant-numeric: tabular-nums; + letter-spacing: -0.02em; + line-height: 1.1; +} + +.potential-note { + margin: 0.5rem 0 0; + color: var(--text-muted); + font-size: 0.8125rem; + line-height: 1.5; +} + +.potential-pending { + margin: 0.5rem 0 0; + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.5; +} + +/* =================================================================== + * Inventory disclosure + * =================================================================== */ + +.inventory-panel { + margin-top: 1.25rem; + padding: 0.25rem 1.125rem; + border: 1px solid var(--glass-hairline); + border-radius: var(--radius-lg); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + box-shadow: var(--shadow-1); +} + +/* A grouped-list row rather than a button: full bleed, left aligned, and + tall enough to tap. */ +.inventory-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + min-height: 2.75rem; + padding: 0.75rem 0; + border: none; + background: none; + color: var(--text); + font: inherit; + font-size: 1.0625rem; + font-weight: 600; + letter-spacing: -0.01em; + text-align: left; +} + +.inventory-toggle span { + color: var(--text-muted); + font-size: 0.875rem; +} + +.inventory-body { + padding-bottom: 1rem; +} + +.inventory-body a { + display: inline-block; + margin-top: 0.75rem; + color: var(--brand); + font-size: 0.875rem; + font-weight: 600; + text-decoration: none; +} + +.inventory-body a:hover { + text-decoration: underline; +} + /* =================================================================== * Segmented control * =================================================================== */ @@ -753,6 +885,20 @@ button { gap: 0.75rem; } + .potential-summary { + margin-bottom: 1.75rem; + padding: 1.5rem; + } + + .potential-amount { + font-size: 2rem; + } + + .inventory-panel { + margin-top: 1.75rem; + padding: 0.25rem 1.5rem; + } + .record-tabs { display: inline-flex; } diff --git a/Features/Dashboard/Dashboard.razor b/Features/Dashboard/Dashboard.razor index e3ae7d6..9d4cec4 100644 --- a/Features/Dashboard/Dashboard.razor +++ b/Features/Dashboard/Dashboard.razor @@ -10,183 +10,339 @@ @inject IPhysicalAssetRepository AssetRepository @inject IMarketPotentialSummaryService MarketPotentialSummaryService -Dashboard +Money Mirror -
-
-
-

Dashboard

+@* + The landing page. + + This used to be a dashboard: two figures and a pair of disclosure + panels duplicating what Financial and Human Capital already showed. + Those figures now live on Financial, next to the records they are + computed from, and this page does the job the app actually lacked - + explaining, to someone arriving cold, what Money Mirror does and why + it is built the way it is. + + It is a pitch, but not a brochure: the band below the hero reads the + live database, so the first thing a visitor sees is the real app + working rather than a screenshot of it. +*@ + +
+ +
+

Powered by NVIDIA Nemotron

+

Money Mirror

+

+ Plenty of apps will tell you a net worth number. Very few will tell you + where it came from, and almost none teach you anything you can act on + afterwards. +

+

+ Money Mirror counts everything you own: the cash, the furniture in your + apartment, and what the labor market will pay for what you know. Every + figure arrives with its reasoning attached. +

+
+ Scan a possession + Upload a resume + Open your net worth
-
-
-
-
-
Net Worth
- @if (_isLoadingNetWorth) - { -

Loading...

- } - else if (_netWorthError is not null) - { -

@_netWorthError

- } - else - { -

@_netWorth.ToString("C0")

-

Financial assets + physical capital − liabilities

- } - View Net Worth -
+
+

Your mirror, right now

+
+
+
Net worth
+ @if (_isLoadingNetWorth) + { +
Loading…
+ } + else if (_netWorthError is not null) + { +
Unavailable
+ } + else + { +
@_netWorth.ToString("C0")
+

Financial assets + physical capital − liabilities

+ }
-
-
-
-
-
Market Potential
- @if (_isLoadingMarketPotential) - { -

Loading...

- } - else if (_marketPotentialError is not null) - { -

@_marketPotentialError

- } - else if (_hasNoProfile) - { -

No profile on file yet.

- } - else if (_compensation is null) - { -

Not available.

- } - else - { -

- $@_compensation.MinUsd.ToString("N0") – $@_compensation.MaxUsd.ToString("N0") -

-

- AI estimate - based on @_occupationCount matched occupation@(_occupationCount == 1 ? "" : "s") -

- } - View Market Potential -
-
-
-
- -
-
-
-
-
Scan a Possession
-

- Photograph something you own to detect, identify, and value it. + +

+
Market potential
+ @if (_isLoadingMarketPotential) + { +
Loading…
+ } + else if (_marketPotentialError is not null || _hasNoProfile || _compensation is null) + { +
No resume yet
+

Upload one and Nemotron reads it in about a minute.

+ } + else + { +
$@_compensation.MinUsd.ToString("N0")–$@_compensation.MaxUsd.ToString("N0")
+

+ Across @_occupationCount matched occupation@(_occupationCount == 1 ? "" : "s")

- Scan a Possession -
+ }
-
-
-
-
-
Upload a Resume
-

- Upload your resume to see your estimated Market Potential. -

- Upload a Resume -
+
+
Items scanned
+ @if (_isLoadingNetWorth) + { +
Loading…
+ } + else + { +
@_inventoryCount
+

Detected, valued and kept in your inventory

+ }
+ + + +
+

The problem

+

A number you can't explain is a number you can't decide with

+

+ Financial literacy doesn't fail because people can't add. It fails + because the tools hand over a total and stop, so nobody learns which + inputs moved it or what to do next. +

+
    +
  • + Budgeting apps end at the balance. + They categorize what already happened. They never explain what a + figure is made of, so there is nothing to learn from. +
    • +
  • + Most of what people own is never counted. + A laptop, a bike, a couch. Real resale value, invisible to every + account-linking tool because it isn't in an account. +
    • +
  • + Earning power is the largest asset most people under thirty have. + It's also the only one no personal finance app tracks, priced, + or tells you how to grow. +
    • +
+
+ +
+

The math

+

Transparent on purpose

+ 
financial assets + physical assets − liabilities = estimated net worth
+

+ Market potential sits beside that number rather than inside it. Your + earning power is real, but it isn't cash, and folding it in would make + the total a lie. +

+
+ +
+

What it does

+

Three kinds of capital, one mirror

+
+
+

Financial

+

+ Accounts, investments and property tracked against loans, credit + and other liabilities. The arithmetic is ordinary and deliberately + boring: no model touches it. +

+ Open Financial → +
+ +
+

Physical assets

+

+ Photograph something, or pan a short video around a room. A vision + model picks out the items, you tap one to isolate it, and it is + priced against real eBay comparables with Nemotron explaining the + result. Anything you confirm joins your inventory and rolls into + net worth. +

+ Scan a possession → +
+ +
+

Human capital

+

+ Upload a resume. Nemotron reads it into a structured profile, + matches it to occupations, and pairs it with real Bureau of Labor + Statistics wage data. You get a compensation range, the skills the + market is asking for, the ones you're missing, and the better + paying roles already within reach. +

+ Upload a resume → +
-
- -
-
- - @if (_showInventory) - { -
- - Manage inventory → -
- } + + +
+

The model

+

Nemotron does five different jobs here

+

+ Not one job five times. Each is a separate prompt with its own schema, + its own failure handling, and its own re-prompt when the reply doesn't + parse. +

+
+
+
Profile extraction
+
Unstructured resume text into a typed profile: roles, dates, skills, education, publications.
+
+
+
Occupation matching
+
That profile into candidate occupations, each with the key skills it asks for.
+
+
+
Compensation estimation
+
A structured salary estimate for roles where BLS publishes no series.
+
+
+
Asset valuation
+
A resale price for a detected object, with written reasoning you can read and disagree with.
+
+
+
Explanation
+
Plain language prose explaining what a computed range means and why it varies.
+
+
+

+ nvidia/nemotron-3-nano-omni-30b-a3b-reasoning, served from + NVIDIA NIM. +

+
+ +
+

The design rule

+

Nemotron supplies judgment. C# does the arithmetic.

+

+ The model is never asked to add up your net worth. + FinancialNetWorthCalculator, BlsCompensationAggregator, + SkillGapAnalyzer, OpportunityFinder and + MarketValuationCalculator are plain deterministic code, and + they own every number on the screen. +

+

+ The explanation prompt is the clearest case. It hands Nemotron a range + already computed from real BLS observations and tells it, in so many + words, not to propose numbers of its own, only to explain the evidence it + was given. That keeps the prose educational instead of confidently + invented. +

+
+ +
+

Where the numbers come from

+

Real sources, named on the page

+
+
+

Bureau of Labor Statistics

+

+ The Public Data API v2 time series endpoint, queried directly for + occupational wage observations. Suppressed values are dropped + rather than guessed at, and if nothing usable comes back the app + reports insufficient data instead of inventing a range. +

+
+
+

eBay comparable listings

+

+ Real eBay listings for the same item are the evidence behind a + resale figure. Every comp is kept with its price, title and + condition, and MarketValuationCalculator takes their + median rather than asking a model to pick one. Under three usable + comps the figure is flagged low confidence instead of quietly + presented as fact. +

+
+
+

NVIDIA vision

+

+ meta/llama-3.2-11b-vision-instruct finds the objects + in a photo or a video frame. Non-JSON replies are re-prompted, and + a saturated endpoint retries with backoff instead of failing the + scan. +

+
+
+

MobileSAM, on your device

+

+ Tap an object in the camera view and the cutout mask is computed in + your browser on WebGPU, with a WASM fallback. Nothing but the crop + you chose is ever uploaded. +

+
-
- -
-
- - @if (_showProfile) - { -
- @if (_isLoadingMarketPotential) - { -

Loading...

- } - else if (_hasNoProfile || _profile is null) - { -

No profile on file yet. Upload a resume to get started.

- } - else - { -
-
Education
-
@(_profile.Education.Count == 0 ? "—" : string.Join(", ", _profile.Education.Select(e => e.Institution)))
- -
Experience
-
@(_profile.Experience.Count == 0 ? "—" : string.Join(", ", _profile.Experience.Select(e => e.Organization)))
- -
Skills
-
- @if (_profile.Skills.Count == 0) - { - — - } - else - { - @foreach (var skill in _profile.Skills) - { - @skill.Name - } - } -
-
- Edit profile / upload a new resume → - } -
- } + + +
+

Built to be honest

+

When it isn't confident, it says so

+
    +
  • + No fabricated ranges. + Insufficient evidence is an explicit result everywhere it can happen, + on both the wage side and the valuation side. +
    • +
  • + AI estimates are labeled AI estimates. + Low confidence figures carry the warning on the figure itself, not in + a footnote. +
    • +
  • + Every provider failure is inspectable. + Errors come with a Show provider response button, so you can + see what actually came back. +
    • +
  • + It runs on your machine. + One Docker command brings up the app and its database. There is no + account, and your resume and photos never leave it except to reach the + model endpoint. +
    • +
+
+ +
+

See what you're actually worth

+

+ Start with whichever you have on hand. Both take about a minute. +

+
+ Scan a possession + Upload a resume
-
+ +
@code { private bool _isLoadingNetWorth = true; private string? _netWorthError; private decimal _netWorth; + private int _inventoryCount; private bool _isLoadingMarketPotential = true; private string? _marketPotentialError; private bool _hasNoProfile; - private ProfessionalProfile? _profile; private CompensationEstimate? _compensation; private int _occupationCount; - private bool _showInventory; - private bool _showProfile; - // The two summaries fail independently (separate try/catch below) - a // problem estimating Market Potential should never take down the Net - // Worth summary, or vice versa. They run sequentially rather than via + // Worth figure, or vice versa. They run sequentially rather than via // Task.WhenAll because both share the same scoped DbContext (directly, // and via IPhysicalAssetRepository/IProfessionalProfileRepository), // which EF Core does not allow concurrent operations against. + // + // Neither is allowed to hold up the pitch below: StreamRendering means + // the copy paints immediately and the live band fills in behind it. protected override async Task OnInitializedAsync() { await LoadNetWorthAsync(); @@ -201,6 +357,7 @@ var liabilityAmounts = await DbContext.Liabilities.AsNoTracking().Select(l => l.OutstandingBalance).ToListAsync(); var physicalAssets = await AssetRepository.GetAllAsync(); + _inventoryCount = physicalAssets.Count; _netWorth = FinancialNetWorthCalculator.Calculate( assetAmounts.Concat(physicalAssets.Select(a => a.CurrentValuation ?? 0m)), liabilityAmounts); @@ -220,7 +377,6 @@ try { var summary = await MarketPotentialSummaryService.GetSummaryAsync(); - _profile = summary.Profile; if (!summary.HasProfile) { _hasNoProfile = true; diff --git a/Features/Dashboard/Dashboard.razor.css b/Features/Dashboard/Dashboard.razor.css index ab19ff0..541aebb 100644 --- a/Features/Dashboard/Dashboard.razor.css +++ b/Features/Dashboard/Dashboard.razor.css @@ -1,69 +1,483 @@ /* - * Dashboard. + * The landing page. * - * Bootstrap's grid already stacks `.col-md-6` on a phone, so the layout - * needs no help. What it does need is for the two headline figures to - * read as figures rather than as body copy, and for the disclosure rows - * at the bottom to look like the grouped-list rows they behave as. + * A long scroll rather than a grid of cards, so it reads on a phone the + * way a pitch reads: one idea per screen, each section announcing itself + * with an eyebrow before it says anything. Mobile first, widened at the + * shared 48rem breakpoint. + * + * Only the live band and the closing call to action are panes. Everything + * between them sits directly on the ambient wash - stacking eight glass + * cards down a page turns the blur into noise and flattens the hierarchy + * the eyebrows are there to create. + */ + +.landing { + max-width: var(--content-max); + margin: 0 auto; + padding: 0.25rem 0 1.5rem; + color: var(--text); +} + +/* =================================================================== + * Hero + * =================================================================== */ + +.hero { + padding: 1.5rem 0 2rem; +} + +.hero-eyebrow { + margin: 0 0 0.75rem; + color: var(--accent-text); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +/* The wordmark, at the largest size the page uses. Serif and light, the + way the brand sets it everywhere else. */ +.hero-title { + margin: 0; + font-family: var(--font-display); + font-size: clamp(2.75rem, 14vw, 4rem); + font-weight: 400; + line-height: 1; + letter-spacing: -0.02em; +} + +.hero-lede { + margin: 1.25rem 0 0; + max-width: 34rem; + font-size: 1.125rem; + line-height: 1.45; + font-weight: 500; +} + +.hero-sub { + margin: 0.875rem 0 0; + max-width: 34rem; + color: var(--text-muted); + font-size: 1rem; + line-height: 1.55; +} + +/* Full width and stacked on a phone, the way a phone expects its primary + actions; back to their own width once there is room for a row. */ +.hero-actions { + display: flex; + flex-direction: column; + gap: 0.625rem; + margin-top: 1.5rem; +} + +.hero-actions .primary-button, +.hero-actions .secondary-button { + width: 100%; +} + +/* =================================================================== + * Live band + * =================================================================== + * The one part of this page that is not copy. It reads the real + * database, so a visitor's first impression is the app running rather + * than a description of it. */ -.row { - --bs-gutter-x: 0.75rem; +.live-band { + padding: 1.125rem; + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + box-shadow: var(--shadow-2); } -/* The numbers are the point of this page. Tight, heavy and tabular, so - the net worth and the salary range line up with each other. */ -.display-6 { +.live-label { + margin: 0 0 1rem; + color: var(--text-muted); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.live-figures { + display: grid; + gap: 1.125rem; + margin: 0; +} + +.live-figure { + display: flex; + flex-direction: column; + gap: 0.15rem; +} + +.live-figure dt { + color: var(--text-muted); + font-size: 0.8125rem; + font-weight: 600; +} + +.live-figure dd { + margin: 0; font-family: var(--font-numeric); - font-size: clamp(1.875rem, 8.5vw, 2.375rem); + font-size: clamp(1.75rem, 8vw, 2.125rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.05; } -/* - * `.card-title` is small uppercase everywhere else, which is right for - * the eyebrow over a figure but wrong for the two disclosure buttons - - * they carry `.h5` as well and are headings in their own right. +/* A placeholder is not a figure. Drop it to body size so an empty state + never out-shouts the real numbers beside it. */ +.live-figure dd.live-pending { + color: var(--text-muted); + font-family: var(--font-ui); + font-size: 1.0625rem; + font-weight: 500; + letter-spacing: 0; +} + +.live-note { + margin: 0.2rem 0 0; + color: var(--text-muted); + font-size: 0.8125rem; + line-height: 1.4; +} + +/* =================================================================== + * Pitch sections + * =================================================================== */ + +.pitch { + padding: 2.5rem 0 0; +} + +.pitch-eyebrow { + margin: 0 0 0.5rem; + color: var(--accent-text); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.pitch h2 { + margin: 0; + max-width: 30rem; + font-family: var(--font-display); + font-size: clamp(1.625rem, 6.5vw, 2rem); + font-weight: 400; + line-height: 1.15; +} + +.pitch-lede { + margin: 1rem 0 0; + max-width: 36rem; + color: var(--text-muted); + font-size: 1rem; + line-height: 1.6; +} + +.pitch code, +.model-line code { + padding: 0.1em 0.35em; + border-radius: var(--radius-xs); + background: var(--brand-surface); + color: var(--brand-strong); + font-size: 0.875em; + /* Long identifiers are the point here, so let them break rather than + push the page sideways on a 390px screen. */ + overflow-wrap: anywhere; +} + +/* =================================================================== + * Claim list + * =================================================================== + * Numbered-feeling without numbers: a hairline rule down the left edge + * carries the eye instead of a bullet. */ -.card-title.h5 { + +.claim-list { + margin: 1.25rem 0 0; + padding: 0; + list-style: none; + display: grid; + gap: 1.125rem; +} + +.claim-list li { + padding-left: 0.875rem; + border-left: 2px solid var(--glass-hairline); + max-width: 36rem; + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.55; +} + +.claim-list strong { + display: block; color: var(--text); + font-weight: 600; +} + +/* =================================================================== + * Formula + * =================================================================== */ + +.formula { + margin: 1.25rem 0 0; + padding: 1rem 1.125rem; + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + background: var(--glass-bg-strong); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + /* The equation is one line and must not wrap mid-term; on a narrow + phone it scrolls sideways within its own pane instead. */ + overflow-x: auto; +} + +.formula code { + padding: 0; + background: none; + color: var(--brand-strong); + font-size: 0.875rem; + white-space: nowrap; +} + +/* =================================================================== + * Pillars + * =================================================================== */ + +.pillar-grid { + display: grid; + gap: 0.875rem; + margin-top: 1.25rem; +} + +.pillar { + padding: 1.125rem; + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + box-shadow: var(--shadow-2); +} + +.pillar h3 { + margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; - text-transform: none; } -.card-body .btn-link { - width: 100%; - justify-content: flex-start; - text-align: left; +.pillar p { + margin: 0; + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.55; } -.card-text { +.pillar-link { + display: inline-block; + margin-top: 0.875rem; + min-height: 2.75rem; + /* A link, not a button, but still a touch target: the padding is what + gets it to 44px without making it look like a control. */ + padding: 0.7rem 0; + font-size: 0.9375rem; + font-weight: 600; + text-decoration: none; +} + +.pillar-link:hover { + text-decoration: underline; +} + +/* =================================================================== + * Nemotron's five jobs + * =================================================================== */ + +.job-list { + margin: 1.25rem 0 0; + display: grid; + gap: 0; +} + +/* A grouped list, the iOS idiom: hairlines between rows, none above the + first or below the last. */ +.job { + padding: 0.875rem 0; + border-top: 1px solid var(--glass-hairline); +} + +.job:first-child { + border-top: none; + padding-top: 0; +} + +.job dt { + color: var(--text); + font-size: 0.9375rem; + font-weight: 600; +} + +.job dd { + margin: 0.2rem 0 0; + max-width: 36rem; color: var(--text-muted); font-size: 0.9375rem; + line-height: 1.5; } -/* Full-width actions on a phone; back to their own width once there is - room for them to sit side by side. */ -.card-body > .btn, -.card-body ::deep > .btn { - width: 100%; +.model-line { + margin: 1.25rem 0 0; + color: var(--text-muted); + font-size: 0.875rem; + line-height: 1.6; +} + +/* =================================================================== + * Data sources + * =================================================================== */ + +.source-grid { + display: grid; + gap: 1.25rem; + margin-top: 1.25rem; +} + +.source h3 { + margin: 0 0 0.35rem; + font-size: 0.9375rem; + font-weight: 600; +} + +.source p { + margin: 0; + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.55; +} + +/* =================================================================== + * Closing + * =================================================================== */ + +.closing { + margin-top: 2.5rem; + padding: 1.75rem 1.125rem; + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + background: var(--glass-bg-strong); + backdrop-filter: var(--glass-blur-strong); + -webkit-backdrop-filter: var(--glass-blur-strong); + box-shadow: var(--shadow-2); + text-align: center; +} + +.closing h2 { + margin: 0; + font-family: var(--font-display); + font-size: clamp(1.5rem, 6vw, 1.875rem); + font-weight: 400; + line-height: 1.15; +} + +.closing p { + margin: 0.625rem auto 0; + max-width: 26rem; + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.5; } +/* =================================================================== + * Desktop + * =================================================================== */ + @media (min-width: 48rem) { - .row { - --bs-gutter-x: 1.5rem; + .landing { + padding-bottom: 2.5rem; } - .display-6 { - font-size: clamp(2rem, 3vw, 2.5rem); + .hero { + padding: 3rem 0 3.5rem; } - .card-body > .btn, - .card-body ::deep > .btn { + .hero-lede { + font-size: 1.375rem; + } + + .hero-sub { + font-size: 1.0625rem; + } + + .hero-actions { + flex-direction: row; + flex-wrap: wrap; + margin-top: 2rem; + } + + .hero-actions .primary-button, + .hero-actions .secondary-button { width: auto; } + + .live-band { + padding: 1.5rem; + } + + .live-figures { + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + } + + .live-figure dd { + font-size: 2rem; + } + + .pitch { + padding-top: 4rem; + } + + .pitch h2 { + max-width: 34rem; + } + + .claim-list { + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + } + + /* Four claims here, not three: two columns divide evenly where three + would leave the fourth stranded on a row of its own. */ + .honesty-block .claim-list { + grid-template-columns: repeat(2, 1fr); + } + + .pillar-grid { + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + } + + .source-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.75rem 2rem; + } + + .closing { + margin-top: 4rem; + padding: 3rem 2rem; + } + + .closing .hero-actions { + justify-content: center; + } } From 946b6427dd20fbc761bb2fd293aa2a6dbedaca4b Mon Sep 17 00:00:00 2001 From: Andrew Roddy Date: Sun, 20 Sep 2026 09:11:38 -0400 Subject: [PATCH 2/2] Made the app better --- .../Pages/Financials/NetWorthCalculator.razor | 24 -------- .../Financials/NetWorthCalculator.razor.css | 61 ------------------- 2 files changed, 85 deletions(-) diff --git a/Components/Pages/Financials/NetWorthCalculator.razor b/Components/Pages/Financials/NetWorthCalculator.razor index 0f27021..bce4a4c 100644 --- a/Components/Pages/Financials/NetWorthCalculator.razor +++ b/Components/Pages/Financials/NetWorthCalculator.razor @@ -160,29 +160,6 @@
} - - @* - The Dashboard's inventory panel, moved here: physical capital is a - line in the breakdown above, and this is where you look when you - want to know what is behind that line. Closed by default - the - financial records are what this page is for. - *@ -
- @* Rendered as a string, not a bool: Blazor omits an attribute whose - value is false, which would drop aria-expanded exactly when the - panel is collapsed and leave the control unannounced. *@ - - @if (ShowInventory) - { -
- - Manage inventory → -
- } -
@if (IsFormOpen) @@ -221,7 +198,6 @@ private bool HasProfile { get; set; } private CompensationEstimate? Compensation { get; set; } private int OccupationCount { get; set; } - private bool ShowInventory { get; set; } private FinancialRecord Draft { get; set; } = NewDraft(RecordKind.Asset); private FinancialRecord? EditingRecord { get; set; } diff --git a/Components/Pages/Financials/NetWorthCalculator.razor.css b/Components/Pages/Financials/NetWorthCalculator.razor.css index f7fcf31..7d15250 100644 --- a/Components/Pages/Financials/NetWorthCalculator.razor.css +++ b/Components/Pages/Financials/NetWorthCalculator.razor.css @@ -235,62 +235,6 @@ button { line-height: 1.5; } -/* =================================================================== - * Inventory disclosure - * =================================================================== */ - -.inventory-panel { - margin-top: 1.25rem; - padding: 0.25rem 1.125rem; - border: 1px solid var(--glass-hairline); - border-radius: var(--radius-lg); - background: var(--glass-bg); - backdrop-filter: var(--glass-blur); - -webkit-backdrop-filter: var(--glass-blur); - box-shadow: var(--shadow-1); -} - -/* A grouped-list row rather than a button: full bleed, left aligned, and - tall enough to tap. */ -.inventory-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - width: 100%; - min-height: 2.75rem; - padding: 0.75rem 0; - border: none; - background: none; - color: var(--text); - font: inherit; - font-size: 1.0625rem; - font-weight: 600; - letter-spacing: -0.01em; - text-align: left; -} - -.inventory-toggle span { - color: var(--text-muted); - font-size: 0.875rem; -} - -.inventory-body { - padding-bottom: 1rem; -} - -.inventory-body a { - display: inline-block; - margin-top: 0.75rem; - color: var(--brand); - font-size: 0.875rem; - font-weight: 600; - text-decoration: none; -} - -.inventory-body a:hover { - text-decoration: underline; -} - /* =================================================================== * Segmented control * =================================================================== */ @@ -894,11 +838,6 @@ button { font-size: 2rem; } - .inventory-panel { - margin-top: 1.75rem; - padding: 0.25rem 1.5rem; - } - .record-tabs { display: inline-flex; }