stocks-fe/src/routes/portfolio/+page.svelte

<script>
	import { authentication } from '../store.js';
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';
	import AddStock from '../../components/AddStock.svelte';
	import { getRequest } from '../../utils/api.js';
	import { goto } from '$app/navigation';

	let portfolioId = undefined;
	let result = [];
	let totalValue = 0;
	let totalAssets = 0;
	let authToken;
	let isLoading = true;
	let showModal = false;
	let searchStockResult = [];
	let orderBy = 'total';
	let currency = 'USD';
	let hasChanges = false;

	onMount(() => {
		return authentication.subscribe(async (auth) => {
			if (!auth || !auth.token) {
				await goto('/login');
			} else {
				authToken = auth.token;
				await fetchPortfolio();
			}
		});
	});

	async function fetchPortfolio() {
		try {
			const response = await getRequest(`${import.meta.env.VITE_STOCKS_HOST}/api/portfolios?currency=${currency}`, {}, authToken);

			if (response.ok) {
				await update(response.json());
			} else {
				const error = await response.json();
				console.error('Failed to find portfolio info:', error);
			}
		} catch (err) {
			console.error('Failed to find portfolio info', err);
		} finally {
			isLoading = false;
		}
	}

	async function update(response) {
		const portfolio = await response;
		if (portfolio?.length > 0) {
			if (orderBy === 'code') {
				result = portfolio[0].stocks.sort((a, b) => a.code.localeCompare(b.code));
			}

			if (orderBy === 'name') {
				result = portfolio[0].stocks.sort((a, b) => a.name.localeCompare(b.name));
			}

			if (orderBy === 'total') {
				result = portfolio[0].stocks.sort((a, b) => a.total - b.total);
			}

			if (orderBy === 'weight') {
				result = portfolio[0].stocks.sort((a, b) => b.total - a.total);
			}

			result = portfolio[0].stocks;
			totalValue = portfolio[0].totalValue;
			totalAssets = portfolio[0].totalAssets;
			portfolioId = portfolio[0].id;
		} else {
			await createNewPortfolio();
		}
	}

	async function createNewPortfolio() {
		try {
			const response = await fetch(`${import.meta.env.VITE_STOCKS_HOST}/api/portfolios`, {
				method: 'POST',
				headers: {
					Authorization: 'Bearer ' + authToken
				}
			});

			if (response.status === 400) {
				alert('Bad request. Invalid code.');
				return;
			}

			await fetchPortfolio();
		} catch (err) {
			console.error('Update failed', err);
		}
	}

	async function updatePortfolio(stocks) {
		try {
			const response = await fetch(
				`${import.meta.env.VITE_STOCKS_HOST}/api/portfolios/${portfolioId}`,
				{
					method: 'PUT',
					headers: {
						Authorization: 'Bearer ' + authToken,
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({ stocks })
				}
			);

			if (response.status === 400) {
				alert('Bad request. Invalid code.');
				return;
			}

			await fetchPortfolio();
		} catch (err) {
			console.error('Update failed', err);
		}
	}

	async function searchStock(code) {
		if (!code) return;

		try {
			const res = await fetch(`${import.meta.env.VITE_STOCKS_HOST}/api/stocks?q=${code}`);
			return await res.json();
		} catch (err) {
			console.error('Search error:', err);
			return [];
		}
	}

	async function addSelectedStock(newStock) {
		const exists = result.some((stock) => stock.code === newStock.code);
		if (exists) return;

		result = [
			...result,
			{
				code: newStock.code,
				name: newStock.name,
				quantity: 0,
				price: newStock.price,
				total: 0,
				totalPercent: 0
			}
		];

		closeModal();

		await updatePortfolio(result);
	}

	async function applyChanges() {
		try {
			await updatePortfolio(result);
			hasChanges = false;
		} catch (err) {
			console.error('Update failed', err);
		}
	}

	function remove(code) {
		result = result.filter((stock) => stock.code !== code);
		updatePortfolio(result);
	}

	function formatCurrency(value) {
		return value.toLocaleString('en-US', {
			style: 'currency',
			currency: currency
		});
	}

	function calculatePercentage(part, total) {
		return total ? Math.floor((part / total) * 10000) / 100 : 0;
	}

	function updateStockQuantity(e) {
		e.preventDefault();
		const form = new FormData(e.target);
		const code = form.get('code');
		const quantity = parseInt(form.get('quantity')) || 0;

		result = result.map((stock) => (stock.code === code ? { ...stock, quantity } : stock));

		updatePortfolio(result);
	}

	function openModal() {
		searchStockResult = [];
		showModal = true;
	}

	function closeModal() {
		searchStockResult = [];
		showModal = false;
	}

	function updateOrderBy(event) {
		orderBy = event.target.value;
		fetchPortfolio();
	}

	function updateCurrency(event) {
		currency = event.target.value;
		fetchPortfolio();
	}

	function handleInputChange(event) {
		const form = new FormData(event.target.closest('form'));
		const code = form.get('code');
		const quantity = parseInt(form.get('quantity')) || 0;

		result = result.map((stock) => (stock.code === code ? { ...stock, quantity } : stock));
		hasChanges = true;
	}
</script>

<svelte:head>
	<title>Portfolio</title>
	<meta name="description" content="Portfolio" />
</svelte:head>

{#if isLoading}
	<div in:fade>Loading...</div>
{:else if portfolioId}
	<div class="button-container">
		<button
			class="btn btn-primary btn-sm"
			data-toggle="modal"
			data-target="#exampleModal"
			on:click={openModal}
		>
			Add
		</button>

		<select class="form-control order-select" on:change={updateCurrency}>
			<option value="brl">BRL</option>
			<option value="eur">EURO</option>
			<option value="usd" selected>USD</option>
		</select>

		<select class="form-control order-select" on:change={updateOrderBy}>
			<option value="code">Order by Code</option>
			<option value="name">Order by Name</option>
			<option value="total" selected>Order by Total</option>
			<option value="weight">Order by Weight</option>
		</select>
	</div>

	<AddStock
		show={showModal}
		onClose={closeModal}
		onSearch={async (code) => {
			const data = await searchStock(code);
			if (!data || data.length === 0) {
				alert('Stock not found.');
				return;
			}
			searchStockResult = data;

			const alreadyInPortfolio = result.some((s) => s.code === data[0]?.code);
			if (data.length === 1 && !alreadyInPortfolio) {
				await addSelectedStock(data[0]);
				closeModal();
			}
		}}
		onAddStock={async (stock) => {
			await addSelectedStock(stock);
			closeModal();
		}}
		searchResults={searchStockResult}
	/>

	<div in:fade class="table-container">
		<table class="stock-table">
			<thead>
			<tr>
				<th>Total Value</th>
				<th>Total Assets</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td class="code">{formatCurrency(totalValue)}</td>
				<td class="code">{totalAssets}</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div in:fade class="table-container">
		<table class="stock-table">
			<thead>
			<tr>
				<th>Code</th>
				<th>Name</th>
				<th>Qty</th>
				<th>Price</th>
				<th>Total</th>
				<th>% of Portfolio</th>
				<th scope="col"></th>
			</tr>
			</thead>
			<tbody>
			{#each result as stock}
				<tr>
					<td class="code">{stock.code}</td>
					<td class="name">{stock.name}</td>
					<td class="qty-edit">
						<form id="updateQuantity" on:submit|preventDefault={updateStockQuantity}>
							<input type="hidden" name="code" value={stock.code} />
							<input
								type="number"
								class="qty-input"
								name="quantity"
								value={stock.quantity}
								on:input={handleInputChange}
							/>
						</form>
					</td>
					<td class="price">{formatCurrency(stock.price)}</td>
					<td class="total">{formatCurrency(stock.total)}</td>
					<td class="percent">{calculatePercentage(stock.total, totalValue)}%</td>
					<td>
						<button class="remove-btn" on:click={() => remove(stock.code)} title="remove"
						></button>
					</td>
				</tr>
			{/each}
			</tbody>
		</table>
	</div>

	{#if hasChanges}
		<button class="btn btn-primary apply-changes-btn" on:click={applyChanges}>
			Apply Changes
		</button>
	{/if}
{:else}
	<div>No portfolio data available.</div>
{/if}

<style>
    .apply-changes-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 100;
    }

    .table-container {
        margin-top: 2rem;
        overflow-x: auto;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .stock-table {
        width: 100%;
        border-collapse: collapse;
        font-family: system-ui, sans-serif;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        min-width: 600px;
    }

    th,
    td {
        padding: 0.5rem 1rem;
        text-align: left;
        white-space: nowrap;
    }

    thead {
        background-color: #f7f7f7;
        border-bottom: 2px solid #e0e0e0;
    }

    th {
        font-weight: 600;
        font-size: 0.95rem;
        color: #333;
    }

    tbody tr:nth-child(odd) {
        background-color: #fafafa;
    }

    tbody tr:nth-child(even) {
        background-color: #f0f4f8;
    }

    tbody tr:hover {
        background-color: #e1ecf4;
    }

    td {
        font-size: 0.95rem;
        color: #555;
        border-bottom: 1px solid #eee;
    }

    .code {
        font-weight: 600;
        color: #2c3e50;
    }

    .name {
        color: #7f8c8d;
    }

    .qty-edit {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .qty-input {
        width: 60px;
        padding: 0.4rem 0.5rem;
        font-size: 0.9rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        text-align: right;
        background-color: #fff;
        color: #333;
        transition: border-color 0.2s ease;
    }

    .qty-input:focus {
        outline: none;
        border-color: #2980b9;
    }

    .remove-btn {
        height: 15px;
        width: 15px;
        background-color: #e74c3c;
        border-radius: 50%;
        display: inline-block;
        border: 0;
    }

    .price {
        color: #27ae60;
        font-weight: bold;
    }

    .total {
        font-weight: 500;
        color: #34495e;
    }

    .percent {
        color: #2980b9;
    }

    @media (max-width: 768px) {
        input[type='number'] {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 768px) {
        .stock-table {
            font-size: 0.875rem;
        }

        th,
        td {
            padding: 0.75rem 1rem;
        }
    }

    .button-container {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
        align-items: center;
    }

    .order-select {
        width: 200px;
        padding: 0.5rem;
        border-radius: 8px;
        border: 1px solid #ddd;
        font-size: 1rem;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease;
    }

    .order-select:focus {
        border-color: #2980b9;
        outline: none;
    }

    input[type='number'] {
        width: 100%;
        font-size: 1rem;
        border-radius: 8px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        background-color: #f9f9f9;
        color: #333;
        transition: border-color 0.3s ease;
    }

    input[type='number']:focus {
        border-color: #2980b9;
        outline: none;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btn-primary {
        background-color: #2980b9;
        color: white;
    }

    .btn-primary:hover {
        background-color: #3498db;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
</style>