Deployment-drift engine — backend service + UI armada dengan filter & saved views
Navigasi berbasis intent: sidebar tree-menu + dashboard Fleet Overview
Resource Library: UI tree-browser, upload drag-drop, preview terproteksi, i18n
Kanban task board + Work Entries dengan pelacakan biaya
OAuth2-proxy sidecar mengamankan Grafana & layanan internal
Design system di /design + 32 primitif Alp* + 32 temuan UI/UX (A–F)
Masalah
Alpamayo Intelligence adalah tulang punggung operasional untuk mengelola organisasi, perangkat armada, deployment, dan tugas di jaringan customer Alpamayo. Seiring platform berkembang, UI mulai menumpuk gesekan: deduplication deployment tidak ada, drift tidak ditampilkan dengan jelas, detail node terfragmentasi, pola toolbar dan filter tidak konsisten, dan arsitektur informasi tidak mencerminkan cara kerja operator sesungguhnya. Seiring itu, tidak ada bahasa visual bersama — tidak ada design system, tidak ada standar komponen — sehingga setiap UI baru menjadi keputusan dari nol.
Kendala
- [01]Standar engineering Swiss — setiap perubahan UI ditinjau terhadap akurasi operasional, bukan sekadar estetika
- [02]Manajemen armada adalah use case utama — perubahan harus mencerminkan cara operator melacak versi, status, dan drift lintas perangkat
- [03]Stack PrimeVue + Tailwind CSS + Nuxt 4 — pilihan komponen dibatasi pada ekosistem yang sudah ada
- [04]Design system harus hidup di dalam aplikasi di /design — publik, tanpa auth, dengan token customizer langsung dan ekspor AI
- [05]32 primitif Alp* harus berbasis severity — kosakata konsisten untuk success, warning, danger, info, help, neutral
- [06]Integrasi MS Teams dan MS Graph — infrastruktur notifikasi dan identitas sudah ada
Pendekatan Kami
Melakukan audit UI/UX terstruktur yang menghasilkan 32 temuan yang diorganisir dalam 6 tema: drift surfacing (A), deduplication deployment (B), tab detail node (C), toolbar dan filter dengan saved views (D), desain informasi (E), dan affordance aksi (F). Setiap temuan diberi peringkat severity dan dikirimkan sebagai set perubahan terfokus, menjaga platform yang berjalan tetap stabil sepanjang proses.
Membangun route design system di /design — halaman publik tanpa auth dengan token customizer langsung (primary, accent, semantic, background, logo), showcase komponen, halaman sampel, dan tombol 'Copy for AI' yang mengekspor system prompt DESIGN.md ~600 baris yang mencakup constraint stack lengkap, sistem token, inventaris komponen Volt, inventaris primitif Alp*, 8 pola komposisi, glosarium domain, dan aturan do/don't. Membangun 32 primitif Alp* berbasis severity — StatusPill, StatusDot, Tag, ProgressBar, Avatar, Eyebrow, ColorPicker, PresetCard, KpiCard, dan lainnya — mencakup kosakata visual berulang di platform.
Mengirimkan deployment-drift surfacing engine — backend drift-state summary service, field drift pada serializer Node/Machine/Deployment, kontrol filter drift, dan saved views "Outdated" di UI armada — sehingga operator bisa melihat sekilas perangkat mana yang drift dari target deployment-nya. Mendesain ulang navigasi ke layout sidebar + content berbasis intent — sidebar tree-menu menyediakan navigasi berbasis project-scope, sementara dashboard Fleet Overview (widget KPI, drift, dan health) menjadi landing experience, dengan redirect backward-compatible untuk route yang sudah ada. Membangun Resource Library bergaya Finder dengan backend virtual-path hierarchy, UI tree-browser, upload file apa saja (drag-and-drop, guard 100 MB), preview file terproteksi auth (teks, video, JSON), ekspor CSV, dan i18n penuh. Mengirimkan Kanban task board dengan TaskboardStore, BoardColumn, drag-and-drop, workspace, dan Work Entries dengan cost overview — mengevolusi package issue-tracker sebelumnya menjadi fitur produksi. Mendeploy OAuth2-proxy sidecar (Keycloak client secret + enkripsi cookie) untuk mengamankan Grafana dan layanan internal di belakang IdP.
Mengelola perangkat armada edge memerlukan versioning status konfigurasi dan kunci pendaftaran yang kuat untuk mengorkestrasi deployment serta memantau pemeriksaan kesehatan di seluruh simpul industri.
Galeri
Hasil
- Platform manajemen armada yang menghadirkan pelacakan versi, telemetri, status perangkat, notifikasi, dan event stream untuk jaringan customer IoT industrial Alpamayo
- Deployment-drift surfacing engine — backend drift-state service, field drift pada serializer, kontrol filter, dan saved views "Outdated" di UI armada
- Redesign navigasi berbasis intent — sidebar tree-menu + content, dashboard Fleet Overview dengan widget KPI/drift/health, routing project-scoped
- Resource Library bergaya Finder — virtual-path hierarchy, UI tree-browser, upload drag-and-drop (guard 100 MB), preview file terproteksi auth (teks/video/JSON), ekspor CSV, i18n
- Kanban task board dengan TaskboardStore, BoardColumn, drag-and-drop, workspace, dan Work Entries + cost overview
- OAuth2-proxy sidecar dideploy — Keycloak client secret + enkripsi cookie mengamankan Grafana dan layanan internal
- Design system live di /design dengan token customizer langsung dan ekspor DESIGN.md 'Copy for AI' (~600 baris)
- 32 temuan UI/UX dikirimkan dalam 6 tema (A–F) + 32 primitif Alp* berbasis severity diadopsi di seluruh platform
Kenapa ini penting
Manajemen armada adalah tempat kredibilitas operasional Alpamayo berada — operator perlu melihat perangkat mana yang drift, deployment mana yang usang, dan aksi apa yang tersedia, semuanya sekilas pandang. Drift engine, navigasi berbasis intent, dan dashboard Fleet Overview mengubah kapabilitas platform mentah menjadi kesadaran operator. Resource Library dan Kanban task board memperluas Intelligence dari sekadar monitoring menjadi hub operasi harian. OAuth2-proxy sidecar memperkeras batas antara platform dan layanan pendukungnya. Setiap fitur ini saling menguatkan — pekerjaan UI/UX yang sistematis, diorganisir sebagai temuan teraudit bukan perbaikan tersebar, berarti setiap perubahan memetakan ke titik nyeri operator yang nyata dan lolos review Swiss.

