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:

```bash
php -v
composer --version
node -v
psql --version
```

## Instalasi di Local

### 1. Clone repository

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

### 2. Install dependency

```bash
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

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

### 4. Buat database PostgreSQL

Buat database kosong, misalnya lewat `psql`:

```sql
CREATE DATABASE probindo_db;
```

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

```env
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:

```env
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

```bash
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:

```bash
composer dev
```

Atau jalankan di dua terminal terpisah:

```bash
# 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`:

```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):

```bash
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`.