async function refresh() {
    document.getElementById("transactions").innerHTML = "";
    document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username/")).text()).name;
    document.getElementById("user-profile").src = "https://account.minteck.org/hub/api/rest/avatar/" + JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username/")).text()).id + "?dpr=2&size=48";

    window.transactions = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/TransactionsList/")).text());
    window.goal = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/GetGoal/")).text());

    for (let transaction of transactions) {
        demo = document.getElementById("demo-transaction");
        demo.id = "";

        if (transaction.type === "pay") {
            word = "used";
            color = "#b31500";
        } else {
            word = "added";
            color = "#0065b3";
        }

        if (transaction.amount['original'] === "eur") {
            baseCurrency = transaction.amount['eur'].toFixed(2) + "€";
            convertedCurrency = "£" + transaction.amount['gbp'].toFixed(2);
        } else {
            baseCurrency = "£" + transaction.amount['gbp'].toFixed(2);
            convertedCurrency = transaction.amount['eur'].toFixed(2) + "€";
        }

        document.getElementById("transactions").innerHTML += demo.outerHTML
            .replace("%user%", transaction.author.name)
            .replace("%picture%", "\" src=\"" + transaction.author.avatar + "\"")
            .replace("%time%", transaction.date.relative)
            .replace("%transactionId%", transaction.date.absolute)
            .replace("%description%", transaction.description.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"))
            .replace("%type%", word)
            .replace("%amount_bc%", baseCurrency)
            .replace("%amount_cc%", convertedCurrency)
            .replace("%type%", word)
            .replace("var(--perc-color)", color)

        demo.id = "demo-transaction";
    }

    try {
        totalPaidEUR = transactions.filter(i => i.type === "pay").map(i => { return i.amount['eur']; }).reduce((a, b) => { return a+b; });
    } catch (e) {
        totalPaidEUR = 0;
    }

    try {
        totalPaidGBP = transactions.filter(i => i.type === "pay").map(i => { return i.amount['gbp']; }).reduce((a, b) => { return a+b; });
    } catch (e) {
        totalPaidGBP = 0;
    }

    try {
        totalGainedEUR = transactions.filter(i => i.type !== "pay").map(i => { return i.amount['eur']; }).reduce((a, b) => { return a+b; });
    } catch (e) {
        totalGainedEUR = 0;
    }

    try {
        totalGainedGBP = transactions.filter(i => i.type !== "pay").map(i => { return i.amount['gbp']; }).reduce((a, b) => { return a+b; });
    } catch (e) {
        totalGainedGBP = 0;
    }

    totalEUR = totalGainedEUR - totalPaidEUR;
    totalGBP = totalGainedGBP - totalPaidGBP;

    document.getElementById("balance-eur").innerText = totalEUR.toFixed(2);
    document.getElementById("balance-gbp").innerText = totalGBP.toFixed(2);

    document.getElementById("goal-name").innerText = goal.name;
    document.getElementById("goal-amount-eur").innerText = goal.amount['eur'].toFixed(2);
    document.getElementById("goal-amount-gbp").innerText = goal.amount['gbp'].toFixed(2);

    if (goal.amount['eur'] === 0 || goal.amount['gbp'] === 0) {
        document.getElementById("goal-amount-percentage").innerText = "N/A";
        document.getElementById("goal-bar-fill").style.width = "0%";
    } else {
        percentage = (totalEUR / goal.amount['eur']) * 100;
        document.getElementById("goal-amount-percentage").innerText = percentage.toFixed(2);
        document.getElementById("goal-bar-fill").style.width = percentage.toFixed(5) + "%";
    }

    document.getElementById("app").style.display = "";
    document.getElementById("loader").style.opacity = "0";
    document.getElementById("loader").style.pointerEvents = "none";

    for (let item of Array.from(document.getElementsByClassName("transaction"))) {
        item.onclick = () => {
            deleteTransaction(item.getAttribute("data-transaction-id"));
        }
    }

    graph.data.labels = transactions.map((i) => { return new Date(i.date.absolute).toString().split(":")[0] + ":" + new Date(i.date.absolute).toString().split(":")[1]; }).reverse().filter((_, i) => i > 1);

    let last = 0;
    let balances = [];

    transactions.map((i) => { if (i.type === "pay") { return -(i.amount.eur); } else { return i.amount.eur; } }).reverse().map((i) => {
        last = last + i;
        balances.push(last);
    });
    graph.data.datasets[0].data = balances.filter((_, i) => i > 1);

    trendData = balances.filter((_, i) => i > 1).map((i, _) => { return { x: _, y: i } });
    trend = trendline(trendData, 'x', 'y');

    let lastTrend = trend.yStart;
    let balancesTrend = [];

    transactions.filter((_, i) => i > 1).map(() => {
        lastTrend = lastTrend + trend.slope;
        balancesTrend.push(lastTrend);
    });

    graph.data.datasets[1].data = balancesTrend;

    document.getElementById("graph-insights-color").style.backgroundColor = "black";
    document.getElementById("graph-insights-text").style.color = "black";
    document.getElementById("graph-insights-text").innerText = "No insights available. Please try again later.";

    document.getElementById("graph-insights-text").style.color = "white";
    document.getElementById("graph-insights-text").innerText = "Slope (negative = losing money; positive = gaining money): " + trend.slope;

    let avgSlope = Math.round(trend.slope);

    if (avgSlope < -3) {
        document.getElementById("graph-insights-color").style.backgroundColor = "red";
        document.getElementById("graph-insights-text").style.color = "red";
        document.getElementById("graph-insights-text").innerText = "Money is going down faster than it should, you must immediately reduce your expenses.";
    } else if (avgSlope < 0) {
        document.getElementById("graph-insights-color").style.backgroundColor = "orange";
        document.getElementById("graph-insights-text").style.color = "orange";
        document.getElementById("graph-insights-text").innerText = "You are not saving money, consider reducing your expenses.";
    } else if (avgSlope === 0) {
        document.getElementById("graph-insights-color").style.backgroundColor = "green";
        document.getElementById("graph-insights-text").style.color = "green";
        document.getElementById("graph-insights-text").innerText = "Your balance is stable, consider saving more money.";
    } else if (avgSlope > 0) {
        document.getElementById("graph-insights-color").style.backgroundColor = "skyblue";
        document.getElementById("graph-insights-text").style.color = "skyblue";
        document.getElementById("graph-insights-text").innerText = "You are effectively saving money.";
    }

    if (avgSlope < 0) {
        it = 0; b = totalEUR; while (b > 0) { it++; b = b + trend.slope; }
        let avgDelay = Math.round(averageDelta(transactions.map((i) => { return new Date(i.date.absolute).getTime() }).reverse()));
        let timeUntilEmpty = avgDelay * it;
        let date = new Date(new Date().getTime() + timeUntilEmpty).toString().split(":")[0];
        document.getElementById("graph-insights-text").innerText += " (reaching zero on " + date.substring(0, date.length - 3) + ")";
    } else {
        it = 0; b = totalEUR; while (b < goal.amount.eur) { it++; b = b + trend.slope; }
        let avgDelay = Math.round(averageDelta(transactions.map((i) => { return new Date(i.date.absolute).getTime() }).reverse()));
        let timeUntilGoal = avgDelay * it;
        let date = new Date(new Date().getTime() + timeUntilGoal).toString().split(":")[0];
        document.getElementById("graph-insights-text").innerText += " (reaching goal on " + date.substring(0, date.length - 3) + ")";
    }
}