Module 01 • Design Tokens

Brand Foundations & Design Tokens

Sistem token visual baku Triaone. Setiap nilai hex dan proporsi telah dirancang untuk rasio kontras tinggi, keterbacaan data numerik, dan efisiensi ruang layar sistem enterprise.

1. Core Color System (Klik swatch untuk menyalin Hex) WCAG AAA / AA Tested

Primary (Cyan-Azure) Brand Identity

primary-900 (Deep Navy) #00405C

primary-600 (Hover/Focus) #0087B8

primary-500 (Core Brand) #00A3DA

primary-200 (Soft Border) #8CE3F7

primary-50 (Surface Tint) #E0F7FC

Accent & High-Density Slate Growth & Canvas

accent-500 (Lime Green) #8DC63F

accent-50 (Pill Tint) #F4FBEA

slate-900 (High-Contrast Text) #0F172A

slate-500 (Labels/Meta) #64748B

slate-50 (Canvas Surface) #F8FAFC

Semantic States Feedback

Success (Posted / Paid) #10B981

Warning (Pending Review) #F59E0B

Danger (Rejected / Cancel) #EF4444

Info (Draft / Sync Log) #0284C7

2. Complete Typography Scale (Plus Jakarta Sans)

Skala hierarki tipografi lengkap: Heading H1 - H4, Body Regular, Body Small, serta variasi Span.

Font: Plus Jakarta Sans

H1 Display • 24px / 32px (Bold)

Rekapitulasi Faktur & Transaksi Aggregator

H2 Section • 20px / 28px (Bold)

Pengawasan Operasional Galangan Kapal Dokmor

H3 Card • 16px / 24px (SemiBold)

Rincian Komponen Pemeliharaan Fire Hydrant

H4 Subcard • 14px / 20px (SemiBold)

Alokasi Teknisi Lapangan PT Karunia Pilar Nusantara

Body Regular • 14px / 20px (Regular)

Sistem ERP memfasilitasi pencatatan multi-mata uang, kalkulasi PPh/PPN otomatis, dan rekonsiliasi bank otomatis.

Body Small • 12px / 16px (Regular)

Informasi ini disimpan dalam ledger terdistribusi dan dilindungi oleh protokol enkripsi AES-256.

Span Scales & Contextual Text Markers:

span.small (10px) span.medium (12px - Default Metadata) span.large (14px - Highlight Text) span.x-large (16px - Accent Key Metric)

3. Markdown & Rich Editorial Elements

Standar blockquote enterprise, penulisan blok kode monospaced, perataan teks, dan semantic callout banner.

Enterprise Blockquote

"Integritas transaksi dan auditability real-time merupakan fondasi utama skalabilitas sistem operasional lintas sektor industri Triaone."
— Tri Haryono, Principal Technical Engineer

Code Blocks (Syntax & Inline)

// Odoo QWeb Asset Injection

const amount = triaoneCurrency(doc.total);

</template>

Gunakan tag triaone-badge untuk penanda kode inline pada dokumentasi.

Text Alignment Hierarchy

text-left (Standard)

Uraian faktur dan nama entitas mitra disajikan rata kiri agar mudah dipindai.

text-center (Badge/State)

Status dokumen, nomor indeks, dan tombol aksi diletakkan di posisi tengah.

text-right (Currency/Data)

Rp 1.450.000.000

Seluruh angka finansial rata kanan.

text-justify (Legal Clauses)

Ketentuan perjanjian SPK mengikat kedua belah pihak secara proporsional dan transparan.

Semantic Callout Banners

Informasi Sinkronisasi Database Sinkronisasi log presensi GPS dengan ERP Odoo berjalan otomatis setiap 15 menit.

Peringatan Kuota Transaksi Pulsa Volume transaksi harian mendekati 85% dari batas kuota gateway Alterra Telco.

Aksi Void Dokumen Dibatasi Dokumen berstatus Posted hanya dapat dibalikkan (*reversal entry*) oleh Financial Controller.

Validasi Audit Berhasil Checklist proteksi kebakaran site galangan Dokmor memenuhi kepatuhan standar industri.

4. Imagery & Media Presentation System

Standar perlakuan visual citra: Thumbnails, Poster 16:9, Postcard interaktif, Text-Wrapping Alignment, dan Aspect-Ratio Containers.

