@rozaqi02/reusable-dashboard 1.1.4 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project are documented in this file.
 
+## [1.2.0] - 2026-06-06
+
+### Added
+
+1. `<AutoDashboard>` — komponen plug-and-play untuk domain transaksional. Client cukup memberi prop `supabase`, `table`, dan pemetaan `columns`; data source, adapter, dan widget config dirakit otomatis tanpa menulis file konfigurasi terpisah.
+2. `createUniversalSource(supabase, { table, columns })` — data source generik yang menormalkan baris ke bentuk kanonik berdasarkan pemetaan kolom runtime.
+3. `adaptUniversalData` + `createEmptyUniversalData` — adapter generik yang menghasilkan struktur `{ stats, charts, table }` dari data kanonik.
+4. `createUniversalWidgetConfig(columns)` — membangun widget config secara dinamis sesuai kolom yang dipetakan.
+
+### Notes
+
+- Preset `cidika`, `tokoSepatu`, dan `dummyUmkm` tetap tersedia untuk kasus yang butuh kontrol penuh.
+- `<AutoDashboard>` ditujukan untuk data transaksional (waktu + status + nilai). Domain non-transaksional tetap memakai adapter manual.
+
 ## [1.0.0] - 2026-04-15
 
 ### Added

package/README.md

@@ -4,7 +4,7 @@ Modul dashboard admin reusable untuk aplikasi UMKM berbasis React + Supabase.
 Mendukung berbagai domain bisnis (travel, toko online, UMKM generik) tanpa menulis ulang komponen.
 CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
-[![version](https://img.shields.io/badge/version-1.1.3-blue)](./CHANGELOG.md)
+[![version](https://img.shields.io/badge/version-1.2.0-blue)](./CHANGELOG.md)
 [![license](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 [![npm](https://img.shields.io/badge/npm-%40rozaqi02%2Freusable--dashboard-red)](https://www.npmjs.com/package/@rozaqi02/reusable-dashboard)
 
@@ -12,6 +12,7 @@ CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
 ## Daftar Isi
 
+0. [⚡ Cara Tercepat — `<AutoDashboard>` (Plug & Play)](#0-cara-tercepat--autodashboard-plug--play)
 1. [Instalasi](#1-instalasi)
 2. [Prasyarat Teknis](#2-prasyarat-teknis)
 3. [Preset yang Tersedia](#3-preset-yang-tersedia)
@@ -28,6 +29,73 @@ CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
 ---
 
+## 0. Cara Tercepat — `<AutoDashboard>` (Plug & Play)
+
+Kalau kamu hanya ingin dashboard jadi **tanpa menulis file config apa pun**, pakai
+komponen `<AutoDashboard>`. Cukup beri tahu nama tabel dan pemetaan kolom — modul
+merakit data source, adapter, dan widget config secara otomatis di balik layar.
+
+```jsx
+import { AutoDashboard } from "@rozaqi02/reusable-dashboard";
+import { supabase } from "./lib/supabaseClient";
+
+export default function Dashboard() {
+  return (
+    <AutoDashboard
+      supabase={supabase}
+      table="bookings"
+      columns={{
+        date: "created_at",     // WAJIB — kolom timestamp
+        status: "status",       // opsional — kolom status transaksi
+        total: "total_idr",     // opsional — kolom nilai uang
+        customer: "customer_name", // opsional — nama pelanggan
+        item: "package_id",     // opsional — nama produk/paket/layanan
+        audience: "audience",   // opsional — segmen pelanggan
+      }}
+      confirmedValue="confirmed" // nilai status yang dihitung "berhasil"
+      pendingValue="pending"     // nilai status yang dihitung "menunggu"
+      title="Dashboard Cidika"
+    />
+  );
+}
+```
+
+Jangan lupa import CSS-nya sekali saja (lihat [Bab 1](#1-instalasi)).
+
+### Props `<AutoDashboard>`
+
+| Prop | Tipe | Wajib | Keterangan |
+|------|------|-------|------------|
+| `supabase` | object | ✅ | Instance Supabase client. |
+| `table` | string | ✅ | Nama tabel sumber data, mis. `"bookings"`, `"orders"`. |
+| `columns.date` | string | ✅ | Kolom timestamp untuk tren harian & filter rentang. |
+| `columns.status` | string | — | Kolom status. Tanpa ini semua baris dianggap "berhasil". |
+| `columns.total` | string | — | Kolom nilai uang untuk metrik pendapatan. |
+| `columns.customer` | string | — | Kolom nama pelanggan (muncul di tabel). |
+| `columns.item` | string | — | Kolom produk/paket/layanan (mengaktifkan chart "Item Teratas"). |
+| `columns.audience` | string | — | Kolom segmen (mengaktifkan chart distribusi segmen). |
+| `confirmedValue` | string | — | Nilai status "berhasil" (default `"confirmed"`). |
+| `pendingValue` | string | — | Nilai status "menunggu" (default `"pending"`). |
+| `title` | string | — | Judul dashboard. |
+| `labels` | object | — | Override sebagian/seluruh teks UI (lihat [Bab 9](#9-label--internasionalisasi)). |
+| `dateLocale` | string | — | Locale format tanggal (default `"id-ID"`). |
+
+Widget menyesuaikan otomatis: chart "Distribusi Segmen" hanya muncul bila `columns.audience`
+diisi, dan chart "Item Teratas" hanya muncul bila `columns.item` diisi.
+
+### Kapan memakai ini vs preset/adapter manual?
+
+`<AutoDashboard>` cocok untuk **data transaksional** — data yang punya waktu, status,
+dan (opsional) nilai uang. Ini mencakup mayoritas UMKM: travel, retail, laundry, klinik,
+restoran, rental, kursus, bengkel, dan sejenisnya.
+
+Untuk kasus yang lebih kompleks — gabungan banyak tabel, metrik khusus domain
+(rating bintang, okupansi kamar), atau data non-transaksional (blog/CMS, inventori murni) —
+gunakan pendekatan **adapter manual** ([Bab 7](#7-cara-membuat-adapter-untuk-domain-bisnis-baru))
+atau **preset** ([Bab 3](#3-preset-yang-tersedia)) yang memberi kontrol penuh.
+
+---
+
 ## 1. Instalasi
 
 ```bash