Panduan Portfolio GAS

1Selamat Datang

Portfolio ini adalah tempat tunggal untuk monitoring semua project renovasi dan konstruksi yang dikerjakan PT GAS (Guna Andalan Sejati). Setiap project punya dashboard sendiri yang menampilkan progress, material, dan keuangan secara real-time, dengan data hidup dari Google Sheets.

Akses

Halaman portfolio (hub) terbuka untuk publik agar mudah dibagikan. Dashboard per project juga bisa dibuka siapa saja yang punya link, tapi hanya pihak yang diberi izin (Editor email Gmail) yang bisa mengubah data di Google Sheet.

Rencana ke depan: akan ada login per email & password untuk role-based access (Owner, Supervisor, Staff) — supaya halaman, action, dan data tertentu hanya bisa diakses sesuai peran. Akan dirilis bertahap.

2Arsitektur Sistem

4 layer kerja, masing-masing dengan peran jelas:

Domain

gunaandalan.gspproject.com — single domain untuk semua. Setiap project punya path sendiri, misalnya /renovresman/ untuk Renovasi Kantor WRG. Tidak ada subdomain per project (supaya mudah managed).

3Untuk Owner / Admin

Tugas utama

• Review progress di hub / — KPI strip kasih overview semua project
• Drill-down ke project tertentu via card → buka dashboard detail
• Setup project baru (lihat Tambah Project Baru)
• Brief supervisor lapangan via WhatsApp dengan link dashboard
• Review weekly sync (Jumat 16:00 WIB default) untuk konfirmasi progress

Tools yang dipakai

• Google Sheet — full Editor access per project
• Vercel CLI — deploy update dashboard
• Hostinger DNS — kalau perlu add domain baru (jarang)
• OpenClaw — bot management (Phase 2)

4Untuk Supervisor Lapangan

Cara mulai

1. Cek hub: buka gunaandalan.gspproject.com, lihat project lo ada di mana
2. Klik card project → masuk ke dashboard
3. Tab Panduan di dashboard project → baca pembagian tugas spesifik
4. Klik link Sheet di Panduan tab → login Gmail Editor → mulai input data

Pembagian tugas (general pattern)

Detail tugas spesifik untuk project tertentu (e.g., siapa Fahmi, siapa Faizal di Renov WRG) ada di tab 📖 Panduan di dalam dashboard project masing-masing.

5Untuk Staff / Observer

• Buka hub gunaandalan.gspproject.com
• Klik project yang relevan → lihat KPI, chart, progress
• Tidak perlu login (Phase 1) — semua dashboard read-only by default
• Pertanyaan? Tag Gilang di WA atau lihat Kontak

6Baca Dashboard

Setiap dashboard project (e.g., /renovresman/) punya 6 tab. Apa isinya:

Tab "Live Status"

Snapshot real-time minggu ini. 5 KPI:

• Rencana Minggu Ini — % bobot kerja yang seharusnya selesai
• Realisasi Minggu Ini — % yang aktual selesai (delta dari rencana = slip/ahead)
• Cost Burn — total pengeluaran material vs budget
• Termin Paid — total pembayaran kontraktor
• Hari ke PHO — countdown ke serah-terima provisional

Chart deviasi kumulatif: area merah = slip, area hijau = ahead of schedule.

Tab "Overview"

Kurva-S rencana vs realisasi + komposisi biaya material per divisi (pie chart).

Tab "Schedule"

Bobot pekerjaan per divisi (bar chart) + beban bobot mingguan + Gantt 24 minggu. Warna bar:

• ● Hijau = realisasi ≥80% (on-track/done)
• ● Oranye = minggu berjalan saat ini
• ● Merah = slip (realisasi <80% di minggu lewat)
• ● Biru = future / belum mulai

Tab "Material BoM"

Top 10 material termahal (chart) + top 10 volume + daftar plan vs actual PO dengan variance.

Tab "Termin"

5 termin pembayaran (M1-4, M5-8, M9-12, M13-18, M19-24) + retensi 5% pasca-PHO. Status badge: pending / submitted / approved / paid.

Tab "📖 Panduan"

Project-specific FAQ untuk supervisor — tugas detail, sync schedule, troubleshooting operasional.

7Evaluasi Tabel

Setiap tabel di dashboard punya semantic-nya. Cara baca:

Tabel "Termin Status" (Live Status tab)

Tabel "Daftar Material" (Material BoM tab)