Thumbnails & Avatars

Tri Haryono

Principal Engineer • Online

Booster Pump 50HP SKU: MEP-BST-091

Site Inspection

Cilandak TownSquare (Citos)

Tenancy Updated 2 jam lalu

Audit berkala instalasi pendingin HVAC dan proteksi hydrant retail lantai GF.

98% Sesuai SLA

Poster 16:9 Widescreen

Dokmor Facility

Galangan Dokmor Repair Tugboat

Kapasitas reparasi 5.000 DWT Kendari

Image Text-Wrapping (Float Alignment)

SITE MEP

Teknisi Karunia Pilar Nusantara menerapkan pemindaian QR code pada setiap pompa air bertekanan tinggi untuk mencatat riwayat pemeliharaan secara otomatis ke server Odoo ERP Triaone tanpa jeda manual.

Responsive Aspect Ratios

1:1 Square SKU Avatar

16:9 Video Site Cam

4:3 Doc SPK Scan

3. Spacing & Density Formula

Row Height (Tabel) 36px - 40px

Efisiensi maksimal 100+ baris transaksi.

Border Radius 4px (Strict)

Estetika tegas selaras lambang Triaone.

Cell Padding px-3 py-1.5

Jarak 6px vertikal x 12px horizontal.

Elevation Shadow 0 1px 3px

Subtle micro-shadow bebas visual clutter.

Module 03 • Comprehensive Form Controls & Pickers

Enterprise Form Controls, Operations & Line Items

Katalog lengkap seluruh kontrol entri data: Compound inputs, textarea character counter, tri-state checkboxes, instant toggle switches, visual radio cards, dual listbox transfer, Flatpickr datetime picker, automatic Rupiah formatter, numeric stepper, date presets, dropzone file upload, peta koordinat OpenStreetMap interaktif, validasi error inline & popup, draggable list, wizard multistep, dan tabel dynamic invoice.

1. Compound / Grouped Inputs (Prefix & Suffix)

Biaya Layanan (Prefix Rp)

Nomor Kontak WhatsApp (+62)

+62

Subdomain Tenant ERP (Suffix)

.triaone.id

2. Textbox Icon Combinations & Flatpickr Datetime Picker

Jadwal Inspeksi MEP (Date & Time) *

Flatpickr 24-hr format terintegrasi mandiri.

Titik Koordinat Site / GPS *

Cilandak TownSquare (-6.292, 106.799)

Estimasi Durasi Kerja (Timer)

Standar SLA servis mesin dok perbaikan.

3. Multiline Textarea (With Live Character Counter) 68 / 250 karakter

4A. Checkbox Controls (Tri-State Demonstration)

State: Checked (Otomatis potong PPh 23) State: Unchecked (Bebas Biaya Pengiriman)

State: Indeterminate (Sebagian terpilih)

4B. Instant Switches & Toggles

Sinkronisasi GPS Lapangan Real-Time

Kirim koordinat teknisi setiap 5 menit

Notifikasi Tagihan WhatsApp

Kirim reminder otomatis H-3 penagihan

5. Visual Radio Cards (Kategori Penugasan)

MEP & Fire Protection

Instalasi pompa hydrant & electrical Karunia Pilar.

Shipyard Tugboat Repair

Pemeliharaan lambung kapal tongkang Dokmor.

Telco Aggregator & Bill

Distribusi voucher pulsa Alterra Sepulsa.

6. Dual Listbox (Hak Akses & Role Transfer)

Komponen standar untuk memindahkan hak akses pengguna antar wadah secara selektif.

Hak Akses Tersedia 3

access_wms_stock_transfer

access_mep_gps_override

access_payroll_multi_client

Hak Akses Terpasang (Role: PM) 2

access_invoice_post_approval

access_project_gantt_modify

7A. Automatic Rupiah Currency Formatter (IDR)

Raw Unformatted Value: 285500000

7B. Numeric Stepper (+/- Buttons)

Teknisi MEP bertugas

8. Date Range Picker with Quick Presets

Pilihan rentang waktu cepat untuk laporan neraca dan analitik transaksi.

Tanggal Mulai (From)

Tanggal Akhir (To)

9. File Upload Dropzone & Progress Indicator

Drag-and-drop berkas faktur pajak, sertifikat kalibrasi, atau dokumen kontrak.

Klik untuk memilih berkas atau tarik ke area ini

Mendukung PDF, PNG, JPG, XLSX hingga maksimal 25 MB

Berita_Acara_Serah_Terima_Hydrant_MEP.pdf

4.2 MB • Diunggah oleh Guntur S. Putro

100%

10. Live Project Coordinates & Field Site Map (OpenStreetMap)

OpenStreetMap 100% bebas biaya/API key. Klik tombol site untuk navigasi cepat koordinat.

11. Form Validation Standards

Mendukung inline error highlight dan modal popup summary saat validasi gagal.

Nomor NPWP Badan Usaha *

Format NPWP 15 digit valid.

Alamat Email Finance Rekanan * ERROR: INVALID_EMAIL

Masukkan alamat domain email yang lengkap (misal: @triaone.id)

12. Draggable & Reorderable List Items

Tarik ikon titik enam untuk mengubah urutan prioritas pekerjaan lapangan.

HTML5 Drag & Drop

1. Kalibrasi Tekanan Pompa Hydrant (Site Dokmor)

Priority: High

2. Pemasangan Pipa Distribusi Air TS Suites Bali

Priority: Medium

3. Audit Sertifikasi Karyawan PT LSPP Perbankan

Priority: Urgent

13. Dynamic Row Form (Line Items PO / Invoice)

Tabel entri item baris dinamis dengan kalkulasi otomatis PPN 11% dan subtotal real-time.

Deskripsi Produk / Layanan	Kuantitas	Harga Satuan (Rp)	PPN (11%)	Subtotal (Rp)	Aksi
				Rp 30.000.000
				Rp 22.500.000

Subtotal DPP: Rp 52.500.000

PPN 11%: Rp 5.775.000

Total Tagihan: Rp 58.275.000

14. Interactive 3-Step Onboarding Wizard

Langkah 1 dari 3: Profil Perusahaan

Profil Bisnis

Pajak & Penagihan

Tinjauan & Aktivasi

Nama Legal Badan Usaha *

Kategori Industri *

15. Inline Table Editing (Click to Edit)

Klik tombol edit untuk mengubah nilai deskripsi, kuantitas, dan tarif secara inline.

Deskripsi Komponen	Qty	Tarif (IDR)	Aksi Edit
Pemeriksaan Berkala Fire Hydrant Site Dokmor	4 Unit	Rp 12.000.000
Jasa Kalibrasi Flow Meter Air TS Suites	2 Lokasi	Rp 6.500.000

Module 04 • High Load Data & Visualizations

Dense Data Tables, Visual Analytics & Feeds

Tabel data volume tinggi dengan freeze columns, expandable detail rows, show/hide columns, sorting multi-kolom, floating batch actions, SVG Chart containers, Key-Value lists, dan Empty States.

Volume Trx Harian

1.542.890

+18.4% vs target Alterra

System SLA Uptime

99.85%

Target 98-99% Tercapai

Menunggu Approval Direksi

24 Dokumen

Klaim operasional & SPK

Closing Lead Time

3.2 Hari

Turun dari 15-20 hari

Tren Transaksi Pulsa (Bar)

Juta Transaksi

Sen

Sel

Rab

Kam

Jum

Pertumbuhan Omzet (Line)

+24.5%

Target Penyerapan Anggaran

92% Capaian

92%

Realisasi (Rp 18.4M)

Sisa Plafon (Rp 1.6M)

Filter Aktif: Tahun: 2026 Entitas: All Active

	No. Dokumen Nomor unik dokumen transaksi sesuai skema Odoo Sequence.	Mitra / Rekanan	Modul Sektor	Nilai Tagihan (IDR) Total bruto termasuk PPN 11% dan biaya materai.	Status
	PO/2026/08/9912	PT Alterra Indonesia (Sepulsa Hub)	Telco & Aggregator	Rp 1.450.000.000	Validated
Breakdown Transaksi Item: Voucher Elektronik 50k: 20.000 Unit Biaya Integrasi API: Rp 450.000.000 Metode Settlement: H2H Auto Debit
	WO/2026/08/4120	PT Dokmor Optima (Shipyard)	Heavy Manufacturing	Rp 340.000.000	Waiting Approval
