# Ristek Task Frontend

> **📄 Catatan Deployment:** Cara deployment menggunakan **Docker Compose** sudah disertakan di dalam **submisi PDF**.

---

## Tech Stack

| Kategori      | Teknologi                                |
| ------------- | ---------------------------------------- |
| Framework     | React 19 + React Router 7 (SSR)         |
| Bahasa        | TypeScript 5                             |
| Styling       | TailwindCSS 4, tw-animate-css            |
| UI Components | Radix UI, Lucide React (icons)           |
| Charts        | Recharts                                 |
| Build Tool    | Vite 7                                   |
| Runtime       | Node.js 24 (Alpine)                      |

---

## Fitur

- **Autentikasi** — Register, login, logout dengan JWT (access + refresh token)
- **Form Builder** — Buat dan edit form dengan 7 tipe pertanyaan (short text, long text, multiple choice, checkbox, dropdown, date, rating)
- **Form Submission** — Halaman publik untuk mengisi dan mengirim respons form
- **Response Analytics** — Dashboard statistik respons dengan pie chart, bar chart, dan tabel individual responses
- **Filter & Sort** — Cari form berdasarkan judul, filter status respons, dan sort berdasarkan tanggal (server-side dengan debounce)
- **Responsive** — UI responsif untuk mobile dan desktop

---

## Prasyarat

Pastikan sudah terinstall:

- [Node.js 20+](https://nodejs.org/) (disarankan versi 24)
- npm

---

## Cara Menjalankan Secara Lokal

### 1. Clone Repository

```bash
git clone https://github.com/fossyy/ristek-task-fe
cd ristek-task-fe
```

### 2. Konfigurasi Environment

Buat file `.env` di root project:

```env
VITE_API_BASE_URL=http://localhost:8080
```

### 3. Install Dependencies

```bash
npm install
```

### 4. Jalankan Aplikasi (Development)

```bash
npm run dev
```

Aplikasi akan berjalan di `http://localhost:5173`.

### 5. Build & Jalankan Production

```bash
npm run build
npm run start
```

Aplikasi production berjalan di `http://localhost:3000`.

---

## Halaman / Routes

| Route                 | Halaman        | Deskripsi                              |
| --------------------- | -------------- | -------------------------------------- |
| `/`                   | Home           | Redirect ke `/forms`                   |
| `/login`              | Login          | Halaman login                          |
| `/register`           | Register       | Halaman registrasi                     |
| `/forms`              | Forms List     | Daftar form milik user (dengan filter) |
| `/forms/new`          | Create Form    | Buat form baru                         |
| `/form/:id`           | Form Preview   | Preview form (read-only)               |
| `/form/:id/edit`      | Edit Form      | Edit form yang sudah ada               |
| `/form/:id/submit`    | Submit Form    | Isi dan kirim respons form             |
| `/form/:id/responses` | Form Responses | Statistik & data respons (owner only)  |

---

## Struktur Folder

```
app/
├── context/          # React context (auth)
├── routes/           # Halaman-halaman (route modules)
├── root.tsx          # Root layout
├── routes.ts         # Konfigurasi routing
└── app.css           # Global styles
components/
├── forms/            # Komponen form (card, editor, preview)
└── shared/           # Komponen shared (navbar, footer, button, input)
lib/
├── api.ts            # Fungsi API (auth, forms, responses)
├── auth.ts           # Helper JWT & token management
├── types.ts          # TypeScript interfaces
└── utils.ts          # Utility functions
```

---

## Scripts

| Script            | Perintah                              | Keterangan                          |
| ----------------- | ------------------------------------- | ----------------------------------- |
| `npm run dev`     | `react-router dev`                    | Jalankan dev server dengan HMR      |
| `npm run build`   | `react-router build`                  | Build production                    |
| `npm run start`   | `react-router-serve ./build/server/index.js` | Jalankan production server   |
| `npm run typecheck` | `react-router typegen && tsc`       | Type checking                       |

---

## Environment Variables

| Variable             | Wajib | Default | Keterangan                     |
| -------------------- | ----- | ------- | ------------------------------ |
| `VITE_API_BASE_URL`  | ✅    | —       | URL backend API                |