Lewati ke konten utama

Problem Statement

Saat ini TessaERP masih menggunakan pendekatan dashboard yang bersifat statis dan hardcoded pada halaman DashboardUtama.

Kondisi saat ini menyebabkan:

  • Dashboard tidak dapat dikonfigurasi berdasarkan role tanpa perubahan kode
  • Penambahan widget baru membutuhkan modifikasi halaman dashboard secara langsung
  • Tidak tersedia mekanisme katalog widget yang terstandarisasi
  • Layout dashboard tidak dapat diatur oleh administrator
  • Tidak tersedia abstraction layer untuk rendering widget secara dinamis
  • Tidak ada standar pengembangan widget yang konsisten antar modul
  • Dashboard sulit dikembangkan menjadi Executive Dashboard, Operational Dashboard, maupun Personalized Dashboard

Sebagai bagian dari transformasi TessaERP menjadi platform ERP modern yang modular dan extensible, diperlukan Dashboard & Widget Framework yang memungkinkan pengelolaan widget secara terpusat dan konfiguratif.

Goals

Mengimplementasikan Dashboard & Widget Management Framework pada TessaERP dengan pendekatan:

  • Widget dikembangkan menggunakan reusable template dan/atau custom component
  • Dashboard dirender secara dinamis berdasarkan konfigurasi database
  • Widget dapat di-assign ke role tanpa perubahan kode
  • Layout dashboard dapat dikonfigurasi oleh administrator
  • Dashboard menggunakan Dynamic Component Rendering
  • Mendukung auto-refresh per widget
  • Menyediakan fondasi untuk personalized dashboard pada fase berikutnya

Tujuan utama:

  • Menghilangkan dashboard hardcoded
  • Menyediakan dashboard berbasis role
  • Mempercepat pengembangan widget baru
  • Menstandarkan pola pengembangan widget
  • Menyediakan fondasi dashboard yang scalable dan extensible

Scope of Works

Backend​

1. Dashboard Widget Catalog​

Implementasikan master catalog untuk seluruh widget yang tersedia pada sistem.

Detail Teknis​

Setiap widget harus memiliki metadata:

FieldPurpose
Widget CodeUnique Widget Identifier
Widget NameNama Widget
CategoryKategori Dashboard
Template TypeTipe Template Widget
Component NameCustom Component
Service TypeData Service Source
Default Col SpanLayout Default
Active StatusEnable / Disable Widget

Requirement​

  • Widget terdaftar dalam catalog terpusat
  • Mendukung template-based widget
  • Mendukung custom widget component
  • Mendukung extensibility untuk widget baru

2. Role Dashboard Configuration​

Implementasikan konfigurasi dashboard berdasarkan role.

Detail Teknis​

Setiap role dapat menentukan:

  • Widget yang ditampilkan
  • Urutan widget
  • Ukuran widget
  • Interval refresh widget
  • Status aktif/nonaktif widget

Requirement​

  • Konfigurasi tersimpan pada database
  • Tidak memerlukan deployment ulang saat konfigurasi berubah
  • Mendukung multi-role dashboard configuration

3. User Dashboard Role Management​

Implementasikan mekanisme penentuan dashboard berdasarkan role bisnis user.

Background​

Saat ini TessaERP menggunakan struktur:

  • tconfuser
  • tconfgroup
  • tconfusergroup

untuk kebutuhan menu access control.

Namun tconfgroup merepresentasikan permission group dan bukan business role sehingga tidak cocok digunakan sebagai dashboard role.

Requirement​

Tambahkan kolom baru pada tabel tconfuser:

ALTER TABLE tconfuser ADD COLUMN user_dashboard_role VARCHAR(50) DEFAULT NULL;

Contoh nilai:

EXECUTIVE FINANCE_MGR SALES_MGR WAREHOUSE_MGR PROCUREMENT_MGR MANUFACTURE_MGR HR_MGR SUPERVISOR OPERATOR

Detail Teknis​

Dashboard role:

  • Independen dari menu access group (tconfgroup)
  • Ditentukan langsung pada master user
  • Digunakan saat proses login untuk menentukan dashboard yang ditampilkan
  • Tidak mempengaruhi permission menu yang sudah ada

Login Flow​

User Login ↓ Load User Information ↓ Read user_dashboard_role ↓ NULL ? ↓ YES → Use OPERATOR NO → Use Assigned Role ↓ Load Dashboard Configuration ↓ Render Dashboard

User Management Enhancement​

Tambahkan field baru pada halaman User Management:

Dashboard Role

Administrator dapat menentukan dashboard role untuk setiap user.

Initial Role Mapping​

Dashboard RoleTarget User
EXECUTIVEDirector / Owner
FINANCE_MGRFinance Manager
SALES_MGRSales Manager
WAREHOUSE_MGRWarehouse Manager
PROCUREMENT_MGRProcurement Manager
MANUFACTURE_MGRManufacturing Manager
HR_MGRHR Manager
SUPERVISORSupervisor
OPERATORStaff / Operator

Business Rules​

  • Satu user hanya memiliki satu dashboard role aktif
  • Dashboard role tidak terkait dengan permission group
  • Dashboard role dapat berbeda dengan menu access group
  • Jika role tidak diisi maka sistem menggunakan role OPERATOR
  • Dashboard role dibaca saat proses login
  • Dashboard role digunakan untuk menentukan konfigurasi widget yang akan ditampilkan

4. Dashboard Rendering Engine​

Implementasikan Dashboard Container sebagai rendering engine utama.

Detail Teknis​

Flow:

User Login ↓ Resolve Role ↓ Load Dashboard Configuration ↓ Resolve Widget Definition ↓ Render Dynamic Component ↓ Display Dashboard

