Portfolio Tracking

<div class="p-4 bg-green-50 rounded-2xl border border-green-100">
    <h3 class="font-bold text-green-900 mb-2">Mutual Fund Holdings</h3>
    
    <div id="mfList" class="space-y-2 mb-2"></div>
    
    <div class="flex gap-2">
        <input type="text" id="mfCode" placeholder="Scheme Code"
            class="flex-1 p-3 bg-white rounded-xl text-sm">
        <input type="number" id="mfUnits" placeholder="Units"
            class="w-20 p-3 bg-white rounded-xl text-sm">
    </div>
    
    <button onclick="addHolding()"
        class="w-full mt-2 bg-green-600 text-white p-3 rounded-xl font-bold text-sm">
        Add Holding
    </button>
    
    <button onclick="saveHoldings()"
        class="w-full mt-2 bg-slate-900 text-white p-3 rounded-xl font-bold text-sm">
        Save & Update
    </button>
</div>

let currentHoldings = [];

// Fetch existing holdings from backend
async function fetchHoldings() {
    try {
        const res = await fetch('/api/holdings');
        currentHoldings = await res.json();
        renderHoldings();
    } catch (e) { }
}

// Render holdings list
function renderHoldings() {
    const list = document.getElementById('mfList');
    list.innerHTML = currentHoldings.map((h, i) =>
        `<div class="flex justify-between text-xs bg-white p-2 rounded border">
            <span class="font-mono">${h.scheme_code}</span>
            <span>${h.units} units</span>
            <button onclick="removeHolding(${i})" class="text-red-500">x</button>
        </div>`
    ).join('');
}

// Add new holding to local array
function addHolding() {
    const code = document.getElementById('mfCode').value;
    const units = parseFloat(document.getElementById('mfUnits').value);
    
    if (code && units) {
        currentHoldings.push({ scheme_code: code, units: units });
        renderHoldings();
        document.getElementById('mfCode').value = '';
        document.getElementById('mfUnits').value = '';
    }
}

// Remove holding from array
function removeHolding(i) {
    currentHoldings.splice(i, 1);
    renderHoldings();
}

// Save all holdings to backend
async function saveHoldings() {
    await fetch('/api/holdings', {
        method: 'POST', 
        body: JSON.stringify(currentHoldings),
        headers: { 'Content-Type': 'application/json' }
    });
    alert("Holdings Saved!");
    fetchPortfolio();  // Recalculate portfolio value
}

// Initialize on page load
fetchHoldings();

from pydantic import BaseModel
from typing import List
import json
import os

HOLDINGS_FILE = "./holdings.json"

class Holding(BaseModel):
    scheme_code: str
    units: float

def load_holdings():
    if os.path.exists(HOLDINGS_FILE):
        try:
            with open(HOLDINGS_FILE, "r") as f:
                return json.load(f)
        except:
            return []
    return []

def save_holdings(holdings):
    with open(HOLDINGS_FILE, "w") as f:
        json.dump(holdings, f)

@app.get("/api/holdings")
def get_holdings_api():
    return load_holdings()

@app.post("/api/holdings")
def set_holdings_api(holdings: List[Holding]):
    data = [{"scheme_code": h.scheme_code, "units": h.units} for h in holdings]
    save_holdings(data)
    return {"status": "updated"}

import requests

@app.get("/api/portfolio")
def get_portfolio():
    total_value = 0
    portfolio = []
    
    holdings = load_holdings()
    
    for holding in holdings:
        code = holding["scheme_code"]
        units = float(holding["units"])
        
        try:
            # Call MFapi.in for this scheme
            resp = requests.get(f"https://api.mfapi.in/mf/{code}")
            data = resp.json()
            
            if data and "data" in data and len(data["data"]) > 0:
                nav = float(data["data"][0]["nav"])  # Latest NAV
                fund_name = data["meta"]["scheme_name"]
                value = units * nav
                
                portfolio.append({
                    "scheme_code": code,
                    "scheme_name": fund_name,
                    "units": units,
                    "nav": nav,
                    "current_value": round(value, 2)
                })
                total_value += value
        except Exception as e:
            print(f"Error fetching {code}: {e}")
            
    return {
        "portfolio": portfolio,
        "total_value": round(total_value, 2)
    }

<div class="card p-4 bg-white">
    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">
        Investments
    </p>
    <h3 id="uiPortfolio" class="text-xl font-black text-slate-800">₹0</h3>
    <p class="text-[10px] text-green-500 font-bold mt-1">MFapi.in Linked</p>
</div>

async function fetchPortfolio() {
    try {
        const res = await fetch('/api/portfolio');
        const data = await res.json();
        
        if (data.total_value) {
            appData.portfolioValue = data.total_value;
            renderUI();  // Updates the card display
        }
    } catch (e) {
        console.error("Portfolio Fetch Error", e);
    }
}

// Called on page load and after saving holdings
fetchPortfolio();

function renderUI() {
    const showBal = appData.showBalance || !appData.privacy;
    
    // Total balance includes sheet balance + bank + portfolio
    const totalBal = appData.balance + 
                     (appData.bankBalance || 0) + 
                     (appData.portfolioValue || 0);
    
    const updateDisplay = (id, val) => {
        const el = document.getElementById(id);
        if (showBal && el) 
            el.innerText = `₹${Number(val).toLocaleString('en-IN')}`;
        else if (el) 
            el.innerText = "••••••";
    };
    
    updateDisplay('uiBalance', totalBal);
    updateDisplay('uiPortfolio', appData.portfolioValue || 0);
}