web-probindo/README.md

Probindo Web

Website company profile PT Probindo Artika Jaya (PAJ), dibangun dengan Laravel + Inertia.js + React.

Tech Stack

Bagian	Teknologi
Backend	Laravel 13, PHP 8.3+
Frontend	React 19 + TypeScript, Inertia.js v3
Styling	Tailwind CSS v4 (light & dark mode)
Routing frontend	Laravel Wayfinder (route bertipe dari Laravel ke TypeScript)
Build tool	Vite+ (vp)
Auth (dashboard)	Laravel Fortify
Database	PostgreSQL
Testing	Pest / PHPUnit

Prasyarat

Pastikan sudah terpasang:

• PHP 8.3 atau lebih baru dengan ekstensi pdo_pgsql, pgsql, mbstring, openssl, fileinfo, dan pdo_sqlite (dipakai saat menjalankan test)
• Composer 2
• Node.js 22 dan npm
• PostgreSQL (versi 14 ke atas disarankan)
• Git

Cek versi:

php -v
composer --version
node -v
psql --version

Instalasi di Local

1. Clone repository

git clone <url-repository> probindo-web
cd probindo-web

2. Install dependency

composer install
npm install

Project ini memakai ignore-scripts=true di .npmrc, jadi script install dari package npm tidak dijalankan otomatis.

3. Siapkan file environment

cp .env.example .env
php artisan key:generate

4. Buat database PostgreSQL

Buat database kosong, misalnya lewat psql:

CREATE DATABASE probindo_db;

Lalu sesuaikan koneksi database di .env (bawaan .env.example masih SQLite):

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=probindo_db
DB_USERNAME=postgres
DB_PASSWORD=password_anda

Sesuaikan DB_PORT, DB_USERNAME, dan DB_PASSWORD dengan instalasi PostgreSQL di komputer Anda.

5. Atur akun admin pertama

Di .env, isi akun admin yang akan dibuat oleh seeder:

ADMIN_NAME=Administrator
ADMIN_EMAIL=admin@probindo.com
ADMIN_PASSWORD=isi-password-yang-kuat

Jika ADMIN_PASSWORD dikosongkan, seeder membuat password acak dan menampilkannya sekali di terminal, jadi segera simpan.

6. Jalankan migrasi & isi data awal

php artisan migrate --seed

Seeder membuat:

• akun Admin dari ADMIN_* di atas (langsung bisa login di /login, atau lewat tautan "Admin Panel" di footer website),
• 61 proyek portofolio, 2 kantor, dan kontak perusahaan.

Seeder aman dijalankan ulang: akun admin yang sudah ada tidak diubah (password yang sudah diganti tidak di-reset), dan data konten hanya diisi jika tabelnya masih kosong.

Akun berikutnya ditambahkan dari menu Pengguna di admin panel, atau lewat terminal dengan php artisan admin:create.

7. Jalankan aplikasi

Cara termudah, satu perintah untuk menjalankan server Laravel, queue worker, dan Vite sekaligus:

composer dev

Atau jalankan di dua terminal terpisah:

# Terminal 1 — server Laravel
php artisan serve

# Terminal 2 — Vite dev server (hot reload)
npm run dev

Buka http://localhost:8000 di browser.

Kenapa ada dua port? Halaman dibuka lewat port 8000 (Laravel). Port 5173 adalah Vite dev server yang hanya menyajikan file JS/CSS dan hot reload saat development, bukan untuk dibuka langsung.

Halaman Website

URL	Halaman	File
/	Beranda	resources/js/pages/site/home.tsx
/tentang-kami	Tentang Kami	resources/js/pages/site/about.tsx
/jasa	Jasa & Solusi IT	resources/js/pages/site/services.tsx
/klien	Klien & Portofolio	resources/js/pages/site/clients.tsx
/kontak	Kontak & Konsultasi	resources/js/pages/site/contact.tsx

Route didefinisikan di routes/web.php.

Struktur Frontend

resources/js/
├── data/                     # Konstanta perusahaan & helper hitung portofolio
├── layouts/site-layout.tsx   # Kerangka halaman: header + konten + footer
├── components/site/          # Komponen UI yang dipakai ulang
│   ├── section.tsx, container.tsx, section-header.tsx, page-hero.tsx
│   ├── button.tsx, card.tsx, feature-card.tsx, step-card.tsx, ...
│   ├── site-header.tsx, site-footer.tsx, theme-toggle.tsx
│   └── sections/             # Section bersama (form konsultasi, grid jasa, CTA)
├── pages/site/               # Halaman website, tinggal menyusun section + data
└── pages/admin/              # Halaman admin panel (CMS)

