# CalMiner Dashboard Layout Plan

Last updated: 2025-11-09

This document describes the intended layout structure for the CalMiner homepage/dashboard template.

## Page Goals

- Provide a concise overview of key project and scenario metrics immediately after sign-in.
- Offer quick actions for creating or navigating to core workflows (projects, scenarios, data uploads).
- Surface recent activity in a scan-friendly, responsive layout that works on desktop and tablet.

## Layout Structure

1. **Hero Header**

   - Title block with optional welcome message and current environment badge.
   - Primary CTA button group (e.g., "New Project", "Import Data").
   - Optional quick filter chips for project categories.

2. **Summary Metrics Row**

   - Four metric cards showing: total projects, active scenarios, pending simulations, last import timestamp.
   - Cards adapt to a two-column grid on screens < 960px.

3. **Recent Activity Panels**

   - Left column (2/3 width) displays a table of recent projects with status, updated timestamp.
   - Right column (1/3 width) hosts scenario alerts (validation conflicts, approaching deadlines) in a stacked list.

4. **Secondary Widgets**
   - Simulation pipeline status timeline (if data present) or placeholder guidance.
   - Documentation and support links card.

## Responsiveness

- Desktop: two-column layout for activity panels and secondary widgets.
- Tablet: stacks columns vertically while keeping metric cards in two columns.
- Mobile: single-column flow; CTA buttons collapse into a vertical stack.

## Implementation Notes

- Reuse existing `.card`, `.page-header`, and `.container` classes from `static/css/main.css`.
- Introduce specialized dashboard classes (e.g., `.dashboard-metrics`, `.dashboard-grid`) scoped within a new `static/css/dashboard.css` file if needed.
- Provide placeholder content for areas where backend data integrations are pending (e.g., empty state messages).