Spaces:

alterzick
/

balancepos-v1

Running

App Files Files Community

alterzick commited on Dec 25, 2025

Commit

2771c13

verified ·

1 Parent(s): 06f5d4b

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Balancepos V1
-emoji: 🦀
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: balancepos-v1
+emoji: ⚛️
+colorFrom: green
+colorTo: yellow
 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,594 @@
-<!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="id">
+<head>
+  <meta charset="UTF-8">
+  <title>Dashboard Balancepos Interaktif</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      padding: 10px;
+      background: #f5f5f5;
+      margin: 0;
+    }
+    h2 { margin-top: 0; }
+    .toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 8px;
+      padding: 10px;
+      background: white;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .toolbar label {
+      font-weight: bold;
+      margin-right: 4px;
+      min-width: 60px;
+    }
+    input[type="text"], select {
+      padding: 3px 5px;
+      font-size: 12px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+    input[type="number"] {
+      width: 90px;
+      padding: 3px 5px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+    button {
+      padding: 4px 8px;
+      font-size: 12px;
+      cursor: pointer;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      background: #f0f0f0;
+    }
+    button:hover {
+      background: #e0e0e0;
+    }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 5px;
+      background: white;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    th, td {
+      border: 1px solid #ccc;
+      padding: 4px 6px;
+      white-space: nowrap;
+      font-size: 11px;
+    }
+    th {
+      background: #e0e0e0;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      cursor: pointer;
+      user-select: none;
+    }
+    th.sort-asc::after {
+      content: " ▲";
+      font-size: 10px;
+      color: #0066cc;
+    }
+    th.sort-desc::after {
+      content: " ▼";
+      font-size: 10px;
+      color: #0066cc;
+    }
+    tr:hover {
+      background: #fafad2;
+    }
+    .wrap {
+      max-height: 65vh;
+      overflow: auto;
+      border: 1px solid #ccc;
+      background: white;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+    #info {
+      margin: 6px 0;
+      color: #555;
+      font-weight: bold;
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin-top: 6px;
+      padding: 8px;
+      background: white;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .pagination button {
+      padding: 4px 8px;
+    }
+    .add-form {
+      margin-top: 10px;
+      padding: 12px;
+      background: #ffffff;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .add-form h3 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      color: #333;
+    }
+    .add-form-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+    .add-form-row label {
+      min-width: 80px;
+      font-weight: bold;
+    }
+    .add-form-row input, .add-form-row select {
+      min-width: 120px;
+    }
+    .chip {
+      background: #eee;
+      padding: 2px 6px;
+      border-radius: 10px;
+      font-size: 11px;
+    }
+    .filter-section {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      align-items: center;
+    }
+    .filter-group {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  </style>
+</head>
+<body>
+<h2>Dashboard Balancepos Interaktif</h2>
+<div class="toolbar">
+  <div class="filter-section">
+    <div class="filter-group">
+      <label>Upload TXT:</label>
+      <input type="file" id="fileInput" accept=".txt">
+    </div>
+    <div class="filter-group">
+      <label>Cari:</label>
+      <input type="text" id="searchInput" placeholder="Kode / Type / dll">
+    </div>
+    <div class="filter-group">
+      <label>Filter Type:</label>
+      <select id="typeFilter">
+        <option value="">(Semua)</option>
+      </select>
+    </div>
+    <div class="filter-group">
+      <label>Filter Date:</label>
+      <input type="text" id="dateFilter" placeholder="30-JUN-2025">
+    </div>
+    <div class="filter-group">
+      <label>Filter Code:</label>
+      <input type="text" id="codeFilter" placeholder="AALI">
+    </div>
+    <div class="filter-group">
+      <label>Rows/page:</label>
+      <select id="pageSize">
+        <option value="10">10</option>
+        <option value="25" selected>25</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <option value="200">200</option>
+      </select>
+    </div>
+  </div>
+</div>
+<div id="info"></div>
+<div class="wrap">
+  <table id="tbl"></table>
+</div>
+<div class="pagination">
+  <button id="firstPage">|&lt;</button>
+  <button id="prevPage">&lt;</button>
+  <span id="pageInfo" class="chip"></span>
+  <button id="nextPage">&gt;</button>
+  <button id="lastPage">&gt;|</button>
+</div>
+<div class="add-form">
+  <h3>Tambah Data Manual</h3>
+  <div class="add-form-row">
+    <label for="addDate">Date:</label>
+    <input type="text" id="addDate" placeholder="30-JUN-2025">
+    <label for="addCode">Code:</label>
+    <input type="text" id="addCode" placeholder="AALI">
+    <label for="addType">Type:</label>
+    <input type="text" id="addType" placeholder="EQUITY">
+    <label for="addSecNum">Sec. Num:</label>
+    <input type="number" id="addSecNum" placeholder="0">
+    <label for="addPrice">Price:</label>
+    <input type="number" id="addPrice" placeholder="0">
+  </div>
+  <div class="add-form-row">
+    <label>Local IS..OT (9 kolom):</label>
+    <input type="number" id="addLocalIS" placeholder="Local IS">
+    <input type="number" id="addLocalCP" placeholder="Local CP">
+    <input type="number" id="addLocalPF" placeholder="Local PF">
+    <input type="number" id="addLocalIB" placeholder="Local IB">
+    <input type="number" id="addLocalID" placeholder="Local ID">
+    <input type="number" id="addLocalMF" placeholder="Local MF">
+    <input type="number" id="addLocalSC" placeholder="Local SC">
+    <input type="number" id="addLocalFD" placeholder="Local FD">
+    <input type="number" id="addLocalOT" placeholder="Local OT">
+  </div>
+  <div class="add-form-row">
+    <label>Foreign IS..OT (9 kolom):</label>
+    <input type="number" id="addForeignIS" placeholder="Foreign IS">
+    <input type="number" id="addForeignCP" placeholder="Foreign CP">
+    <input type="number" id="addForeignPF" placeholder="Foreign PF">
+    <input type="number" id="addForeignIB" placeholder="Foreign IB">
+    <input type="number" id="addForeignID" placeholder="Foreign ID">
+    <input type="number" id="addForeignMF" placeholder="Foreign MF">
+    <input type="number" id="addForeignSC" placeholder="Foreign SC">
+    <input type="number" id="addForeignFD" placeholder="Foreign FD">
+    <input type="number" id="addForeignOT" placeholder="Foreign OT">
+  </div>
+  <button id="btnAddRow">Tambah Baris</button>
+</div>
+<script>
+let rawRows = [];      // data mentah dari TXT
+let dashboardRows = []; // data + kolom hitung
+let currentPage = 1;
+let sortCol = null;
+let sortDir = 1; // 1 = asc, -1 = desc
+const IDX = {
+  localStart: 5,   // F
+  localEnd: 13,    // N
+  foreignStart: 15,// P
+  foreignEnd: 23   // X
+};
+function parseTxt(raw) {
+  const lines = raw.split(/\r?\n/).map(l => l.trim()).filter(l => l);
+  if (!lines.length) return [];
+  return lines.map(l => l.split("|"));
+}
+function pct(val, totalAll) {
+  val = Number(val);
+  totalAll = Number(totalAll);
+  if (!totalAll || isNaN(val) || isNaN(totalAll)) return "0,00%";
+  const p = val / totalAll * 100;
+  return p.toFixed(2).replace(".", ",") + "%";
+}
+// membangun struktur dashboardRows dari rawRows (perhitungan total & %)
+function buildDashboardRows() {
+  const header = rawRows[0];
+  dashboardRows = [];
+  for (let i = 1; i < rawRows.length; i++) {
+    const r = rawRows[i];
+    if (!r.length) continue;
+    let sumLocal = 0;
+    for (let c = IDX.localStart; c <= IDX.localEnd; c++) {
+      sumLocal += Number(r[c] || 0);
+    }
+    let sumForeign = 0;
+    for (let c = IDX.foreignStart; c <= IDX.foreignEnd; c++) {
+      sumForeign += Number(r[c] || 0);
+    }
+    const sumAll = sumLocal + sumForeign;
+    const localPct = [];
+    const foreignPct = [];
+    let sumPctAll = 0;
+    for (let c = IDX.localStart; c <= IDX.localEnd; c++) {
+      const ps = pct(r[c], sumAll);
+      localPct.push(ps);
+      sumPctAll += Number(ps.replace(",", ".").replace("%", "")) || 0;
+    }
+    for (let c = IDX.foreignStart; c <= IDX.foreignEnd; c++) {
+      const ps = pct(r[c], sumAll);
+      foreignPct.push(ps);
+      sumPctAll += Number(ps.replace(",", ".").replace("%", "")) || 0;
+    }
+    const totalPct = sumPctAll.toFixed(2).replace(".", ",") + "%";
+    dashboardRows.push({
+      raw: r,
+      sumLocal,
+      sumForeign,
+      sumAll,
+      localPct,
+      foreignPct,
+      totalPct
+    });
+  }
+  populateTypeFilter();
+}
+// filtering + search + sorting + pagination
+function getFilteredSortedRows() {
+  const searchText = document.getElementById("searchInput").value.toLowerCase();
+  const typeFilter = document.getElementById("typeFilter").value;
+  const dateFilter = document.getElementById("dateFilter").value.toLowerCase();
+  const codeFilter = document.getElementById("codeFilter").value.toLowerCase();
+  let rows = dashboardRows.filter(obj => {
+    const r = obj.raw;
+    // Filter berdasarkan type
+    if (typeFilter && r[2] !== typeFilter) return false;
+    // Filter berdasarkan date
+    if (dateFilter && !r[0].toLowerCase().includes(dateFilter)) return false;
+    // Filter berdasarkan code
+    if (codeFilter && !r[1].toLowerCase().includes(codeFilter)) return false;
+    // Filter berdasarkan search text
+    if (searchText) {
+      const joined = r.join("|").toLowerCase();
+      if (!joined.includes(searchText)) return false;
+    }
+    return true;
+  });
+  if (sortCol !== null) {
+    rows.sort((a, b) => {
+      // mapping kolom ke nilai
+      const getVal = (obj, col) => {
+        const r = obj.raw;
+        const baseCols = 25; // A–Y
+        if (col < baseCols) return r[col] || "";
+        const idxExtra = col - baseCols;
+        if (idxExtra === 0) return obj.sumLocal;
+        if (idxExtra === 1) return obj.sumForeign;
+        if (idxExtra === 2) return obj.sumAll;
+        if (idxExtra >= 3 && idxExtra <= 11) {
+          return obj.localPct[idxExtra - 3];
+        }
+        if (idxExtra >= 12 && idxExtra <= 20) {
+          return obj.foreignPct[idxExtra - 12];
+        }
+        if (idxExtra === 21) return obj.totalPct;
+        return "";
+      };
+      let va = getVal(a, sortCol);
+      let vb = getVal(b, sortCol);
+      const na = Number(String(va).replace(",", ".").replace("%", ""));
+      const nb = Number(String(vb).replace(",", ".").replace("%", ""));
+      if (!isNaN(na) && !isNaN(nb)) {
+        return (na - nb) * sortDir;
+      }
+      va = String(va);
+      vb = String(vb);
+      return va.localeCompare(vb) * sortDir;
+    });
+  }
+  return rows;
+}
+function renderTable() {
+  const tbl = document.getElementById("tbl");
+  tbl.innerHTML = "";
+  if (!rawRows.length) return;
+  const headerBase = rawRows[0].slice(0, 25);
+  const headerExtra = [
+    "Total Local (recalc)","Total Foreign (recalc)","Total All (Local+Foreign)",
+    "Local IS %","Local CP %","Local PF %","Local IB %","Local ID %",
+    "Local MF %","Local SC %","Local FD %","Local OT %",
+    "Foreign IS %","Foreign CP %","Foreign PF %","Foreign IB %","Foreign ID %",
+    "Foreign MF %","Foreign SC %","Foreign FD %","Foreign OT %",
+    "Total % (Local+Foreign)"
+  ];
+  const thead = document.createElement("thead");
+  const trh = document.createElement("tr");
+  const allHeaders = headerBase.concat(headerExtra);
+  allHeaders.forEach((h, colIdx) => {
+    const th = document.createElement("th");
+    th.textContent = h;
+    if (sortCol === colIdx) {
+      th.classList.add(sortDir === 1 ? "sort-asc" : "sort-desc");
+    }
+    th.addEventListener("click", () => {
+      if (sortCol === colIdx) sortDir = -sortDir;
+      else { sortCol = colIdx; sortDir = 1; }
+      renderTable();
+    });
+    trh.appendChild(th);
+  });
+  thead.appendChild(trh);
+  tbl.appendChild(thead);
+  const tbody = document.createElement("tbody");
+  const rows = getFilteredSortedRows();
+  const pageSize = Number(document.getElementById("pageSize").value) || 25;
+  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+  if (currentPage > totalPages) currentPage = totalPages;
+  const start = (currentPage - 1) * pageSize;
+  const end = start + pageSize;
+  rows.slice(start, end).forEach(obj => {
+    const r = obj.raw;
+    const tr = document.createElement("tr");
+    // A–Y
+    for (let c = 0; c <= 24; c++) {
+      const td = document.createElement("td");
+      td.textContent = r[c] || "";
+      tr.appendChild(td);
+    }
+    // total dan persen
+    const add = val => {
+      const td = document.createElement("td");
+      td.textContent = val;
+      tr.appendChild(td);
+    };
+    add(obj.sumLocal.toString());
+    add(obj.sumForeign.toString());
+    add(obj.sumAll.toString());
+    obj.localPct.forEach(p => add(p));
+    obj.foreignPct.forEach(p => add(p));
+    add(obj.totalPct);
+    tbody.appendChild(tr);
+  });
+  tbl.appendChild(tbody);
+  // info & pagination
+  document.getElementById("info").textContent =
+    "Baris: " + rows.length + " | Halaman " + currentPage + " / " + Math.max(1, Math.ceil(rows.length / pageSize));
+  document.getElementById("pageInfo").textContent =
+    currentPage + " / " + Math.max(1, Math.ceil(rows.length / pageSize));
+}
+// isi dropdown Type dari data
+function populateTypeFilter() {
+  const sel = document.getElementById("typeFilter");
+  const types = new Set();
+  for (let i = 1; i < rawRows.length; i++) {
+    const t = rawRows[i][2];
+    if (t) types.add(t);
+  }
+  sel.innerHTML = '<option value="">(Semua)</option>';
+  Array.from(types).sort().forEach(t => {
+    const opt = document.createElement("option");
+    opt.value = t;
+    opt.textContent = t;
+    sel.appendChild(opt);
+  });
+}
+// event handler upload
+document.getElementById("fileInput").addEventListener("change", e => {
+  const file = e.target.files[0];
+  const info = document.getElementById("info");
+  const tbl = document.getElementById("tbl");
+  tbl.innerHTML = "";
+  if (!file) { info.textContent = "Tidak ada file."; return; }
+  const reader = new FileReader();
+  reader.onload = ev => {
+    rawRows = parseTxt(ev.target.result);
+    if (!rawRows.length) { info.textContent = "File kosong / format salah."; return; }
+    currentPage = 1;
+    sortCol = null;
+    buildDashboardRows();
+    renderTable();
+  };
+  reader.readAsText(file);
+});
+// search & filter & pagination events
+document.getElementById("searchInput").addEventListener("input", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("typeFilter").addEventListener("change", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("dateFilter").addEventListener("input", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("codeFilter").addEventListener("input", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("pageSize").addEventListener("change", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("prevPage").addEventListener("click", () => {
+  if (currentPage > 1) { currentPage--; renderTable(); }
+});
+document.getElementById("nextPage").addEventListener("click", () => {
+  const rows = getFilteredSortedRows();
+  const pageSize = Number(document.getElementById("pageSize").value) || 25;
+  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+  if (currentPage < totalPages) { currentPage++; renderTable(); }
+});
+document.getElementById("firstPage").addEventListener("click", () => {
+  currentPage = 1;
+  renderTable();
+});
+document.getElementById("lastPage").addEventListener("click", () => {
+  const rows = getFilteredSortedRows();
+  const pageSize = Number(document.getElementById("pageSize").value) || 25;
+  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+  currentPage = totalPages;
+  renderTable();
+});
+// tambah data manual
+document.getElementById("btnAddRow").addEventListener("click", () => {
+  if (!rawRows.length) {
+    alert("Upload TXT dulu sebelum tambah data.");
+    return;
+  }
+  const getVal = id => document.getElementById(id).value.trim();
+  const row = [];
+  row[0] = getVal("addDate") || "";
+  row[1] = getVal("addCode") || "";
+  row[2] = getVal("addType") || "";
+  row[3] = getVal("addSecNum") || "0";
+  row[4] = getVal("addPrice") || "0";
+  const localIds = ["addLocalIS","addLocalCP","addLocalPF","addLocalIB","addLocalID","addLocalMF","addLocalSC","addLocalFD","addLocalOT"];
+  const foreignIds = ["addForeignIS","addForeignCP","addForeignPF","addForeignIB","addForeignID","addForeignMF","addForeignSC","addForeignFD","addForeignOT"];
+  localIds.forEach((id, i) => { row[5 + i] = getVal(id) || "0"; });
+  // kolom total lama (O) kita isi 0, nanti dihitung ulang
+  row[14] = "0";
+  foreignIds.forEach((id, i) => { row[15 + i] = getVal(id) || "0"; });
+  row[24] = "0";
+  rawRows.push(row);
+  buildDashboardRows();
+  renderTable();
+  // Clear form after adding
+  document.getElementById("addDate").value = "";
+  document.getElementById("addCode").value = "";
+  document.getElementById("addType").value = "";
+  document.getElementById("addSecNum").value = "";
+  document.getElementById("addPrice").value = "";
+  localIds.forEach(id => document.getElementById(id).value = "");
+  foreignIds.forEach(id => document.getElementById(id).value = "");
+});
+</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/balancepos-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+saya ingin membuat aplikasi seperti excel otomatis yang bisa saya tambah kolomnya dan isinya dan bisa saya jadikan template untuk data setelahnya
+tambahkan penambahan data , pembanding data dan filtering data untuk ascending atau decending profesional sehingga bisa melihat perbedaan antar data yang sudah di input
+dari html yang ada tolong tambahkan fitur penyimpanan data yang sudah di upload, edit dan delete sehingga bisa di cek basis data