Connect dashboard UI to Python engine output JSON

[stebenix]

Goal

Connect the existing static frontend dashboard to the generated Python engine output data from outputs/demo_results.json.

The project now has two layers:

1. Existing Vite/HTML/CSS/JavaScript dashboard UI.
2. Python automation engine that generates outputs/demo_results.json with batch analytics and document-level processing results.

This task should make the frontend show selected values from the generated JSON while preserving the existing premium dashboard design.

---

Important constraints

• Do not redesign the page.
• Do not change the visual style.
• Do not remove existing sections.
• Do not touch unrelated mobile CSS or old PR Add real-device mobile CSS override, preserve CSS minification, update package lock and workflow location #5 changes.
• Do not break the current Vite frontend.
• Keep GitHub Pages static deployment compatible.
• Keep the Python engine as a static-data generator; do not add Flask, FastAPI, databases, APIs, or backend runtime.
• The dashboard should work as a static site.

---

Current data source

The Python engine writes:

outputs/demo_results.json

This JSON includes:

• batch_summary.total_documents
• batch_summary.auto_export_count
• batch_summary.auto_export_rate
• batch_summary.human_review_count
• batch_summary.blocked_count
• batch_summary.average_confidence
• batch_summary.average_risk_score
• batch_summary.route_distribution
• batch_summary.top_validation_issues
• batch_recommendations
• documents[] with validation, risk, routing, ERP readiness, recommendations, and audit trail

---

Implementation options

Use whichever is safest for Vite/GitHub Pages:

Preferred option

Expose the generated JSON to the frontend through a Vite-compatible static path.

For example:

public/demo_results.json

can be copied from:

outputs/demo_results.json

If you choose this option, document that outputs/demo_results.json is the Python-generated source and public/demo_results.json is the static frontend copy.

Alternative option

Import JSON directly if the Vite setup handles it cleanly and the build remains stable.

---

Frontend requirements

Add a small frontend data-loading module or logic that reads the generated JSON and updates selected dashboard values.

Use the JSON to populate or enhance dashboard content such as:

• total documents: 24
• auto export count: 11
• human review count: 11
• blocked count: 2
• average confidence: 0.87
• average risk score: 16.2
• route distribution:
  • Auto export to ERP: 11
  • Finance review: 2
  • Procurement review: 2
  • Compliance review: 7
  • Blocked: 2
• top validation issues:
  • amount_match: 4
  • required_fields_completeness: 3
  • po_number_presence: 3
  • duplicate_check: 2
  • iban_format: 1

---

UI requirements

Keep the existing UI style. Add only minimal, tasteful enhancements if needed:

• A compact card titled something like Python engine output or Automation engine summary.
• A small route distribution list or mini visualization.
• A concise note such as: Generated by python_engine/main.py.

Do not make it look like a developer-only debug panel. It should feel integrated into the premium dashboard.

---

JavaScript requirements

The data loading should be robust:

• If JSON loads successfully, update the UI.
• If JSON is missing or unavailable, keep the existing static values and fail gracefully.
• Avoid noisy console errors unless useful for debugging.
• Keep the code readable and small.

---

README update

Update README.md with a short note explaining the static data bridge:

The Python engine writes `outputs/demo_results.json`. For the static GitHub Pages dashboard, selected summary values can be exposed to the frontend through a static JSON copy, allowing the UI to display pipeline-generated metrics without a backend runtime.

Also include the intended refresh flow:

python -m python_engine.main

then rebuild or update the frontend JSON copy if needed.

---

Testing

Run:

npm run build
python -m python_engine.main
pytest

All should pass.

---

Quality bar

This should make the portfolio case stronger by showing:

• Python generates business logic output.
• Frontend displays selected pipeline metrics.
• Static deployment remains simple and reliable.
• The project still looks polished and recruiter/Jobcenter-friendly.

Open a pull request when finished.