# 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. Jalankan migrasi

```bash
php artisan migrate
```

### 6. 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/site.ts              # Info perusahaan, 2 lokasi kantor, 8 jasa, opsi form
├── 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, tinggal menyusun section + data
```

- **Ubah kontak atau alamat kantor** cukup di `resources/js/data/site.ts`, otomatis berlaku di semua halaman.
- **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).

## 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.

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

## Catatan

Form konsultasi di halaman Beranda, Jasa, dan Kontak **belum terhubung ke backend**: saat ini hanya menampilkan pesan sukses di browser tanpa menyimpan atau mengirim data.