Plan vs Actual PO. Variance kolom:

• Variance positif (oranye) = aktual lebih mahal/banyak dari plan → review apakah masih sehat
• Variance negatif (hijau) = aktual lebih hemat → bagus
• Variance =0 = sesuai plan

Tabel "Gantt 24 Minggu" (Schedule tab)

Row = divisi pekerjaan (e.g., Persiapan, Bongkar, Struktur, MEP, Finishing, dst). Kolom = minggu (M1...M24). Warna cell = status minggu itu.

Hover atau tap cell untuk lihat detail bobot vs realisasi. (Coming soon — Phase 2)

8Tambah Project Baru

Project baru dideploy ke gunaandalan.gspproject.com/<nickname>/ sebagai subfolder dari hub. Total clone-to-live ~30-45 menit kalau lo udah familiar.

Single domain pattern. Tidak ada DNS baru, tidak ada Vercel project baru per project. Semua project hidup di bawah gunaandalan.gspproject.com dengan path sendiri.

Step 1 — Decide naming (~3 min)

• Nickname: single-word lowercase (e.g., renovjkt, salestrk, eventops)
• URL final: gunaandalan.gspproject.com/<nickname>/
• Local folder: /Users/gsp/Documents/Claude/Projects/Business/WRG/<Project Folder>/

Step 2 — Clone source files (~5 min)

cd "/Users/gsp/Documents/Claude/Projects/Business/WRG"
cp -r "Renovasi Kantor WRG" "<New Project Folder>"
cd "<New Project Folder>"
mv "Dashboard Renovasi WRG.html" "Dashboard <Project>.html"

Step 3 — Customize template (~10 min)

Dashboard HTML:

• Line ~5 (title) + line ~107 (h1) → "Dashboard <Project Name>"
• Line 297 → kosongkan SHEET_ID (isi di Step 5)
• Line 298 (CONFIG.TABS) → rename keys kalau Sheet tabs beda
• Tab bar "📊 Update Progress" button → update href ke Sheet URL baru
• FAQ section → update kontraktor, supervisor names, dll

setup.gs: update SHEET_NAMES object (line ~21) kalau tab names beda.

xlsx template: rename + edit di Excel/Numbers sesuai domain project.

Step 4 — Upload Sheet ke Drive (~3 min)

1. Drag-drop xlsx ke drive.google.com
2. Klik kanan → Open with → Google Sheets
3. File → Save as Google Sheets (lepas dari xlsx format)
4. Catat SHEET_ID dari URL

Step 5 — Apps Script setup (~5 min)

1. Extensions → Apps Script
2. Paste isi setup.gs, Save
3. Run function setupAfterImport
4. Authorize permissions (Advanced → Go to project unsafe)
5. Cek Execution log → expect success messages

Step 6 — Sharing (~2 min)

1. Sheet → Share → "Anyone with the link" → Viewer
2. Add Editor emails (supervisor lapangan project ini)

Step 7 — Paste SHEET_ID ke HTML (~1 min)

Edit Dashboard HTML line 297, paste SHEET_ID di antara quote kosong:

SHEET_ID: '13ss5de-wt7XSv2hMznf7HGBPHV2yQWZY2o79sCy2-Dw',  // PASTE SHEET ID

Step 8 — Copy ke hub folder (~1 min)

cd "/Users/gsp/Documents/Claude/Projects/Business/WRG/PT Guna Andalan Sejati/gunaandalan-hub"
mkdir -p <nickname>
cp "../../<New Project Folder>/Dashboard <Project>.html" <nickname>/index.html

Step 9 — Tambah card di hub + deploy (~3 min)

Edit gunaandalan-hub/index.html, tambah block card di section "Active Projects" sebelum </div>:

<a class="project" href="/<nickname>/">
  <div class="top">
    <h3><Project Name></h3>
    <span class="status live">Live</span>
  </div>
  <div class="meta">
    <span>📍 <Lokasi></span>
    <span class="dot"></span>
    <span>⏱️ <Durasi></span>
  </div>
  <div class="desc"><Description 1-2 kalimat></div>
  <div class="footer">
    <span>Owner: <X> · Mulai <tanggal></span>
    <span class="open">Buka Dashboard →</span>
  </div>
</a>

Deploy:

cd "/Users/gsp/Documents/Claude/Projects/Business/WRG/PT Guna Andalan Sejati/gunaandalan-hub"
vercel --prod --yes
vercel alias set https://gunaandalan-portfolio.vercel.app gunaandalan.gspproject.com

Verify: curl -I https://gunaandalan.gspproject.com/<nickname>/ → expect HTTP 200.

Detail lengkap + variations untuk domain selain renovasi (sales, HR, event ops, dll) di file REPLICATE_PROJECT.md (folder Renovasi Kantor WRG).

9Kelola Data — Add / Edit / Delete

Semua data project hidup di Google Sheet. Dashboard read-only — refresh otomatis tiap 60 detik dari Sheet. Edit data = edit Sheet. Tab bar "📊 Update Progress" button = shortcut ke Sheet edit mode.

A. Tambah Row (Data Baru)

Pattern paling sering: tambah row baru di tab Sheet untuk update progress, log harian, PO baru, dll.

1. Klik 📊 Update Progress di tab bar dashboard (atau buka Sheet langsung)
2. Klik tab yang dituju di bawah Sheet (PROGRESS / MATERIAL_PO / TERMIN / dll)
3. Scroll ke baris kosong pertama setelah data terakhir
4. Klik cell pertama row baru, ketik value
5. Tab atau Enter untuk pindah cell, isi semua kolom yang relevan
6. Auto-save (cek "Saved to Drive" di toolbar atas)

Dashboard akan auto-fetch dalam ≤60 detik. Refresh browser kalau buru-buru.

B. Edit Cell Existing

Update nilai yang sudah ada (mis. % realisasi mingguan, status termin, harga PO).

1. Buka Sheet, navigate ke tab + cell yang dituju
2. Double-click cell (atau klik + F2) untuk edit mode
3. Ketik value baru, Enter
4. Auto-save

Untuk edit BANYAK cell sekaligus:

• Select range cell pertama → drag sampai range akhir
• Ketik value untuk cell pertama → Tab atau Enter ke cell selanjutnya
• Atau paste dari clipboard (lebih cepat kalau lo punya data di Excel/file lain)

C. Delete Row

⚠️ Hati-hati. Delete row = permanen kecuali Restore via Version History. Pertimbangkan mark sebagai "cancelled/inactive" daripada delete kalau row punya history yang penting (audit trail).

1. Klik nomor row di kiri (row akan highlighted)
2. Klik kanan → Delete row
3. Atau menu: Edit → Delete → Row

Kalau salah delete: File → Version history → See version history → pilih timestamp sebelum delete → Restore.

D. Soft Delete (Recommended)

Untuk data yang punya history penting (e.g., PO yang dibatalkan, divisi yang scope-nya diubah), tambah kolom status dan mark sebagai cancelled / void daripada hapus permanen.

Sebelum: row keramik | qty=200 | DELETE
Sesudah: row keramik | qty=200 | status=cancelled (kept for audit)

Dashboard JS bisa di-tweak untuk filter out status=cancelled dari render (tag Gilang kalau butuh).

E. Undo / Version History

Google Sheet otomatis simpan revision history. Akses via:

• Quick undo: Cmd+Z (Mac) / Ctrl+Z (Windows) — works for last few actions
• Full history: File → Version history → See version history → pilih timestamp → Restore

Version history kekal forever (selama Sheet exists). Backup mingguan .xlsx adalah safety net kedua.

F. Bulk Operations

• Paste from Excel/CSV: Copy multi-row data dari file lain → klik cell start di Sheet → Cmd+V. Format auto-detect.
• Fill down: Select cell dengan value → drag fill handle (kotak kecil kanan-bawah) ke bawah → values copy/increment.
• Formula: Bisa pakai formula Google Sheets (=SUM, =VLOOKUP, dll). Dashboard fetch evaluated value, bukan formula text.

10Struktur & Schema Changes

Lebih advanced — bukan tambah/edit data tapi ubah STRUCTURE Sheet (tambah kolom, tambah tab, dll). Sebagian besar butuh code change di dashboard HTML.

A. Tambah Column ke tab existing

• Append di akhir (paling kanan) ✅ aman. Data masuk Sheet, tidak ditampilkan di dashboard sampai code update. Tidak break apa pun.
• Insert di tengah 🚨 HINDARI. Index kolom geser → dashboard JS yang baca by-index akan render salah. Pakai append + reorder di dashboard render layer kalau perlu.
• Untuk display column baru di dashboard: tag Gilang via WA dengan info (kolom apa, di tab mana, mau visualisasi seperti apa). Effort biasanya 30-60 min implementation.

B. Rename Column Header

Ubah nama header (row 1) tab. Aman kalau dashboard fetch by-position bukan by-name. Untuk sure, tag Gilang setelah rename.

C. Hapus Column

⚠️ Berisiko. Hapus column = data permanen hilang + index geser → dashboard kemungkinan break.

Alternatif yang lebih aman:

• Hide column (klik kanan header → Hide column) — column tetap di Sheet, dashboard tidak terganggu
• Rename ke _unused_X + kosongkan content

D. Tambah Tab Baru (Sheet baru)

Tab baru di Sheet butuh code change di dashboard supaya bisa di-fetch + display.

1. Di Sheet: bottom toolbar → klik + untuk add sheet → rename → isi header + data
2. Dashboard HTML line 298 (CONFIG.TABS): tambah key baru
3. JS: tambah fetch handler untuk tab baru di function renderAll(data)
4. HTML: tambah <div class="tab"> di tab bar + panel content
5. Re-deploy (vercel --prod --yes dari hub folder)

Tag Gilang via WA — biasanya 30-60 min implementation.

E. Hapus Tab

1. Dashboard HTML: hapus reference dari CONFIG.TABS + tab bar + panel + JS
2. Re-deploy dulu (supaya dashboard nggak crash karena fetch tab yang sudah dihapus)
3. Di Sheet: klik kanan tab name → Delete (atau Move to trash kalau mau soft-delete)

F. Backup Schema Sebelum Major Change

Sebelum struktur changes major (rename tab, big reorganization), download .xlsx dulu ke /Renovasi Kantor WRG/backup/. Pakai sebagai rollback kalau ada yang break.

11WhatsApp Bot Integration (Phase 2)

STATUS: DEFERRED

Plan: supervisor input data via WA hashtag command, bot parse, langsung tulis ke Google Sheet.

Contoh command (planned)

#progress div=keramik lt=1 pct=45
#material po=cat qty=20 unit=kaleng supplier=indaco
#log update plafon lt2 sudah selesai

Kenapa ditunda?

Bot OpenClaw existing heavily dikustomisasi untuk domain elpiji (sister business). Hashtag library (#help, #status, #bbm, dll) conflict dengan hashtag renovasi yang baru. Untuk migrasi clean, butuh:

• Path 1: OpenClaw instance ke-2 dengan WA number baru (clean isolation)
• Path 2: Pakai prefix ! bukan # (bypass sidecar elpiji)
• Path 3: Modify Tier 1 sidecar code (riskiest, touch production)

Decide path setelah Fahmi/Faizal familiar dengan Sheet manual workflow minimal 1 minggu.

12Troubleshooting

Q: Dashboard tidak update setelah edit Sheet

Tunggu maksimal 60 detik (interval refresh). Kalau masih, hard reload browser (Cmd+Shift+R / Ctrl+F5). Kalau masih, screenshot dashboard + screenshot Sheet, tag Gilang via WA.

Q: "Demo mode" banner muncul di dashboard

SHEET_ID kosong di HTML (line 297). Owner perlu edit + redeploy. Tag Gilang.

Q: Saya bukan Editor Sheet, gimana minta akses?

Kirim email Gmail ke Gilang via WA. Dia invite dalam <5 menit.

Q: TLS / certificate error di domain

Owner level: vercel certs issue gunaandalan.gspproject.com untuk force re-issue. Atau cek Hostinger DNS — CNAME gunaandalan harus return cname.vercel-dns.com.

Q: Data tiba-tiba hilang / salah edit accidentally

Sheet ada version history. Buka Sheet → File → Version history → See version history → pilih version sebelum incident → Restore this version.

Q: Bisa edit Sheet dari HP?

Bisa. Install app Google Sheets di HP, login Gmail Editor, buka file dari Drive.

Q: Login dashboard butuh password?

Phase 1: tidak butuh, semua dashboard read-only public. Phase 2 (planned): akan ada login per email & role-based access.

Q: Custom domain nggak nyambung

Cek DNS: dig gunaandalan.gspproject.com CNAME +short harus return cname.vercel-dns.com. Kalau belum, tunggu propagation atau cek Hostinger DNS record.

13Changelog

Catatan setiap perubahan major di system. Update di sini setiap deploy.

14Kontak

Issue terkait dashboard / system: tag Gilang via WA. Sertakan screenshot kalau ada error visual.