• Kontak, kantor, portofolio, dan testimoni disimpan di database dan dikelola dari admin panel (lihat bagian Admin Panel). Jumlah proyek dan klien di website dihitung otomatis dari tabel projects.
• Teks website (Bahasa Indonesia & Inggris) ada di resources/js/content/: satu file per halaman (home.ts, about.ts, ...) plus common.ts untuk navbar, footer, form, dan 8 jasa. Setiap file berisi objek id dan en; TypeScript akan error bila versi en tidak lengkap. Gunakan **teks** untuk penekanan dan ==teks== untuk highlight merah di judul.
• Bahasa dipilih lewat tombol ID/EN di navbar dan disimpan di cookie locale (default id), dibaca oleh middleware app/Http/Middleware/HandleLocale.php.
• Warna tema (light & dark) ada di resources/css/app.css, pada blok .probindo-site (light) dan .dark .probindo-site (dark).

Admin Panel (CMS)

Login di /login, lalu kelola konten dari sidebar:

Menu	Fungsi	Tabel
Inbox Konsultasi	Permintaan dari form konsultasi di Beranda, Jasa, dan Kontak. Status: Baru, Dihubungi, Selesai, plus catatan internal	consultations
Portofolio	Tambah, ubah, dan hapus proyek. Angka "proyek" dan "klien" di website ikut berubah	projects
Info Perusahaan	Telepon, WhatsApp, email, dan alamat kantor	site_settings, offices
Testimoni	Testimoni dua bahasa. Bagian testimoni di halaman Klien hanya tampil jika ada yang dipublikasikan	testimonials
Pengguna	Kelola akun admin panel (hanya Admin)	users

Peran: Admin bisa mengakses semua menu, termasuk Pengguna. Editor bisa mengakses konten dan inbox konsultasi.

Notifikasi email konsultasi

Setiap permintaan konsultasi baru dikirim ke email busdev (diatur di Info Perusahaan). Email dikirim lewat queue, jadi queue worker harus berjalan. composer dev sudah menjalankannya; di server jalankan php artisan queue:work (misalnya lewat Supervisor).

Secara default MAIL_MAILER=log, sehingga email hanya ditulis ke storage/logs/laravel.log. Untuk benar-benar mengirim email, isi SMTP di .env:

MAIL_MAILER=smtp
MAIL_HOST=smtp.example.com
MAIL_PORT=587
MAIL_USERNAME=user@probindo.com
MAIL_PASSWORD=********
MAIL_FROM_ADDRESS="no-reply@probindo.com"
MAIL_FROM_NAME="Probindo Website"

Perintah yang Sering Dipakai

Perintah	Fungsi
composer dev	Jalankan server, queue, dan Vite sekaligus
npm run dev	Vite dev server saja
npm run build	Build aset untuk production ke public/build
npm run types:check	Cek tipe TypeScript
npm run check	Format + lint frontend
php artisan test	Jalankan test
php artisan wayfinder:generate	Generate ulang route TypeScript setelah menambah route

Troubleshooting

Halaman putih / aset tidak termuat File public/hot tertinggal dari sesi npm run dev sebelumnya. Jalankan lagi npm run dev, atau hapus public/hot lalu npm run build.

Error could not find driver saat test Ekstensi pdo_sqlite belum aktif. Buka php.ini, aktifkan extension=pdo_sqlite, lalu restart terminal. Alternatifnya, jalankan test di database PostgreSQL terpisah (jangan pakai database utama, karena test mengosongkan tabel):

DB_CONNECTION=pgsql DB_DATABASE=probindo_test php artisan test

Error koneksi database saat migrate Pastikan PostgreSQL berjalan, database sudah dibuat, dan DB_* di .env sudah benar. Setelah mengubah .env, jalankan php artisan config:clear.

Import @/routes error di editor File route TypeScript di-generate otomatis. Jalankan php artisan wayfinder:generate atau npm run dev.

Perubahan kontak/kantor tidak muncul di website Info perusahaan di-cache dan otomatis diperbarui saat disimpan dari admin panel. Jika data diubah langsung di database, jalankan php artisan cache:forget site-info.

Email konsultasi tidak terkirim Pastikan queue worker berjalan dan SMTP sudah diisi (lihat Notifikasi email konsultasi). Job yang gagal bisa dilihat dengan php artisan queue:failed.