feat(UX-001): add full-width two-pane dashboard layout
This commit is contained in:
Bu5hm4nn
@@ -9,7 +9,13 @@ from nicegui import ui
|
||||
from app.components import PortfolioOverview
|
||||
from app.domain.portfolio_math import resolve_portfolio_spot_from_quote
|
||||
from app.models.workspace import WORKSPACE_COOKIE, get_workspace_repository
|
||||
from app.pages.common import dashboard_page, quick_recommendations, recommendation_style, strategy_catalog
|
||||
from app.pages.common import (
|
||||
dashboard_page,
|
||||
quick_recommendations,
|
||||
recommendation_style,
|
||||
split_page_panes,
|
||||
strategy_catalog,
|
||||
)
|
||||
from app.services.alerts import AlertService, build_portfolio_alert_context
|
||||
from app.services.runtime import get_data_service
|
||||
from app.services.turnstile import load_turnstile_settings
|
||||
@@ -129,6 +135,12 @@ async def overview_page(workspace_id: str) -> None:
|
||||
f"Last updated {_format_timestamp(str(portfolio['quote_updated_at']))}"
|
||||
)
|
||||
|
||||
spot_caption = (
|
||||
f"{symbol} share quote converted to USD/ozt via {portfolio['quote_source']}"
|
||||
if portfolio["quote_source"] != "configured_entry_price"
|
||||
else "Configured entry price fallback in USD/ozt"
|
||||
)
|
||||
|
||||
with dashboard_page(
|
||||
"Overview",
|
||||
"Portfolio health, LTV risk, and quick strategy guidance for the current GLD-backed loan.",
|
||||
@@ -141,123 +153,134 @@ async def overview_page(workspace_id: str) -> None:
|
||||
f"Configured collateral baseline: ${config.gold_value:,.0f} · Loan ${config.loan_amount:,.0f}"
|
||||
).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
with ui.row().classes("w-full items-center justify-between gap-3"):
|
||||
ui.label("Alert Status").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(alert_status.severity.upper()).classes(_alert_badge_classes(alert_status.severity))
|
||||
ui.label(alert_status.message).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
ui.label(
|
||||
f"Warning at {alert_status.warning_threshold:.0%} · Critical at {alert_status.critical_threshold:.0%} · "
|
||||
f"Email alerts {'enabled' if alert_status.email_alerts_enabled else 'disabled'}"
|
||||
).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
if alert_status.history:
|
||||
latest = alert_status.history[0]
|
||||
ui.label(
|
||||
f"Latest alert logged {_format_timestamp(latest.updated_at)} at collateral spot ${latest.spot_price:,.2f}"
|
||||
).classes("text-xs text-slate-500 dark:text-slate-400")
|
||||
|
||||
spot_caption = (
|
||||
f"{symbol} share quote converted to USD/ozt via {portfolio['quote_source']}"
|
||||
if portfolio["quote_source"] != "configured_entry_price"
|
||||
else "Configured entry price fallback in USD/ozt"
|
||||
left_pane, right_pane = split_page_panes(
|
||||
left_testid="overview-left-pane",
|
||||
right_testid="overview-right-pane",
|
||||
)
|
||||
|
||||
with ui.grid(columns=4).classes("w-full gap-4 max-lg:grid-cols-2 max-sm:grid-cols-1"):
|
||||
summary_cards = [
|
||||
(
|
||||
"Collateral Spot Price",
|
||||
f"${portfolio['spot_price']:,.2f}",
|
||||
spot_caption,
|
||||
),
|
||||
(
|
||||
"Margin Call Price",
|
||||
f"${portfolio['margin_call_price']:,.2f}",
|
||||
"Implied trigger level from persisted portfolio settings",
|
||||
),
|
||||
(
|
||||
"Cash Buffer",
|
||||
f"${portfolio['cash_buffer']:,.0f}",
|
||||
"Base liquidity plus unrealized gain cushion vs configured baseline",
|
||||
),
|
||||
(
|
||||
"Hedge Budget",
|
||||
f"${portfolio['hedge_budget']:,.0f}",
|
||||
"Monthly budget from saved settings",
|
||||
),
|
||||
]
|
||||
for title, value, caption in summary_cards:
|
||||
with ui.card().classes(
|
||||
"rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label(title).classes("text-sm font-medium text-slate-500 dark:text-slate-400")
|
||||
ui.label(value).classes("text-3xl font-bold text-slate-900 dark:text-slate-50")
|
||||
ui.label(caption).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
|
||||
portfolio_view = PortfolioOverview(margin_call_ltv=float(portfolio["margin_call_ltv"]))
|
||||
portfolio_view.update(portfolio)
|
||||
|
||||
with ui.row().classes("w-full gap-6 max-lg:flex-col"):
|
||||
with left_pane:
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
with ui.row().classes("w-full items-center justify-between"):
|
||||
ui.label("Current LTV Status").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(f"Threshold {float(portfolio['margin_call_ltv']) * 100:.0f}%").classes(
|
||||
"rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
|
||||
)
|
||||
ui.linear_progress(
|
||||
value=float(portfolio["ltv_ratio"]) / max(float(portfolio["margin_call_ltv"]), 0.01),
|
||||
show_value=False,
|
||||
).props("color=warning track-color=grey-3 rounded")
|
||||
with ui.row().classes("w-full items-center justify-between gap-3"):
|
||||
ui.label("Alert Status").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(alert_status.severity.upper()).classes(_alert_badge_classes(alert_status.severity))
|
||||
ui.label(alert_status.message).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
ui.label(
|
||||
f"Current LTV is {float(portfolio['ltv_ratio']) * 100:.1f}% with a margin buffer of {(float(portfolio['margin_call_ltv']) - float(portfolio['ltv_ratio'])) * 100:.1f} percentage points."
|
||||
).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
ui.label(
|
||||
"Warning: if GLD approaches the margin-call price, collateral remediation or hedge monetization will be required."
|
||||
).classes("text-sm font-medium text-amber-700 dark:text-amber-300")
|
||||
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label("Recent Alert History").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
f"Warning at {alert_status.warning_threshold:.0%} · Critical at {alert_status.critical_threshold:.0%} · "
|
||||
f"Email alerts {'enabled' if alert_status.email_alerts_enabled else 'disabled'}"
|
||||
).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
if alert_status.history:
|
||||
for event in alert_status.history[:5]:
|
||||
with ui.row().classes(
|
||||
"w-full items-start justify-between gap-4 border-b border-slate-100 py-3 last:border-b-0 dark:border-slate-800"
|
||||
):
|
||||
with ui.column().classes("gap-1"):
|
||||
ui.label(event.message).classes(
|
||||
"text-sm font-medium text-slate-900 dark:text-slate-100"
|
||||
)
|
||||
ui.label(
|
||||
f"Logged {_format_timestamp(event.updated_at)} · Spot ${event.spot_price:,.2f} · LTV {event.ltv_ratio:.1%}"
|
||||
).classes("text-xs text-slate-500 dark:text-slate-400")
|
||||
ui.label(event.severity.upper()).classes(_alert_badge_classes(event.severity))
|
||||
else:
|
||||
latest = alert_status.history[0]
|
||||
ui.label(
|
||||
"No alert history yet. Alerts will be logged once the warning threshold is crossed."
|
||||
).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
f"Latest alert logged {_format_timestamp(latest.updated_at)} at collateral spot ${latest.spot_price:,.2f}"
|
||||
).classes("text-xs text-slate-500 dark:text-slate-400")
|
||||
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label("Strategy Snapshot").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
for strategy in strategy_catalog():
|
||||
with ui.row().classes(
|
||||
"w-full items-start justify-between gap-4 border-b border-slate-100 py-3 last:border-b-0 dark:border-slate-800"
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label("Portfolio Snapshot").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
with ui.grid(columns=1).classes("w-full gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2"):
|
||||
summary_cards = [
|
||||
(
|
||||
"Collateral Spot Price",
|
||||
f"${portfolio['spot_price']:,.2f}",
|
||||
spot_caption,
|
||||
),
|
||||
(
|
||||
"Margin Call Price",
|
||||
f"${portfolio['margin_call_price']:,.2f}",
|
||||
"Implied trigger level from persisted portfolio settings",
|
||||
),
|
||||
(
|
||||
"Cash Buffer",
|
||||
f"${portfolio['cash_buffer']:,.0f}",
|
||||
"Base liquidity plus unrealized gain cushion vs configured baseline",
|
||||
),
|
||||
(
|
||||
"Hedge Budget",
|
||||
f"${portfolio['hedge_budget']:,.0f}",
|
||||
"Monthly budget from saved settings",
|
||||
),
|
||||
]
|
||||
for title, value, caption in summary_cards:
|
||||
with ui.card().classes(
|
||||
"rounded-xl border border-slate-200 bg-slate-50 p-4 shadow-none dark:border-slate-800 dark:bg-slate-950"
|
||||
):
|
||||
ui.label(title).classes("text-sm font-medium text-slate-500 dark:text-slate-400")
|
||||
ui.label(value).classes("text-2xl font-bold text-slate-900 dark:text-slate-50")
|
||||
ui.label(caption).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
|
||||
with ui.card().classes(
|
||||
f"w-full rounded-2xl border shadow-sm {recommendation_style('info')}"
|
||||
):
|
||||
ui.label("Quick Strategy Recommendations").classes(
|
||||
"text-lg font-semibold text-slate-900 dark:text-slate-100"
|
||||
)
|
||||
for rec in quick_recommendations(portfolio):
|
||||
with ui.card().classes(f"rounded-xl border shadow-none {recommendation_style(rec['tone'])}"):
|
||||
ui.label(rec["title"]).classes("text-base font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(rec["summary"]).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
|
||||
with right_pane:
|
||||
portfolio_view = PortfolioOverview(margin_call_ltv=float(portfolio["margin_call_ltv"]))
|
||||
portfolio_view.update(portfolio)
|
||||
|
||||
with ui.row().classes("w-full gap-6 max-xl:flex-col"):
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
with ui.column().classes("gap-1"):
|
||||
ui.label(strategy["label"]).classes("font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(strategy["description"]).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
ui.label(f"${strategy['estimated_cost']:.2f}/oz").classes(
|
||||
"rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 dark:bg-sky-500/15 dark:text-sky-300"
|
||||
)
|
||||
with ui.row().classes("w-full items-center justify-between"):
|
||||
ui.label("Current LTV Status").classes(
|
||||
"text-lg font-semibold text-slate-900 dark:text-slate-100"
|
||||
)
|
||||
ui.label(f"Threshold {float(portfolio['margin_call_ltv']) * 100:.0f}%").classes(
|
||||
"rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
|
||||
)
|
||||
ui.linear_progress(
|
||||
value=float(portfolio["ltv_ratio"]) / max(float(portfolio["margin_call_ltv"]), 0.01),
|
||||
show_value=False,
|
||||
).props("color=warning track-color=grey-3 rounded")
|
||||
ui.label(
|
||||
f"Current LTV is {float(portfolio['ltv_ratio']) * 100:.1f}% with a margin buffer of {(float(portfolio['margin_call_ltv']) - float(portfolio['ltv_ratio'])) * 100:.1f} percentage points."
|
||||
).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
ui.label(
|
||||
"Warning: if GLD approaches the margin-call price, collateral remediation or hedge monetization will be required."
|
||||
).classes("text-sm font-medium text-amber-700 dark:text-amber-300")
|
||||
|
||||
ui.label("Quick Strategy Recommendations").classes("text-xl font-semibold text-slate-900 dark:text-slate-100")
|
||||
with ui.grid(columns=3).classes("w-full gap-4 max-lg:grid-cols-1"):
|
||||
for rec in quick_recommendations(portfolio):
|
||||
with ui.card().classes(f"rounded-2xl border shadow-sm {recommendation_style(rec['tone'])}"):
|
||||
ui.label(rec["title"]).classes("text-base font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(rec["summary"]).classes("text-sm text-slate-600 dark:text-slate-300")
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label("Recent Alert History").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
if alert_status.history:
|
||||
for event in alert_status.history[:5]:
|
||||
with ui.row().classes(
|
||||
"w-full items-start justify-between gap-4 border-b border-slate-100 py-3 last:border-b-0 dark:border-slate-800"
|
||||
):
|
||||
with ui.column().classes("gap-1"):
|
||||
ui.label(event.message).classes(
|
||||
"text-sm font-medium text-slate-900 dark:text-slate-100"
|
||||
)
|
||||
ui.label(
|
||||
f"Logged {_format_timestamp(event.updated_at)} · Spot ${event.spot_price:,.2f} · LTV {event.ltv_ratio:.1%}"
|
||||
).classes("text-xs text-slate-500 dark:text-slate-400")
|
||||
ui.label(event.severity.upper()).classes(_alert_badge_classes(event.severity))
|
||||
else:
|
||||
ui.label(
|
||||
"No alert history yet. Alerts will be logged once the warning threshold is crossed."
|
||||
).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
|
||||
with ui.card().classes(
|
||||
"w-full rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
):
|
||||
ui.label("Strategy Snapshot").classes("text-lg font-semibold text-slate-900 dark:text-slate-100")
|
||||
for strategy in strategy_catalog():
|
||||
with ui.row().classes(
|
||||
"w-full items-start justify-between gap-4 border-b border-slate-100 py-3 last:border-b-0 dark:border-slate-800"
|
||||
):
|
||||
with ui.column().classes("gap-1"):
|
||||
ui.label(strategy["label"]).classes("font-semibold text-slate-900 dark:text-slate-100")
|
||||
ui.label(strategy["description"]).classes("text-sm text-slate-500 dark:text-slate-400")
|
||||
ui.label(f"${strategy['estimated_cost']:.2f}/oz").classes(
|
||||
"rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 dark:bg-sky-500/15 dark:text-sky-300"
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user