Requirement​

  • Menggunakan Blazor DynamicComponent
  • Tidak menggunakan switch-case per widget
  • Mendukung generic template maupun custom component
  • Mendukung parameter injection

5. Generic Widget Template Framework​

Implementasikan reusable widget templates.

Template Types​

TemplatePurpose
KPI_CARDKPI Summary
KPI_PROGRESSKPI vs Target
CHARTBar, Line, Pie, Donut
ALERT_TABLEAlert & Exception List
GROUPED_TABLEExpandable Grouped Data

Requirement​

  • Template reusable
  • Konsisten dengan UI standard ERP
  • Mendukung drill-down URL
  • Mendukung loading state
  • Mendukung refresh

6. Widget Service Abstraction​

Implementasikan standard interface untuk data provider widget.

Interface Requirement​

Setiap widget service harus:

  • Mengambil data berdasarkan context user
  • Mendukung entity, branch, dan user filtering
  • Mengembalikan data sesuai template contract

Standard Query Context​

WidgetQueryParams { EntityIds, BranchIds, UserId, DateFrom, DateTo }

Requirement​

  • Dashboard tidak mengakses database secara langsung
  • Data source terisolasi pada service layer
  • Service dapat direuse oleh template manapun

7. Widget Shell Framework​

Implementasikan wrapper standar untuk seluruh widget.

Feature​

  • Widget Header
  • Widget Title
  • Refresh Button
  • Loading Indicator
  • Drill-down Action
  • Error State

Requirement​

  • Konsisten pada seluruh widget
  • Mendukung auto refresh
  • Mendukung manual refresh

8. Layout Management Framework​

Implementasikan sistem layout dashboard.

Detail Teknis​

Menggunakan grid 12 kolom.

Supported Size:

Col SpanUsage
3KPI Card
4KPI Summary
6Chart
8Large Table
12Full Width Widget

Requirement​

  • Layout configurable via database
  • Ordering configurable
  • Responsive terhadap ukuran layar

9. Dashboard Administration Pages​

Implementasikan halaman administrasi dashboard.

Widget Catalog​

Fungsi:

  • View widget catalog
  • Activate/Deactivate widget
  • View widget metadata

Role Dashboard Configuration​

Fungsi:

  • Assign widget ke role
  • Enable/Disable widget
  • Configure layout
  • Configure ordering
  • Configure refresh interval

Requirement​

  • Mengikuti pola Control Files yang sudah ada
  • Tidak memerlukan perubahan kode untuk konfigurasi dashboard

10. Auto Refresh Framework​

Implementasikan auto-refresh per widget.

Detail Teknis​

Menggunakan:

PeriodicTimer

Flow​

Widget Loaded ↓ Start Timer ↓ Refresh Interval Reached ↓ Reload Widget Data ↓ Update UI

Requirement​

  • Refresh configurable per widget
  • Tidak melakukan page reload
  • Mendukung manual refresh

11. Dashboard Migration​

Implementasikan migrasi dari DashboardUtama existing.

Scope​

  • Dashboard lama tetap berjalan
  • Widget existing diekstrak menjadi widget individual
  • Dashboard baru berjalan pada route terpisah
  • Dashboard lama dipensiunkan setelah validasi selesai

Requirement​

  • Tidak mengganggu operasional existing dashboard
  • Mendukung migrasi bertahap

Business Rules

  • Dashboard ditentukan berdasarkan role user
  • Hanya widget aktif yang ditampilkan
  • Widget wajib terdaftar pada Widget Catalog
  • Dashboard harus dirender melalui Dashboard Engine
  • Widget harus menggunakan Widget Shell
  • Data widget harus berasal dari Widget Service
  • Layout dashboard harus berasal dari konfigurasi database
  • Administrator dapat mengubah konfigurasi dashboard tanpa deployment ulang
  • Setiap user memiliki maksimal satu Dashboard Role aktif
  • Dashboard Role bersifat independen dari Menu Access Group
  • Dashboard Role digunakan sebagai key untuk menentukan widget configuration
  • User tanpa Dashboard Role menggunakan konfigurasi OPERATOR

Out of Scope (Phase 1)

  • End User Drag & Drop Layout
  • Personalized Dashboard per User
  • Dashboard Export PDF
  • Real-Time WebSocket Push
  • AI Generated Insights
  • User Defined Query Builder
  • User Created Custom Widget
  • Dashboard Sharing
  • Dashboard Snapshot History
  • Dashboard Notification Center

Acceptance Criteria

  • Widget catalog tersedia dan dapat dikelola
  • Dashboard dapat dirender berdasarkan role
  • Widget dapat di-assign ke role melalui konfigurasi
  • Dynamic Component berhasil merender widget secara runtime
  • Generic template dapat digunakan untuk KPI, Chart, dan Table widget
  • Widget service abstraction berjalan sesuai standar
  • Widget shell menampilkan loading, refresh, dan drill-down action
  • Layout dashboard dapat dikonfigurasi melalui database
  • Auto refresh berjalan sesuai interval konfigurasi
  • Dashboard Administration Page tersedia
  • Dashboard lama tetap berjalan selama masa migrasi
  • Widget baru dapat ditambahkan tanpa perubahan Dashboard Container
  • Kolom user_dashboard_role tersedia pada master user
  • Dashboard Role dapat diatur melalui User Management
  • Dashboard Role berhasil dibaca saat login
  • User tanpa Dashboard Role menggunakan konfigurasi default OPERATOR
  • Dashboard yang dirender sesuai dengan Dashboard Role user
  • Perubahan Dashboard Role tidak mempengaruhi Menu Access Group existing

References