Files
portal/src/pages/dashboard.astro
T

73 lines
2.9 KiB
Plaintext

---
import Base from '../layouts/Base.astro';
// Sample data, clearly labelled as mock in the UI. Per SPEC §3.3.2 the dashboard
// aggregates: proposal statuses, scheduling info, data products, help-desk tickets.
const proposals = [
{ id: 'PROP-2026-0142', title: 'AGN flare monitoring with LST sub-array', status: 'In review', kind: 'review' },
{ id: 'PROP-2026-0089', title: 'Galactic PeVatron survey follow-up', status: 'Accepted', kind: 'ok' },
{ id: 'PROP-2025-0231', title: 'GRB afterglow ToO programme', status: 'Draft', kind: 'draft' },
];
const products = [
{ id: 'OBS-88213', desc: 'DL3 event lists — PKS 2155-304 (12 runs)', date: '2026-07-18' },
{ id: 'OBS-87990', desc: 'DL3 event lists — Crab Nebula calibration', date: '2026-07-02' },
];
const fmt = (iso) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso));
const tickets = [
{ id: '#4821', subject: 'Proposal form: co-I affiliation not saved', status: 'Answered', kind: 'ok' },
{ id: '#4711', subject: 'Data download quota question', status: 'Open', kind: 'review' },
];
---
<Base title="CTAO Science Portal — Dashboard" description="User dashboard (mock)">
<section class="hero-band">
<div class="container hero">
<div class="eyebrow">User area</div>
<h1>Dashboard</h1>
<p>Your proposals, data products and support tickets in one place</p>
</div>
</section>
<section class="container page">
<span class="badge-mock">Mock — sample data, no live services connected</span>
<div class="dash-grid">
<div class="panel">
<h2 class="panel-title">My proposals</h2>
<ul class="rows">
{proposals.map((p) => (
<li>
<span class="row-id">{p.id}</span>
<span class="row-main">{p.title}</span>
<span class={`pill pill--${p.kind}`}>{p.status}</span>
</li>
))}
</ul>
</div>
<div class="panel">
<h2 class="panel-title">Recent data products</h2>
<ul class="rows">
{products.map((d) => (
<li>
<span class="row-id">{d.id}</span>
<span class="row-main">{d.desc}</span>
<time class="row-date" datetime={d.date}>{fmt(d.date)}</time>
</li>
))}
</ul>
<p class="notice">Search and download in the <a href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener" class="external">Data Explorer</a> (external, LUX team).</p>
</div>
<div class="panel">
<h2 class="panel-title">Help-desk tickets</h2>
<ul class="rows">
{tickets.map((t) => (
<li>
<span class="row-id">{t.id}</span>
<span class="row-main">{t.subject}</span>
<span class={`pill pill--${t.kind}`}>{t.status}</span>
</li>
))}
</ul>
</div>
</div>
</section>
</Base>