add sort by weight

src/routes/portfolio/+page.svelte

@@ -63,6 +63,10 @@
 				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;
@@ -243,6 +247,7 @@
 			<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>
 
@@ -298,16 +303,16 @@
 	<div in:fade class="table-container">
 		<table class="stock-table">
 			<thead>
-				<tr>
-					<th>Total Value</th>
-					<th>Total Assets</th>
-				</tr>
+			<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>
+			<tr>
+				<td class="code">{formatCurrency(totalValue)}</td>
+				<td class="code">{totalAssets}</td>
+			</tr>
 			</tbody>
 		</table>
 	</div>
@@ -315,42 +320,42 @@
 	<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>
+			<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}
+			{#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>
@@ -359,303 +364,303 @@
 {/if}
 
 <style>
-	/* General Styles for Table (Unchanged) */
-	.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: 1rem 1.25rem;
-		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;
-	}
-
-	/* Responsive design */
-	@media (max-width: 768px) {
-		.modal-content {
-			width: 90%;
-			padding: 1.5rem;
-		}
-
-		input[type='text'],
-		input[type='number'] {
-			font-size: 0.9rem;
-		}
-
-		.modal-result {
-			max-height: 200px;
-		}
-
-		.list-group-item {
-			font-size: 0.9rem;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.stock-table {
-			font-size: 0.875rem;
-		}
-
-		th,
-		td {
-			padding: 0.75rem 1rem;
-		}
-	}
-
-	/* Modal Styling */
-	.modal-container {
-		position: fixed;
-		top: 20%;
-		left: 0;
-		right: 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		z-index: 9999;
-		animation: fadeIn 0.3s ease;
-	}
-
-	/* Modal content styling */
-	.modal-content {
-		background-color: #fff;
-		color: #333;
-		width: 450px;
-		height: auto;
-		max-width: 500px;
-		border-radius: 10px;
-		padding: 2rem;
-		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-		transition: transform 0.3s ease-in-out;
-	}
-
-	/* Button container for Add and Dropdown */
-	.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 Fields (Stock code and search) */
-	input[type='text'],
-	input[type='number'] {
-		width: 100%;
-		padding: 0.8rem;
-		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='text']:focus,
-	input[type='number']:focus {
-		border-color: #2980b9;
-		outline: none;
-	}
-
-	/* Button styles */
-	.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;
-	}
-
-	.btn-danger {
-		background-color: #e74c3c;
-		color: white;
-	}
-
-	.btn-danger:hover {
-		background-color: #c0392b;
-	}
-
-	/* Reset Button (Modal) */
-	input[type='reset'] {
-		background-color: #e74c3c;
-		color: white;
-		font-size: 1rem;
-		padding: 0.6rem 1.2rem;
-		border-radius: 8px;
-		cursor: pointer;
-		border: none;
-	}
-
-	/* Modal result items */
-	.modal-result {
-		max-width: 100%;
-		max-height: 300px;
-		overflow-y: auto;
-		padding: 0.8rem;
-		background-color: #fafafa;
-		border-radius: 10px;
-		margin-top: 1rem;
-	}
-
-	.list-group-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 10px;
-		border: 1px solid #ddd;
-		margin-bottom: 0.5rem;
-		border-radius: 8px;
-		background-color: #f9f9f9;
-		transition: background-color 0.3s ease;
-	}
-
-	.list-group-item:hover {
-		background-color: #f1f1f1;
-	}
-
-	.list-group-item .btn-primary {
-		background-color: #2980b9;
-		color: white;
-		border-radius: 50%;
-		height: 30px;
-		width: 30px;
-		padding: 0;
-		border: none;
-	}
-
-	.list-group-item .btn-primary:hover {
-		background-color: #3498db;
-	}
-
-	/* Modal transition */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
+    /* General Styles for Table (Unchanged) */
+    .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: 1rem 1.25rem;
+        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;
+    }
+
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .modal-content {
+            width: 90%;
+            padding: 1.5rem;
+        }
+
+        input[type='text'],
+        input[type='number'] {
+            font-size: 0.9rem;
+        }
+
+        .modal-result {
+            max-height: 200px;
+        }
+
+        .list-group-item {
+            font-size: 0.9rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .stock-table {
+            font-size: 0.875rem;
+        }
+
+        th,
+        td {
+            padding: 0.75rem 1rem;
+        }
+    }
+
+    /* Modal Styling */
+    .modal-container {
+        position: fixed;
+        top: 20%;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        animation: fadeIn 0.3s ease;
+    }
+
+    /* Modal content styling */
+    .modal-content {
+        background-color: #fff;
+        color: #333;
+        width: 450px;
+        height: auto;
+        max-width: 500px;
+        border-radius: 10px;
+        padding: 2rem;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease-in-out;
+    }
+
+    /* Button container for Add and Dropdown */
+    .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 Fields (Stock code and search) */
+    input[type='text'],
+    input[type='number'] {
+        width: 100%;
+        padding: 0.8rem;
+        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='text']:focus,
+    input[type='number']:focus {
+        border-color: #2980b9;
+        outline: none;
+    }
+
+    /* Button styles */
+    .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;
+    }
+
+    .btn-danger {
+        background-color: #e74c3c;
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background-color: #c0392b;
+    }
+
+    /* Reset Button (Modal) */
+    input[type='reset'] {
+        background-color: #e74c3c;
+        color: white;
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+        border-radius: 8px;
+        cursor: pointer;
+        border: none;
+    }
+
+    /* Modal result items */
+    .modal-result {
+        max-width: 100%;
+        max-height: 300px;
+        overflow-y: auto;
+        padding: 0.8rem;
+        background-color: #fafafa;
+        border-radius: 10px;
+        margin-top: 1rem;
+    }
+
+    .list-group-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        border: 1px solid #ddd;
+        margin-bottom: 0.5rem;
+        border-radius: 8px;
+        background-color: #f9f9f9;
+        transition: background-color 0.3s ease;
+    }
+
+    .list-group-item:hover {
+        background-color: #f1f1f1;
+    }
+
+    .list-group-item .btn-primary {
+        background-color: #2980b9;
+        color: white;
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        padding: 0;
+        border: none;
+    }
+
+    .list-group-item .btn-primary:hover {
+        background-color: #3498db;
+    }
+
+    /* Modal transition */
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
 </style>