Bangun Website Paket Umroh Lebih Cepat dengan Vibe Coding & Shayna AI

1. Opening: Tantangan Freelancer Saat Mengerjakan Website Client

Mengerjakan project website untuk client travel umroh terlihat sederhana di awal. Client ingin sistem admin yang bisa mengelola paket, data jamaah, dan pembayaran dengan cepat. Deadline jelas, fitur jelas, dan ekspektasi profesional.

Namun dalam praktiknya, waktu sering habis di tahap awal. Menyusun layout dashboard, membuat struktur sidebar dan header, merapikan tabel data, hingga menjaga konsistensi antar halaman bisa memakan banyak waktu sebelum masuk ke logic utama.

Belum lagi revisi dari client terkait tampilan atau struktur halaman. Perubahan kecil pada navigasi atau layout bisa berdampak ke banyak bagian lain. Jika tidak dikelola dengan workflow yang tepat, proses ini bisa memperlambat delivery.

Di dunia freelance, kecepatan dan kualitas berjalan beriringan. Freelancer yang mampu membangun struktur sistem lebih cepat tanpa mengorbankan kerapihan memiliki keunggulan kompetitif.

Di sinilah pendekatan Vibe Coding dengan Shayna AI menjadi workflow modern yang lebih efisien.

2. Apa Itu Vibe Coding dan Peran Shayna AI?

Kalau kamu sering mengerjakan dashboard admin, pasti tahu polanya hampir selalu mirip. Ada sidebar, header, card statistik, tabel data, tombol aksi, form CRUD, dan seterusnya. Secara teknis tidak sulit, tapi memakan waktu jika selalu dibangun dari nol.

Di sinilah konsep Vibe Coding masuk.

Vibe Coding adalah pendekatan kerja yang memanfaatkan AI untuk mempercepat proses pembuatan struktur awal, tanpa melepas kontrol dari tangan developer. Fokusnya bukan sekadar cepat jadi, tapi cepat dan tetap terstruktur.

Dalam konteks dashboard admin, kita tidak mulai dari halaman kosong. Kita mulai dari konteks yang jelas: fitur apa yang dibutuhkan, data apa yang ditampilkan, dan bagaimana alur navigasinya. Lalu AI membantu menghasilkan fondasi UI berdasarkan deskripsi tersebut.

Di artikel ini, tool yang digunakan adalah Shayna AI — AI-powered web builder yang dirancang untuk membantu developer menghasilkan template dashboard berbasis HTML dengan cepat. Kamu cukup menuliskan kebutuhan halaman dalam bentuk prompt yang jelas, lalu Shayna AI akan menghasilkan struktur layout lengkap yang bisa langsung disimpan dan dikembangkan.

Namun penting untuk dipahami: ini bukan generate lalu kirim ke client.

Workflow yang digunakan tetap terstruktur:

• Generate satu halaman sesuai kebutuhan.
• Review struktur HTML-nya.
• Rapikan dan sesuaikan jika ada bagian yang perlu diperbaiki.
• Pastikan navigasi dan responsif berjalan baik.
• Modularisasi agar siap dikembangkan lebih lanjut.

Dengan cara ini, hasilnya bukan sekadar prototype. Yang kamu dapatkan adalah struktur dashboard yang bersih dan layak dikembangkan menjadi sistem produksi.

AI di sini berfungsi sebagai akselerator eksekusi. Sementara keputusan teknis, validasi struktur, dan penyempurnaan tetap berada di tangan developer.

3. Studi Kasus: Struktur Website Paket Umroh

Setup Workspace & Struktur Dashboard Admin Umroh

Sebelum buka Shayna AI dan mulai nulis prompt, ada satu hal penting yang nggak boleh dilewatin:

kita harus jelas dulu dashboard admin apa saja yang mau dibangun untuk travel umroh.

Tujuannya bukan biar kelihatan ribet. Justru supaya nanti pas generate UI, kita nggak asal bikin dashboard yang “keren”, tapi benar-benar sesuai kebutuhan operasional travel.

Karena yang kita bangun di sini adalah dashboard internal untuk tim travel umroh, bukan website publik.

Di tahap ini, kita posisikan diri sebagai:

owner travel, admin operasional, atau tim keuangan.

Orang yang tiap hari:

1. cek jumlah jamaah terdaftar
2. update paket umroh
3. validasi pembayaran
4. lihat laporan transaksi
5. rekap data keberangkatan

Dari sudut pandang ini, struktur halaman jadi lebih realistis dan fungsional.

Struktur Halaman yang Kita Siapkan

Sebelum generate apa pun, kita tentukan dulu halaman intinya:

1. Dashboard Overview → ringkasan jumlah jamaah, paket aktif, pembayaran masuk.
2. Kelola Paket Umroh → CRUD paket, harga, fasilitas, jadwal keberangkatan.
3. Data Jamaah → tabel pendaftar, detail data, status pembayaran.
4. Konfirmasi Pembayaran → validasi bukti transfer & update status.
5. Laporan & Rekap Data → ringkasan transaksi & export data.

Setiap halaman ini dipisah.

Satu halaman = satu file HTML.

Kenapa?

Karena target kita bukan bikin satu halaman panjang penuh komponen, tapi membangun struktur dashboard yang modular dan reusable.

Dengan cara ini:

• setiap file berdiri sendiri,
• mudah dikembangkan ke Next.js nanti,
• dan enak kalau mau integrasi backend.

Setup Workspace di VS Code

Setelah struktur jelas, sekarang baru kita buka VS Code.

Di tahap ini kita belum mikirin database, backend, atau sistem pembayaran online. Fokusnya satu:

menyiapkan template HTML dashboard admin travel umroh secara rapi dari awal.

Buat satu folder project. Misalnya:

dashboard-admin-umroh-html

Ingat, ini masih template. Bukan aplikasi final.

Di dalam folder utama, kita buat file sesuai halaman yang sudah kita rencanakan:

• index.html → Dashboard Overview
• paket.html → Kelola Paket Umroh
• jamaah.html → Data Jamaah
• pembayaran.html → Konfirmasi Pembayaran
• laporan.html → Laporan & Rekap

Isinya belum perlu lengkap. Bahkan boleh cuma struktur HTML dasar seperti ini:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Dashboard Admin Umroh</title></head><body></body></html>

Tujuan tahap ini bukan bikin UI.

Tapi menyiapkan panggungnya dulu.

Supaya nanti setiap kali kita generate dari Shayna AI:

1. kita tahu HTML mau ditempel ke file mana,
2. setiap halaman punya peran yang jelas,
3. dan struktur project tetap konsisten.

Workflow-nya jadi clean:

Generate satu halaman →

Review →

Rapikan →

Salin ke file yang sesuai →

Lanjut ke halaman berikutnya.

Kalau workspace sudah siap, baru kita masuk ke bagian paling inti:

mulai generate halaman satu per satu dengan Shayna AI, dimulai dari Dashboard Overview sebagai pusat kontrol travel umroh.

Dashboard Overview

Step 1: Buka Shayna AI dan buat project baru

Pertama, buka https://Shayna AIa.com lewat browser.

Di halaman utama, klik “Create New Project”.

Project ini akan jadi workspace khusus untuk dashboard admin travel umroh kita.

Kenapa perlu project baru?

Karena Shayna AI akan menjaga konsistensi struktur layout, sidebar, dan style antar halaman. Jadi nanti saat kita bikin halaman Paket, Jamaah, atau Laporan, semuanya tetap satu sistem desain yang sama.

