I want to add a very simple TCO (Total Cost of Ownership) preview panel to the Reminders experience.

Goal:
- For now, return stubbed TCO data from the backend for a conversation_id.
- Show that TCO data under the conversation history in the Reminders tab.
- We will later replace the stub with real logic from the database.

Please do the following changes.

1) BACKEND – add /api/tco-preview endpoint (stub)

In app/main.py:

- Near the other API routes, add:

  @app.get("/api/tco-preview")
  async def api_tco_preview(
      conversation_id: str,
      user: dict = Depends(require_auth),
  ):
      """
      Return a simple stubbed TCO preview for a conversation.
      This will later be replaced with real logic using book data + mileage/MPG.
      """
      # For now, just return some example structure.
      # Later we can look up customer, vehicle, and payment data.
      from datetime import datetime

      # Basic example values – placeholder only
      monthly_payment = 399.00
      est_fuel = 120.00
      est_insurance = 70.00
      est_tax = 20.00
      est_service = 25.00

      total_monthly = monthly_payment + est_fuel + est_insurance + est_tax + est_service

      return {
          "conversation_id": conversation_id,
          "generated_at": datetime.utcnow().isoformat() + "Z",
          "currency": "GBP",
          "items": [
              {"label": "Finance payment", "amount": monthly_payment, "key": "finance"},
              {"label": "Estimated fuel", "amount": est_fuel, "key": "fuel"},
              {"label": "Estimated insurance", "amount": est_insurance, "key": "insurance"},
              {"label": "Vehicle tax", "amount": est_tax, "key": "tax"},
              {"label": "Service & maintenance", "amount": est_service, "key": "service"},
          ],
          "total_monthly": total_monthly,
      }

2) FRONTEND – add a TCO panel under conversation history

In app/templates/dashboard.html, in the Reminders script card, find the "Conversation history" panel you recently added.

Immediately under the <div id="rem-history"...> block, add a TCO preview panel:

      <div class="mt-4 border-t border-neutral-200 pt-3">
        <div class="flex items-center justify-between mb-1">
          <h4 class="text-[11px] font-semibold text-neutral-600 uppercase tracking-wide">
            TCO preview
          </h4>
          <span id="rem-tco-meta" class="text-[11px] text-neutral-400"></span>
        </div>
        <div id="rem-tco" class="text-[11px] space-y-1 text-neutral-700">
          <p class="text-neutral-400">No TCO data loaded.</p>
        </div>
      </div>

3) FRONTEND – add a helper to load and render TCO

In the <script> block, add:

  async function loadTcoPreview(rem) {
    const tcoEl = document.getElementById("rem-tco");
    const metaEl = document.getElementById("rem-tco-meta");
    if (!tcoEl || !metaEl) return;

    const convId = rem.conversation_id;
    if (!convId) {
      tcoEl.innerHTML = `<p class="text-neutral-400">No conversation linked.</p>`;
      metaEl.textContent = "";
      return;
    }

    tcoEl.innerHTML = `<p class="text-neutral-400">Loading TCO…</p>`;
    metaEl.textContent = "";

    try {
      const res = await fetch(`/api/tco-preview?conversation_id=${encodeURIComponent(convId)}`);
      if (!res.ok) {
        tcoEl.innerHTML = `<p class="text-neutral-400">No TCO available.</p>`;
        metaEl.textContent = "";
        return;
      }
      const data = await res.json();
      const items = data.items || [];
      const total = data.total_monthly || 0;
      const currency = data.currency || "GBP";

      if (!items.length) {
        tcoEl.innerHTML = `<p class="text-neutral-400">No TCO available.</p>`;
        metaEl.textContent = "";
        return;
      }

      const parts = items.map(it => {
        const amt = typeof it.amount === "number" ? it.amount.toFixed(2) : it.amount;
        return `<div class="flex justify-between">
                  <span>${it.label}</span>
                  <span>${currency} ${amt}</span>
                </div>`;
      });

      const totalStr = typeof total === "number" ? total.toFixed(2) : total;
      parts.push(
        `<div class="flex justify-between mt-1 pt-1 border-t border-neutral-200 font-semibold">
           <span>Total monthly</span>
           <span>${currency} ${totalStr}</span>
         </div>`
      );

      tcoEl.innerHTML = parts.join("");
      metaEl.textContent = "Stubbed example – will be driven by real data.";
    } catch (err) {
      console.error("Error loading TCO preview", err);
      tcoEl.innerHTML = `<p class="text-neutral-400">Could not load TCO preview.</p>`;
      metaEl.textContent = "";
    }
  }

4) FRONTEND – call loadTcoPreview(rem) when a reminder is clicked

In the loadReminders() click handler (where you already call updateConversationStatus(rem) and loadConversationHistory(rem)), after those calls, add:

          // Load TCO preview (stub for now)
          loadTcoPreview(rem);

5) Save all files, restart the dashboard server and test:

- Open Reminders tab.
- Click an appointment with a conversation_id.
- Confirm:
  - Script loads.
  - Status line updates.
  - Conversation history appears.
  - TCO preview shows a breakdown with finance, fuel, insurance, tax, service, and a total monthly.
  - No console errors.