mirror of
https://github.com/MadsLorentzen/ai-job-search.git
synced 2026-09-17 08:36:25 +00:00
feat(html-report): add /html-report command for application tracker dashboard (#131)
Self-contained HTML dashboard generated from job_search_tracker.csv and the application archives: stat cards, status/sector/channel/funnel charts as hand-generated inline SVG (no CDN, fully offline), HTML-escaped interpolation throughout, and a filterable applications table. Includes Python guards for the command file and the reports/ gitignore rule.
This commit is contained in:
Yuan Chen
@@ -0,0 +1,135 @@
|
||||
# /html-report - Generate Application Tracker Dashboard
|
||||
|
||||
Generate a self-contained HTML dashboard from `job_search_tracker.csv` and the application archives under `documents/applications/`. The output is a single `.html` file — no server, no dependencies — that can be opened directly in a browser.
|
||||
|
||||
## Step 0: Parse Arguments
|
||||
|
||||
- No argument → output to `reports/application-dashboard.html`
|
||||
- A path argument (e.g. `/html-report ~/Desktop/report.html`) → use that path
|
||||
- `--open` flag → after writing, tell the user to open the file (cannot open a browser directly)
|
||||
|
||||
Create `reports/` if it does not exist.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Collect Data
|
||||
|
||||
Read in parallel:
|
||||
|
||||
1. **`job_search_tracker.csv`** — the primary source. Parse every row into a record with fields:
|
||||
`date`, `company`, `sector`, `role`, `role_type`, `channel`, `status`, `contact_person`, `fit_rating`, `notes`, `cv_file`, `cover_letter_file`, `source`
|
||||
|
||||
2. **`documents/applications/*/outcome.md`** — for each resolved application, read the outcome file to get the exact interview stages reached (the checkboxes) and any notes. Merge this into the matching tracker row by company+role fuzzy match (lowercase, ignore punctuation). If an archive exists for a row but there is no match, attach it as extra context anyway.
|
||||
|
||||
Status normalisation — map tracker values to five canonical buckets before computing stats:
|
||||
- `applied` → **Active** (resume submitted, no further signal)
|
||||
- `interview` → **Interview**
|
||||
- `offer` → **Offer**
|
||||
- `hired` → **Hired**
|
||||
- `rejected` / `no_response` / `no response` / `offer_declined` / `interview_only` / `withdrawn` → **Rejected/Closed**
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Compute Summary Stats
|
||||
|
||||
From the normalised data compute:
|
||||
|
||||
- **Total applications**
|
||||
- **By status bucket:** count per bucket
|
||||
- **By sector:** count per unique sector value
|
||||
- **By channel:** online vs referral vs other
|
||||
- **By year/season:** group by the `date` field (which may be a year like `2025` or a full date)
|
||||
- **Funnel rates:** what % progressed past resume screen (reached Interview or beyond)
|
||||
- **Rejection rate:** Rejected/Closed ÷ Total with a resolved status (exclude Active)
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Generate the HTML
|
||||
|
||||
Write a single self-contained HTML file. All CSS is inline in a `<style>` block. All JS is inline in a `<script>` block. Draw the doughnut and bar charts as hand-generated inline SVG — no Chart.js, no CDN, no external dependencies of any kind. The report must render fully offline on every open.
|
||||
|
||||
**Escaping (required):** HTML-escape every CSV/outcome-file value (`&` `<` `>` `"` `'`) before interpolating it into the page — this includes table cells, `title` attributes on truncated notes, and any text placed inside SVG (`<text>` labels, chart tooltips). Notes and company names copied from job postings routinely contain these characters; unescaped, they break the layout or inject markup into a page the user opens routinely.
|
||||
|
||||
### Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ 🔍 Job Search Dashboard Generated: DATE │
|
||||
├──────┬──────┬──────┬──────┬──────────────────┤
|
||||
│Total │Active│Inter-│Offer │Rejected/Closed │ ← stat cards
|
||||
│ N │ N │view N│ N │ N │
|
||||
├──────┴──────┴──────┴──────┴──────────────────┤
|
||||
│ Status breakdown (doughnut) │ By sector (bar)│ ← charts row
|
||||
├───────────────────────────────────────────── ┤
|
||||
│ By channel (bar) │ Funnel (horizontal bar) │ ← charts row
|
||||
├────────────────────────────────────────────── ┤
|
||||
│ Applications [Status ▾] [Sector ▾] [🔍 ...]│ ← table with filters
|
||||
│ date │ company │ sector │ role │ status │ ... │
|
||||
│ ... │
|
||||
└───────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Design spec
|
||||
|
||||
- **Colour palette:** CSS custom properties. Status colours:
|
||||
- Active: `#3b82f6` (blue)
|
||||
- Interview: `#f59e0b` (amber)
|
||||
- Offer: `#8b5cf6` (purple)
|
||||
- Hired: `#22c55e` (green)
|
||||
- Rejected/Closed: `#ef4444` (red)
|
||||
- **Font:** system-ui stack, no web fonts
|
||||
- **Stat cards:** white background, subtle shadow, large bold number, label below, left border in status colour
|
||||
- **Charts:** contained in a 2-column grid on wide screens, stacked on narrow
|
||||
- **Table:**
|
||||
- Alternating row shading
|
||||
- Status column uses a coloured pill/badge
|
||||
- `source` column renders as a hyperlink if the value is a URL (starts with `http`)
|
||||
- Empty cells render as `—`
|
||||
- Client-side filter: a text search input filters rows across company + role + sector; the status and sector dropdowns filter independently; all three combine (AND)
|
||||
- Rows are sorted newest-first by default (by `date` descending, then alphabetically by company)
|
||||
- **Responsive:** usable at 900px+, not broken below that
|
||||
- **Footer:** "Generated by Claude Code · ai-job-search · {ISO date}"
|
||||
|
||||
### Charts (inline SVG)
|
||||
|
||||
1. **Status doughnut** — slices for each status bucket, colours from the palette above
|
||||
2. **By sector bar** (horizontal) — company count per sector, sorted descending
|
||||
3. **By channel bar** — online / referral / other
|
||||
4. **Application funnel** (horizontal bar) — Applied → Interview → Offer → Hired, each bar = count reaching that stage
|
||||
|
||||
Build each chart as a hand-written `<svg>` element: compute bar lengths/doughnut arc angles from the stats in Step 2 and emit the `<rect>`/`<path>`/`<circle>` and `<text>` elements directly — no charting library, no `<canvas>`. Each `<svg>` has `role="img"` and an `aria-label` summarizing the chart (e.g. "Status breakdown: 3 Active, 2 Interview, 1 Offer"). Wrap each in a `<div class="chart-card">` with an `<h3>` title above. Remember to escape any label/value text drawn into `<text>` nodes per the escaping rule above.
|
||||
|
||||
### Table: columns to include
|
||||
|
||||
`Date` · `Company` · `Role` · `Sector` · `Channel` · `Status` · `Notes` (truncated to 80 chars with `title` tooltip for full text) · `Source` (link or `—`)
|
||||
|
||||
Columns with only empty values across all rows may be omitted.
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Write and Confirm
|
||||
|
||||
Write the complete HTML to the output path using the Write tool.
|
||||
|
||||
Then present:
|
||||
|
||||
> **Dashboard generated:** `<output path>`
|
||||
>
|
||||
> Open it in any browser — no server needed.
|
||||
>
|
||||
> **Summary:**
|
||||
> - Total applications: N
|
||||
> - Active: N · Interview: N · Hired: N · Rejected/Closed: N
|
||||
> - Funnel: N% progressed past resume screen
|
||||
>
|
||||
> Re-run `/html-report` any time after adding new entries via `/outcome` to refresh the dashboard.
|
||||
|
||||
---
|
||||
|
||||
## Design Principles
|
||||
|
||||
- **Self-contained.** One file, fully offline — charts are inline SVG, no CDN or external requests of any kind.
|
||||
- **Data-only.** This command reads and renders; it never writes to the tracker or archive.
|
||||
- **Idempotent.** Re-running overwrites the previous report at the same path — no accumulation.
|
||||
- **Graceful on sparse data.** With only a few rows (as now), charts render correctly for small N; the table is the primary value. Do not suppress charts just because N is small.
|
||||
- **No fabrication.** Every number in the report comes directly from the CSV or outcome files. Do not infer or estimate missing fields.
|
||||
Reference in New Issue
Block a user