Anggap ini seperti satu folder besar yang rapi untuk seluruh dashboard admin.

Step 2: Buat prompt untuk halaman Dashboard Overview

Sekarang kita fokus ke halaman pertama: Dashboard Overview.

Ini adalah pusat kontrol untuk owner atau admin travel umroh. Jadi isinya harus langsung menampilkan ringkasan bisnis, bukan detail panjang.

Yang biasanya dibutuhkan di halaman ini:

1. Total Jamaah
2. Paket Aktif
3. Pembayaran Masuk
4. Ringkasan aktivitas terbaru

Pastikan sebelum generate kamu sudah memilih tema di Shayna AI, misalnya Jakarta atau Jakarta Lite.

Untuk studi kasus ini, kita gunakan tema Jakarta supaya tampilannya clean dan profesional.

Di sini kita tidak perlu menuliskan warna atau style di prompt karena semua styling akan mengikuti tema yang dipilih.

Contoh prompt:

Buat dashboard admin travel umroh sebagai pusat kontrol operasional. Tambahkan sidebar denganmenu: Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, Laporan. Tampilkan ringkasan Total Jamaah, Paket Aktif, dan Pembayaran Masuk. Sertakan tabel aktivitas terbaru atau pendaftaran terbaru.

Beberapa hal penting:

1. Minimal 40 karakter
2. Maksimal 400 karakter
3. Jangan terlalu umum seperti “buat dashboard modern”

Semakin jelas konteksnya, semakin relevan hasilnya.

Step 3: Generate halaman

Kalau prompt sudah siap, klik Generate.

Shayna AI akan memproses deskripsi dan mengubahnya menjadi layout dashboard lengkap sesuai instruksi.

Di tahap ini jangan langsung puas.

Perhatikan:

1. Apakah sidebar sudah sesuai?
2. Apakah card statistik muncul?
3. Apakah tabel aktivitas tersedia?
4. Apakah struktur terasa logis?

Anggap ini sebagai draft pertama.

Kalau ada yang kurang pas, itu normal.

Step 4: Review hasil di Shayna AI

Setelah hasil generate muncul, sekarang waktunya masuk ke tahap review.

Jangan langsung ambil kodenya. Anggap ini sebagai draft pertama yang masih perlu dicek dengan tenang. Tujuan tahap ini adalah memastikan struktur sudah sesuai sebelum kita lanjut ke Layers atau UI Edit Mode.

Mulailah dari sidebar. Perhatikan apakah urutan menu sudah sama seperti yang kita minta di prompt. Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, dan Laporan harus tampil dalam susunan yang konsisten. Sidebar adalah tulang punggung navigasi, jadi bagian ini tidak boleh berubah-ubah atau tertukar.

Setelah itu, lihat bagian statistik utama di area atas. Pastikan Total Jamaah, Paket Aktif, dan Pembayaran Masuk tampil jelas dan memiliki hierarki visual yang kuat. Angka harus mudah terbaca dan tidak terlalu kecil. Bagian ini adalah pusat perhatian utama dashboard.

Lanjut ke struktur konten di bawahnya. Periksa apakah tabel atau aktivitas terbaru benar-benar muncul sesuai instruksi. Pastikan layout terasa rapi dan tidak terlalu padat.

Di tahap review ini, minimal pastikan dua hal berikut benar-benar terpenuhi:

• Struktur navigasi konsisten dan tidak ada menu yang hilang
• Elemen utama (stat card dan tabel) benar-benar muncul sesuai prompt

Terakhir, cek responsif dengan berpindah ke mode tablet dan mobile. Pastikan sidebar bisa collapse dengan baik, kartu statistik tetap terbaca, dan tabel masih nyaman digunakan. Dashboard admin harus usable di berbagai ukuran layar, bukan hanya terlihat bagus di desktop.

Step 5: Cek Layers & Project Files

Sebelum mengambil kode HTML, jangan langsung lompat ke Code View. Ada satu tahap penting yang sering dilewatkan, yaitu mengecek bagian Layers.

Masuk ke menu Layers dan perhatikan bagaimana struktur halaman tersusun. Di sini kita bisa melihat apakah layout yang di-generate memang rapi secara struktur, bukan hanya terlihat bagus secara visual.

Pastikan beberapa hal dasar ini terpenuhi:

1. Header, sidebar, dan main content terpisah dengan jelas
2. Card statistik berada dalam satu section yang terstruktur
3. Tabel tidak bercampur atau menumpuk dengan komponen lain

Tujuannya sederhana: memastikan struktur halaman modular dan logis. Kalau susunan layer sudah rapi, biasanya kode HTML yang dihasilkan juga lebih bersih dan mudah dikelola.

Setelah itu, lanjutkan dengan mengecek Project Files. Pastikan halaman Dashboard (atau halaman yang sedang dibuat) tersimpan sebagai halaman terpisah di dalam project, bukan menimpa halaman lain yang sudah ada.

Langkah ini penting supaya setiap halaman benar-benar berdiri sendiri dan tidak tertukar dengan hasil generate sebelumnya. Dengan begitu, struktur project tetap terorganisir dan mudah dikembangkan ke depannya

Step 6: Rapikan dengan UI Edit Mode

Sekarang masuk ke tahap penyempurnaan melalui UI Edit Mode di Shayna AI.

Di tahap ini kita belum menyentuh kode. Fokusnya adalah merapikan tampilan supaya hasil akhirnya terlihat profesional dan siap langsung dipakai. Jangan biarkan halaman terlihat seperti template mentah yang belum disentuh.

Ada beberapa hal penting yang perlu diperhatikan:

1. Ganti semua teks dummy dengan konteks travel umroh yang realistis
2. Sesuaikan istilah seperti “Total Jamaah” dan “Paket Aktif” agar konsisten
3. Rapikan spacing antar card dan antar section
4. Pastikan tidak ada placeholder aneh atau data contoh yang tertinggal

Perhatikan juga konsistensi penulisan, format angka (misalnya Rp 25.000.000), serta keseimbangan jarak antar elemen. Dashboard yang rapi bukan hanya soal desain, tapi juga soal detail kecil yang terlihat profesional.

Tujuan tahap ini sederhana: saat nanti kita membuka Code View dan menyalin HTML, hasilnya sudah bersih, konsisten, dan siap langsung dimasukkan ke project tanpa perlu banyak revisi ulang

Step 7: Salin HTML ke VS Code

Kalau tampilan di UI Edit Mode sudah benar-benar rapi dan sesuai kebutuhan, sekarang waktunya masuk ke tahap teknis: mengambil kodenya.

Buka menu Code View di Shayna AI. Di sana kamu akan melihat struktur HTML lengkap dari halaman yang sudah kita generate dan rapikan tadi. Jangan hanya menyalin sebagian, pastikan seluruh struktur HTML diambil supaya tidak ada bagian yang tertinggal.

Langkahnya sederhana:

1. Salin seluruh kode HTML yang ditampilkan
2. Buka project kamu di VS Code
3. Masuk ke file yang sesuai, misalnya index.html untuk dashboard utama
4. Replace seluruh isi file dengan kode dari Shayna AI
5. Simpan perubahan

Pastikan kamu menempelkan kode ke file yang benar sesuai struktur project yang sudah disiapkan di awal. Jika ini halaman Dashboard, maka masuk ke index.html. Jika ini halaman lain seperti Paket atau Jamaah, pastikan ditempel di file yang sesuai seperti paket.html atau jamaah.html.

Setelah disimpan, barulah kita lanjut ke tahap menjalankan file di browser untuk memastikan tampilannya sama persis seperti preview di Shayna AI

