> For the complete documentation index, see [llms.txt](https://payana-saas.gitbook.io/payana-saas-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://payana-saas.gitbook.io/payana-saas-docs/arsitektur/frontend.md).

# Lapisan Frontend

Dibangun dengan Next.js 16 (App Router), React 19, dan Tailwind v4. Tiga area berbeda skop peran, ditambah satu halaman publik.

## Struktur area

| Area          | Untuk siapa          | Contoh halaman                                                                                                                      |
| ------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `/employee/*` | Karyawan             | EWA, kasbon, vesting, bounty, reimburse, slip gaji, bukti pajak, surat kerja, PHK, audit, pengaturan                                |
| `/hr/*`       | HR & Legal           | Dashboard vault, kelola karyawan, onboarding perusahaan, PHK, vesting, bounty, compliance, kasbon, reimburse, pengaturan, direktori |
| `/owner/*`    | Owner platform       | Tenant, pendaftaran perusahaan, fee, keamanan                                                                                       |
| `/verify`     | Publik (tanpa login) | Verifikasi Employment SBT siapa saja                                                                                                |

## Kenapa login terasa seperti aplikasi biasa

Payana memakai [Privy](https://privy.io/) untuk embedded wallet — karyawan login dengan email atau Google, dan di baliknya Privy otomatis membuatkan **Smart Account** (ERC-4337) yang terhubung ke identitas login itu. Tidak ada langkah "hubungkan wallet", tidak ada seed phrase yang harus disimpan sendiri.

## Bagaimana data dibaca

Frontend punya tiga sumber data, dipakai sesuai konteks:

1. **`payana-indexer` (Ponder API)** — untuk apa pun yang sudah terindeks: riwayat klaim, status stream, riwayat PHK. Ini jalur tercepat, tidak menyentuh RPC blockchain sama sekali.
2. **`payana-backend`** — untuk data off-chain: profil karyawan, notifikasi, dokumen PDF, status pendaftaran.
3. **`viem`** **`publicClient` langsung** — untuk pembacaan on-chain yang belum (atau tidak perlu) diindeks, misalnya cek saldo real-time saat submit transaksi.

## Bagaimana transaksi dikirim

Semua transaksi tulis (claim gaji, ajukan kasbon, dsb.) dikirim sebagai UserOperation ERC-4337 lewat `payana-backend`, yang meneruskannya ke bundler Pimlico. Karyawan menandatangani dengan Smart Account mereka, tapi tidak pernah membayar gas — biaya disponsori oleh `CompanyVault` perusahaan mereka sendiri, yang bertindak sebagai Paymaster.

## Lapisan kode (arsitektur folder)

```
app/               — halaman & routing (App Router)
application/       — hook React Query: queries/ (baca) dan mutations/ (tulis)
domain/            — tipe data bersama, kalkulasi (mis. accrual gaji)
infrastructure/    — client viem, client HTTP, ABI & alamat kontrak
components/        — komponen UI: shared/, ui/, hero/
hooks/             — useAuth, useRole, useSmartAccountAddress, useContractWrite, dst.
```

Detail konvensi penting yang berlaku di lapisan ini (terutama soal identitas Smart Account) ada di [Konvensi Kunci](/payana-saas-docs/arsitektur/konvensi-kunci.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://payana-saas.gitbook.io/payana-saas-docs/arsitektur/frontend.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.