# UI COMPONENTS — GOVERNMENT SERVICE PORTAL
# Satu Mimpi City Administration
Version 2.0
---
# LAYOUT COMPONENTS
---
## AppShell (Admin Layout)
File: resources/views/layouts/app.blade.php
Structure:
```
← fixed top, z-50
← sticky, collapsible
← included per page
← fixed bottom-right
← overlay layer
```
Alpine.js state:
```js
function appShell() {
return {
sidebarOpen: localStorage.getItem('sidebar') !== 'collapsed',
darkMode: localStorage.getItem('theme') === 'dark',
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen
localStorage.setItem('sidebar', this.sidebarOpen ? 'expanded' : 'collapsed')
},
toggleDark() {
this.darkMode = !this.darkMode
localStorage.setItem('theme', this.darkMode ? 'dark' : 'light')
document.documentElement.classList.toggle('dark', this.darkMode)
}
}
}
```
---
## AdminNavbar
File: resources/views/components/admin/navbar.blade.php
Height: 72px
Position: fixed top-0 left-0 right-0 z-50
Left side:
- Hamburger toggle button (icon MenuIcon / XIcon based on sidebar state)
- Logo kota (24px) + "Pemkot Satu Mimpi" text (hidden on mobile)
- Breadcrumb (desktop only, auto-generated from route)
Right side (flex items-center gap-3):
1. Dark Mode Toggle Button
- Icon: SunIcon (light mode) / MoonIcon (dark mode)
- Animated: rotate 180deg on toggle, 250ms
- Tooltip: "Mode Gelap / Terang"
2. Notification Bell
- Icon: BellIcon
- Badge: merah rounded-full dengan unread count (jika ada)
- Click: dropdown notifikasi (max 5 terbaru + "Lihat Semua")
- Dropdown: animate slideDown, shadow-dropdown
3. User Avatar Menu
- Avatar: foto profil bulat 36px / fallback initials dengan bg-gov-primary
- Nama + jabatan (desktop only)
- Dropdown:
• Profil Saya → /admin/profile
• Ubah Password → /admin/profile#password
• ─────────────
• Logout (red text, LogoutIcon)
Styling:
bg-white dark:bg-dark-navbar
border-b border-border dark:border-dark-border
shadow-navbar
backdrop-blur-sm (subtle)
---
## AdminSidebar
File: resources/views/components/admin/sidebar.blade.php
Dimensions:
Expanded: w-[280px]
Collapsed: w-[80px]
Height: 100% (full viewport minus navbar)
Position: sticky top-[72px]
Overflow: hidden (clip text on collapse)
Transition: width 400ms ease-decelerate
Styling:
bg-white dark:bg-dark-sidebar
border-r border-border dark:border-dark-border
shadow-sidebar
flex flex-col
Structure:
```
```
### SidebarGroup
- Label: uppercase 10px text-secondary letter-spacing-widest (hidden when collapsed)
- Section separator with padding-top
### SidebarItem (no submenu)
Structure: anchor tag
- Left: icon (w-5 h-5, centered when collapsed)
- Right: label text (hidden when collapsed, opacity-0 + w-0 transition)
- Right end: active indicator dot (hidden when collapsed)
States:
Default: text-gray-600 dark:text-gray-400 hover:bg-green-50 dark:hover:bg-green-950/30 hover:text-gov-primary
Active: bg-gov-primary text-white font-medium rounded-lg shadow-sm
When collapsed → tooltip on hover (data-tooltip attribute, custom Alpine tooltip)
### SidebarDropItem (with submenu)
- Toggle chevron (rotate 90° when open, 250ms)
- Submenu: x-show with x-transition:enter slide-down animation
- Submenu items: smaller text, pl-10 when expanded / centered icon when collapsed
- Pending badge: numeric badge on icon when collapsed
### SidebarUserCard
Expanded state:
- Avatar (32px) + nama + jabatan
- 3 dots menu: Profil, Password, Logout
Collapsed state:
- Only avatar (centered), click → mini dropdown
---
## PublicLayout
File: resources/views/layouts/public.blade.php
Structure:
```
← sticky top
@yield('content')
← fixed bottom-right
← fixed bottom-right (above floating)
← fixed bottom (optional)
```
### PublicHeader
Height: 72px sticky
Left: Logo + "Pemerintah Kota Satu Mimpi" (full name)
Center: Navigation links (Home, Tentang, Layanan, Berita, Kontak)
Right: Dark Mode toggle + "Portal LOKET" button (outline gov-primary)
Scroll behavior: adds shadow + blur backdrop when scrolled > 50px
Mobile: hamburger → slide-down mobile menu (full width)
### MegaMenu (for Layanan)
Hover on "Layanan" → mega menu drop:
Grid 2×4 of service cards (icon + nama + deskripsi singkat)
Bottom row: "Lihat Semua Layanan →"
Animation: fadeIn + translateY(-8px) → 0, 200ms
### PublicFooter
4-column layout:
Col 1: Logo + tagline + sosmed icons (placeholder)
Col 2: Layanan (links ke 8 service pages)
Col 3: Informasi (About, News, Contact, Tracking)
Col 4: Kontak (alamat, telp, email, jam buka)
Bottom bar: copyright + "Made with ❤️ Pemerintah Kota Satu Mimpi"
### FloatingContact
Position: fixed bottom-6 right-6
Stack (bottom to top):
- Main FAB button: ChatBubble icon, bg-gov-primary, shadow-lg
- On click (Alpine toggle): expand to show options:
• WhatsApp (green)
• Telepon (blue)
• Email (gray)
Animation: scale + opacity staggered in/out
---
# NAVIGATION COMPONENTS
---
## Breadcrumb
File: resources/views/components/breadcrumb.blade.php
Auto-generated from current route name / passed $breadcrumbs array
Design:
- Text-sm, text-secondary
- Separator: "/" or ChevronRight icon (w-3 h-3)
- Last item: text-primary font-medium (non-link)
- First: HomeIcon + "Beranda"
- Fade in animation on load
---
## PageHeader
File: resources/views/components/page-header.blade.php
Props: title, subtitle (optional), breadcrumbs, actions (slot for buttons)
Design:
- mb-6
- Left: H1 (text-2xl font-semibold) + subtitle (text-sm text-secondary)
- Breadcrumb below title
- Right: action buttons slot
---
# CARD COMPONENTS
---
## StatCard (Dashboard)
File: resources/views/components/cards/stat-card.blade.php
Props: icon, title, value, trend, trend_direction, color, link
Design:
```
{{ $title }}
{{ $value }}
{{ trend >= 0 ? '↑' : '↓' }} {{ abs(trend) }}% vs kemarin
```
Animation: fadeIn on page load, staggered (delay-100 per card)
Counter animation: countUp from 0 to value over 1s on mount
---
## ServiceCard (Public)
File: resources/views/components/cards/service-card.blade.php
Props: icon, name, description, process_time, cost, link, color
Design:
- Card with colored left border (4px, color per service)
- Icon in colored circle top-right
- Name: H5 bold
- Description: 2 lines max (overflow-hidden)
- Tags row: process time chip + cost chip
- Hover: translateY(-4px) + border glow (shadow-[0_0_0_2px_theme(colors.gov.500)])
- Footer: "Pelajari →" link
---
## InfoCard
File: resources/views/components/cards/info-card.blade.php
Props: title, description, icon, badge (optional), action_label, action_link
Generic card untuk berbagai keperluan.
Design: standard card with optional colored badge.
---
## ActivityCard (Dashboard)
File: resources/views/components/cards/activity-card.blade.php
Used in: Dashboard activity feed
Design: Timeline-style list
Each item:
- Avatar (24px) left
- Content: "[Nama Staff] menyetujui pengajuan KTP [No. Pengajuan]"
- Timestamp: "2 menit lalu" (relative time)
- Status icon on right (CheckCircle green / XCircle red)
---
# DATA TABLE COMPONENT
File: resources/views/components/data-table.blade.php
Features:
1. Search bar — real-time filter by name/NIK
2. Status filter — dropdown (All / Pending / Approved / Rejected)
3. Date range picker — tanggal submit dari/sampai
4. Per-page selector — 10 / 25 / 50 / 100
5. Bulk checkbox — select all + individual row select
6. Bulk actions bar — muncul saat ada yang diselect (Approve / Reject / Export terpilih)
7. Column sorting — klik header untuk sort asc/desc
8. Responsive — horizontal scroll on mobile
9. Empty state — illustration + pesan "Tidak ada data"
10. Loading skeleton — shimmer rows saat loading
11. Export bar — PDF | Excel | CSV
Table Styling:
- Header: bg-gray-50 dark:bg-gray-800, text-xs uppercase letter-spacing font-semibold
- Rows: hover:bg-gray-50 dark:hover:bg-gray-800/50, transition background 150ms
- Border: border-b border-border (subtle, not heavy grid)
- Cell padding: px-4 py-3
- Actions column: flex gap-2, right-aligned
Skeleton row (loading state):
- 5 shimmer bars per row, gradient animated left-to-right
- 5 skeleton rows displayed
Empty state:
- Centered illustration (SVG)
- "Tidak ada pengajuan ditemukan"
- Sub text sesuai filter aktif
- Reset filter button
---
# FORM COMPONENTS
---
## TextInput
File: resources/views/components/forms/text-input.blade.php
Props: name, label, type, placeholder, required, disabled, error, icon_left, hint
Design:
Label: text-sm font-medium text-primary mb-1.5
Input wrapper: relative
Input: w-full px-4 py-2.5 border rounded-lg text-sm
focus:border-gov-primary focus:ring-2 focus:ring-gov-primary/20
dark:bg-dark-card dark:border-dark-border dark:text-dark-text
transition-all duration-150
Error state: border-danger focus:ring-danger/20 + error message below (text-xs text-danger)
Hint: text-xs text-secondary below input
Icon left: absolute left-3 top-1/2 -translate-y-1/2 text-secondary
---
## SelectInput
File: resources/views/components/forms/select-input.blade.php
Props: name, label, options, placeholder, required, error
Design: Same as TextInput with chevron-down icon right
Options rendered as