Perbaikan Plat Lambung Barge Nikel Dokmor: Material plat baja ASTM A36 seberat 14 ton telah diverifikasi oleh surveyor independen PT Anindya Wiraputra Konsult.
	INV/2026/08/0402	Cilandak TownSquare (Suite #10)	Property Tenancy	Rp 82.500.000	Validated
Tagihan Sewa Ruang Usaha & Utilitas Listrik/Air Citos.
	EXP/2026/08/0019	PT Karunia Pilar (Presensi GPS)	HR & Outsourcing	Rp 8.420.000	Draft
Reimbursement presensi lapangan teknisi MEP site Jakarta.

Menampilkan 4 dari 1.428 catatan transaksi

Key-Value Pairs (Pre-Submit Review)

Form Snapshot

Badan Usaha Pengaju:: PT Tritama Global Sinergi
Penanggung Jawab Proyek:: Guntur S. Putro (Product Enthusiast)
Lokasi Pelaksanaan:: Galangan Dokmor Sulawesi Tenggara
Batas Termin Pembayaran:: Net 30 Days (Disetujui)

Belum Ada Catatan Discrepancy

Seluruh rekonsiliasi kas dan mutasi inventaris pada periode ini telah cocok 100%.

Brand Foundations & Design Tokens

1. Core Color System (Klik swatch untuk menyalin Hex) WCAG AAA / AA Tested

2. Complete Typography Scale (Plus Jakarta Sans)

Rekapitulasi Faktur & Transaksi Aggregator

Pengawasan Operasional Galangan Kapal Dokmor

Rincian Komponen Pemeliharaan Fire Hydrant

Alokasi Teknisi Lapangan PT Karunia Pilar Nusantara

3. Markdown & Rich Editorial Elements

4. Imagery & Media Presentation System

Galangan Dokmor Repair Tugboat

3. Spacing & Density Formula

AppShell, Containers, & Sticky Action Bars

Cards Architecture: Draggable Widgets & Action Cards

Z-Index Architecture & Layering Tokens

Entitas Tagihan & Rekanan Bisnis (Main Form)

Formulir Pendaftaran Teknisi Lapangan Outsourcing

Cilandak TownSquare Suite #301

Enterprise Form Controls, Operations & Line Items

1. Compound / Grouped Inputs (Prefix & Suffix)

2. Textbox Icon Combinations & Flatpickr Datetime Picker

4A. Checkbox Controls (Tri-State Demonstration)

4B. Instant Switches & Toggles

6. Dual Listbox (Hak Akses & Role Transfer)

8. Date Range Picker with Quick Presets

9. File Upload Dropzone & Progress Indicator

10. Live Project Coordinates & Field Site Map (OpenStreetMap)

11. Form Validation Standards

12. Draggable & Reorderable List Items

13. Dynamic Row Form (Line Items PO / Invoice)

14. Interactive 3-Step Onboarding Wizard

15. Inline Table Editing (Click to Edit)

Dense Data Tables, Visual Analytics & Feeds

Tren Transaksi Pulsa (Bar)

Pertumbuhan Omzet (Line)

Target Penyerapan Anggaran

Key-Value Pairs (Pre-Submit Review)

Belum Ada Catatan Discrepancy

State Pipeline, Odoo-Style Chatter & E-Signature Pad

Interactive State Machine Pipeline

Vertical On-Boarding & Process Governance Wizard

1. Identifikasi Badan Usaha & Legalitas Mitra

2. Konfigurasi Billing & Rekening Penampung Operasional

3. Otorisasi Direksi & Digital E-Signature Sign-off

4. Aktivasi Akun ERP & Penerbitan Dokumen Final

Upcoming & Scheduled Activities

Setup E-Signature (Digital Approval Sign-off)

Semantic Status Badge Catalog

Audit Trail Timeline

Destructive Actions & Guardrails

Calendar View, Kanban Board & Loading Architecture

Operational Schedule Calendar

ENTERPRISE KANBAN PIPELINE

LOADING & FEEDBACK ARCHITECTURE

Validasi Formulir Gagal (2 Kesalahan)

Filter Lanjutan (Odoo Query Engine)

Batalkan & Void Voucher Transaksi?

BERITA ACARA SERAH TERIMA (BAST)

Schedule an Activity (Odoo Task Flow)

Konfirmasi Keluar Sesi?