{"id":3024,"date":"2026-09-08T20:46:06","date_gmt":"2026-09-08T13:46:06","guid":{"rendered":"https:\/\/pandaigadai.com\/blog\/?page_id=3024"},"modified":"2026-09-08T20:46:07","modified_gmt":"2026-09-08T13:46:07","slug":"socmed-tracker","status":"publish","type":"page","link":"https:\/\/pandaigadai.com\/blog\/socmed-tracker\/","title":{"rendered":"Socmed Tracker"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n<title>Score Card Dashboard - Social Media Analytics - Pandai Gadai<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap\">\r\n<style>\r\n#pg-sc *, #pg-sc *::before, #pg-sc *::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml,body{margin:0;padding:0;background:#f0f2f8}\r\n#pg-sc{\r\n  --radius:0.625rem;--background:#ffffff;--foreground:#021431;--card:#ffffff;\r\n  --primary:#02439F;--primary-deep:#011455;--primary-bright:#0255CA;--primary-foreground:#f8fafc;\r\n  --accent:#ffcd05;--accent-foreground:#021431;--secondary:#f3f5fb;--muted:#f0f2f8;\r\n  --muted-foreground:#6b7280;--destructive:#dc2626;--success:#047857;--border:#e2e6f0;\r\n  --footer-bg:#02439f;--shadow-card:0 2px 8px -2px rgba(2,20,49,0.08);\r\n}\r\n#pg-sc{font-family:\"Rubik\",system-ui,-apple-system,\"Segoe UI\",sans-serif;background:var(--muted);color:var(--foreground);line-height:1.6;-webkit-font-smoothing:antialiased}\r\n#pg-sc h1,#pg-sc h2,#pg-sc h3,#pg-sc h4{letter-spacing:-0.02em}\r\n#pg-sc p{margin:0}#pg-sc a{text-decoration:none;color:inherit}#pg-sc img{display:block;max-width:100%}\r\n#pg-sc ul{list-style:none}#pg-sc .section-container{max-width:78rem;margin:0 auto;padding:0 1rem}\r\n#pg-sc .site-header{position:sticky;top:0;z-index:100;background:var(--background);border-bottom:1px solid var(--border)}\r\n#pg-sc .header-inner{max-width:78rem;margin:0 auto;display:flex;height:5rem;align-items:center;justify-content:space-between;padding:0 1rem}\r\n#pg-sc .btn-header{display:inline-flex;align-items:center;gap:.375rem;border-radius:calc(var(--radius) - 2px);background:var(--accent);padding:.5rem .875rem;font-size:.875rem;font-weight:700;color:var(--accent-foreground)}\r\n#pg-sc .dash-hero{background:linear-gradient(135deg,#011455,#0255CA);color:var(--primary-foreground);position:relative;overflow:hidden}\r\n#pg-sc .dash-hero-overlay{position:absolute;inset:0;opacity:.3;background:radial-gradient(ellipse at top right,rgba(255,205,5,.35),transparent 60%);pointer-events:none}\r\n#pg-sc .dash-hero-inner{position:relative;max-width:78rem;margin:0 auto;padding:2rem 1rem 2.25rem}\r\n#pg-sc .dash-hero .eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.15);padding:.3rem .7rem;border-radius:999px}\r\n#pg-sc .dash-hero h1{font-size:1.6rem;font-weight:800;margin:.7rem 0 .25rem;color:#fff!important}\r\n#pg-sc .dash-hero p{font-size:.9rem;color:rgba(255,255,255,.85)!important}\r\n@media(min-width:768px){#pg-sc .dash-hero h1{font-size:2rem}}\r\n#pg-sc .dash-body{max-width:78rem;margin:0 auto;padding:1.25rem 1rem 2.5rem}\r\n#pg-sc .controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)+4px);padding:.75rem .9rem;box-shadow:var(--shadow-card);margin-bottom:1rem}\r\n#pg-sc .ctl-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}\r\n#pg-sc select,#pg-sc input[type=text]{font-family:inherit;padding:.42rem .55rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);font-size:.8125rem;color:var(--foreground);background:var(--card)}\r\n#pg-sc .seg{display:inline-flex;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);overflow:hidden}\r\n#pg-sc .seg button{padding:.4rem .85rem;border:none;background:var(--card);color:var(--foreground);font-family:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;border-right:1px solid var(--border)}\r\n#pg-sc .seg button:last-child{border-right:none}\r\n#pg-sc .seg button.active{background:var(--primary);color:#fff}\r\n#pg-sc .btn-accent{display:inline-flex;align-items:center;gap:.4rem;border-radius:calc(var(--radius) - 2px);background:var(--accent);padding:.5rem 1.1rem;font-family:inherit;font-size:.8125rem;font-weight:700;color:var(--accent-foreground);border:none;cursor:pointer}\r\n#pg-sc .tabs{display:flex;gap:.2rem;border-bottom:2px solid var(--border);margin:.25rem 0 1.15rem;overflow-x:auto}\r\n#pg-sc .tabs button{border:none;background:none;font-family:inherit;font-size:.9rem;font-weight:700;color:var(--muted-foreground);padding:.6rem .95rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}\r\n#pg-sc .tabs button:hover{color:var(--foreground)}\r\n#pg-sc .tabs button.active{color:var(--primary);border-bottom-color:var(--primary)}\r\n#pg-sc .status{font-size:.82rem;padding:.6rem .8rem;border-radius:calc(var(--radius) - 2px);margin-bottom:1rem;line-height:1.5}\r\n#pg-sc .status.info{background:var(--secondary);color:var(--primary-deep);border:1px solid var(--border)}\r\n#pg-sc .status.ok{background:#ecfdf5;color:var(--success);border:1px solid #a7f3d0}\r\n#pg-sc .status.err{background:#fef2f2;color:var(--destructive);border:1px solid #fca5a5}\r\n#pg-sc .scorecards{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-bottom:1.25rem}\r\n#pg-sc .sc{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)+4px);padding:.85rem .95rem;box-shadow:var(--shadow-card);border-top:3px solid var(--primary)}\r\n#pg-sc .sc .lbl{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground)}\r\n#pg-sc .sc .val{font-size:1.3rem;font-weight:800;color:var(--primary);line-height:1.15;margin-top:.3rem}\r\n#pg-sc .sc .delta{font-size:.72rem;font-weight:700;margin-top:.25rem;display:inline-block;padding:.05rem .4rem;border-radius:999px}\r\n#pg-sc .delta.up{background:#ecfdf5;color:var(--success)}\r\n#pg-sc .delta.down{background:#fef2f2;color:var(--destructive)}\r\n#pg-sc .delta.flat{background:var(--secondary);color:var(--muted-foreground)}\r\n@media(max-width:1100px){#pg-sc .scorecards{grid-template-columns:repeat(3,1fr)}}\r\n@media(max-width:600px){#pg-sc .scorecards{grid-template-columns:repeat(2,1fr)}#pg-sc .sc .val{font-size:1.1rem}}\r\n#pg-sc .panel{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)+4px);padding:1rem 1.15rem;box-shadow:var(--shadow-card);margin-bottom:1.25rem}\r\n#pg-sc .panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}\r\n#pg-sc .panel-title{font-size:1rem;font-weight:800}\r\n#pg-sc .panel-sub{font-size:.72rem;color:var(--muted-foreground);font-weight:600}\r\n#pg-sc .chart-wrap{width:100%;overflow-x:auto;position:relative}\r\n#pg-sc .chart-tooltip{position:fixed;pointer-events:none;background:var(--primary-deep);color:#fff;border-radius:8px;padding:.55rem .7rem;font-size:.74rem;line-height:1.5;box-shadow:0 6px 20px -4px rgba(2,20,49,.35);z-index:200;display:none;max-width:220px}\r\n#pg-sc .chart-tooltip .tt-date{font-weight:800;font-size:.72rem;margin-bottom:.3rem;color:#ffcd05}\r\n#pg-sc .chart-tooltip .tt-row{display:flex;align-items:center;gap:.4rem;white-space:nowrap}\r\n#pg-sc .chart-tooltip .tt-dot{width:.5rem;height:.5rem;border-radius:999px;flex-shrink:0}\r\n#pg-sc .chart-tooltip .tt-val{margin-left:auto;font-weight:700}\r\n#pg-sc .chart-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.6rem}\r\n#pg-sc .legend-item{display:flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;color:var(--muted-foreground)}\r\n#pg-sc .legend-dot{width:.6rem;height:.6rem;border-radius:999px;flex-shrink:0}\r\n#pg-sc .tbl-wrap{overflow:auto;max-height:520px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--border)}\r\n#pg-sc table{width:100%;border-collapse:collapse;font-size:.82rem}\r\n#pg-sc thead th{position:sticky;top:0;background:var(--secondary);color:var(--primary-deep);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;padding:.6rem .65rem;text-align:right;white-space:nowrap;border-bottom:2px solid var(--border)}\r\n#pg-sc thead th.l,#pg-sc tbody td.l{text-align:left}\r\n#pg-sc tbody td{padding:.5rem .65rem;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums}\r\n#pg-sc tbody tr:hover{background:var(--secondary)}\r\n#pg-sc td.branch{font-weight:700}\r\n#pg-sc .badge{display:inline-block;font-size:.62rem;font-weight:800;padding:.1rem .4rem;border-radius:6px;margin-right:.35rem}\r\n#pg-sc .badge.IG{background:#fce7f3;color:#9d174d}\r\n#pg-sc .badge.TT{background:#e0e7ff;color:#3730a3}\r\n#pg-sc .badge.YT{background:#fee2e2;color:#991b1b}\r\n#pg-sc .cat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.25rem}\r\n#pg-sc .cat-card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)+4px);padding:1rem 1.1rem;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .1s}\r\n#pg-sc .cat-card:hover{transform:translateY(-2px)}\r\n#pg-sc .cat-card h3{font-size:1rem;font-weight:800;margin-bottom:.5rem}\r\n#pg-sc .cat-card .mini{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted-foreground);padding:.15rem 0}\r\n#pg-sc .cat-card .mini b{color:var(--foreground)}\r\n@media(max-width:800px){#pg-sc .cat-cards{grid-template-columns:1fr}}\r\n#pg-sc .empty-note{padding:2rem 1rem;text-align:center;color:var(--muted-foreground);font-size:.85rem}\r\n#pg-sc .comingsoon{padding:4rem 1rem;text-align:center}\r\n#pg-sc .comingsoon .big{font-size:2rem;font-weight:800;color:var(--primary);letter-spacing:.05em}\r\n#pg-sc .comingsoon p{margin-top:.6rem;color:var(--muted-foreground)}\r\n#pg-sc details{margin-bottom:1rem}\r\n#pg-sc summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted-foreground);padding:.3rem 0}\r\n#pg-sc .hint{font-size:.72rem;color:var(--muted-foreground);margin-top:.5rem;line-height:1.55}\r\n#pg-sc .fld{display:flex;flex-direction:column;gap:.25rem}\r\n#pg-sc .fld label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground)}\r\n#pg-sc .site-footer{background:var(--footer-bg);color:#fff}\r\n#pg-sc .footer-bottom-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:78rem;margin:0 auto;padding:1.25rem 1rem;font-size:.75rem;color:rgba(255,255,255,.8)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"pg-sc\">\r\n\r\n<div class=\"site-header\">\r\n  <div class=\"header-inner\">\r\n    <a href=\"https:\/\/pandaigadai.com\" style=\"display:flex;align-items:center\">\r\n      <img decoding=\"async\" src=\"https:\/\/pandaigadai.com\/blog\/wp-content\/uploads\/2026\/01\/cropped-panda-1.webp\" alt=\"Pandai Gadai\" style=\"height:3rem;width:auto\">\r\n    <\/a>\r\n    <a href=\"https:\/\/pandaigadai.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-header\">pandaigadai.com<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"dash-hero\">\r\n  <div class=\"dash-hero-overlay\"><\/div>\r\n  <div class=\"dash-hero-inner\">\r\n    <span class=\"eyebrow\">\ud83d\udcca Score Card Dashboard<\/span>\r\n    <h1>Social Media Analytics - Pandai Gadai<\/h1>\r\n    <p>Overview + breakdown per kategori PIC: Internal, Freelancer, Agency<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"dash-body\">\r\n  <div id=\"status\" class=\"status info\">Memuat data...<\/div>\r\n\r\n  <details style=\"display:none\">\r\n    <summary>\u2699\ufe0f Pengaturan sumber data<\/summary>\r\n    <div class=\"fld\" style=\"max-width:520px\">\r\n      <label>Apps Script Web App URL<\/label>\r\n      <input type=\"text\" id=\"cfg-url\" value=\"https:\/\/script.google.com\/macros\/s\/AKfycbzY41cBXgMfm1XnhXwL8lzuwGATOiZfu0iCS-EXfq_39pd7iYmnXjB_hMbRQjwicoFA\/exec\" style=\"width:100%\">\r\n    <\/div>\r\n    <div class=\"hint\">Udah di-hardcode, gak perlu diisi ulang. Ganti value di sini kalau URL Apps Script-nya berubah (misal re-deploy dengan URL baru).<\/div>\r\n  <\/details>\r\n\r\n  <div class=\"controls\" id=\"topcontrols\" style=\"display:none\">\r\n    <button class=\"btn-accent\" onclick=\"SC.load()\">\u27f3 Refresh<\/button>\r\n    <span class=\"ctl-label\">Periode:<\/span>\r\n    <div class=\"seg\" id=\"seg-period\">\r\n      <button data-p=\"weekly\" onclick=\"SC.setPeriod('weekly')\">Mingguan<\/button>\r\n      <button data-p=\"monthly\" onclick=\"SC.setPeriod('monthly')\">Bulanan<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"tabs\" id=\"tabs\" style=\"display:none\">\r\n    <button data-tab=\"overview\" class=\"active\" onclick=\"SC.setTab('overview')\">\ud83c\udfe0 Overview<\/button>\r\n    <button data-tab=\"Internal\" onclick=\"SC.setTab('Internal')\">\ud83c\udfe2 Internal<\/button>\r\n    <button data-tab=\"Freelancer\" onclick=\"SC.setTab('Freelancer')\">\ud83e\uddd1\u200d\ud83d\udcbb Freelancer<\/button>\r\n    <button data-tab=\"Agency\" onclick=\"SC.setTab('Agency')\">\ud83c\udfec Agency<\/button>\r\n    <button data-tab=\"calendar\" onclick=\"SC.setTab('calendar')\">\ud83d\uddd3\ufe0f Content Calendar<\/button>\r\n  <\/div>\r\n\r\n  <!-- OVERVIEW -->\r\n  <section class=\"tabpane\" id=\"pane-overview\" style=\"display:none\">\r\n    <div class=\"controls\">\r\n      <span class=\"ctl-label\">Periode:<\/span>\r\n      <select id=\"ov-period-filter\" onchange=\"SC.setOvPeriodPick(this.value)\"><\/select>\r\n    <\/div>\r\n    <div class=\"scorecards\" id=\"ov-scorecards\"><\/div>\r\n    <div class=\"cat-cards\" id=\"ov-catcards\"><\/div>\r\n    <div class=\"panel\">\r\n      <div class=\"panel-head\">\r\n        <div class=\"panel-title\">Trend - Total Organic Views (semua kategori)<\/div>\r\n        <div class=\"panel-sub\" id=\"ov-chart-sub\"><\/div>\r\n      <\/div>\r\n      <div class=\"chart-wrap\" id=\"ov-chart\"><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CATEGORY TABS (Internal \/ Freelancer \/ Agency) share this template via JS render -->\r\n  <section class=\"tabpane\" id=\"pane-category\" style=\"display:none\">\r\n    <div class=\"controls\">\r\n      <span class=\"ctl-label\">Akun:<\/span>\r\n      <select id=\"acc-filter\" onchange=\"SC.setAccount(this.value)\"><\/select>\r\n      <span class=\"ctl-label\">Metric:<\/span>\r\n      <select id=\"metric-filter\" onchange=\"SC.setMetric(this.value)\"><\/select>\r\n      <span class=\"ctl-label\">Periode:<\/span>\r\n      <select id=\"period-filter\" onchange=\"SC.setPeriodPick(this.value)\"><\/select>\r\n      <span style=\"font-size:.72rem;color:var(--muted-foreground);margin-left:auto\">IG = Instagram &middot; TT = TikTok &middot; YT = YouTube<\/span>\r\n    <\/div>\r\n    <div class=\"scorecards\" id=\"cat-scorecards\"><\/div>\r\n    <div class=\"panel\">\r\n      <div class=\"panel-head\">\r\n        <div class=\"panel-title\" id=\"cat-chart-title\">Trend<\/div>\r\n        <div class=\"panel-sub\" id=\"cat-chart-sub\"><\/div>\r\n      <\/div>\r\n      <div class=\"chart-wrap\" id=\"cat-chart\"><\/div>\r\n      <div class=\"chart-legend\" id=\"cat-legend\"><\/div>\r\n    <\/div>\r\n    <div class=\"panel\">\r\n      <div class=\"panel-head\"><div class=\"panel-title\">Ranking akun (periode terpilih)<\/div><\/div>\r\n      <div class=\"tbl-wrap\"><table id=\"cat-tbl\"><thead><tr id=\"cat-thead\"><\/tr><\/thead><tbody id=\"cat-tbody\"><\/tbody><\/table><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CONTENT CALENDAR PLACEHOLDER -->\r\n  <section class=\"tabpane\" id=\"pane-calendar\" style=\"display:none\">\r\n    <div class=\"panel\">\r\n      <div class=\"comingsoon\">\r\n        <div class=\"big\">AKAN DATANG<\/div>\r\n        <p>Content calendar section masih di-clearing, nyusul di update berikutnya.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<div id=\"chart-tooltip-global\" class=\"chart-tooltip\"><\/div>\r\n\r\n<div class=\"site-footer\">\r\n  <div class=\"footer-bottom-inner\">\r\n    <span>&copy; Copyright PT Solusi Gadai Pintar 2026 All Rights Reserved<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n'use strict';\r\nvar $=function(id){return document.getElementById(id);};\r\nvar LS='sc_dash_pg_v1';\r\n\r\nvar METRIC_LABELS={\r\n followers:'Total Followers', views:'Organic Views\/Reach', engagements:'Total Engagements', engagement_rate:'Engagement Rate',\r\n profile_visits:'Profile Visits Increase'\r\n};\r\nvar PLATFORM_NAMES={IG:'Instagram', TT:'TikTok', YT:'YouTube'};\r\nvar PCT_METRICS={engagement_rate:1};\r\nvar AGG_METRICS=['followers','views','engagements','engagement_rate','profile_visits'];\r\nvar PALETTE=['#02439F','#ffcd05','#047857','#dc2626','#7c3aed','#0891b2','#db2777','#65a30d','#ea580c','#4338ca'];\r\n\r\nvar state={data:null, tab:'overview', period:'monthly', category:'Internal', account:'all', metric:'views', periodPick:null, ovPeriodPick:null};\r\n\r\nfunction savePrefs(){\/* no-op: URL dihardcode di HTML, gak perlu localStorage lagi (sempet bikin bingung karena override tersembunyi) *\/}\r\nfunction loadPrefs(){\/* no-op, lihat savePrefs() *\/}\r\n\r\nfunction setStatus(m,c){var s=$('status');s.style.display='block';s.className='status '+(c||'info');s.innerHTML=m;}\r\nfunction nf(n){return (n===null||n===undefined||!isFinite(n))?'-':Math.round(n).toLocaleString('id-ID');}\r\nfunction pf(n){return (n===null||n===undefined||!isFinite(n))?'-':(n*100).toFixed(2)+'%';}\r\nfunction fmtVal(metric,n){return PCT_METRICS[metric] ? pf(n) : nf(n);}\r\nfunction esc(s){return String(s==null?'':s).replace(\/[&<>\"']\/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c];});}\r\n\r\nfunction load(){\r\n var url = $('cfg-url').value.trim();\r\n if(!url){setStatus('Isi Apps Script Web App URL dulu di pengaturan sumber data.','err');return;}\r\n savePrefs();\r\n setStatus('Memuat data...','info');\r\n fetch(url).then(function(r){return r.json();}).then(function(json){\r\n  state.data = json;\r\n  $('topcontrols').style.display='flex';\r\n  $('tabs').style.display='flex';\r\n  setStatus('\u2713 Data termuat, terakhir di-generate: <b>'+new Date(json.generatedAt).toLocaleString('id-ID')+'<\/b>.','ok');\r\n  render();\r\n }).catch(function(err){\r\n  setStatus('Gagal memuat data. Cek lagi Apps Script URL-nya sudah di-deploy dan diizinkan \"Anyone\". ('+err+')','err');\r\n });\r\n}\r\n\r\nfunction accountsFor(category){\r\n if(!state.data) return [];\r\n var src = state.period==='weekly' ? state.data.weekly.accounts : state.data.monthly.accounts;\r\n return src.filter(function(a){return a.category===category;});\r\n}\r\n\r\nfunction metricsAvailable(accounts){\r\n var set={};\r\n accounts.forEach(function(a){ Object.keys(a.metrics).forEach(function(m){ if(a.metrics[m].length) set[m]=1; }); });\r\n return Object.keys(METRIC_LABELS).filter(function(m){return set[m];});\r\n}\r\n\r\n\/\/ growth di titik tertentu (targetSortKey), atau titik terakhir kalau\r\n\/\/ targetSortKey null\/undefined = \"Terbaru\"\r\nfunction growthAt(series, targetSortKey){\r\n if(!series || !series.length) return {value:null, prev:null, growth:null, label:null};\r\n var idx = (targetSortKey===null || targetSortKey===undefined) ? series.length-1\r\n   : series.findIndex(function(p){return p.sortKey===targetSortKey;});\r\n if(idx===-1) idx = series.length-1;\r\n var cur = series[idx];\r\n var prev = idx>0 ? series[idx-1] : null;\r\n var growth = (prev && prev.value!==null && cur.value!==null && prev.value!==0) ? (cur.value-prev.value)\/prev.value : null;\r\n return {value:cur.value, prev: prev?prev.value:null, growth:growth, label:cur.label};\r\n}\r\nfunction latestGrowth(series){ return growthAt(series, null); }\r\n\r\n\/\/ kumpulan label+sortKey unik dari semua akun+metric yang lagi ditampilin,\r\n\/\/ buat ngisi dropdown period picker\r\nfunction periodOptionsFor(accounts){\r\n var map={};\r\n accounts.forEach(function(a){\r\n  Object.keys(a.metrics).forEach(function(m){\r\n   (a.metrics[m]||[]).forEach(function(p){ map[p.sortKey]={label:p.label, sortKey:p.sortKey}; });\r\n  });\r\n });\r\n return Object.keys(map).map(function(k){return map[k];}).sort(function(a,b){return a.sortKey-b.sortKey;});\r\n}\r\n\r\nfunction sumSeries(accounts, metric){\r\n var map={};\r\n accounts.forEach(function(a){\r\n  var s = a.metrics[metric]||[];\r\n  s.forEach(function(p){\r\n   if(p.value===null) return;\r\n   if(!map[p.label]) map[p.label]={label:p.label, value:0, sortKey:p.sortKey};\r\n   map[p.label].value += p.value;\r\n  });\r\n });\r\n var out = Object.keys(map).map(function(k){return map[k];});\r\n out.sort(function(a,b){return a.sortKey-b.sortKey;});\r\n return out;\r\n}\r\n\r\nfunction deltaBadge(growth){\r\n if(growth===null) return '<span class=\"delta flat\">-<\/span>';\r\n var pct=(growth*100).toFixed(1)+'%';\r\n if(growth>0.001) return '<span class=\"delta up\">\u25b2 '+pct+'<\/span>';\r\n if(growth<-0.001) return '<span class=\"delta down\">\u25bc '+pct+'<\/span>';\r\n return '<span class=\"delta flat\">'+pct+'<\/span>';\r\n}\r\n\r\n\/* ---------- simple inline SVG line chart, no external lib ---------- *\/\r\nfunction drawChart(container, seriesList, metric, opts){\r\n opts=opts||{};\r\n var W=Math.max(600, (opts.width||900)), H=opts.height||280, PAD_L=56,PAD_R=16,PAD_T=16,PAD_B=32;\r\n var allLabels=[];\r\n seriesList.forEach(function(s){ s.points.forEach(function(p){ if(allLabels.indexOf(p.label)===-1) allLabels.push(p.label); }); });\r\n \/\/ preserve chronological order using sortKey from first series that has it\r\n var order={};\r\n seriesList.forEach(function(s){ s.points.forEach(function(p){ if(order[p.label]===undefined) order[p.label]=p.sortKey; }); });\r\n allLabels.sort(function(a,b){return (order[a]||0)-(order[b]||0);});\r\n\r\n if(!allLabels.length){ container.innerHTML='<div class=\"empty-note\">Belum ada data buat ditampilin.<\/div>'; return; }\r\n\r\n var allVals=[];\r\n seriesList.forEach(function(s){ s.points.forEach(function(p){ if(p.value!==null) allVals.push(p.value); }); });\r\n var maxV = allVals.length ? Math.max.apply(null, allVals) : 1;\r\n var minV = allVals.length ? Math.min(0, Math.min.apply(null, allVals)) : 0;\r\n if(maxV===minV) maxV = minV+1;\r\n\r\n var innerW = W-PAD_L-PAD_R, innerH = H-PAD_T-PAD_B;\r\n function xFor(i){ return PAD_L + (allLabels.length<=1 ? innerW\/2 : (i\/(allLabels.length-1))*innerW); }\r\n function yFor(v){ return PAD_T + innerH - ((v-minV)\/(maxV-minV))*innerH; }\r\n\r\n var svg = '<svg viewBox=\"0 0 '+W+' '+H+'\" width=\"100%\" style=\"min-width:'+W+'px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">';\r\n \/\/ gridlines\r\n for(var g=0; g<=4; g++){\r\n  var gv = minV + (maxV-minV)*g\/4;\r\n  var gy = yFor(gv);\r\n  svg += '<line x1=\"'+PAD_L+'\" y1=\"'+gy+'\" x2=\"'+(W-PAD_R)+'\" y2=\"'+gy+'\" stroke=\"#e2e6f0\" stroke-width=\"1\"\/>';\r\n  svg += '<text x=\"'+(PAD_L-8)+'\" y=\"'+(gy+4)+'\" font-size=\"10\" fill=\"#6b7280\" text-anchor=\"end\" font-family=\"Rubik\">'+shortNum(gv)+'<\/text>';\r\n }\r\n \/\/ highlight marker buat periode yang dipilih di period picker\r\n if(opts.highlightSortKey!==null && opts.highlightSortKey!==undefined){\r\n  var hIdx = allLabels.findIndex(function(lbl){return order[lbl]===opts.highlightSortKey;});\r\n  if(hIdx!==-1){\r\n   var hx = xFor(hIdx);\r\n   svg += '<line x1=\"'+hx+'\" y1=\"'+PAD_T+'\" x2=\"'+hx+'\" y2=\"'+(H-PAD_B)+'\" stroke=\"var(--accent,#ffcd05)\" stroke-width=\"2\" stroke-dasharray=\"4,3\"\/>';\r\n  }\r\n }\r\n \/\/ x labels (skip to avoid crowding)\r\n var step = Math.ceil(allLabels.length\/8) || 1;\r\n allLabels.forEach(function(lbl,i){\r\n  if(i%step!==0 && i!==allLabels.length-1) return;\r\n  svg += '<text x=\"'+xFor(i)+'\" y=\"'+(H-8)+'\" font-size=\"9\" fill=\"#6b7280\" text-anchor=\"middle\" font-family=\"Rubik\">'+esc(shortLabel(lbl))+'<\/text>';\r\n });\r\n \/\/ lines\r\n seriesList.forEach(function(s, si){\r\n  var pts = allLabels.map(function(lbl,i){\r\n   var found = s.points.filter(function(p){return p.label===lbl;})[0];\r\n   return (found && found.value!==null) ? {x:xFor(i), y:yFor(found.value), v:found.value, label:lbl} : null;\r\n  });\r\n  var pathD='';\r\n  pts.forEach(function(p){ if(p){ pathD += (pathD?' L ':'M ')+p.x+' '+p.y; } else { pathD += ''; } });\r\n  if(pathD) svg += '<path d=\"'+pathD+'\" fill=\"none\" stroke=\"'+s.color+'\" stroke-width=\"2.25\"\/>';\r\n  pts.forEach(function(p){ if(p){ svg += '<circle cx=\"'+p.x+'\" cy=\"'+p.y+'\" r=\"3\" fill=\"'+s.color+'\"\/>'; } });\r\n });\r\n \/\/ guide line + per-series hover dot, digerakin lewat JS pas mousemove (bukan native <title>,\r\n \/\/ biar bisa muncul di mana pun kursor diarahin di area chart, gak perlu pas banget di titik)\r\n svg += '<line class=\"hover-guide\" x1=\"0\" y1=\"'+PAD_T+'\" x2=\"0\" y2=\"'+(H-PAD_B)+'\" stroke=\"#9ca3af\" stroke-width=\"1\" stroke-dasharray=\"3,3\" opacity=\"0\"\/>';\r\n seriesList.forEach(function(s){\r\n  svg += '<circle class=\"hover-dot\" r=\"4.5\" fill=\"'+s.color+'\" stroke=\"#fff\" stroke-width=\"1.5\" opacity=\"0\"\/>';\r\n });\r\n svg += '<rect class=\"hit-rect\" x=\"'+PAD_L+'\" y=\"'+PAD_T+'\" width=\"'+innerW+'\" height=\"'+innerH+'\" fill=\"transparent\" style=\"cursor:crosshair\"\/>';\r\n svg += '<\/svg>';\r\n container.innerHTML = svg;\r\n wireChartHover(container, allLabels, seriesList, xFor, yFor, W, metric);\r\n}\r\n\r\n\/\/ mousemove di area chart -> snap ke periode terdekat, gerakin guide line +\r\n\/\/ dot per series, munculin floating tooltip (posisi ngikutin kursor)\r\nfunction wireChartHover(container, allLabels, seriesList, xFor, yFor, W, metric){\r\n var svgEl = container.querySelector('svg');\r\n var hitRect = container.querySelector('.hit-rect');\r\n var guide = container.querySelector('.hover-guide');\r\n var dots = container.querySelectorAll('.hover-dot');\r\n var tooltip = $('chart-tooltip-global');\r\n if(!svgEl || !hitRect) return;\r\n\r\n function nearestIndex(svgX){\r\n  var best=0, bestDist=Infinity;\r\n  allLabels.forEach(function(lbl,i){\r\n   var d = Math.abs(xFor(i)-svgX);\r\n   if(d<bestDist){bestDist=d; best=i;}\r\n  });\r\n  return best;\r\n }\r\n\r\n function onMove(evt){\r\n  var rect = svgEl.getBoundingClientRect();\r\n  if(!rect.width) return;\r\n  var scale = W\/rect.width;\r\n  var svgX = (evt.clientX - rect.left) * scale;\r\n  var i = nearestIndex(svgX);\r\n  var lbl = allLabels[i];\r\n  var gx = xFor(i);\r\n  guide.setAttribute('x1', gx); guide.setAttribute('x2', gx); guide.setAttribute('opacity', 1);\r\n\r\n  var rows='';\r\n  seriesList.forEach(function(s, si){\r\n   var found = s.points.filter(function(p){return p.label===lbl;})[0];\r\n   var dot = dots[si];\r\n   if(found && found.value!==null){\r\n    dot.setAttribute('cx', gx); dot.setAttribute('cy', yFor(found.value)); dot.setAttribute('opacity', 1);\r\n    rows += '<div class=\"tt-row\"><span class=\"tt-dot\" style=\"background:'+s.color+'\"><\/span>'+esc(s.name)+'<span class=\"tt-val\">'+(PCT_METRICS[metric]?pf(found.value):nf(found.value))+'<\/span><\/div>';\r\n   } else {\r\n    dot.setAttribute('opacity', 0);\r\n    rows += '<div class=\"tt-row\"><span class=\"tt-dot\" style=\"background:'+s.color+'\"><\/span>'+esc(s.name)+'<span class=\"tt-val\">-<\/span><\/div>';\r\n   }\r\n  });\r\n  tooltip.innerHTML = '<div class=\"tt-date\">'+esc(lbl)+'<\/div>'+rows;\r\n  tooltip.style.display='block';\r\n  var tw = 220, th = tooltip.offsetHeight || (40+seriesList.length*20);\r\n  var left = evt.clientX + 14, top = evt.clientY - th\/2;\r\n  if(left+tw > window.innerWidth) left = evt.clientX - tw - 14;\r\n  if(top < 8) top = 8;\r\n  if(top+th > window.innerHeight-8) top = window.innerHeight-th-8;\r\n  tooltip.style.left = left+'px';\r\n  tooltip.style.top = top+'px';\r\n }\r\n function onLeave(){\r\n  guide.setAttribute('opacity',0);\r\n  dots.forEach(function(d){ d.setAttribute('opacity',0); });\r\n  tooltip.style.display='none';\r\n }\r\n hitRect.addEventListener('mousemove', onMove);\r\n hitRect.addEventListener('mouseleave', onLeave);\r\n}\r\n\r\nfunction shortNum(v){\r\n if(Math.abs(v)>=1000000) return (v\/1000000).toFixed(1)+'jt';\r\n if(Math.abs(v)>=1000) return (v\/1000).toFixed(0)+'rb';\r\n if(v<1 && v>-1 && v!==0) return (v*100).toFixed(0)+'%';\r\n return Math.round(v).toString();\r\n}\r\nfunction shortLabel(lbl){\r\n var m = lbl.match(\/^(\\d{1,2})\\s*([A-Za-z]{3,9})\/);\r\n return m ? (m[1]+' '+m[2].slice(0,3)) : lbl.slice(0,6);\r\n}\r\n\r\n\/* ---------------- render ---------------- *\/\r\nfunction render(){\r\n if(!state.data) return;\r\n syncTabs();\r\n if(state.tab==='overview') renderOverview();\r\n else if(state.tab==='calendar'){ \/* static, nothing to do *\/ }\r\n else renderCategory(state.tab);\r\n}\r\n\r\nfunction syncTabs(){\r\n var tabs=document.querySelectorAll('#tabs button');\r\n for(var i=0;i<tabs.length;i++) tabs[i].classList.toggle('active', tabs[i].getAttribute('data-tab')===state.tab);\r\n $('pane-overview').style.display = state.tab==='overview' ? 'block':'none';\r\n $('pane-calendar').style.display = state.tab==='calendar' ? 'block':'none';\r\n $('pane-category').style.display = (state.tab!=='overview' && state.tab!=='calendar') ? 'block':'none';\r\n var segBtns=document.querySelectorAll('#seg-period button');\r\n for(i=0;i<segBtns.length;i++) segBtns[i].classList.toggle('active', segBtns[i].getAttribute('data-p')===state.period);\r\n}\r\n\r\nfunction renderOverview(){\r\n var cats=['Internal','Freelancer','Agency'];\r\n var sc = $('ov-scorecards'); sc.innerHTML='';\r\n var allAccounts=[];\r\n cats.forEach(function(c){ allAccounts = allAccounts.concat(accountsFor(c)); });\r\n\r\n var periods = periodOptionsFor(allAccounts);\r\n var perSel = $('ov-period-filter');\r\n var prevPick = state.ovPeriodPick;\r\n perSel.innerHTML = '<option value=\"latest\">Terbaru<\/option>' + periods.map(function(p){\r\n  return '<option value=\"'+p.sortKey+'\">'+esc(p.label)+'<\/option>';\r\n }).join('');\r\n if(prevPick===null || !periods.some(function(p){return p.sortKey===prevPick;})) state.ovPeriodPick=null;\r\n perSel.value = state.ovPeriodPick===null ? 'latest' : state.ovPeriodPick;\r\n\r\n AGG_METRICS.forEach(function(m){\r\n  var series;\r\n  if(m==='engagement_rate'){\r\n   var views = sumSeries(allAccounts,'views'); var eng = sumSeries(allAccounts,'engagements');\r\n   var map={}; views.forEach(function(p){map[p.label]={label:p.label,sortKey:p.sortKey,v:p.value,e:0};});\r\n   eng.forEach(function(p){ if(!map[p.label]) map[p.label]={label:p.label,sortKey:p.sortKey,v:0,e:0}; map[p.label].e=p.value; });\r\n   series = Object.keys(map).map(function(k){var x=map[k]; return {label:x.label, sortKey:x.sortKey, value: x.v?x.e\/x.v:null};});\r\n   series.sort(function(a,b){return a.sortKey-b.sortKey;});\r\n  } else {\r\n   series = sumSeries(allAccounts, m);\r\n  }\r\n  var lg = growthAt(series, state.ovPeriodPick);\r\n  sc.insertAdjacentHTML('beforeend', '<div class=\"sc\"><div class=\"lbl\">'+METRIC_LABELS[m]+'<\/div><div class=\"val\">'+fmtVal(m,lg.value)+'<\/div>'+deltaBadge(lg.growth)+'<\/div>');\r\n });\r\n\r\n var cc = $('ov-catcards'); cc.innerHTML='';\r\n cats.forEach(function(c){\r\n  var accs = accountsFor(c);\r\n  var views = sumSeries(accs,'views'); var lgV = growthAt(views, state.ovPeriodPick);\r\n  var eng = sumSeries(accs,'engagements'); var lgE = growthAt(eng, state.ovPeriodPick);\r\n  var fol = sumSeries(accs,'followers'); var lgF = growthAt(fol, state.ovPeriodPick);\r\n  cc.insertAdjacentHTML('beforeend',\r\n   '<div class=\"cat-card\" onclick=\"SC.setTab(\\''+c+'\\')\">'+\r\n   '<h3>'+c+' <span style=\"color:var(--muted-foreground);font-weight:600;font-size:.75rem\">('+accs.length+' akun)<\/span><\/h3>'+\r\n   '<div class=\"mini\"><span>Followers<\/span><b>'+nf(lgF.value)+'<\/b><\/div>'+\r\n   '<div class=\"mini\"><span>Views\/Reach<\/span><b>'+nf(lgV.value)+'<\/b><\/div>'+\r\n   '<div class=\"mini\"><span>Total Engagements<\/span><b>'+nf(lgE.value)+'<\/b><\/div>'+\r\n   '<\/div>');\r\n });\r\n\r\n var views = sumSeries(allAccounts,'views');\r\n $('ov-chart-sub').textContent = state.period==='weekly' ? 'per minggu' : 'per bulan';\r\n drawChart($('ov-chart'), [{name:'Total Views', color:'#02439F', points:views}], 'views', {highlightSortKey: state.ovPeriodPick});\r\n}\r\n\r\nfunction renderCategory(category){\r\n state.category = category;\r\n var accs = accountsFor(category);\r\n\r\n var accSel = $('acc-filter');\r\n var prevAcc = state.account;\r\n accSel.innerHTML = '<option value=\"all\">Semua akun<\/option>' + accs.map(function(a){\r\n  var key=a.platform+'|'+a.account;\r\n  return '<option value=\"'+esc(key)+'\">'+PLATFORM_NAMES[a.platform]+' - '+esc(a.account)+'<\/option>';\r\n }).join('');\r\n if(!accs.some(function(a){return (a.platform+'|'+a.account)===prevAcc;})) state.account='all';\r\n accSel.value = state.account;\r\n\r\n var avail = metricsAvailable(accs);\r\n var metSel = $('metric-filter');\r\n metSel.innerHTML = avail.map(function(m){return '<option value=\"'+m+'\">'+METRIC_LABELS[m]+'<\/option>';}).join('');\r\n if(avail.indexOf(state.metric)===-1) state.metric = avail[0]||'views';\r\n metSel.value = state.metric;\r\n\r\n if(!accs.length){\r\n  $('cat-scorecards').innerHTML='';\r\n  var emptyMsg = state.period==='monthly'\r\n    ? 'Belum ada data bulanan buat kategori ini (akunnya ada, tapi baru ke-track di data mingguan). Coba pindah ke toggle Mingguan.'\r\n    : 'Belum ada akun di kategori ini.';\r\n  $('cat-chart').innerHTML='<div class=\"empty-note\">'+emptyMsg+'<\/div>';\r\n  $('cat-tbody').innerHTML=''; $('cat-thead').innerHTML='';\r\n  $('cat-legend').innerHTML=''; $('period-filter').innerHTML='';\r\n  return;\r\n }\r\n\r\n var targetAccounts = state.account==='all' ? accs : accs.filter(function(a){return (a.platform+'|'+a.account)===state.account;});\r\n\r\n \/\/ period picker: daftar minggu\/bulan yang beneran ada datanya di kategori ini\r\n var periods = periodOptionsFor(accs);\r\n var perSel = $('period-filter');\r\n var prevPick = state.periodPick;\r\n perSel.innerHTML = '<option value=\"latest\">Terbaru<\/option>' + periods.map(function(p){\r\n  return '<option value=\"'+p.sortKey+'\">'+esc(p.label)+'<\/option>';\r\n }).join('');\r\n if(prevPick===null || !periods.some(function(p){return p.sortKey===prevPick;})) state.periodPick=null;\r\n perSel.value = state.periodPick===null ? 'latest' : state.periodPick;\r\n\r\n \/\/ scorecards: for AGG_METRICS available\r\n var scEl = $('cat-scorecards'); scEl.innerHTML='';\r\n AGG_METRICS.filter(function(m){return avail.indexOf(m)!==-1 || m==='engagement_rate';}).forEach(function(m){\r\n  var series;\r\n  if(m==='engagement_rate'){\r\n   var views = sumSeries(targetAccounts,'views'); var eng = sumSeries(targetAccounts,'engagements');\r\n   var map={}; views.forEach(function(p){map[p.label]={label:p.label,sortKey:p.sortKey,v:p.value,e:0};});\r\n   eng.forEach(function(p){ if(!map[p.label]) map[p.label]={label:p.label,sortKey:p.sortKey,v:0,e:0}; map[p.label].e=p.value; });\r\n   series = Object.keys(map).map(function(k){var x=map[k]; return {label:x.label, sortKey:x.sortKey, value: x.v?x.e\/x.v:null};});\r\n   series.sort(function(a,b){return a.sortKey-b.sortKey;});\r\n  } else {\r\n   series = sumSeries(targetAccounts, m);\r\n  }\r\n  if(!series.length) return;\r\n  var lg = growthAt(series, state.periodPick);\r\n  scEl.insertAdjacentHTML('beforeend', '<div class=\"sc\"><div class=\"lbl\">'+METRIC_LABELS[m]+'<\/div><div class=\"val\">'+fmtVal(m,lg.value)+'<\/div>'+deltaBadge(lg.growth)+'<\/div>');\r\n });\r\n\r\n \/\/ chart: one line per account (max 10) for selected metric\r\n $('cat-chart-title').textContent = METRIC_LABELS[state.metric]+' - '+category;\r\n $('cat-chart-sub').textContent = (state.period==='weekly' ? 'per minggu' : 'per bulan') + (state.periodPick!==null ? ' - highlight: dipilih' : '');\r\n var seriesList = targetAccounts.map(function(a,i){\r\n  return { name:PLATFORM_NAMES[a.platform]+' - '+a.account, color:PALETTE[i%PALETTE.length], points:(a.metrics[state.metric]||[]) };\r\n }).filter(function(s){return s.points.length;});\r\n drawChart($('cat-chart'), seriesList, state.metric, {highlightSortKey: state.periodPick});\r\n $('cat-legend').innerHTML = seriesList.map(function(s){\r\n  return '<span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:'+s.color+'\"><\/span>'+esc(s.name)+'<\/span>';\r\n }).join('');\r\n\r\n \/\/ table: value + growth (di periode terpilih) per akun per available metric\r\n var thead = $('cat-thead');\r\n thead.innerHTML = '<th class=\"l\">Akun<\/th>' + avail.map(function(m){return '<th>'+METRIC_LABELS[m]+'<\/th>';}).join('');\r\n var tbody = $('cat-tbody'); tbody.innerHTML='';\r\n accs.forEach(function(a){\r\n  var row = '<td class=\"l branch\"><span class=\"badge '+a.platform+'\" title=\"'+PLATFORM_NAMES[a.platform]+'\">'+a.platform+'<\/span>'+esc(a.account)+'<\/td>';\r\n  avail.forEach(function(m){\r\n   var s = a.metrics[m]||[];\r\n   if(!s.length){ row+='<td>-<\/td>'; return; }\r\n   var lg = growthAt(s, state.periodPick);\r\n   row += '<td>'+fmtVal(m,lg.value)+' '+deltaBadge(lg.growth)+'<\/td>';\r\n  });\r\n  tbody.insertAdjacentHTML('beforeend','<tr>'+row+'<\/tr>');\r\n });\r\n}\r\n\r\nwindow.SC = {\r\n load: load,\r\n setTab: function(t){ state.tab=t; if(t!=='overview' && t!=='calendar'){ state.account='all'; state.periodPick=null; } render(); },\r\n setPeriod: function(p){ state.period=p; state.periodPick=null; state.ovPeriodPick=null; render(); },\r\n setAccount: function(v){ state.account=v; render(); },\r\n setMetric: function(v){ state.metric=v; render(); },\r\n setPeriodPick: function(v){ state.periodPick = (v==='latest') ? null : Number(v); render(); },\r\n setOvPeriodPick: function(v){ state.ovPeriodPick = (v==='latest') ? null : Number(v); render(); }\r\n};\r\n\r\nloadPrefs();\r\nif($('cfg-url').value.trim()) load(); else setStatus('Isi Apps Script Web App URL di pengaturan sumber data buat mulai (lihat bagian \u2699\ufe0f di atas).','info');\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3024","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Julia Afildah","author_link":"https:\/\/pandaigadai.com\/blog\/author\/julia-afildah\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/comments?post=3024"}],"version-history":[{"count":1,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3024\/revisions"}],"predecessor-version":[{"id":3025,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3024\/revisions\/3025"}],"wp:attachment":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/media?parent=3024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}