GitHub - mkaspulanwar/sikopling: Saluran Interaktif Persetujuan Lingkungan

Portal layanan informasi dan pengelolaan antrian persetujuan lingkungan.

Link

Status

Internal / Confidential - repository ini untuk penggunaan internal tim.

README ini disinkronkan dengan kondisi kode pada 26 April 2026.

Ringkasan Sistem

SIKOPLING saat ini terdiri dari dua area utama:

Area publik
- landing page interaktif,
- halaman profil, kontak, kebijakan privasi, ketentuan layanan,
- antrian publik dokling dan pertek dari data Supabase (service role).
Area admin
- login Supabase Auth (role-based),
- dashboard ringkasan,
- manajemen data antrian dokling/pertek (filter, CRUD, import CSV, export CSV),
- endpoint API admin untuk operasi data.

Fitur Utama

Universal Search lintas halaman publik (Ctrl/Cmd + K) dengan highlight otomatis hasil pencarian pada konten.
Landing page modern dengan hero video, statistik animasi, showcase layanan, FAQ, dan CTA.
Antrian publik (/layanan/perling, /layanan/pertek) dengan:
- pencarian,
- filter,
- sorting,
- pagination,
- responsive expandable row (mobile),
- export CSV di sisi klien.
Panel admin dengan proteksi role:
- role valid: admin,
- sidebar desktop + mobile drawer,
- session keep-alive otomatis (/admin/session).
Manajemen data admin (dokling/pertek):
- tambah data (modal),
- edit data (modal),
- hapus data tunggal/massal (dengan pembatasan role),
- import CSV (/admin/api/[layanan]/import),
- export CSV (/admin/api/[layanan]/export),
- metrik ringkasan per layanan (total/selesai/diproses/ditolak).
Endpoint admin layanan (/admin/layanan) untuk aksi data monitoring:
- filter komprehensif,
- sorting server-side,
- update status + posisi.
Integrasi Supabase SSR + manajemen cookie auth (termasuk opsi "ingat saya").
Vercel Analytics di root layout.

Struktur Project (Terkini)

.
├── src/                                           # Source code utama aplikasi
│   ├── app.d.ts
│   ├── app.html
│   ├── hooks.server.ts                            # SSR hooks + Supabase session + cache header
│   ├── lib/
│   │   ├── assets/
│   │   │   └── favicon.png
│   │   ├── components/
│   │   │   ├── admin/
│   │   │   │   ├── PositionDropdown.svelte
│   │   │   │   └── StatusDropdown.svelte
│   │   │   ├── badges/
│   │   │   │   └── PengajuanStatusBadge.svelte
│   │   │   └── home/
│   │   │       ├── Navbar.svelte
│   │   │       ├── ChatbotWidget.svelte
│   │   │       ├── SiteFooter.svelte
│   │   │       ├── HorizontalScroll.svelte
│   │   │       └── StackedCard.svelte
│   │   ├── constants/
│   │   │   ├── universal-search.ts
│   │   │   └── universal-search.test.ts
│   │   ├── server/
│   │   │   ├── admin-route.ts
│   │   │   ├── admin-session.ts
│   │   │   ├── monitoring-pengajuan.ts
│   │   │   ├── public-queue.ts
│   │   │   └── supabase-auth.ts
│   │   └── supabase/
│   │       ├── client.ts
│   │       ├── server.ts
│   │       ├── env.ts
│   │       ├── constants.ts
│   │       └── database.types.ts
│   └── routes/
│       ├── +layout.svelte
│       ├── +page.svelte
│       ├── layout.css
│       ├── layanan/
│       │   ├── dokling/
│       │   │   ├── +page.server.ts
│       │   │   └── +page.svelte
│       │   └── pertek/
│       │       ├── +page.server.ts
│       │       └── +page.svelte
│       ├── login/
│       │   ├── +page.server.ts
│       │   └── +page.svelte
│       ├── logout/
│       │   └── +server.ts
│       ├── profil/
│       │   └── +page.svelte
│       ├── tentang/
│       │   └── +page.ts                         # Redirect ke /profil
│       ├── kontak/
│       │   └── +page.svelte
│       ├── kebijakan-privasi/
│       │   └── +page.svelte
│       ├── ketentuan-layanan/
│       │   └── +page.svelte
│       └── admin/
│           ├── +layout.server.ts
│           ├── +layout.svelte
│           ├── +page.server.ts
│           ├── dashboard/
│           │   ├── +page.server.ts
│           │   └── +page.svelte
│           ├── dokling/
│           │   ├── +page.server.ts
│           │   └── +page.svelte
│           ├── pertek/
│           │   ├── +page.server.ts
│           │   └── +page.svelte
│           ├── monitoring/
│           │   ├── +page.server.ts
│           │   ├── +page.svelte
│           │   ├── +server.ts
│           │   └── [id]/
│           │       └── +server.ts
│           ├── api/
│           │   └── [layanan]/
│           │       ├── import/
│           │       │   └── +server.ts
│           │       └── export/
│           │           └── +server.ts
│           ├── profil/
│           │   └── +page.svelte
│           ├── pengaturan/
│           │   └── +page.svelte
│           └── session/
│               └── +server.ts
├── static/                                        # Asset statis (gambar, video, lottie)
│   ├── home/
│   ├── layout/
│   ├── login/
│   ├── tentang/
│   ├── kontak/
│   └── robots.txt
├── supabase/
│   ├── migrations/                                # SQL migrasi schema & policy
    ... legacy migration history
    20260509160000_simplify_roles_to_admin.sql
│   └── .temp/                                     # Metadata lokal Supabase CLI
├── tests/
│   └── home.e2e.ts                                # E2E Playwright
├── .env.example
├── package.json
├── playwright.config.ts
├── svelte.config.js
├── vite.config.ts
├── tsconfig.json
├── contributing.md
└── LICENSE

Route Aktif

Publik

Route	Keterangan
`/`	Landing page utama
`/layanan/perling`	Antrian dokumen lingkungan (publik)
`/layanan/pertek`	Antrian persetujuan teknis (publik)
`/profil`	Halaman profil layanan SIKOPLING
`/tentang`	Redirect 308 ke `/profil`
`/kontak`	Halaman kontak + peta + FAQ
`/kebijakan-privasi`	Halaman kebijakan privasi
`/ketentuan-layanan`	Halaman ketentuan layanan
`/login`	Halaman login admin
`/logout`	Logout sesi auth

Admin

Route	Keterangan
`/admin`	Redirect 307 ke `/admin/dashboard`
`/admin/dashboard`	Ringkasan metrik dan aktivitas login
`/admin/layanan/perling`	Operasional data antrian perling
`/admin/layanan/pertek`	Operasional data antrian pertek
`/admin/layanan/integrasi`	Operasional data monitoring integrasi
`/admin/profil`	Informasi akun admin aktif
`/admin/pengaturan`	Halaman preferensi UI admin (placeholder fungsional)

API Admin

Endpoint	Method	Fungsi
`/admin/session`	`GET`, `POST`	Keep-alive sesi admin
`/admin/layanan`	`GET`	List data monitoring (server-side filter/sort/page)
`/admin/layanan`	`POST`	Create data monitoring
`/admin/layanan`	`PATCH`	Update status + posisi
`/admin/layanan/[id]`	`PATCH`	Update detail data per id
`/admin/layanan/[id]`	`DELETE`	Hapus data (dibatasi role)
`/admin/api/[layanan]/import`	`POST`	Import CSV (`dokling`/`pertek`)
`/admin/api/[layanan]/export`	`GET`	Export CSV (`dokling`/`pertek`)

Arsitektur Data (Supabase)

Tabel utama:

monitoring_perling
monitoring_pertek
monitoring_integrasi

Ketiga tabel monitoring menyimpan data operasional admin, memakai RLS Supabase, dan statusnya dibatasi oleh konstanta aplikasi. Catatan policy:

operasi baca, tulis, update, dan hapus data admin membutuhkan role admin.

Tech Stack

@sveltejs/kit (SvelteKit 2)
svelte (Svelte 5 + runes)
typescript
tailwindcss + @tailwindcss/forms + @tailwindcss/vite
@supabase/ssr + @supabase/supabase-js
lucide-svelte
simple-icons
@lottiefiles/dotlottie-svelte
gsap
lenis
@vercel/analytics
vitest + @vitest/browser-playwright
playwright

Prasyarat

Node.js 20+
npm 10+

Menjalankan Project

npm install
npm run dev

Default dev server: http://localhost:5173.

Build production:

npm run build
npm run preview

Environment Variables

Salin template:

cp .env.example .env

Variable:

PUBLIC_SUPABASE_URL (wajib)
PUBLIC_SUPABASE_ANON_KEY (wajib)
SUPABASE_SERVICE_ROLE_KEY (wajib untuk operasi server privileged, termasuk sumber data antrian publik)
SUPABASE_DB_PASSWORD (opsional, helper lokal Supabase CLI)

Jika PUBLIC_SUPABASE_URL / PUBLIC_SUPABASE_ANON_KEY tidak diisi, halaman admin akan menampilkan status unavailable.

NPM Scripts

Script	Fungsi
`npm run dev`	Menjalankan development server
`npm run build`	Build produksi
`npm run preview`	Menjalankan preview hasil build
`npm run check`	Sync SvelteKit + type check
`npm run check:watch`	Type check mode watch
`npm run test:unit`	Menjalankan test Vitest (client + server project)
`npm run test:e2e`	Menjalankan E2E Playwright
`npm run test`	Menjalankan unit test lalu E2E test

Testing Saat Ini

Test yang tersedia saat ini:

src/lib/constants/universal-search.test.ts (unit test konstanta universal search)
tests/home.e2e.ts (E2E render konten inti homepage)

Kontribusi

Ikuti panduan di contributing.md.

Lisensi

Lisensi mengikuti file LICENSE.

Navigation Menu

Repository files navigation

Link

Status

Ringkasan Sistem

Fitur Utama

Struktur Project (Terkini)

Route Aktif

Publik

Admin

API Admin

Arsitektur Data (Supabase)

Tech Stack

Prasyarat

Menjalankan Project

Environment Variables

NPM Scripts

Testing Saat Ini

Kontribusi

Lisensi

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.vscode		.vscode
src		src
static		static
supabase		supabase
tests		tests
.gitignore		.gitignore
.npmrc		.npmrc
.tmp-homepage.png		.tmp-homepage.png
LICENSE		LICENSE
README.md		README.md
contributing.md		contributing.md
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
svelte.config.js		svelte.config.js
svgo.config.mjs		svgo.config.mjs
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

Link

Status

Ringkasan Sistem

Fitur Utama

Struktur Project (Terkini)

Route Aktif

Publik

Admin

API Admin

Arsitektur Data (Supabase)

Tech Stack

Prasyarat

Menjalankan Project

Environment Variables

NPM Scripts

Testing Saat Ini

Kontribusi

Lisensi

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages