---
description: Standar UI/UX geonet-console dan databaselist
globs: geonet-console/**/*,databaselist/**/*
alwaysApply: false
---

# UI/UX — Geonet Console

## Stack

- Blade + Tailwind CDN + `public/css/app-ui.css`
- Vanilla JS: `app-nav.js`, `app-spa-nav.js`, `ui-feedback.js`, `theme.js`
- Hotwire Turbo 8 untuk navigasi SPA parsial

## File inti

- Layout: `resources/views/layouts/app.blade.php`
- Shell: `resources/views/partials/app-shell.blade.php`
- Menu: `app/Support/NavigationMenu.php`

## Pola yang sudah ada (pertahankan)

- Dark-first, enterprise dashboard (sidebar + bottom nav mobile)
- Kartu `rounded-2xl`, border slate, aksen cyan
- Loading overlay + dialog feedback pada form kritis
- Sticky table header + row action sheet di mobile
- Role-based navigation (admin vs user)

## Wajib saat ubah UI

```blade
{{-- Loading: gunakan ui-feedback.js overlay --}}
{{-- Tabel mobile: action via sheet, bukan kolom aksi penuh --}}
{{-- Theme: Light / Dark / System via theme.js --}}
```

- Setiap form punya helper text / catatan
- Icon menu sesuai konteks
- Header & footer sticky; area data scroll internal
- Turbo: jangan reload full layout; pertahankan sidebar/header

## Gap — jangan regresi

- Hindari layout shift saat navigasi
- Kontras teks baik di semua tema
- Target: compile Tailwind, bukan CDN di produksi