Step 8: Jalankan di browser

Klik kanan index.html → pilih Open with Live Server.

Browser akan terbuka dan menampilkan halaman Dashboard Overview.

Periksa:

1. Tidak ada error
2. Sidebar tampil normal
3. Card statistik rapi
4. Layout responsif saat diperkecil

Kalau semua berjalan lancar, berarti halaman pertama dashboard admin travel umroh sudah berhasil dibuat dari nol sampai jalan di browser

Kelola Paket Umroh

Step 1: Tambahkan halaman baru di project yang sama

Masuk kembali ke project dashboard admin travel umroh yang sudah kita buat di Shayna AI. Tidak perlu membuat project baru, karena tujuan kita adalah menjaga konsistensi tema, sidebar, dan style di seluruh halaman. Dengan tetap menggunakan project yang sama, navigasi antar halaman akan tetap rapi dan mudah di-manage.

Klik Create New Page atau fitur tambah halaman yang tersedia di workspace. Beri nama halaman baru ini: Kelola Paket Umroh. Halaman ini nantinya berfungsi sebagai pusat pengelolaan paket, termasuk menambahkan, mengedit, atau menghapus paket umroh, mengatur harga, fasilitas, dan jadwal keberangkatan.

Dengan setup ini, setiap halaman tetap terstruktur dalam satu sistem, sehingga saat kita generate layout dengan Shayna AI, sidebar dan tema akan otomatis konsisten dengan halaman sebelumnya. Ini memudahkan workflow dan menjaga project tetap rapi.

Step 2: Buat prompt untuk halaman Kelola Paket

Sekarang kita fokus ke halaman manajemen paket. Halaman ini digunakan oleh admin sebagai pusat kontrol untuk semua paket umroh. Dari sini, admin bisa menambahkan paket baru, mengedit paket yang sudah ada, menghapus paket, hingga mengatur harga, fasilitas, dan jadwal keberangkatan.

Layout halaman biasanya mencakup tabel daftar paket, tombol “Tambah Paket”, serta form modal atau halaman khusus untuk menambah dan mengedit data. Setiap baris paket menampilkan informasi lengkap, termasuk harga, tanggal keberangkatan, fasilitas, dan status paket.

Penting untuk tetap menggunakan tema yang sama seperti halaman Dashboard sebelumnya (misalnya Jakarta) supaya tampilan konsisten dan navigasi antar halaman tetap rapi.

Contoh prompt untuk Shayna AI:

Buat halaman admin untuk kelola paket umroh. Tambahkan sidebar yang sama seperti dashboard sebelumnya. Tampilkan tabel daftar paket dengan kolom Nama Paket, Harga, Tanggal Keberangkatan, Fasilitas, dan Status. Sediakan tombol Tambah Paket serta aksi Edit dan Hapus di setiap baris.

Ketentuan nge-prompt di Shayna AI

• Panjang prompt: minimal 40 karakter, maksimal 400 karakter. Jangan terlalu pendek agar AI memahami konteks, tapi jangan terlalu panjang sampai membingungkan.
• Jelas dan spesifik: jelaskan fungsi halaman, elemen yang dibutuhkan, dan siapa penggunanya.
• Fokus pada struktur: jangan menyertakan detail warna atau styling berlebihan, biarkan tema yang dipilih mengatur tampilan.
• Satu prompt = satu halaman: supaya hasil HTML modular dan mudah ditempatkan di project.
• Review hasil: setelah generate, selalu cek struktur sidebar, tabel, tombol, dan ringkasan informasi sebelum lanjut ke UI Edit Mode.

Dengan ketentuan ini, hasil yang di-generate Shayna AI akan relevan, bersih, dan siap untuk masuk ke workflow edit dan integrasi di VS Code.

Step 3: Generate halaman

Klik Generate.

Shayna AI akan memproses prompt dan membuat struktur halaman Kelola Paket Umroh sesuai instruksi. Hasilnya biasanya sudah menampilkan tabel daftar paket, tombol Tambah Paket, serta aksi Edit dan Hapus di setiap baris.

Setelah halaman muncul, jangan langsung ambil kode. Anggap ini sebagai draft pertama. Yang perlu dilakukan sekarang adalah review. Pastikan beberapa hal penting:

1. Tabel daftar paket sesuai kolom yang diminta (Nama Paket, Harga, Tanggal Keberangkatan, Fasilitas, Status).
2. Tombol Tambah Paket terlihat jelas dan mudah diakses.
3. Tombol Edit dan Hapus tersedia di setiap baris untuk kemudahan manajemen.
4. Sidebar konsisten dengan halaman Dashboard, sehingga navigasi antar halaman tetap rapi dan intuitif.
5. Struktur halaman logis: header, sidebar, main content, footer, dan setiap komponen tidak bercampur.

Di tahap ini, kita belum menyentuh kode HTML. Tujuannya adalah memastikan layout sudah sesuai fungsi, navigasi jelas, dan semua elemen penting terlihat sebelum masuk ke tahap edit dan copy ke VS Code.

Kalau semua sudah sesuai, baru lanjut ke langkah berikutnya: cek Layers & Project Files, kemudian masuk ke UI Edit Mode untuk merapikan tampilan sebelum ambil kode.

Step 4: Review tampilan & responsif

Sekarang kita masuk ke tahap review halaman Kelola Paket Umroh. Ini tahap penting sebelum menyalin kode ke project karena kita ingin memastikan layout sudah siap dipakai admin dan konsisten dengan halaman lain.

Hal-hal yang perlu diperhatikan:

1. Tabel daftar paket harus jelas, kolom tidak terlalu padat, dan informasi mudah dibaca.
2. Spacing antar kolom rapi, sehingga setiap baris data terlihat terstruktur dan nyaman dilihat.
3. Semua tombol aksi — Tambah Paket, Edit, Hapus — mudah terlihat, responsif, dan mudah diakses.
4. Sidebar tetap konsisten dengan halaman Dashboard, sehingga navigasi antar menu terasa satu sistem.

Selanjutnya, cek tampilan responsif. Ingat, admin bisa membuka dashboard dari desktop, tablet, maupun mobile, jadi layout harus fleksibel:

1. Desktop – pastikan semua kolom tabel terbaca dengan jelas dan layout card statistik rapi.
2. Tablet – sidebar collapse dengan baik, tabel masih nyaman dibaca, tombol aksi tetap jelas.
3. Mobile – tabel yang panjang biasanya muncul scroll horizontal; pastikan card statistik, tombol aksi, dan navigasi tetap mudah dijangkau.

Tahap review ini bukan sekadar mengecek “kelihatan enak”. Tujuannya memastikan halaman logis digunakan admin sehari-hari, data mudah dibaca, dan navigasi tetap konsisten dengan halaman lain.

Step 5: Rapikan di UI Edit Mode

Sekarang masuk ke tahap penyempurnaan halaman Kelola Paket Umroh. Tujuannya supaya halaman bukan sekadar tampilan, tapi terasa seperti dashboard admin travel sungguhan.

Beberapa hal yang perlu diperhatikan:

1. Ganti semua data dummy dengan contoh paket umroh yang realistis. Misalnya nama paket populer, fasilitas yang umum tersedia, dan kuota peserta.
2. Format harga harus jelas dan konsisten, contohnya Rp 28.000.000, agar admin mudah membaca dan menghitung total pembayaran.
3. Tanggal keberangkatan ditampilkan dengan jelas, supaya informasi jadwal paket langsung terlihat tanpa harus klik detail.
4. Konsistensi istilah dengan halaman Dashboard. Misalnya “Total Jamaah” dan “Paket Aktif” sama istilahnya, agar seluruh project terasa satu sistem.

Tahap ini membuat halaman lebih profesional dan siap dipakai sehari-hari. Kalau semua sudah rapi, kita bisa lanjut ke tahap ambil HTML dan simpan ke project di VS Code, sehingga hasil generate dari Shayna AI benar-benar bisa digunakan langsung.

Step 6: Salin HTML ke VS Code

Sekarang masuk ke tahap penyempurnaan halaman Kelola Paket Umroh. Tujuannya supaya halaman bukan sekadar tampilan, tapi terasa seperti dashboard admin travel sungguhan.

Beberapa hal yang perlu diperhatikan:

1. Ganti semua data dummy dengan contoh paket umroh yang realistis. Misalnya nama paket populer, fasilitas yang umum tersedia, dan kuota peserta.
2. Format harga harus jelas dan konsisten, contohnya Rp 28.000.000, agar admin mudah membaca dan menghitung total pembayaran.
3. Tanggal keberangkatan ditampilkan dengan jelas, supaya informasi jadwal paket langsung terlihat tanpa harus klik detail.
4. Konsistensi istilah dengan halaman Dashboard. Misalnya “Total Jamaah” dan “Paket Aktif” sama istilahnya, agar seluruh project terasa satu sistem.

Tahap ini membuat halaman lebih profesional dan siap dipakai sehari-hari. Kalau semua sudah rapi, kita bisa lanjut ke tahap ambil HTML dan simpan ke project di VS Code, sehingga hasil generate dari Shayna AI benar-benar bisa digunakan langsung.

Step 7: Jalankan di browser

Setelah semua rapih, sekarang waktunya menjalankan halaman di browser.

Klik kanan file paket.html → pilih Open with Live Server. Browser akan otomatis menampilkan halaman dashboard admin untuk Kelola Paket Umroh.

Perhatikan beberapa hal penting:

1. Sidebar tetap tampil konsisten dengan halaman lain, agar navigasi antar menu terasa satu sistem.
2. Tabel paket muncul lengkap dengan kolom Nama Paket, Harga, Tanggal Keberangkatan, Fasilitas, dan Status.
3. Tombol aksi seperti Tambah, Edit, dan Hapus terlihat jelas dan mudah diklik.
4. Layout keseluruhan tidak rusak, spacing antar elemen rapi, dan halaman tetap responsif di berbagai ukuran layar.

Kalau semua tampilan dan fungsi sudah sesuai, berarti halaman Kelola Paket Umroh siap digunakan dan menjadi bagian utuh dari dashboard admin travel.

Langkah berikutnya tinggal lanjut ke halaman Data Jamaah, menggunakan workflow dan project yang sama agar konsistensi tetap terjaga.

Data Jamaah

Step 1: Tambahkan halaman baru di project yang sama

Masuk kembali ke project dashboard admin travel umroh yang sebelumnya sudah kita buat di Shayna AI.

Kita tidak perlu membuat project baru. Cukup tambahkan halaman baru di dalam project yang sama supaya tema, style, dan sidebar tetap konsisten di semua halaman.

Klik Create New Page atau fitur tambah halaman di workspace, lalu beri nama halaman: Data Jamaah.

Dengan menambahkan halaman di project yang sama, kita memastikan:

• Tema tetap konsisten dengan halaman Dashboard dan Kelola Paket.
• Sidebar tidak berubah, sehingga navigasi antar halaman terasa satu kesatuan.
• Struktur desain dan komponen mudah diatur karena semua halaman berada dalam satu project.

Halaman ini nantinya akan digunakan admin untuk mengelola data jamaah, melihat status pembayaran, dan menampilkan detail pendaftar dengan format tabel yang jelas.

Langkah berikutnya adalah menyiapkan prompt untuk halaman ini di Shayna AI agar proses generate berjalan lancar dan hasil layout sesuai kebutuhan admin.

Step 2: Buat prompt untuk halaman Data Jamaah

Untuk halaman Data Jamaah, kita tetap gunakan tema Jakarta. Tema ini sudah dipilih sejak Dashboard dan Kelola Paket supaya seluruh dashboard admin travel umroh tampil konsisten, modern, dan rapi. Dengan tema yang sama, semua halaman terasa satu kesatuan, navigasi nyaman, dan style antar halaman tidak berbeda-beda.

Ketentuan buat prompt di Shayna AI:

Prompt harus jelas, spesifik, dan berada dalam batas 40–400 karakter. Jangan terlalu pendek sampai ambigu, tapi juga jangan kepanjangan sampai bertele-tele. Fokus prompt pada:

1. Siapa pengguna halaman – admin atau staf travel umroh.
2. Fungsi halaman – memantau pendaftar, status pembayaran, dan detail data jamaah.
3. Konten utama – tabel daftar jamaah, filter status pembayaran, tombol aksi untuk detail.
4. Konsistensi desain – pakai tema Jakarta, sidebar tetap sama seperti halaman lain.

Contoh prompt yang tepat:

Buat halaman admin travel umroh untuk Data Jamaah dengan tema Jakarta. Sidebar: Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, Laporan. Tampilkan tabel daftar jamaah dengan kolom Nama, Paket, Nomor Telepon, Status Pembayaran, dan Tanggal Daftar. Tambahkan filter status pembayaran serta tombol Detail di setiap baris.

Dengan mengikuti ketentuan ini, hasil generate dari Shayna AI langsung relevan, rapi, dan siap direview. Struktur tabel dan sidebar akan konsisten, sehingga saat kita lanjut ke edit, review, dan copy ke VS Code, semua lebih cepat dan workflow tetap teratur.

Step 3: Generate halaman

Klik Generate setelah prompt siap. Shayna AI akan memproses deskripsi yang kita tulis dan menampilkan layout halaman Data Jamaah sesuai instruksi.

Setelah layout muncul, jangan langsung ambil kodenya. Anggap ini sebagai draft pertama. Sekarang waktunya review hasil supaya struktur dan konten sesuai kebutuhan. Periksa beberapa hal penting:

1. Sidebar tetap konsisten dengan halaman sebelumnya, menu urutannya sama dan mudah dinavigasi.
2. Tabel daftar jamaah muncul lengkap, dengan kolom Nama, Paket, Nomor Telepon, Status Pembayaran, dan Tanggal Daftar.
3. Filter status pembayaran (Lunas / DP / Belum Bayar) tersedia dan bisa digunakan untuk mempermudah pencarian.
4. Tombol Detail ada di setiap baris dan jelas terlihat.

Kalau ada bagian yang kurang sesuai, jangan panik. Kita bisa refine prompt atau langsung edit di Shayna AI untuk menyesuaikan tampilan dan fungsionalitas. Ini memastikan setiap halaman relevan, rapi, dan siap digunakan sebelum masuk tahap copy HTML ke VS Code.

Tips BWA: Semakin jelas konteks dan kebutuhan yang ditulis di prompt, semakin pas hasil generate Shayna AI. Jangan takut menambahkan detail kecil tapi penting, misalnya jumlah kolom, nama field, atau urutan menu di sidebar.

Step 4: Review tampilan & responsif

Sekarang waktunya review hasil generate Data Jamaah dengan teliti. Anggap ini sebagai draft pertama, fokus ke keterbacaan dan konsistensi.

Perhatikan beberapa hal penting:

1. Status Pembayaran terlihat jelas, misalnya menggunakan badge warna untuk Lunas, DP, atau Belum Bayar.
2. Filter status mudah ditemukan dan bisa langsung dipakai untuk menyaring data jamaah.
3. Tabel tidak terlalu padat, kolom dan baris masih nyaman dibaca tanpa membuat layar terasa penuh.
4. Sidebar tetap konsisten dengan halaman lain, menu mudah dinavigasi dan urutannya sama.

Selain itu, jangan lupa cek responsif tampilan:

1. Desktop → pastikan tabel dan badge terlihat rapi, tidak terpotong.
2. Tablet → sidebar mungkin collapse, tapi tabel masih terbaca jelas.
3. Mobile → sidebar collapsible, tabel bisa di-scroll horizontal jika diperlukan, badge tetap terlihat.

Tujuannya supaya dashboard admin travel umroh tetap usable dan nyaman di berbagai ukuran layar, bukan cuma di desktop.

Tip BWA: Jangan langsung puas dengan tampilan di desktop saja. Banyak admin buka dashboard dari tablet atau HP, jadi pastikan semua informasi tetap mudah diakses.

Step 5: Rapikan di UI Edit Mode

Sebelum ambil HTML dari Shayna AI, jangan buru-buru dulu. Kita rapikan dulu biar hasilnya rapi dan siap dipakai.

Beberapa hal yang bisa dicek dan diperbaiki:

1. Ganti semua data dummy dengan nama jamaah yang realistis, biar nggak terlihat kayak template generik.
2. Gunakan status pembayaran yang nyambung sama kenyataan, misal “Lunas”, “DP”, atau “Belum Bayar”.
3. Pastikan istilah sama dengan halaman Dashboard dan Kelola Paket, supaya konsisten dan nggak bikin bingung.
4. Rapikan alignment dan spacing. Pastikan tabel, badge, dan tombol Detail terlihat rapi dan nyaman dibaca.

Tujuannya simpel: halaman ini nanti terasa nyata, kayak sistem admin travel umroh sungguhan, bukan cuma demo template.

Tip BWA: sedikit effort di tahap ini bakal bikin HTML yang diambil dari Shayna AI langsung enak dipakai, nggak perlu banyak edit lagi.

Step 6: Salin HTML ke VS Code

Kalau halaman Data Jamaah udah rapi dan semua isinya sesuai, saatnya ambil kodenya. Jangan lupa, langkah ini penting supaya hasil generate dari Shayna AI bisa langsung jadi bagian project kita.

Caranya gampang:

1. Buka Code View di Shayna AI Di sini kamu bisa lihat seluruh struktur HTML dari halaman Data Jamaah yang sudah di-generate dan dirapikan.
2. Salin seluruh kode HTML Pastikan seluruh isi halaman ter-copy, dari <html> sampai </html>.
3. Buka VS Code dan masuk ke folder project.
4. Buka file jamaah.html Kalau belum ada, buat file baru dengan nama itu supaya struktur project tetap rapi dan konsisten.
5. Replace seluruh isi file dengan kode dari Shayna AI Paste HTML yang sudah disalin, dan timpa file lama jika sebelumnya ada.
6. Simpan file Ctrl+S (Windows) / Cmd+S (Mac) supaya semua perubahan tersimpan.

Tips BWA: pastikan kamu menempelkan kode di file yang benar sesuai struktur project. Kalau salah file, bisa bikin sidebar atau link antar halaman nggak nyambung.

Setelah ini, kita bisa lanjut buka file di browser pakai Live Server, cek tampilannya, dan pastikan semua sidebar, tabel, dan tombol Detail tampil sempurna.

Step 7: Jalankan di browser

Setelah kode HTML Data Jamaah berhasil ditempel di file jamaah.html, sekarang waktunya cek hasil akhirnya langsung di browser. Cara paling gampang adalah pakai Live Server di VS Code.

1. Klik kanan pada file jamaah.html → pilih Open with Live Server.
2. Browser akan terbuka menampilkan halaman Data Jamaah.

Sekarang kita periksa beberapa hal penting supaya yakin halaman sudah siap pakai:

1. Sidebar tetap konsisten Pastikan menu Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, dan Laporan tampil rapi seperti halaman sebelumnya.
2. Tabel jamaah tampil lengkap Semua kolom yang dibuat di prompt muncul, mulai dari Nama, Paket, Nomor Telepon, Status Pembayaran, sampai tombol Detail.
3. Filter status pembayaran terlihat jelas Pengguna bisa langsung pilih Lunas / DP / Belum Bayar tanpa bingung.
4. Layout responsif berjalan baik Cek di mode Desktop, Tablet, dan Mobile. Sidebar collapse di mobile, tabel tetap terbaca, dan card statistik terlihat jelas.

Kalau semua bagian di atas sudah aman dan tidak ada yang berantakan, berarti halaman Data Jamaah berhasil dibuat dengan workflow Vibe Coding & Shayna AI yang rapi, modular, dan siap dikembangkan lebih lanjut.

Konfirmasi Pembayaran

Step 1: Tambahkan halaman baru di project yang sama

Sekarang kita bakal bikin halaman khusus untuk Konfirmasi Pembayaran. Halaman ini penting karena admin perlu ngecek bukti transfer dan update status pembayaran jamaah secara cepat.

Langkahnya gampang:

1. Masuk ke project dashboard admin travel umroh yang sebelumnya sudah dibuat di Shayna AI.
2. Klik Create New Page atau ikon tambah halaman di workspace.
3. Beri nama halaman: Konfirmasi Pembayaran.

Kita tetap menggunakan project yang sama supaya:

1. Sidebar konsisten dengan halaman-halaman sebelumnya (Dashboard, Kelola Paket, Data Jamaah, Laporan).
2. Tema tetap sama, misalnya Jakarta, sehingga tampilan antar halaman seragam.
3. Navigasi antar halaman berjalan lancar, nggak perlu bikin ulang dari awal.

Dengan begitu, setiap halaman akan berada dalam satu sistem yang rapi dan modular. Nanti kita tinggal generate UI pakai Shayna AI untuk halaman ini tanpa khawatir style atau layout berbeda dari halaman sebelumnya.

Setelah halaman berhasil dibuat, kita bisa lanjut ke tahap menentukan fungsi utama dan bikin prompt supaya Shayna AI bisa generate struktur UI-nya.

Step 2: Buat prompt untuk halaman Konfirmasi Pembayaran

Sekarang kita masuk ke inti: bikin prompt yang bakal dikirim ke Shayna AI supaya halaman Konfirmasi Pembayaran muncul sesuai kebutuhan.

Halaman ini dipakai admin untuk ngecek semua pembayaran jamaah, nge-validate bukti transfer, dan update status dengan cepat. Jadi kita perlu jelas banget saat bikin prompt supaya hasil generate langsung usable.

Contoh prompt yang bisa dipakai:

Buat halaman admin travel umroh untuk Konfirmasi Pembayaran. Gunakan sidebar dengan menu: Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, Laporan. Tampilkan tabel daftar pembayaran dengan kolom Nama Jamaah, Paket, Nominal Transfer, Tanggal Transfer, dan Status. Tambahkan tombol Lihat Bukti, Setujui, dan Tolak untuk update status pembayaran.

Beberapa catatan penting supaya prompt efektif:

• Pastikan sidebar sama persis seperti halaman sebelumnya, biar navigasi konsisten.
• Fokus pada fungsi halaman, bukan styling — tema dan warna bakal otomatis mengikuti tema project (misalnya Jakarta).
• Panjang prompt harus sesuai batas Shayna AI: minimal 40 karakter, maksimal 400 karakter. Jangan terlalu pendek, tapi jangan juga bertele-tele.
• Semakin detail deskripsi fungsinya, semakin relevan hasil generate. Misalnya, jelasin kolom tabel, tombol aksi, atau status pembayaran.

Dengan prompt ini, Shayna AI bakal bisa generate layout halaman yang langsung siap dipakai, tinggal di-review, rapikan, dan salin ke VS Code.

Step 3: Generate halaman

Setelah prompt siap, klik Generate di Shayna AI. Dalam beberapa detik, layout halaman bakal muncul.

Ini yang perlu dicek dulu sebelum ambil kodenya:

1. Sidebar tetap konsisten dengan halaman sebelumnya, urutan menu sama persis.
2. Tabel pembayaran muncul lengkap, dengan semua kolom sesuai yang diminta: Nama Jamaah, Paket, Nominal Transfer, Tanggal Transfer, dan Status.
3. Tombol aksi seperti Lihat Bukti, Setujui, dan Tolak tersedia di setiap baris.
4. Status pembayaran tampil jelas, mudah dibaca (misal menggunakan badge atau highlight warna).

Anggap ini masih draft pertama. Jangan buru-buru ambil kodenya. Fokus dulu pastikan semua elemen penting muncul dan sesuai kebutuhan admin.

Kalau ada yang kurang, bisa langsung refine prompt atau nanti edit di Shayna AI sebelum masuk ke tahap review dan rapikan UI.

Step 4: Review tampilan & responsif

Sekarang jangan cuma lihat sekilas. Cek lebih teliti, bayangkan kamu adalah admin yang setiap hari pakai halaman ini untuk validasi pembayaran.

Beberapa hal yang perlu diperhatikan:

1. Struktur tabel rapi atau tidak? Header tabel jelas, jarak antar kolom enak dilihat, dan tidak terlalu padat.
2. Nominal transfer mudah terbaca? Format angka harus jelas, misalnya Rp 25.000.000, jangan sampai terlalu kecil atau sulit dibedakan.
3. Tombol aksi proporsional? Tombol Lihat Bukti, Setujui, dan Tolak tidak terlalu kecil, tidak saling menempel, dan mudah diklik.

Setelah itu, lanjut cek preview di berbagai ukuran layar:

1. Desktop → Semua kolom terlihat lengkap dan tidak terpotong.
2. Tablet → Sidebar collapse dengan baik, tabel tetap nyaman dibaca.
3. Mobile → Kalau tabel panjang dan muncul scroll horizontal, itu masih wajar. Yang penting tombol aksi tetap bisa diakses dan status pembayaran tetap jelas.

Tujuan tahap ini simpel: pastikan halaman ini benar-benar usable buat admin, bukan cuma terlihat bagus di preview desktop saja.

Kalau semua sudah oke, baru kita lanjut ke tahap rapikan UI dan ambil HTML untuk dimasukkan ke project

Step 5: Cek Layers & Project Files

Sebelum kita rapikan tampilannya, masuk dulu ke bagian Layers.

Di sini perhatikan:

1. Apakah struktur sidebar terpisah jelas dari main content?
2. Apakah tabel pembayaran berada dalam satu section yang rapi?
3. Apakah tombol aksi berada di dalam kolom yang benar?

Tujuannya supaya struktur HTML nantinya bersih dan tidak bercampur.

Setelah itu cek juga Project Files.

Pastikan halaman Konfirmasi Pembayaran tersimpan sebagai halaman terpisah, tidak menimpa halaman Dashboard, Paket, atau Jamaah.

Ini penting supaya struktur project tetap modular dan terorganisir.

Step 6: Rapikan dengan UI Edit Mode

Sekarang baru kita rapikan tampilannya. Jangan biarkan halaman ini terlihat seperti template mentah yang baru saja di-generate.

Beberapa hal yang bisa kamu perbaiki:

1. Ganti semua data dummy dengan contoh yang realistis. Misalnya nama jamaah yang masuk akal, paket umroh yang benar-benar ada, dan tanggal transfer yang relevan.
2. Gunakan format nominal yang konsisten, seperti Rp 25.000.000. Hindari angka polos tanpa pemisah ribuan karena sulit dibaca.
3. Samakan istilah status pembayaran, misalnya gunakan “Menunggu”, “Lunas”, dan “Ditolak” secara konsisten. Jangan campur dengan istilah lain di halaman berbeda.
4. Rapikan alignment tombol aksi. Pastikan tombol Lihat Bukti, Setujui, dan Tolak sejajar, jaraknya pas, dan tidak terlihat berantakan.

Detail kecil seperti ini yang membedakan antara sekadar demo layout dan dashboard admin yang benar-benar siap dipakai.

Step 7: Salin HTML ke VS Code

Kalau halaman Konfirmasi Pembayaran sudah rapi, data realistis, istilah konsisten, dan tombol tertata dengan baik — sekarang baru kita ambil kodenya.

Langkahnya seperti ini:

1. Buka Code View di Shayna AI Di sini kamu akan melihat seluruh struktur HTML dari halaman yang sudah kita generate dan rapikan.
2. Salin seluruh HTML Pastikan ter-copy semua, dari tag pembuka sampai penutup. Jangan sampai ada bagian yang terlewat.
3. Masuk ke VS Code Buka folder project dashboard admin travel umroh yang sudah kita siapkan sebelumnya.
4. Buka file pembayaran.html Kalau file belum ada, buat file baru dengan nama tersebut supaya struktur tetap modular dan rapi.
5. Replace seluruh isi file Hapus isi lama (jika ada), lalu paste HTML dari Shayna AI ke dalam file tersebut.
6. Simpan file Tekan Ctrl + S (Windows) atau Cmd + S (Mac) untuk memastikan perubahan tersimpan.

Pastikan kamu menempelkan kode di file yang benar. Jangan sampai tertukar dengan dashboard.html, paket.html, atau jamaah.html, karena itu bisa bikin struktur project berantakan.

Kalau sudah tersimpan, kita bisa lanjut buka dengan Live Server untuk memastikan sidebar, tabel pembayaran, dan tombol aksi tampil sempurna di browser

Step 8: Jalankan di browser

Setelah file pembayaran.html tersimpan di VS Code, sekarang saatnya tes langsung di browser.

Klik kanan pembayaran.html → pilih Open with Live Server.

Browser akan otomatis terbuka dan menampilkan halaman Konfirmasi Pembayaran.

Sekarang kita lakukan pengecekan terakhir:

1. Sidebar konsisten Pastikan menu Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, dan Laporan tampil sama seperti halaman lain.
2. Tabel pembayaran tampil normal Semua kolom muncul lengkap, tidak ada yang terpotong atau berantakan.
3. Tombol aksi terlihat jelas Lihat Bukti, Setujui, dan Tolak mudah diklik dan tidak saling menempel.
4. Tidak ada layout yang rusak Cek spacing, alignment, dan responsif di Desktop maupun Mobile.

Kalau semuanya berjalan lancar tanpa error atau tampilan aneh, berarti halaman Konfirmasi Pembayaran sudah selesai dengan workflow Vibe Coding yang rapi dan modular.

Sekarang dashboard admin travel umroh kita sudah punya:

Dashboard, Kelola Paket, Data Jamaah, dan Konfirmasi Pembayaran — tinggal lanjut ke tahap berikutnya kalau mau dikembangkan lebih jauh.

Laporan & Rekap Data

Step 1: Tambahkan halaman baru di project yang sama

