Spaces:

alterzick
/

stock-record-v2

Running

App Files Files Community

alterzick commited on Jan 1

Commit

20e5e07

verified ·

1 Parent(s): ea5157a

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +788 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stock Record V2
-emoji: 🏃
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stock-record-v2
+emoji: ⚛️
+colorFrom: red
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,788 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stock Analysis Record Application</title>
+    <!-- SheetJS CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+    <style>
+        :root {
+            --primary: #007bff;
+            --primary-dark: #0056b3;
+            --success: #28a745;
+            --danger: #dc3545;
+            --warning: #ffc107;
+            --info: #17a2b8;
+            --light: #f8f9fa;
+            --dark: #343a40;
+            --gray: #6c757d;
+            --border: #dee2e6;
+            --buy: #d4edda;
+            --sell: #f8d7da;
+            --hold: #fff3cd;
+            --watch: #d1ecf1;
+            --avoid: #f5c6cb;
+            --profit: #28a745;
+            --loss: #dc3545;
+            --profit-bg: #d4edda;
+            --loss-bg: #f8d7da;
+            --planning-bg: #d1ecf1;
+            --progress-bg: #fff3cd;
+            --closed-bg: #e2e3e5;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f8f9fa;
+            color: #212529;
+            line-height: 1.5;
+        }
+        h1 {
+            text-align: center;
+            padding: 20px;
+            margin: 0;
+            background-color: var(--primary);
+            color: white;
+            font-size: 1.5rem;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 15px;
+        }
+        .tab {
+            display: flex;
+            overflow-x: auto;
+            background-color: white;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 20px;
+            -webkit-overflow-scrolling: touch;
+        }
+        .tab button {
+            flex: 1;
+            min-width: 150px;
+            background-color: transparent;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            padding: 14px 16px;
+            font-size: 1rem;
+            transition: background-color 0.3s;
+        }
+        .tab button:hover {
+            background-color: #e9ecef;
+        }
+        .tab button.active {
+            background-color: var(--primary);
+            color: white;
+        }
+        .tabcontent {
+            display: none;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        /* ==== INPUT FORM COMPACT & RAPI ==== */
+        #stockForm {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            align-items: start;
+        }
+        #stockForm .full-width {
+            grid-column: 1 / -1;
+        }
+        #stockForm .button-group {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            margin-top: 10px;
+        }
+        label {
+            font-weight: 600;
+            margin-bottom: 6px;
+            display: block;
+            font-size: 0.95rem;
+        }
+        input[type="text"], input[type="date"], input[type="number"], select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 1rem;
+        }
+        textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 1rem;
+            resize: vertical;
+            min-height: 100px;
+        }
+        button[type="submit"], button[type="button"] {
+            background-color: var(--success);
+            color: white;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        button[type="submit"]:hover, button[type="button"]:hover { background-color: #218838; }
+        button.cancel, button.clear { background-color: var(--gray); }
+        button.cancel:hover, button.clear:hover { background-color: #5a6268; }
+        button.edit-btn { background-color: var(--primary); }
+        button.edit-btn:hover { background-color: var(--primary-dark); }
+        button.delete-btn { background-color: var(--danger); }
+        button.delete-btn:hover { background-color: #c82333; }
+        button.export-btn { background-color: var(--warning); color: var(--dark); }
+        button.export-btn:hover { background-color: #e0a800; }
+        @media (max-width: 768px) {
+            #stockForm { grid-template-columns: 1fr; }
+        }
+        /* ==== TABEL RAPI ==== */
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin-top: 10px;
+            font-size: 0.95rem;
+        }
+        th {
+            background-color: var(--primary);
+            color: white;
+            text-align: left;
+            padding: 12px 10px;
+            cursor: pointer;
+            user-select: none;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        th:hover { background-color: var(--primary-dark); }
+        th.sorted-asc::after { content: " ↑"; }
+        th.sorted-desc::after { content: " ↓"; }
+        td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
+        tr:nth-child(even) { background-color: #f2f2f2; }
+        .truncated {
+            max-width: 200px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            cursor: pointer;
+        }
+        .truncated:hover {
+            overflow: visible;
+            white-space: normal;
+            background: #f8f9fa;
+            padding: 8px;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            position: relative;
+            z-index: 100;
+            max-width: 400px;
+            word-wrap: break-word;
+        }
+        .badge {
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 0.85rem;
+            font-weight: bold;
+            color: white;
+        }
+        .badge-planning { background: #17a2b8; }
+        .badge-progress { background: #ffc107; color: #212529; }
+        .badge-closed { background: #6c757d; }
+        .pl-profit { background: var(--profit-bg); color: var(--success); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .pl-loss { background: var(--loss-bg); color: var(--danger); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .pl-zero { padding: 4px 8px; }
+        .decision-buy { background: var(--buy); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .decision-sell { background: var(--sell); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .decision-hold { background: var(--hold); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .decision-watch { background: var(--watch); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .decision-avoid { background: var(--avoid); font-weight: bold; padding: 4px 8px; border-radius: 4px; }
+        .actions { display: flex; gap: 8px; flex-wrap: wrap; }
+        .actions button { flex: 1; min-width: 70px; padding: 8px; font-size: 0.9rem; }
+        .import-export { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; }
+        #filterForm, #historicalFilterForm {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr auto auto;
+            gap: 10px;
+            align-items: end;
+            margin-bottom: 20px;
+        }
+        @media (max-width: 768px) {
+            #filterForm, #historicalFilterForm { grid-template-columns: 1fr; }
+            table, thead, tbody, th, td, tr { display: block; }
+            thead tr { position: absolute; top: -9999px; left: -9999px; }
+            tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 15px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+            td { border: none; position: relative; padding-left: 50%; }
+            td:before { content: attr(data-label); position: absolute; left: 12px; width: 45%; font-weight: 600; white-space: nowrap; }
+            .truncated { max-width: none; display: block; }
+        }
+        .tenets-section {
+            margin-top: 30px;
+            padding: 20px;
+            background-color: #e9f7ef;
+            border-radius: 8px;
+            border-left: 5px solid var(--success);
+        }
+        .last-updated { text-align: right; font-size: 0.9rem; color: var(--gray); margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+    <h1>Stock Analysis Record Application</h1>
+    <div class="container">
+        <div class="tab">
+            <button class="tablinks active" onclick="openTab(event, 'Input')">Input Record</button>
+            <button class="tablinks" onclick="openTab(event, 'View')">View & Manage (Active)</button>
+            <button class="tablinks" onclick="openTab(event, 'Historical')">Historical (Closed)</button>
+        </div>
+        <!-- ====================== INPUT RECORD (COMPACT) ====================== -->
+        <div id="Input" class="tabcontent" style="display: block;">
+            <form id="stockForm">
+                <input type="hidden" id="editIndex" value="-1">
+                <div>
+                    <label for="symbol">Symbol</label>
+                    <input type="text" list="symbolList" id="symbol" required placeholder="Ketik/pilih symbol" autofocus>
+                    <datalist id="symbolList"></datalist>
+                </div>
+                <div>
+                    <label for="date">Tanggal Analisis</label>
+                    <input type="date" id="date" required>
+                </div>
+                <div>
+                    <label for="status">Status</label>
+                    <select id="status" required>
+                        <option value="">-- Pilih Status --</option>
+                        <option value="Planning">Planning</option>
+                        <option value="On Progress">On Progress</option>
+                        <option value="Closed">Closed</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="decision">Decision</label>
+                    <select id="decision" required>
+                        <option value="">-- Pilih Decision --</option>
+                        <option value="Buy">Buy</option>
+                        <option value="Sell">Sell</option>
+                        <option value="Hold">Hold</option>
+                        <option value="Watch">Watch</option>
+                        <option value="Avoid">Avoid</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="entryPrice">Entry Price</label>
+                    <input type="number" step="0.01" id="entryPrice" required>
+                </div>
+                <div>
+                    <label for="exitPrice">Exit/Current Price</label>
+                    <input type="number" step="0.01" id="exitPrice" placeholder="Wajib jika Closed">
+                </div>
+                <div>
+                    <label for="support">Support</label>
+                    <input type="number" step="0.01" id="support" required>
+                </div>
+                <div>
+                    <label for="resistance">Resistance</label>
+                    <input type="number" step="0.01" id="resistance" required>
+                </div>
+                <div>
+                    <label for="mosPrice">MOS Price</label>
+                    <input type="number" step="0.01" id="mosPrice" required>
+                </div>
+                <div>
+                    <label for="trend">Trend Saat Ini</label>
+                    <select id="trend" required>
+                        <option value="">-- Pilih Trend --</option>
+                        <option value="Major uptrend">Major uptrend</option>
+                        <option value="Major downtrend">Major downtrend</option>
+                        <option value="Medium uptrend">Medium uptrend</option>
+                        <option value="Medium downtrend">Medium downtrend</option>
+                        <option value="Minor uptrend">Minor uptrend</option>
+                        <option value="Minor downtrend">Minor downtrend</option>
+                        <option value="Sideways">Sideways</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="broker">Broker Diikuti</label>
+                    <input type="text" list="brokerList" id="broker" placeholder="Ketik/pilih">
+                    <datalist id="brokerList"></datalist>
+                </div>
+                <div>
+                    <label for="priceVolume">Price/Volume Pattern</label>
+                    <select id="priceVolume">
+                        <option value="">-- Pilih Pattern --</option>
+                        <option value="Price up, Volume up">Naik + Volume naik</option>
+                        <option value="Price up, Volume down">Naik + Volume turun</option>
+                        <option value="Price down, Volume down">Turun + Volume turun</option>
+                        <option value="Price down, Volume up">Turun + Volume naik</option>
+                    </select>
+                </div>
+                <div class="full-width">
+                    <label for="historicalData">Historical Data Comment</label>
+                    <textarea id="historicalData" placeholder="Pola harga historis, volume, event penting, dll." required></textarea>
+                </div>
+                <div class="full-width">
+                    <label for="analysis">Analysis Notes</label>
+                    <textarea id="analysis" placeholder="Analisis lengkap: fundamental, technical, sentiment, risiko, dll." required></textarea>
+                </div>
+                <div class="full-width">
+                    <label for="sentimentReason">News / Sentiment Reason</label>
+                    <textarea id="sentimentReason" placeholder="Ringkas berita atau sentimen penting"></textarea>
+                </div>
+                <div class="full-width button-group">
+                    <button type="submit" id="submitButton">Save Record</button>
+                    <button type="button" class="cancel" id="cancelButton" style="display:none;" onclick="cancelEdit()">Cancel Edit</button>
+                    <button type="button" class="clear" onclick="clearForm()">Clear Form</button>
+                </div>
+            </form>
+            <div class="tenets-section">
+                <h3>Tenets & Notes for Stock Screening and Trading</h3>
+                <p>Prinsip-prinsip utama trader profesional sebagai panduan analisis:</p>
+                <ul>
+                    <li><strong>Follow the Trend:</strong> "The trend is your friend."</li>
+                    <li><strong>Cut Losses Short, Let Profits Run</strong></li>
+                    <li><strong>Risk Management:</strong> Maksimal 1-2% risiko per trade</li>
+                    <li><strong>Never Add to Losing Position</strong></li>
+                    <li><strong>Be Patient and Disciplined</strong></li>
+                    <li><strong>Value Investing + Momentum</strong></li>
+                    <li><strong>Diversification</strong></li>
+                </ul>
+            </div>
+        </div>
+        <!-- ====================== VIEW (ACTIVE) ====================== -->
+        <div id="View" class="tabcontent">
+            <div class="last-updated" id="lastUpdatedView"></div>
+            <form id="filterForm">
+                <div><label for="filterSymbol">Filter by Symbol</label><input type="text" id="filterSymbol" placeholder="e.g., BBCA"></div>
+                <div><label for="filterDecision">Filter by Decision</label>
+                    <select id="filterDecision">
+                        <option value="">-- All Decisions --</option>
+                        <option value="Buy">Buy</option><option value="Sell">Sell</option><option value="Hold">Hold</option>
+                        <option value="Watch">Watch</option><option value="Avoid">Avoid</option>
+                    </select>
+                </div>
+                <div><label for="filterStatus">Filter by Status</label>
+                    <select id="filterStatus">
+                        <option value="">-- All Status (Non-Closed) --</option>
+                        <option value="Planning">Planning</option><option value="On Progress">On Progress</option>
+                    </select>
+                </div>
+                <div><button type="button" onclick="applyFilters('View')">Apply Filter</button></div>
+                <div><button type="button" onclick="clearFilters('View')">Clear Filter</button></div>
+            </form>
+            <div class="import-export">
+                <div><label for="importFile">Import XLSX</label><input type="file" id="importFile" accept=".xlsx"></div>
+                <button type="button" onclick="importExcel()">Import</button>
+                <button type="button" class="export-btn" onclick="exportToExcel()">Export to XLSX</button>
+            </div>
+            <table id="recordsTable">
+                <thead>
+                    <tr>
+                        <th onclick="sortTable(0,'View')">Symbol</th>
+                        <th onclick="sortTable(1,'View')">Date</th>
+                        <th>Status</th>
+                        <th>Entry</th>
+                        <th>Current</th>
+                        <th>P/L (%)</th>
+                        <th>Historical</th>
+                        <th>Analysis</th>
+                        <th>Support</th>
+                        <th>Resistance</th>
+                        <th>MOS</th>
+                        <th onclick="sortTable(11,'View')">Decision</th>
+                        <th>Trend</th>
+                        <th>Broker</th>
+                        <th>Sentiment</th>
+                        <th>Pattern</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+        <!-- ====================== HISTORICAL (CLOSED) ====================== -->
+        <div id="Historical" class="tabcontent">
+            <div class="last-updated" id="lastUpdatedHistorical"></div>
+            <form id="historicalFilterForm">
+                <div><label for="historicalFilterSymbol">Filter by Symbol</label><input type="text" id="historicalFilterSymbol" placeholder="e.g., BBCA"></div>
+                <div><label for="historicalFilterDecision">Filter by Decision</label>
+                    <select id="historicalFilterDecision">
+                        <option value="">-- All Decisions --</option>
+                        <option value="Buy">Buy</option><option value="Sell">Sell</option><option value="Hold">Hold</option>
+                        <option value="Watch">Watch</option><option value="Avoid">Avoid</option>
+                    </select>
+                </div>
+                <div><label for="historicalFilterStatus">Filter by Status</label>
+                    <select id="historicalFilterStatus"><option value="Closed">-- Only Closed --</option></select>
+                </div>
+                <div><button type="button" onclick="applyFilters('Historical')">Apply Filter</button></div>
+                <div><button type="button" onclick="clearFilters('Historical')">Clear Filter</button></div>
+            </form>
+            <div class="import-export">
+                <div><label for="historicalImportFile">Import XLSX</label><input type="file" id="historicalImportFile" accept=".xlsx"></div>
+                <button type="button" onclick="importExcel('historical')">Import</button>
+                <button type="button" class="export-btn" onclick="exportToExcel('historical')">Export Historical</button>
+            </div>
+            <table id="historicalTable">
+                <thead>
+                    <tr>
+                        <th onclick="sortTable(0,'Historical')">Symbol</th>
+                        <th onclick="sortTable(1,'Historical')">Date</th>
+                        <th>Status</th>
+                        <th>Entry</th>
+                        <th>Exit</th>
+                        <th>P/L (%)</th>
+                        <th>Historical</th>
+                        <th>Analysis</th>
+                        <th>Support</th>
+                        <th>Resistance</th>
+                        <th>MOS</th>
+                        <th onclick="sortTable(11,'Historical')">Decision</th>
+                        <th>Trend</th>
+                        <th>Broker</th>
+                        <th>Sentiment</th>
+                        <th>Pattern</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </div>
+    <script>
+        let records = JSON.parse(localStorage.getItem('stockRecords')) || [];
+        let viewSortColumn = 1, viewSortDirection = -1;
+        let historicalSortColumn = 1, historicalSortDirection = -1;
+        const form = document.getElementById('stockForm');
+        const tableBodyView = document.querySelector('#recordsTable tbody');
+        const tableBodyHistorical = document.querySelector('#historicalTable tbody');
+        const symbolDatalist = document.getElementById('symbolList');
+        const brokerDatalist = document.getElementById('brokerList');
+        const lastUpdatedView = document.getElementById('lastUpdatedView');
+        const lastUpdatedHistorical = document.getElementById('lastUpdatedHistorical');
+        function updateLastUpdated(tab) {
+            const filtered = getFilteredRecords(tab);
+            const el = tab === 'View' ? lastUpdatedView : lastUpdatedHistorical;
+            if (filtered.length > 0) {
+                const latest = filtered.reduce((a,b) => a.date > b.date ? a : b);
+                el.textContent = `Last updated: ${new Date(latest.date).toLocaleDateString('id-ID')}`;
+            } else el.textContent = '';
+        }
+        function updateSymbolDatalist() {
+            const unique = [...new Set(records.map(r => r.symbol.toUpperCase()))].sort();
+            symbolDatalist.innerHTML = unique.map(s => `<option value="${s}">`).join('');
+        }
+        function updateBrokerDatalist() {
+            const unique = [...new Set(records.map(r => (r.broker || '').trim()).filter(b => b))].sort();
+            brokerDatalist.innerHTML = unique.map(b => `<option value="${b}">`).join('');
+        }
+        function getDecisionClass(d) { return 'decision-' + d.toLowerCase(); }
+        function calculateProfitLoss(r) {
+            if (!r.entryPrice || !r.exitPrice) return {value: '-', class: ''};
+            const pl = ((r.exitPrice - r.entryPrice) / r.entryPrice * 100).toFixed(2) + '%';
+            const cls = parseFloat(pl) > 0 ? 'profit' : (parseFloat(pl) < 0 ? 'loss' : '');
+            return {value: pl, class: cls};
+        }
+        function displayRecords(tab, data) {
+            const tbody = tab === 'View' ? tableBodyView : tableBodyHistorical;
+            tbody.innerHTML = '';
+            if (data.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="17" style="text-align:center;padding:30px;">No records found.</td></tr>';
+                return;
+            }
+            data.forEach(record => {
+                const pl = calculateProfitLoss(record);
+                const plClass = pl.class === 'profit' ? 'pl-profit' : (pl.class === 'loss' ? 'pl-loss' : 'pl-zero');
+                const statusBadge = record.status === 'Planning' ? 'badge-planning' :
+                                    record.status === 'On Progress' ? 'badge-progress' : 'badge-closed';
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td data-label="Symbol"><strong>${record.symbol}</strong></td>
+                    <td data-label="Date">${new Date(record.date).toLocaleDateString('id-ID')}</td>
+                    <td data-label="Status"><span class="badge ${statusBadge}">${record.status || '-'}</span></td>
+                    <td data-label="Entry">${record.entryPrice ? record.entryPrice.toFixed(2) : '-'}</td>
+                    <td data-label="${tab==='Historical'?'Exit':'Current'}">${record.exitPrice ? record.exitPrice.toFixed(2) : '-'}</td>
+                    <td data-label="P/L (%)" class="${plClass}">${pl.value}</td>
+                    <td data-label="Historical" class="truncated">${record.historicalData || '-'}</td>
+                    <td data-label="Analysis" class="truncated">${record.analysis || '-'}</td>
+                    <td data-label="Support">${record.support}</td>
+                    <td data-label="Resistance">${record.resistance}</td>
+                    <td data-label="MOS">${record.mosPrice}</td>
+                    <td data-label="Decision" class="${getDecisionClass(record.decision)}">${record.decision}</td>
+                    <td data-label="Trend">${record.trend || '-'}</td>
+                    <td data-label="Broker">${record.broker || '-'}</td>
+                    <td data-label="Sentiment" class="truncated">${record.sentimentReason || '-'}</td>
+                    <td data-label="Pattern">${record.priceVolume || '-'}</td>
+                    <td data-label="Actions" class="actions">
+                        <button class="edit-btn" onclick="editRecord(${records.indexOf(record)})">Edit</button>
+                        <button class="delete-btn" onclick="deleteRecord(${records.indexOf(record)})">Delete</button>
+                    </td>
+                `;
+                tbody.appendChild(tr);
+            });
+        }
+        function getFilteredRecords(tab) {
+            return records.filter(r => tab === 'View' ? r.status !== 'Closed' : r.status === 'Closed');
+        }
+        function sortTable(colIdx, tab) {
+            let colVar = tab === 'View' ? viewSortColumn : historicalSortColumn;
+            let dirVar = tab === 'View' ? viewSortDirection : historicalSortDirection;
+            if (colVar === colIdx) dirVar *= -1;
+            else { colVar = colIdx; dirVar = colIdx === 1 ? -1 : 1; }
+            if (tab === 'View') { viewSortColumn = colVar; viewSortDirection = dirVar; }
+            else { historicalSortColumn = colVar; historicalSortDirection = dirVar; }
+            const tableId = tab === 'View' ? '#recordsTable' : '#historicalTable';
+            document.querySelectorAll(`${tableId} th`).forEach(th => th.classList.remove('sorted-asc','sorted-desc'));
+            document.querySelectorAll(`${tableId} th`)[colIdx].classList.add(dirVar > 0 ? 'sorted-asc' : 'sorted-desc');
+            const sorted = [...getFilteredRecords(tab)].sort((a,b) => {
+                let A = getRecordValue(a, colIdx), B = getRecordValue(b, colIdx);
+                if (colIdx === 1) { A = new Date(A); B = new Date(B); }
+                else if ([3,4,8,9,10].includes(colIdx)) { A = parseFloat(A)||0; B = parseFloat(B)||0; }
+                else if (colIdx === 5) { A = parseFloat(calculateProfitLoss(a).value)||0; B = parseFloat(calculateProfitLoss(b).value)||0; }
+                return (A < B ? -1 : A > B ? 1 : 0) * dirVar;
+            });
+            displayRecords(tab, sorted);
+        }
+        function getRecordValue(r, i) {
+            return [r.symbol,r.date,r.status,r.entryPrice,r.exitPrice,
+                    parseFloat(calculateProfitLoss(r).value)||0,
+                    r.historicalData,r.analysis,r.support,r.resistance,r.mosPrice,
+                    r.decision,r.trend,r.broker,r.sentimentReason,r.priceVolume][i];
+        }
+        function applyFilters(tab) {
+            const sym = document.getElementById(tab==='View'?'filterSymbol':'historicalFilterSymbol').value.toLowerCase().trim();
+            const dec = document.getElementById(tab==='View'?'filterDecision':'historicalFilterDecision').value;
+            const stat = document.getElementById(tab==='View'?'filterStatus':'historicalFilterStatus').value;
+            let filtered = getFilteredRecords(tab);
+            if (sym) filtered = filtered.filter(r => r.symbol.toLowerCase().includes(sym));
+            if (dec) filtered = filtered.filter(r => r.decision === dec);
+            if (stat) filtered = filtered.filter(r => r.status === stat);
+            displayRecords(tab, filtered);
+        }
+        function clearFilters(tab) {
+            document.getElementById(tab==='View'?'filterSymbol':'historicalFilterSymbol').value = '';
+            document.getElementById(tab==='View'?'filterDecision':'historicalFilterDecision').value = '';
+            document.getElementById(tab==='View'?'filterStatus':'historicalFilterStatus').value = tab==='View' ? '' : 'Closed';
+            sortTable(1, tab);
+        }
+        function openTab(evt, name) {
+            document.querySelectorAll('.tabcontent').forEach(t=>t.style.display='none');
+            document.querySelectorAll('.tablinks').forEach(t=>t.classList.remove('active'));
+            document.getElementById(name).style.display='block';
+            evt.currentTarget.classList.add('active');
+            if (name==='Input') document.getElementById('symbol').focus();
+            else if (name==='View') { updateLastUpdated('View'); sortTable(1,'View'); }
+            else if (name==='Historical') { updateLastUpdated('Historical'); sortTable(1,'Historical'); }
+        }
+        function editRecord(idx) {
+            const r = records[idx];
+            document.getElementById('symbol').value = r.symbol;
+            document.getElementById('date').value = r.date;
+            document.getElementById('status').value = r.status || '';
+            document.getElementById('entryPrice').value = r.entryPrice || '';
+            document.getElementById('exitPrice').value = r.exitPrice || '';
+            document.getElementById('historicalData').value = r.historicalData;
+            document.getElementById('analysis').value = r.analysis;
+            document.getElementById('support').value = r.support;
+            document.getElementById('resistance').value = r.resistance;
+            document.getElementById('mosPrice').value = r.mosPrice;
+            document.getElementById('decision').value = r.decision;
+            document.getElementById('trend').value = r.trend || '';
+            document.getElementById('broker').value = r.broker || '';
+            document.getElementById('sentimentReason').value = r.sentimentReason || '';
+            document.getElementById('priceVolume').value = r.priceVolume || '';
+            document.getElementById('editIndex').value = idx;
+            document.getElementById('submitButton').textContent = 'Update Record';
+            document.getElementById('cancelButton').style.display = 'inline-block';
+            openTab({currentTarget: document.querySelector('[onclick*="Input"]')}, 'Input');
+        }
+        function cancelEdit() {
+            clearForm();
+            document.getElementById('editIndex').value = '-1';
+            document.getElementById('submitButton').textContent = 'Save Record';
+            document.getElementById('cancelButton').style.display = 'none';
+        }
+        function clearForm() {
+            form.reset();
+            document.getElementById('decision').value = '';
+            document.getElementById('trend').value = '';
+            document.getElementById('status').value = '';
+            document.getElementById('priceVolume').value = '';
+        }
+        function deleteRecord(idx) {
+            if (confirm('Hapus record ini?')) {
+                records.splice(idx,1);
+                localStorage.setItem('stockRecords', JSON.stringify(records));
+                updateSymbolDatalist();
+                updateBrokerDatalist();
+                sortTable(1,'View');
+                sortTable(1,'Historical');
+                updateLastUpdated('View');
+                updateLastUpdated('Historical');
+            }
+        }
+        form.addEventListener('submit', e => {
+            e.preventDefault();
+            const editIdx = parseInt(document.getElementById('editIndex').value);
+            const symbol = document.getElementById('symbol').value.trim().toUpperCase();
+            const date = document.getElementById('date').value;
+            const status = document.getElementById('status').value;
+            const entryPrice = parseFloat(document.getElementById('entryPrice').value);
+            const exitPrice = parseFloat(document.getElementById('exitPrice').value) || null;
+            const support = parseFloat(document.getElementById('support').value);
+            const resistance = parseFloat(document.getElementById('resistance').value);
+            if (records.find((r,i) => r.symbol === symbol && r.date === date && i !== editIdx)) {
+                alert('Record dengan Symbol dan Tanggal yang sama sudah ada!');
+                return;
+            }
+            if (support >= resistance && !confirm('Support ≥ Resistance. Tetap simpan?')) return;
+            if (status === 'Closed' && !exitPrice) { alert('Exit Price wajib diisi jika Status Closed!'); return; }
+            const newRec = {
+                symbol, date, status, entryPrice, exitPrice,
+                historicalData: document.getElementById('historicalData').value.trim(),
+                analysis: document.getElementById('analysis').value.trim(),
+                support, resistance,
+                mosPrice: parseFloat(document.getElementById('mosPrice').value),
+                decision: document.getElementById('decision').value,
+                trend: document.getElementById('trend').value,
+                broker: document.getElementById('broker').value.trim(),
+                sentimentReason: document.getElementById('sentimentReason').value.trim(),
+                priceVolume: document.getElementById('priceVolume').value
+            };
+            if (editIdx === -1) records.push(newRec);
+            else records[editIdx] = newRec;
+            localStorage.setItem('stockRecords', JSON.stringify(records));
+            updateSymbolDatalist();
+            updateBrokerDatalist();
+            updateLastUpdated('View');
+            updateLastUpdated('Historical');
+            cancelEdit();
+            alert(editIdx === -1 ? 'Record berhasil disimpan!' : 'Record berhasil diperbarui!');
+            sortTable(1,'View');
+            sortTable(1,'Historical');
+        });
+        function exportToExcel(tab = null) {
+            const data = tab ? getFilteredRecords(tab) : records;
+            if (data.length === 0) { alert('Tidak ada data untuk diekspor.'); return; }
+            const ws = XLSX.utils.json_to_sheet(data);
+            const wb = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(wb, ws, "StockRecords");
+            XLSX.writeFile(wb, tab === 'historical' ? "Historical_Stock_Records.xlsx" : "Stock_Analysis_Records.xlsx");
+        }
+        function importExcel() {
+            const file = document.getElementById('importFile').files[0];
+            if (!file) { alert('Pilih file XLSX terlebih dahulu.'); return; }
+            const reader = new FileReader();
+            reader.onload = e => {
+                try {
+                    const wb = XLSX.read(e.target.result, {type:'binary'});
+                    const sheet = wb.Sheets[wb.SheetNames[0]];
+                    const imported = XLSX.utils.sheet_to_json(sheet);
+                    let added = 0;
+                    imported.forEach(row => {
+                        if (row.symbol && row.date && row.decision && row.status && typeof row.entryPrice === 'number' &&
+                            typeof row.support === 'number' && typeof row.resistance === 'number' && typeof row.mosPrice === 'number') {
+                            row.symbol = row.symbol.toString().trim().toUpperCase();
+                            row.broker = (row.broker || '').toString().trim();
+                            row.exitPrice = row.exitPrice || null;
+                            records.push(row);
+                            added++;
+                        }
+                    });
+                    if (added > 0) {
+                        localStorage.setItem('stockRecords', JSON.stringify(records));
+                        updateSymbolDatalist(); updateBrokerDatalist();
+                        updateLastUpdated('View'); updateLastUpdated('Historical');
+                        sortTable(1,'View'); sortTable(1,'Historical');
+                        alert(`${added} record berhasil diimport.`);
+                    } else alert('Tidak ada record valid.');
+                } catch (err) { alert('Error: ' + err.message); }
+                document.getElementById('importFile').value = '';
+            };
+            reader.readAsBinaryString(file);
+        }
+        // Init
+        updateSymbolDatalist();
+        updateBrokerDatalist();
+        sortTable(1,'View');
+        sortTable(1,'Historical');
+        updateLastUpdated('View');
+        updateLastUpdated('Historical');
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/stock-record-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes