Saya Creator di PT Esteh Indonesia Makmur (Esteh Group). Saya akan upload project saya ke Esteh Internal Projects Portal (https://portal.estehindonesia.com).

============================================================
TUGAS ANDA (CLAUDE)
============================================================
Bantu saya menyiapkan project saya untuk di-upload ke portal. Saya akan kasih file project saya (HTML, CSS, JS, data, gambar, dll). Anda yang strukturkan ulang sesuai format portal SECARA OTOMATIS.

ATURAN UTAMA — JANGAN DILANGGAR:
1. JANGAN ubah isi, logic, atau desain file project saya. Anda hanya format ulang STRUKTUR FOLDER + tambah file METADATA.
2. JANGAN buat file di luar folder project ini. Folder lain di komputer saya read-only.
3. SEBELUM mulai eksekusi, TANYA SAYA 3 hal: department, nama saya, dan konfirmasi nama project + ID folder yang Anda detect.

============================================================
KONTEKS PORTAL — WAJIB DIBACA SEBELUM ANDA NOLAK ATAU FLAG "TIDAK BISA"
============================================================

Portal Esteh punya 2 LAPISAN TERPISAH. Jangan dicampur:

LAPISAN 1 — PROJECT HTML (yang saya kasih ke Anda)
   Pure static: HTML5 + CSS3 + Vanilla JS. Di-serve oleh web server portal.
   TIDAK punya runtime backend sendiri. Tidak ada Node/PHP/Python
   di dalam folder project.

LAPISAN 2 — BACKEND TERPUSAT (portal-app, sudah LIVE, dikelola IT)
   Project saya MEMANGGIL service di lapisan ini dari frontend
   pakai HTTP API + SDK. Anda TIDAK perlu (dan TIDAK boleh) bangun
   backend baru di dalam folder project saya.

SERVICE TERPUSAT YANG SUDAH TERSEDIA — LANGSUNG PAKAI:
- Bridge SDK: window.CoworkBridge('slug-bridge')
   Simpan & baca record (ticket, task, customer, approval, leads, dll).
   Method: bridge.list(filter), bridge.get(id), bridge.create(data),
   bridge.update(id, data), bridge.delete(id).
   COCOK untuk: service desk ticketing, CRM, approval system,
   task tracker, expense management, dll.
- M365 Email OUTBOUND (Microsoft Graph API, sudah live)
   Kirim email notifikasi dari portal (mis. "ticket baru dibuat",
   "status berubah jadi resolved"). Wire-nya di-config oleh IT Admin
   per project per event Bridge. Project saya cukup trigger event
   via bridge.create / bridge.update — IT yang setup template +
   recipient + escalation rules.
- M365 Email INBOUND (worker baca mailbox -> auto-create record)
   Tersedia ON-DEMAND. Kalau project saya butuh fitur "email yang
   masuk ke alamat tertentu otomatis jadi ticket", LAPORKAN ke saya.
   Saya yang minta IT bangun inbound worker untuk Bridge saya.
   JANGAN coba listener webhook / Graph subscription di project HTML
   — itu memang tidak bisa di static, tapi BACKEND TERPUSAT yang
   handle, bukan tugas Anda di project.

ATURAN INTERPRETASI YANG WAJIB ANDA PEGANG:
- KALAU project saya butuh kapabilitas server-side (parse email masuk,
  scheduled job/cron, webhook listener pihak ketiga, integrasi API
  yang butuh secret, file upload publik tanpa login, dll), JANGAN
  bilang "tidak bisa karena static". Yang benar: project HTML cuma
  jadi UI + panggil Bridge SDK. Logic server-side adalah pekerjaan
  BACKEND TERPUSAT, dan IT yang bangun on-demand.
- LAPORKAN ke saya kapabilitas server-side apa yang dibutuhkan,
  TAPI tetap LANJUT generate project HTML-nya pakai Bridge SDK.
  Project bisa live duluan dengan input manual, lalu IT wire
  inbound/outbound nanti tanpa ubah project.
- Service desk ticketing CUKUP dibuat sebagai UI static + Bridge SDK.
  Auto-create dari email masuk = task IT untuk wire inbound worker
  ke Bridge yang sama. Project tidak perlu tahu detail itu.

============================================================
LANGKAH YANG ANDA KERJAKAN
============================================================

LANGKAH 1 — DETEKSI NAMA PROJECT
- Baca <title> dari HTML utama, <h1> pertama, atau README kalau ada.
- Tentukan nama project (frasa pendek 3-7 kata).
- Generate ID folder dengan aturan:
   • HURUF KECIL SEMUA
   • PEMISAH KATA pakai strip "-" (BUKAN spasi atau underscore)
   • Hanya huruf, angka, dan strip
   • Contoh: "Dashboard Penjualan Q1 2026" -> "dashboard-penjualan-q1-2026"

LANGKAH 2 — BUNGKUS DALAM FOLDER ID
- Buat folder dengan nama ID (lihat aturan ID di LANGKAH 1).
- Pindahkan SEMUA file project ke dalam folder itu.
- Pastikan path relatif di HTML (src, href) masih valid setelah pindah.
- File entry HARUS bernama index.html. Kalau file utama bukan index.html, rename + update referensi internal.

LANGKAH 2b — DETEKSI MULTI-VIEW (UNTUK TICKETING/HELPDESK/CRM/APPROVAL)

Project tipe ini biasanya butuh BEBERAPA VIEW dengan audience berbeda:
- Service desk ticketing : view ADMIN (IT staff, full CRUD ticket) + view PUBLIC (user biasa, cuma input + tracking by ID/email)
- CRM pipeline           : view SALES (edit lead, log aktivitas) + view MANAGER (dashboard agregat read-only)
- Approval system        : view REQUESTER (input + tracking sendiri) + view APPROVER (queue review + approve/reject)
- Project management     : view TIM (update progress) + view STAKEHOLDER (read-only milestone status)

KALAU project sumber saya tampak butuh multi-view (ada mention kata "admin", "public", "tracking", "form user", "dashboard manager", "approver", dll), TANYA SAYA dulu:
1. "Apakah project ini butuh beberapa view dengan audience berbeda?"
2. Kalau YA: "Sebutkan setiap view + audience + permission read/write yang dibutuhkan"

KALAU multi-view dikonfirmasi, jangan generate 1 folder. Generate FOLDER ID TERPISAH per view:

  helpdesk-it-admin/        ← admin view (IT staff)
  helpdesk-it-tracking/     ← public view (user lacak ticket)

Aturan per folder:
- Suffix ID yang JELAS peran-nya: -admin, -tracking, -sales, -manager, -requester, -approver, dst
- project.json di setiap folder dengan visibility + bridge_role yang sesuai:
   • Write role (admin/sales/approver/tim):
     "visibility": "shared", "bridge_role": "write"
   • Read role (public/manager/requester/stakeholder):
     "visibility": "public" (kalau memang publik) atau "shared", "bridge_role": "read"
- Field "bridge_role" di project.json adalah HINT untuk IT Admin Portal saat attach ke Bridge nanti
  (IT Admin yang manual set role saat attach, tapi nilai ini bantu konsistensi + dokumentasi)
- SDK CoworkBridge dipanggil dengan ID bridge YANG SAMA di SEMUA folder, contoh:
   const bridge = window.CoworkBridge('ticket-system-it');
- Setiap view render UI yang sesuai role-nya:
   • Write role: table list record + form Create/Edit/Delete + filter status
   • Read role:  form input record baru (kalau allowed) + tracking by ID atau filter by owner=email_user_sendiri (read-only display)
- Style + brand color SAMA di semua view (tetap pakai #0E8141 + Esteh Sans) — konsistensi UX

CONTOH STRUKTUR OUTPUT multi-view service desk IT:

  helpdesk-it-admin/
  ├── index.html        (dashboard IT staff: list semua ticket, edit, reply)
  ├── style.css
  ├── app.js            (panggil bridge.list, bridge.update, bridge.create)
  └── project.json      (visibility: "shared", bridge_role: "write")

  helpdesk-it-tracking/
  ├── index.html        (form input user + lacak ticket sendiri)
  ├── style.css
  ├── app.js            (panggil bridge.create untuk input, bridge.list dengan filter owner)
  └── project.json      (visibility: "public", bridge_role: "read")

KEDUA folder ini akan di-upload sebagai 2 project terpisah ke portal. IT Admin yang attach keduanya ke Bridge yang sama dengan role berbeda.

LANGKAH 2c — TENTUKAN AUDIENS & VISIBILITY (WAJIB TANYA SAYA)
Ini menentukan project ini muncul di mana (portal internal saja, atau juga di services untuk pihak luar) dan siapa yang boleh akses. TANYA SAYA: "Project ini untuk siapa?" lalu petakan ke salah satu nilai visibility portal Esteh:

- "private"     -> hanya saya (pembuat) + Admin IT. Cocok untuk draft / dashboard pribadi.
- "department"  -> semua orang di department saya. Cocok untuk laporan internal divisi.
- "shared"      -> hanya orang / grup / department tertentu yang dipilih. BISA termasuk mitra
                   external yang sudah diundang (akun "service"). Cocok untuk berbagi terbatas.
- "public"      -> Public (Internal Only): SEMUA karyawan internal Esteh Group (portal.estehindonesia.com).
                   TIDAK untuk pihak luar.
- "public_ext"  -> Public (Internal & External): semua internal + mitra/vendor/tim outlet (pihak LUAR).

ATURAN PORTAL vs SERVICES (PENTING — ada 2 setelan TERPISAH: VISIBILITY + AKSES VIA):
- VISIBILITY (daftar di atas) = SIAPA yang boleh melihat.
- AKSES VIA = DI DOMAIN MANA project muncul: "Portal saja" / "Services saja" / "Portal & Services".
  Setelan ini dipilih di portal saat Buat/Kelola Project (BUKAN di file metadata).
- Project muncul di services.estehindonesia.com HANYA JIKA: Akses via = Services (atau Keduanya)
  DAN visibility = public / public_ext. Jadi "public_ext" SAJA TIDAK cukup — Akses via harus Services juga.
- Audiens internal saja -> Akses via "Portal saja" + visibility internal (private/department/shared/public).
- Audiens termasuk pihak LUAR / project tracking untuk pengaju -> Akses via "Services saja" (atau Keduanya)
  + visibility "public" (atau "public_ext" lalu IT menambah email mitra). Pihak luar TIDAK pernah bisa masuk
  portal.estehindonesia.com; mereka hanya lihat project yang di-share di services.estehindonesia.com.
- Kalau saya ragu: default visibility "private" + Akses via "Portal saja". Catat rekomendasi Anda — IT bisa ubah.

LANGKAH 3 — GENERATE project.json (FILE BARU)
Buat file project.json di root folder ID dengan struktur:
{
  "name": "<nama-project-readable-yang-Anda-detect>",
  "description": "<satu-kalimat-deskripsi-dari-konten-project>",
  "department": "<ID-department-dari-jawaban-saya>",
  "owner": "<dari-jawaban-saya>",
  "visibility": "<private | department | shared | public | public_ext — sesuai LANGKAH 2c>",
  "surface_rekomendasi": "<portal | services | both — rekomendasi 'Akses via'; nilai ini SAYA set di portal saat Buat Project, bukan dari file>",
  "audience_note": "<1 kalimat: untuk siapa project ini, mis. 'internal divisi marketing' atau 'mitra outlet + internal / tracking pengaju'>",
  "entry": "index.html"
}

UNTUK MULTI-VIEW PROJECT (kalau LANGKAH 2b berlaku), struktur project.json di setiap folder:
{
  "name": "<nama-view-yang-readable>",       (contoh "Helpdesk IT — Admin Dashboard")
  "description": "<peran-view-ini>",         (contoh "Dashboard untuk IT staff handle ticket")
  "department": "<dari-jawaban-saya>",
  "owner": "<dari-jawaban-saya>",
  "visibility": "shared",                    (atau "public" — sesuai aturan LANGKAH 2b per role)
  "entry": "index.html",
  "bridge_role": "write"                     (atau "read" — hint untuk IT Admin saat attach Bridge)
}

LANGKAH 3b — SUMBER DATA (PILIH: STATIS atau LIVE)
Tanya saya kalau ragu. Ada 2 cara project memperoleh data:

A. DATA STATIS (embed) — untuk snapshot yang TIDAK berubah (laporan periode tertentu, materi tetap).
   Embed data dari CSV/Excel ke file .js / .json di dalam folder project. Tidak butuh koneksi apa pun.

B. DATA LIVE dari OneDrive (sudah AKTIF) — untuk dashboard/laporan yang DATANYA SERING DIUPDATE.
   Project TIDAK meng-embed data. Sebaliknya:
   - File data (Excel/CSV) ditaruh di folder OneDrive project (folder OneDrive bernama = ID project).
   - Dashboard mengambil data via fetch ke endpoint portal:
       fetch('/api/projects/<ID-department>/<ID-project>/data?file=<nama-file>', { credentials: 'include' })
     (kalau di folder OneDrive cuma ada 1 file data, '?file=' boleh dikosongkan — otomatis terdeteksi)
   - Respons JSON: { ok, columns: [...], rows: [ {...}, ... ], row_count, fetched_at }.
   - Untuk tombol "Refresh Data", tambahkan '&refresh=1' pada URL (paksa ambil ulang dari OneDrive).
   - Render chart/tabel dari "rows". Data ikut versi terbaru di OneDrive otomatis.
   LAPORKAN ke saya kalau project pakai cara B + sebutkan nama file data yang diharapkan,
   supaya saya menaruh file-nya di folder OneDrive yang benar.

(Untuk APLIKASI KELOLA RECORD seperti ticketing/CRM/approval, gunakan Bridge SDK di KONTEKS PORTAL —
 itu jalur berbeda untuk MENYIMPAN/MENGUBAH record, bukan sekadar menampilkan data tabel.)

LANGKAH 4 — NORMALIZE DATA RECORD (KALAU ADA)
DEFINISI LIST RECORD: array of object yang merepresentasikan entitas (task, ticket, customer, approval, milestone, leads, expense, dll). Bisa berupa array di file .json, array hardcoded di .js, atau data dari CSV/Excel attached.

Kalau project SAYA PUNYA list record -> normalkan ke schema portal Esteh berikut. Kalau TIDAK punya (landing page, brosur, slideshow tanpa data dinamis) -> SKIP langkah ini.

a) FIELD NAME WAJIB per record:
   id, name, department, status, owner, created_at, updated_at
   Kalau nama field lama beda (taskId, judul, pic_email, tgl_dibuat, dll), RENAME ke nama wajib di atas.
   Field tambahan project-specific BOLEH (outlet_code, campaign_id, dll), tapi 7 field wajib HARUS ada.

b) ID PATTERN per tipe record:
   • Task     : TASK-{DEPT3}-{NNN}     -> TASK-MKT-001
   • Ticket   : TKT-{YYMMDD}-{NNN}     -> TKT-260524-001
   • Approval : APR-{YYMMDD}-{NNN}     -> APR-260524-001
   • Milestone: MS-{PROJECT_CODE}-{NN} -> MS-CAMP01-01
   • Customer : CUS-{NNNN}             -> CUS-0001
   DEPT3 = singkatan 3 huruf department (mis. IT, MKT, FIN, HR, OPS, RND, QA) — bebas, yang penting konsisten.
   Tipe lain: buat pattern sejenis {PREFIX3-5}-{NNN} atau {PREFIX}-{YYMMDD}-{NNN}.

c) STATUS ENUM per tipe (lowercase snake_case):
   • task     : pending / in_progress / done / cancelled / blocked
   • ticket   : open / assigned / in_progress / resolved / closed
   • approval : draft / submitted / review / approved / rejected
   • milestone: not_started / in_progress / done / delayed
   • customer : active / inactive / prospect
   Kalau status lama beda ("selesai", "complete", "1", true) -> CONVERT ke enum di atas.

d) TIMESTAMP FORMAT — ISO 8601 dengan timezone:
   "2026-05-24T14:30:00+07:00" (Asia/Jakarta) atau "2026-05-24T07:30:00Z" (UTC).
   Kalau lama "24/05/2026" atau Unix epoch -> CONVERT ke ISO 8601.

e) NAMING CONVENTION:
   Field name : snake_case lowercase (created_at, NOT createdAt)
   Enum value : snake_case lowercase (in_progress, NOT inProgress)
   ID prefix  : UPPERCASE (TASK-, TKT-, APR-)

LANGKAH 5 — TECH STACK COMPLIANCE CHECK
Pastikan project saya compliance dengan aturan portal:
- FOLDER PROJECT pure static (HTML5 + CSS3 + Vanilla JS). Library via CDN public OK.
- TIDAK ada server backend di dalam FOLDER PROJECT (no Node/PHP/Python source code, no build step).
  (Ingat: backend terpusat portal-app sudah ada untuk service Bridge & Email. Lihat
   "KONTEKS PORTAL" di atas. Project cuma panggil service-nya dari frontend.)
- TIDAK ada external API call yang butuh API key rahasia di kode frontend.
  (Kalau perlu, panggil lewat Bridge SDK / minta IT bangun proxy di backend terpusat.)
- Semua path asset RELATIF (./images/logo.png), bukan absolut (/images/ atau C:/...).
- <html lang="id">, <meta charset="UTF-8">, <meta name="viewport">, <title> jelas.
- Semua <img> punya alt. Heading hierarchy benar (h1 -> h2 -> h3).
- Layout responsive (desktop 1920px + mobile 375px).
- Warna brand: hijau #0E8141 sebagai primary, putih + abu netral.

BRANDING ESTEH (WAJIB di tiap project):
- Di <head> tambahkan: <link rel="stylesheet" href="/brand/tokens.css"> (memuat font resmi "Esteh Sans" + token warna Esteh). Lalu set font halaman: font-family: 'Esteh Sans', system-ui, sans-serif;
- Tampilkan logo Esteh Group KECIL di kiri atas (jangan besar, seperti logo di portal): <img src="/brand/logo.png" alt="Esteh Group" style="height:32px;width:auto">
- PENGECUALIAN aturan path relatif: aset brand portal (/brand/tokens.css, /brand/logo.png, /fonts/...) memang pakai path absolut /brand/ dan /fonts/ — itu dilayani portal di KEDUA domain (portal & services), bukan file project. Aset MILIK project tetap relatif (./...).

Kalau ada yang tidak compliance, PERBAIKI tanpa ubah logic/desain inti. LAPORKAN apa yang Anda ubah.
Kalau project butuh kapabilitas server-side, JANGAN tolak — pakai Bridge SDK + laporkan
ke saya kapabilitas backend apa yang perlu IT wire (lihat KONTEKS PORTAL di atas).

LANGKAH 6 — OUTPUT
Format output:

KALAU ANDA DI COWORK / Claude Code (file access):
- Tulis langsung file ke disk di dalam folder ID.
- Setelah selesai, kasih saya laporan singkat:
   • Nama folder ID yang dibuat (atau LIST folder kalau multi-view)
   • Tree lengkap file & folder di dalamnya (per folder kalau multi-view)
   • Daftar perubahan (rename field, normalize data, dll)
   • Konfirmasi: tidak ada file di luar folder ID yang Anda modify
   • Kalau multi-view: rekomendasi ID bridge yang sebaiknya dibuat IT Admin untuk attach kedua project ini

KALAU ANDA DI CLAUDE.AI WEB (no file access):
- Output dalam blok kode format:
   === FILE: <id>/index.html ===
   ... isi ...
   === FILE: <id>/project.json ===
   ... isi ...
- Untuk multi-view: blok-blok file dengan ID berbeda satu per satu:
   === FILE: helpdesk-it-admin/index.html ===
   ...
   === FILE: helpdesk-it-tracking/index.html ===
   ...
- Saya akan copy-paste sendiri ke file di komputer.
- Sertakan juga laporan singkat seperti di atas.

============================================================
KALAU AMBIGU, TANYA SAYA — JANGAN ASUMSI
============================================================

Skenario yang HARUS Anda tanya:
- Ada beberapa file .html, tidak jelas mana index utama.
- Ada beberapa array data, tidak jelas mana yang list record perlu di-normalize.
- Nama project tidak jelas dari <title>/h1 (terlalu generic seperti "Document" atau "Untitled").
- Format data lama yang Anda ragu cara convert-nya.

============================================================
MULAI SEKARANG
============================================================

Langkah pertama Anda:
1. KONFIRMASI Anda sudah baca semua file project saya — sebutkan jumlah file + nama-nama file utamanya.
2. TANYA hal-hal berikut di awal:
   a. ID department saya (lihat daftarnya di portal -> menu "Buat Baru"; contoh: it, marketing, finance, hr, esteh-indonesia, dst). Tulis ID-nya yang huruf kecil pakai strip.
   b. Nama saya (huruf kecil tanpa spasi, contoh: lisa, andi, sarah)
   c. Konfirmasi nama project + ID folder yang Anda detect (saya bisa koreksi)
   d. AUDIENS project ini untuk siapa? (lihat LANGKAH 2c — internal saja / department / orang tertentu / semua internal / termasuk pihak luar). Ini menentukan visibility + apakah project tampil di services.estehindonesia.com.
   e. SUMBER DATA: statis (embed) atau live dari OneDrive? (lihat LANGKAH 3b)
   f. (KALAU project tampak multi-view — ticketing/CRM/approval/dst, lihat LANGKAH 2b)
      "Apakah project ini butuh beberapa view dengan audience berbeda? Kalau ya, sebutkan setiap view + audience + permission read/write." — TANYA HANYA kalau saya tampak butuh multi-view, untuk project single-view skip pertanyaan ini.
3. TUNGGU jawaban saya.
4. BARU mulai eksekusi LANGKAH 1-6 setelah saya konfirmasi.

JANGAN langsung output file sebelum saya konfirmasi.

Saya Creator di PT Esteh Indonesia Makmur (Esteh Group). Saya butuh project web statis yang akan di-upload ke Esteh Internal Projects Portal (https://portal.estehindonesia.com).

============================================================
TUGAS
============================================================
[ Jelaskan apa yang Anda ingin Claude buat. Contoh:
  - "Buat dashboard analitik penjualan harian dari data CSV terlampir, dengan grafik bar + line + filter per outlet."
  - "Buat microsite kampanye Lebaran 2026 dengan landing page + galeri foto + form pendaftaran customer (data form di-save ke localStorage saja)."
  - "Buat report keuangan Q1 2026 interaktif dari Excel terlampir, lengkap dengan ringkasan + tabel + grafik." ]

============================================================
KONTEKS PORTAL — WAJIB DIBACA SEBELUM NOLAK ATAU FLAG "TIDAK BISA"
============================================================

Portal Esteh punya 2 LAPISAN TERPISAH. Jangan dicampur:

LAPISAN 1 — PROJECT HTML (yang saya minta Anda buat)
   Pure static: HTML5 + CSS3 + Vanilla JS. Di-serve oleh web server portal.
   TIDAK punya runtime backend sendiri. Tidak ada Node/PHP/Python
   di dalam folder project.

LAPISAN 2 — BACKEND TERPUSAT (portal-app, sudah LIVE, dikelola IT)
   Project saya MEMANGGIL service di lapisan ini dari frontend
   pakai HTTP API + SDK. Anda TIDAK perlu (dan TIDAK boleh) bangun
   backend baru di dalam folder project saya.

SERVICE TERPUSAT YANG SUDAH TERSEDIA — LANGSUNG PAKAI:
• Bridge SDK: window.CoworkBridge('slug-bridge')
   Simpan & baca record (ticket, task, customer, approval,
   leads, dll). Method: bridge.list(filter), bridge.get(id),
   bridge.create(data), bridge.update(id, data), bridge.delete(id).
   COCOK untuk: service desk ticketing, CRM, approval system,
   task tracker, expense management, dll. Lihat tab "Data Bridge"
   di Help Center portal untuk SDK lengkap.
• M365 Email OUTBOUND (Microsoft Graph API, sudah live)
   Kirim email notifikasi dari portal (mis. "ticket baru dibuat",
   "status berubah jadi resolved"). Wire-nya di-config oleh IT
   Admin per project per event Bridge. Project saya cukup trigger
   event via bridge.create / bridge.update — IT yang setup
   template + recipient + escalation rules.
• M365 Email INBOUND (worker baca mailbox -> auto-create record)
   Tersedia ON-DEMAND. Kalau project saya butuh fitur "email yang
   masuk ke alamat tertentu otomatis jadi ticket", LAPORKAN ke saya.
   Saya yang minta IT bangun inbound worker untuk Bridge saya.
   JANGAN coba listener webhook / Graph subscription di project HTML
   — itu memang tidak bisa di static, tapi BACKEND TERPUSAT
   yang handle, bukan tugas Anda di project.

ATURAN INTERPRETASI YANG WAJIB ANDA PEGANG:
• KALAU project saya butuh kapabilitas server-side (parse email
   masuk, scheduled job/cron, webhook listener pihak ketiga,
   integrasi API yang butuh secret, file upload publik tanpa login,
   dll), JANGAN bilang "tidak bisa karena static". Yang benar:
   project HTML cuma jadi UI + panggil Bridge SDK. Logic server-side
   adalah pekerjaan BACKEND TERPUSAT, dan IT yang bangun on-demand.
• LAPORKAN ke saya kapabilitas server-side apa yang dibutuhkan,
   TAPI tetap LANJUT generate project HTML-nya pakai Bridge SDK.
   Project bisa live duluan dengan input manual, lalu IT wire
   inbound/outbound nanti tanpa ubah project.
• Service desk ticketing CUKUP dibuat sebagai UI static +
   Bridge SDK. Auto-create dari email masuk = task IT untuk wire
   inbound worker ke Bridge yang sama. Project tidak perlu tahu
   detail itu.

============================================================
PERSYARATAN WAJIB — JANGAN dilanggar
============================================================

1. STRUKTUR FILE:
   - WAJIB: Bungkus SEMUA file & folder project di dalam SATU folder.
     Nama folder ini = nama project Anda, dengan ATURAN PENULISAN berikut:
       • HURUF KECIL SEMUA (jangan ada huruf besar)
       • PEMISAH KATA pakai tanda strip "-" (jangan pakai spasi)
       • JANGAN pakai karakter aneh (titik, koma, tanda seru, tanda tanya,
         garis miring, kurung, dll). Hanya huruf, angka, dan strip.
     CONTOH BENAR :
       kampanye-lebaran-2026
       dashboard-penjualan-harian
       report-keuangan-q1-2026
       microsite-produk-baru
       laporan-stok-outlet
     CONTOH SALAH :
       "Kampanye Lebaran 2026"   → ada huruf besar & spasi
       "dashboard_penjualan"     → pakai underscore, harusnya strip "-"
       "laporan/q1"              → pakai garis miring
       "report keuangan!"        → ada spasi & tanda seru
   - File utama HARUS bernama index.html, taruh di root folder induk.
   - File lain: nama lowercase + dash. CONTOH: style.css, app.js, data-q1.json
   - Sub-folder boleh: images/, data/, lib/, fonts/, css/, js/
   - JANGAN BUAT atau MODIFY file di luar folder induk ini.
     Anggap folder lain di komputer saya read-only.

2. PATH RELATIF:
   - Semua referensi asset pakai path relatif dari index.html.
   - BENAR: <img src="./images/logo.png">
   - SALAH: <img src="/images/logo.png"> (slash di depan)
   - SALAH: <img src="C:/Users/.../logo.png"> (path absolut komputer)

3. TEKNOLOGI:
   - Stack FOLDER PROJECT: HTML5 + CSS3 + Vanilla JS.
   - Boleh library via CDN public (Tailwind, Chart.js, D3.js, Plotly, Alpine.js, dll
     dari cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com).
   - DILARANG di dalam folder project: Node.js server source, PHP, Python backend,
     build step. Folder project harus pure static — buka langsung di browser tanpa server.
   - DILARANG: External API call yang butuh API key rahasia di kode frontend.
   - INGAT: Larangan di atas hanya untuk ISI FOLDER PROJECT. Backend terpusat
     portal-app sudah ada untuk service Bridge & Email (lihat KONTEKS PORTAL
     di atas). Project saya panggil service-nya lewat SDK / HTTP — bukan
     implementasi backend baru di project.
   - GRAFIK (penting biar tidak gagal tampil): kalau pakai Chart.js/Plotly/ApexCharts,
     bungkus <canvas> dalam container ber-TINGGI TETAP (mis. <div style="position:relative;height:320px">)
     + set maintainAspectRatio:false; gambar grafik SETELAH elemen terlihat (mis. setelah data fetch /
     tab aktif). Untuk grafik sederhana (bar/line/donut) lebih aman pakai SVG/CSS murni tanpa library.
     Muat library chart dari cdnjs.cloudflare.com atau cdn.jsdelivr.net (keduanya diizinkan).

4. DATA — pilih salah satu:
   A. STATIS (embed): embed data dari CSV/Excel/JSON yang saya attach ke file .js / .json
      di project. Jangan minta user upload file lagi saat buka project. Cocok untuk data tetap (snapshot).
   B. LIVE dari OneDrive (untuk data yang SERING diupdate): JANGAN embed. Project ambil data
      dengan fetch ke endpoint portal:
        /api/projects/<ID-department>/<ID-project>/data?file=<nama-file>
      (kalau di folder OneDrive project cuma ada 1 file data, '?file=' boleh dikosongkan).
      Respons JSON berisi: daftar kolom, baris data, dan waktu ambil. Tambahkan '&refresh=1'
      untuk tombol Refresh (paksa ambil ulang). File data ditaruh di folder OneDrive project
      (nama folder OneDrive = ID project). LAPORKAN ke saya nama file data yang diharapkan.

5. STRUKTUR DATA RECORD (WAJIB kalau project menyimpan LIST RECORD):
   Aturan ini WAJIB diikuti supaya project kompatibel dengan Data Bridge portal
   Esteh. "List record" = data berupa array of object yang merepresentasikan
   entitas seperti task, ticket, customer, approval, milestone, leads, expense,
   dll. Project tanpa list record (landing page, brosur, kampanye visual,
   slideshow) DIKECUALIKAN dari rule ini.

   5.1 FIELD NAME WAJIB (jangan pakai nama lain):
       • id          — string unique per record
       • name        — judul/nama record (string)
       • department  — ID department (lihat di portal menu "Buat Baru"; mis. it, marketing, finance, hr, esteh-indonesia, dst)
       • status      — enum sesuai tipe record (lihat 5.3)
       • owner       — email PIC, format: [email protected]
       • created_at  — ISO 8601 timestamp
       • updated_at  — ISO 8601 timestamp
       Field opsional umum: progress (number 0-100), tags (array string),
       priority (low/medium/high/urgent), due_date (ISO 8601).
       Field custom tambahan BOLEH (mis. outlet_code, campaign_id), tapi
       JANGAN replace nama field wajib di atas dengan sinonim
       ("taskId" / "judul" / "nm" / "pic_email" / "tgl_dibuat" → DILARANG).

   5.2 ID PATTERN WAJIB (auto-generate dengan max existing ID + 1):
       • Task     : TASK-{DEPT3}-{NNN}     contoh: TASK-MKT-001
       • Ticket   : TKT-{YYMMDD}-{NNN}     contoh: TKT-260524-001
       • Approval : APR-{YYMMDD}-{NNN}     contoh: APR-260524-001
       • Milestone: MS-{PROJECT_CODE}-{NN} contoh: MS-CAMP01-01
       • Customer : CUS-{NNNN}                      contoh: CUS-0001
       DEPT3 = singkatan 3 huruf department (mis. IT, MKT, FIN, HR, OPS) — bebas, yang penting konsisten.
       NNN / NNNN = zero-padded counter (001, 002, ...).

   5.3 STATUS ENUM WAJIB (jangan pakai sinonim "selesai"/"done"/"1"/"complete"):
       • task     : pending → in_progress → done
                        (boleh juga: cancelled, blocked)
       • ticket   : open → assigned → in_progress → resolved → closed
       • approval : draft → submitted → review → approved
                        (boleh juga: rejected)
       • milestone: not_started → in_progress → done
                        (boleh juga: delayed)
       Untuk tipe record di luar daftar ini, pakai status enum yang konsisten
       (lowercase, snake_case, value seragam di seluruh dataset).

   5.4 FORMAT TIMESTAMP:
       created_at & updated_at WAJIB ISO 8601 dengan timezone, contoh:
       "2026-05-24T14:30:00+07:00" (Asia/Jakarta) atau
       "2026-05-24T07:30:00Z" (UTC). Jangan pakai format "24/05/2026" atau
       Unix epoch number.

   5.5 NAMING CONVENTION:
       • Field name : snake_case lowercase (created_at, due_date)
       • Enum value : snake_case lowercase (in_progress, not_started)
       • ID prefix  : UPPERCASE (TASK-, TKT-, APR-)

   Schema lengkap, contoh data, & SDK Bridge ada di tab "Data Bridge" Help
   Center portal.

6. RESPONSIVE:
   - Layout WAJIB responsive — works di desktop (1920px) dan mobile (375px).

7. BRANDING ESTEH (WAJIB):
   - Warna utama hijau #0E8141, background putih + abu netral. Modern minimal.
   - Di <head> tambahkan: <link rel="stylesheet" href="/brand/tokens.css">
     (memuat font resmi "Esteh Sans" + token warna). Set font halaman:
     font-family: 'Esteh Sans', system-ui, sans-serif;
   - Logo Esteh Group KECIL di kiri atas (jangan besar):
     <img src="/brand/logo.png" alt="Esteh Group" style="height:32px;width:auto">
   - PENGECUALIAN aturan path relatif (poin 2): aset brand /brand/tokens.css, /brand/logo.png,
     /fonts/... boleh path absolut karena dilayani portal di kedua domain. Aset milik project tetap relatif.

8. METADATA HTML:
   - <title> jelas, <meta charset="UTF-8">, <meta name="viewport">,
     lang="id" di tag <html>.

9. AKSESIBILITAS:
   - Semua <img> punya alt. Tombol/link teks jelas. Heading hierarchy benar.

10. AUDIENS, VISIBILITY & AKSES VIA (WAJIB tentukan — 2 setelan TERPISAH):
    (a) VISIBILITY = SIAPA yang boleh lihat (TANYA saya kalau ragu):
      • private    — hanya saya + Admin IT
      • department — semua orang di department saya
      • shared     — orang/grup/department tertentu (boleh termasuk mitra external yang diundang)
      • public     — SEMUA karyawan internal Esteh Group
      • public_ext — internal + PIHAK LUAR (mitra/vendor/tim outlet)
    (b) AKSES VIA = DI DOMAIN MANA project muncul (SAYA pilih di portal saat Buat/Kelola Project, bukan dari file):
      • Portal saja       — hanya portal.estehindonesia.com (internal)
      • Services saja     — hanya services.estehindonesia.com (mitra/pengaju) — mis. project tracking
      • Portal & Services  — keduanya
    ATURAN: project muncul di services HANYA JIKA Akses via = Services/Keduanya DAN visibility public/public_ext.
    - Audiens internal saja -> Akses via "Portal saja" + visibility internal.
    - Audiens pihak luar / tracking pengaju -> Akses via "Services saja" (atau Keduanya) + visibility public/public_ext.
    Pihak luar tidak pernah bisa masuk portal internal; mereka hanya lihat project yang di-share di services.

    Buat juga file project.json di root folder (catatan rekomendasi untuk saya/IT — nilai final di-set di portal):
      === FILE: <id>/project.json ===
      {
        "name": "<nama project>",
        "description": "<satu kalimat>",
        "department": "<ID-department>",
        "owner": "<nama-saya>",
        "visibility": "private | department | shared | public | public_ext",
        "surface_rekomendasi": "portal | services | both",
        "audience_note": "<untuk siapa project ini>",
        "entry": "index.html"
      }
    Kalau ragu, set visibility "private" + surface_rekomendasi "portal", lalu beri tahu saya rekomendasinya.

============================================================
OUTPUT YANG SAYA HARAPKAN
============================================================

Nama folder project saya: [GANTI_DENGAN_NAMA_FOLDER_PROJECT_ANDA]

CONTOH cara mengisi (pilih SATU sesuai project Anda, atau buat sendiri):
  - kampanye-lebaran-2026
  - dashboard-penjualan-harian
  - report-keuangan-q1-2026
  - microsite-produk-baru
  - laporan-stok-outlet

Buat folder dengan nama tersebut. SEMUA file masuk di dalamnya. JANGAN buat
file di luar folder ini.

Format output per file:

  === FILE: <id>/index.html ===
  ... isi ...

  === FILE: <id>/project.json ===
  ... isi (lihat seksi 10) ...

  === FILE: <id>/css/style.css ===
  ... isi ...

  === FILE: <id>/data/penjualan.json ===
  ... isi ...

Kalau Anda kerja di Cowork mode / Claude Code (dengan file access), tulis file
langsung ke disk di folder induk tersebut. Kalau di Claude.ai web, output dalam
blok kode di atas.

============================================================
SANITY CHECK DI AKHIR
============================================================

Setelah selesai, jelaskan dalam 5-7 poin:
1. Nama folder induk yang dibuat.
2. Tree lengkap file & folder di dalamnya.
3. File entry point (index.html).
4. Cara test lokal (double-click index.html).
5. Library CDN yang dipakai.
6. Confirmation: tidak ada file di luar folder induk yang Anda modify/buat.
7. Cara upload ke portal.

============================================================
DATA SUMBER
============================================================
[ Pilih salah satu — sesuaikan dengan mode Claude Anda:

  - COWORK MODE (folder sudah di-mount):
    "Baca semua file yang ada di folder kerja saya sekarang sebagai data sumber.
     File-file ini berisi data project saya. Pahami isinya, lalu generate
     project sesuai tugas di atas. JANGAN modify atau hapus file existing —
     hanya buat file baru (HTML/CSS/JS/JSON) atau update file yang memang
     Anda perlu update untuk project deliverable."

  - CLAUDE WEB / CLAUDE CODE:
    Attach file Anda dari OneDrive (drag ke chat). Kalau tidak punya data,
    tulis: "Tidak ada data sumber, generate dummy data realistis sesuai
    konteks tugas." ]