Masuk kembali ke project dashboard admin travel umroh yang sudah kita gunakan sejak awal pembuatan sistem.

Pastikan kamu tidak keluar dari project utama, karena seluruh halaman — mulai dari Dashboard, Kelola Paket, Data Jamaah, sampai Konfirmasi Pembayaran — sudah berada dalam satu struktur yang sama. Konsistensi ini penting agar desain dan navigasi tidak berubah-ubah.

Setelah berada di dalam workspace project tersebut, klik tombol Create New Page.

Langkah ini akan menambahkan halaman baru tanpa mengganggu halaman-halaman yang sudah kita buat sebelumnya.

Beri nama halaman tersebut: Laporan & Rekap Data.

Penamaan halaman sebaiknya jelas dan sesuai dengan fungsinya, karena nantinya ini akan memudahkan saat kita mengelola file, mengecek Project Files, maupun saat menyalin kode ke VS Code.

Kita tetap menggunakan project dan tema yang sama seperti sebelumnya (misalnya tema Jakarta), dengan beberapa alasan penting:

1. Sidebar tidak berubah Menu seperti Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, dan Laporan harus tetap sama agar user tidak bingung saat berpindah halaman.
2. Struktur desain tetap konsisten Spacing, ukuran font, warna primary, dan layout grid akan mengikuti sistem desain yang sudah terbentuk sejak halaman pertama.
3. Navigasi antar halaman tetap satu sistem Karena semua halaman berada dalam satu project, transisi antar halaman terasa menyatu, bukan seperti template yang ditempel secara terpisah.

Dengan cara ini, dashboard admin travel umroh kita tetap terlihat profesional, terstruktur, dan scalable jika nanti ingin ditambahkan fitur lain seperti manajemen user atau pengaturan sistem.

Step 2: Buat prompt untuk halaman Laporan

Halaman Laporan & Rekap Data ini digunakan oleh owner atau admin untuk melihat ringkasan transaksi dan performa bisnis. Fokusnya bukan input data, melainkan monitoring dan pelaporan.

Di halaman ini biasanya ada ringkasan angka di bagian atas (total transaksi, total pembayaran masuk, jumlah jamaah per paket), lalu tabel rekap transaksi, serta tombol Export Data untuk mengunduh laporan.

Sebelum menulis prompt di Shayna AI, ingat lagi dua hal penting:

1. Minimal 40 karakter
2. Maksimal 400 karakter

Jangan terlalu pendek seperti “buat halaman laporan”, karena hasilnya akan terlalu umum. Tapi juga jangan terlalu panjang dan bertele-tele.

Cara membuat prompt di Shayna AI cukup sederhana. Tulis seperti memberi briefing ke desainer: jelaskan konteks halaman, siapa yang menggunakan, dan komponen apa saja yang harus muncul. Tidak perlu menuliskan warna atau styling karena semuanya mengikuti tema yang sudah dipilih sebelumnya.

Contoh prompt:

Buat halaman admin travel umroh untuk Laporan dan Rekap Data. Gunakan sidebar dengan menu: Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, Laporan. Tampilkan ringkasan total transaksi, total pembayaran masuk, dan jumlah jamaah per paket. Sertakan tabel rekap transaksi serta tombol Export Data.

Kalau sudah sesuai batas karakter dan instruksinya jelas, baru klik Generate dan lanjut ke tahap review seperti biasa

Step 3: Generate halaman

Klik Generate untuk mulai memproses prompt yang sudah kita tulis.

Biasanya dalam beberapa detik, Shayna AI akan menampilkan layout lengkap sesuai instruksi. Jangan langsung ambil kodenya. Anggap hasil pertama ini sebagai draft awal yang masih perlu dicek dan dievaluasi.

Setelah layout muncul, perhatikan beberapa hal penting:

1. Sidebar tetap konsisten dengan halaman lain
2. Ringkasan angka seperti total transaksi dan pembayaran masuk tampil jelas di bagian atas
3. Tabel rekap transaksi tersedia dan strukturnya rapi
4. Tombol Export Data terlihat jelas dan mudah ditemukan

Tujuan tahap ini sederhana: memastikan struktur halaman sudah sesuai dengan kebutuhan sebelum masuk ke tahap pengecekan Layers atau perapian di UI Edit Mode.

Step 4: Review tampilan & responsif

Anggap ini bukan sekadar halaman statistik, tapi pusat kontrol angka-angka penting travel umroh. Jadi tampilannya harus clean, fokus, dan mudah dipahami dalam sekali lihat.

Beberapa hal yang perlu kamu perhatikan:

1. Angka ringkasan mudah terbaca Total Jamaah, Total Transaksi, Pembayaran Masuk, dan mungkin Total Paket Aktif harus tampil besar, jelas, dan tidak tenggelam di antara elemen lain.
2. Tabel rekap tidak terlalu padat Pastikan jarak antar kolom nyaman, tidak terlalu rapat, dan tetap enak dibaca meskipun datanya banyak.
3. Tombol Export menonjol Tombol seperti Export PDF atau Export Excel harus mudah ditemukan. Idealnya posisinya jelas di bagian atas atau dekat tabel, bukan tersembunyi.

Sekarang lanjut cek responsifnya:

1. Desktop → Semua card statistik dan tabel tampil rapi tanpa terpotong.
2. Tablet → Layout menyesuaikan, card mungkin tersusun vertikal tapi tetap proporsional.
3. Mobile → Sidebar collapse dengan baik, angka ringkasan tetap terbaca jelas, dan tabel bisa di-scroll horizontal jika perlu.

Tujuannya simpel: halaman laporan ini harus tetap nyaman dipakai di berbagai ukuran layar. Karena data itu sensitif dan penting, tampilannya harus terasa profesional dan mudah dianalisis.

Kalau semua sudah aman, berarti halaman Laporan & Rekap Data benar-benar siap jadi pusat monitoring performa travel umroh

Step 5: Cek Layers & Project Files

Sebelum ambil HTML, kita pastikan dulu struktur layout-nya rapi dari dalam.

Masuk ke bagian Layers di Shayna AI. Di sini kita bisa lihat susunan komponen halaman secara struktur.

Yang perlu kamu periksa:

1. Section ringkasan terpisah jelas dari tabel Card angka seperti Total Jamaah, Total Transaksi, atau Pembayaran Masuk seharusnya berada dalam satu section sendiri. Jangan sampai bercampur langsung dengan tabel rekap.
2. Struktur layout tersusun rapi Sidebar, header (jika ada), dan main content harus terpisah dengan jelas. Jangan sampai tabel atau tombol export masuk ke dalam group yang salah.

Setelah itu, buka bagian Project Files.

Pastikan halaman Laporan tersimpan sebagai file terpisah, misalnya laporan.html, dan tidak menimpa file lain seperti dashboard.html atau pembayaran.html.

Ini penting supaya:

1. Setiap halaman berdiri sendiri.
2. Struktur project tetap modular.
3. Tidak ada konflik antar halaman saat nanti dikembangkan lebih lanjut.

Kalau Layers dan Project Files sudah rapi, baru kita aman untuk lanjut ke tahap ambil HTML dan integrasi ke VS Code

Step 6: Rapikan dengan UI Edit Mode

Setelah struktur rapi, sekarang waktunya poles tampilannya supaya benar-benar terasa seperti dashboard admin travel yang serius, bukan sekadar template demo.

Beberapa hal yang bisa kamu rapikan:

1. Ganti semua angka dummy dengan contoh yang realistis. Misalnya Total Transaksi 87, Total Jamaah 120, atau Pembayaran Masuk yang masuk akal sesuai skenario bisnis travel umroh.
2. Gunakan format nominal yang proper, seperti Rp 150.000.000. Jangan pakai angka polos tanpa titik pemisah ribuan karena itu langsung bikin tampilan terasa kurang profesional.
3. Samakan semua istilah dengan halaman lain. Kalau di Dashboard pakai “Total Jamaah” dan “Paket Aktif”, jangan tiba-tiba ganti jadi istilah lain di halaman Laporan.
4. Pastikan tombol Export terlihat profesional. Ukurannya proporsional, posisinya jelas (biasanya di atas tabel atau dekat ringkasan), dan tidak tenggelam di antara elemen lain.

Detail kecil seperti ini yang bikin halaman terasa layak dipresentasikan ke client.

Tujuannya jelas: saat nanti kita buka Code View dan ambil HTML, hasilnya sudah clean, konsisten, dan siap dipakai tanpa perlu revisi besar lagi.

Kalau sudah sampai tahap ini, dashboard admin travel umroh kamu sudah terlihat seperti sistem sungguhan yang siap dipakai operasional

Step 7: Salin HTML ke VS Code

Kalau halaman Laporan & Rekap Data sudah rapi, angkanya realistis, istilah konsisten, dan tombol Export terlihat profesional — sekarang waktunya ambil kodenya.

Ikuti langkah ini dengan teliti:

1. Buka Code View di Shayna AI Di sini kamu akan melihat seluruh struktur HTML dari halaman Laporan yang sudah kita rapikan.
2. Salin seluruh HTML Pastikan semuanya ter-copy, dari awal sampai akhir. Jangan hanya bagian tabel atau content saja.
3. Masuk ke VS Code Buka folder project dashboard admin travel umroh yang sudah kita gunakan dari awal.
4. Buka file laporan.html Kalau file belum ada, buat file baru dengan nama tersebut supaya struktur tetap modular dan terpisah dari halaman lain.
5. Replace seluruh isi file Hapus isi lama (jika ada), lalu paste HTML hasil dari Shayna AI ke dalam file tersebut.
6. Simpan file

Tekan Ctrl + S (Windows) atau Cmd + S (Mac) supaya perubahan benar-benar tersimpan.

Pastikan kamu tidak menempelkan kode ke file yang salah seperti dashboard.html atau jamaah.html. Setiap halaman harus berdiri sendiri supaya project tetap rapi dan mudah dikembangkan.

Step 8: Jalankan di browser

Setelah file laporan.html tersimpan, sekarang saatnya tes terakhir di browser.

Klik kanan laporan.html → pilih Open with Live Server.

Browser akan terbuka dan menampilkan halaman Laporan & Rekap Data.

Sekarang lakukan pengecekan menyeluruh:

1. Sidebar konsisten Menu Dashboard, Kelola Paket, Data Jamaah, Konfirmasi Pembayaran, dan Laporan tampil sama seperti halaman lain.
2. Ringkasan angka tampil normal Card seperti Total Jamaah, Total Transaksi, dan Pembayaran Masuk terlihat jelas, tidak terpotong, dan format nominal sudah rapi.
3. Tabel rekap muncul lengkap Semua kolom tampil sesuai desain, tidak berantakan, dan tetap terbaca dengan nyaman.
4. Tombol Export terlihat jelas Posisinya mudah ditemukan dan tidak tenggelam di antara elemen lain.
5. Tidak ada layout rusak Cek spacing, alignment, dan responsif di Desktop maupun Mobile.

Kalau semuanya berjalan baik tanpa error atau tampilan aneh, berarti dashboard admin travel umroh kita sudah lengkap dengan 5 halaman utama:

Dashboard

Kelola Paket

Data Jamaah

Konfirmasi Pembayaran

Laporan & Rekap Data

Strukturnya modular, temanya konsisten, dan siap dikembangkan ke tahap berikutnya

4. Workflow Vibe Coding untuk Project Client

Workflow Vibe Coding dimulai dari menerima brief client dan memahami kebutuhan sistemnya. Setelah itu, kita memetakan fitur menjadi struktur halaman yang jelas, misalnya Dashboard, Kelola Paket, Data Jamaah, dan Laporan.

Berikutnya, kita gunakan Shayna AI untuk generate struktur UI dengan cepat berdasarkan prompt yang terarah. Dalam hitungan menit, layout dasar sudah terbentuk tanpa harus mulai dari nol.

Setelah itu, kita review dan rapikan di VS Code. Ganti data dummy, samakan istilah, pastikan navigasi berjalan baik, dan cek responsif di berbagai ukuran layar. Struktur dibuat modular agar mudah dikembangkan atau direvisi.

Dengan alur ini, waktu pengerjaan bisa dipangkas signifikan. Kita tetap pegang kontrol kualitas sebagai developer, tapi proses build jadi jauh lebih cepat dan efisien.

5. Kenapa Ini Powerful untuk Freelancer?

Buat freelancer, workflow seperti ini bukan cuma soal cepat, tapi soal strategi.

Dengan Vibe Coding, kamu bisa ambil lebih banyak project karena waktu pengerjaan UI jauh lebih singkat. Layout dasar tidak lagi memakan energi berjam-jam. Kamu bisa menyelesaikan satu project lebih cepat dan membuka ruang untuk project berikutnya.

Revisi dari client juga jadi lebih ringan. Kalau client minta perubahan tampilan atau penambahan halaman, kamu tidak perlu mulai dari nol. Tinggal generate, rapikan, dan integrasikan. Prosesnya jauh lebih efisien.

Dari sisi presentasi, hasilnya juga terlihat lebih profesional. Kamu bisa menunjukkan prototype atau struktur dashboard dengan cepat, sehingga client lebih mudah memahami gambaran sistem yang akan dibuat.

Yang paling penting, kamu bisa fokus ke hal yang benar-benar bernilai: logic, alur bisnis, dan solusi untuk client. Bukan habis waktu hanya untuk styling dasar.

Inilah strategi kerja cerdas di era AI. Bukan bersaing dengan AI, tapi menggunakan AI untuk mempercepat dan memperkuat posisi kamu sebagai freelancer profesional.

6. Dari Template ke Web App Modern

Setelah HTML sudah rapi dan modular, project tidak harus berhenti sebagai template statis.

Struktur yang sudah kita buat bisa dikembangkan ke level berikutnya. Misalnya dengan mengonversinya ke Next.js supaya routing lebih terstruktur dan siap production. Layout bisa dipecah menjadi komponen reusable seperti Sidebar, Header, Card Statistik, dan Tabel agar lebih efisien saat dikembangkan.

Selanjutnya, mulai integrasi backend. Form pendaftaran bisa terhubung ke database, status pembayaran bisa di-update dinamis, dan dashboard admin benar-benar berfungsi untuk mengelola paket serta jamaah secara real-time. Di tahap ini, project sudah berubah dari sekadar UI menjadi sistem yang berjalan.

Tips Supaya Naik Levelnya Lebih Mulus

• Pastikan struktur HTML sudah bersih sebelum migrasi ke framework.
• Pisahkan layout dan konten sejak awal supaya mudah dijadikan komponen.
• Gunakan dummy data yang strukturnya mirip data asli agar integrasi backend lebih mudah.
• Jangan langsung kompleks — bangun fitur inti dulu, baru tambah fitur lanjutan.

Dengan pendekatan ini, kamu tidak cuma bikin tampilan, tapi membangun fondasi aplikasi yang scalable dan siap dipakai secara nyata.