@rozaqi02/reusable-dashboard 1.1.1 → 1.1.3

package/README.md

@@ -1,68 +1,283 @@
 # @rozaqi02/reusable-dashboard
 
-Modul dashboard admin reusable untuk UMKM. Dibangun dengan React + Atomic Design + Supabase.
-Mendukung berbagai domain bisnis tanpa mengubah komponen inti.
+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.0-blue)](./CHANGELOG.md)
+[![version](https://img.shields.io/badge/version-1.1.3-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)
 
 ---
 
-## Install
+## Daftar Isi
+
+1. [Instalasi](#1-instalasi)
+2. [Prasyarat Teknis](#2-prasyarat-teknis)
+3. [Preset yang Tersedia](#3-preset-yang-tersedia)
+4. [Quick Start — Toko Sepatu (Contoh Lengkap)](#4-quick-start--toko-sepatu)
+5. [Quick Start — Cidika Travel](#5-quick-start--cidika-travel)
+6. [Setup Database Supabase](#6-setup-database-supabase)
+7. [Cara Membuat Adapter untuk Domain Bisnis Baru](#7-cara-membuat-adapter-untuk-domain-bisnis-baru)
+8. [Konfigurasi Widget](#8-konfigurasi-widget)
+9. [Label & Internasionalisasi](#9-label--internasionalisasi)
+10. [API Reference Lengkap](#10-api-reference-lengkap)
+11. [Pengembangan & Kontribusi](#11-pengembangan--kontribusi)
+
+---
+
+## 1. Instalasi
 
 ```bash
 npm install @rozaqi02/reusable-dashboard
 npm install recharts @supabase/supabase-js
 ```
 
-Hanya 2 perintah. CSS sudah otomatis terbundle — tidak perlu konfigurasi Tailwind.
+### Import CSS
+
+CSS modul harus di-import secara eksplisit di file CSS utama project kamu.
+
+**Create React App** — tambahkan di `src/index.css`:
+```css
+@import "../node_modules/@rozaqi02/reusable-dashboard/dist/index.css";
+```
+
+**Vite** — tambahkan di `src/index.css` atau `src/main.jsx`:
+```css
+/* index.css */
+@import "@rozaqi02/reusable-dashboard/dist/index.css";
+```
+```jsx
+// atau di main.jsx
+import "@rozaqi02/reusable-dashboard/dist/index.css";
+```
+
+**Next.js** — tambahkan di `app/globals.css` atau `pages/_app.jsx`:
+```css
+@import "@rozaqi02/reusable-dashboard/dist/index.css";
+```
+
+---
+
+## 2. Prasyarat Teknis
+
+| Prasyarat | Versi Minimum | Keterangan |
+|-----------|---------------|------------|
+| Node.js | 18.x | Runtime JavaScript (18 atau lebih baru) |
+| React | 18.0.0 | UI framework (mendukung React 19) |
+| recharts | 2.0.0 | Library chart (AreaChart, PieChart, BarChart) |
+| @supabase/supabase-js | 2.0.0 | Client Supabase untuk koneksi database |
+| Akun Supabase | — | Gratis di [supabase.com](https://supabase.com) |
+
+Modul ini dirancang khusus untuk aplikasi React yang menggunakan Supabase sebagai backend.
+Belum mendukung backend lain (Firebase, REST API, GraphQL) tanpa menulis data source sendiri.
+
+---
+
+## 3. Preset yang Tersedia
+
+Modul menyediakan **3 preset siap pakai** untuk domain bisnis yang berbeda:
+
+| Preset | Domain | Tabel Supabase yang Dibutuhkan | Siap Pakai? |
+|--------|--------|-------------------------------|-------------|
+| **Cidika Travel** | Travel agency / paket wisata | `bookings`, `packages`, `package_locales`, `page_sections` | Config + Adapter + Source |
+| **Toko Sepatu** | Toko online / e-commerce | `orders`, `order_items`, `products`, `customers` | Config + Adapter + Source |
+| **Dummy UMKM** | UMKM generik (contoh domain baru) | `orders`, `products`, `customers` | Config + Adapter saja* |
+
+> *Preset **Dummy UMKM** menyediakan widget config (`dummyUmkmWidgetConfig`) dan
+> adapter (`adaptDummyUmkmData`), tetapi **tidak** menyertakan data source siap pakai.
+> Data source-nya ditulis manual — lihat contoh di
+> `examples/dummy-umkm-example/DummyUmkmDashboard.jsx` (repo GitHub).
+> Ini sengaja dijadikan **template** untuk kamu yang ingin membuat domain baru
+> (lihat [Bab 7](#7-cara-membuat-adapter-untuk-domain-bisnis-baru)).
+
+Hanya **2 data source siap pakai** yang diekspor modul:
+`createCidikaSupabaseSource` dan `createTokoSepatuSupabaseSource`.
+
+Setiap preset siap pakai sudah termasuk: konfigurasi widget, data adapter, dan data source Supabase.
 
 ---
 
-## Quick Start (5 menit)
+## 4. Quick Start — Toko Sepatu
+
+Ini adalah contoh paling lengkap. Ikuti step by step dari nol.
+
+### Step 1 — Setup Supabase
+
+**A. Buat project Supabase** di [app.supabase.com](https://app.supabase.com)
+
+**B. Jalankan SQL schema** berikut di Supabase SQL Editor
+(Settings → SQL Editor → New Query):
+
+```sql
+-- Tabel pelanggan
+CREATE TABLE public.customers (
+  id uuid NOT NULL DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  email text,
+  phone text,
+  city text,
+  created_at timestamp with time zone DEFAULT now(),
+  CONSTRAINT customers_pkey PRIMARY KEY (id)
+);
+
+-- Tabel produk
+CREATE TABLE public.products (
+  id uuid NOT NULL DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  brand text NOT NULL DEFAULT 'Generic',
+  category text NOT NULL DEFAULT 'sneakers',
+  price_idr integer NOT NULL,
+  stock integer NOT NULL DEFAULT 0,
+  is_active boolean NOT NULL DEFAULT true,
+  created_at timestamp with time zone DEFAULT now(),
+  CONSTRAINT products_pkey PRIMARY KEY (id)
+);
+
+-- Tabel pesanan
+CREATE TABLE public.orders (
+  id uuid NOT NULL DEFAULT gen_random_uuid(),
+  customer_id uuid NOT NULL,
+  total_amount integer NOT NULL,
+  status text NOT NULL DEFAULT 'pending',
+  created_at timestamp with time zone DEFAULT now(),
+  CONSTRAINT orders_pkey PRIMARY KEY (id),
+  CONSTRAINT orders_customer_id_fkey FOREIGN KEY (customer_id)
+    REFERENCES public.customers(id)
+);
+
+-- Tabel detail item pesanan
+CREATE TABLE public.order_items (
+  id bigint GENERATED ALWAYS AS IDENTITY,
+  order_id uuid NOT NULL,
+  product_id uuid NOT NULL,
+  qty integer NOT NULL DEFAULT 1,
+  price_idr integer NOT NULL,
+  subtotal integer NOT NULL,
+  CONSTRAINT order_items_pkey PRIMARY KEY (id),
+  CONSTRAINT order_items_order_id_fkey FOREIGN KEY (order_id)
+    REFERENCES public.orders(id),
+  CONSTRAINT order_items_product_id_fkey FOREIGN KEY (product_id)
+    REFERENCES public.products(id)
+);
+
+-- Aktifkan Realtime (untuk fitur live update)
+ALTER PUBLICATION supabase_realtime ADD TABLE public.orders;
+ALTER PUBLICATION supabase_realtime ADD TABLE public.products;
+ALTER PUBLICATION supabase_realtime ADD TABLE public.customers;
+```
+
+**C. Isi data contoh** (opsional, untuk testing):
+
+File seed data lengkap tersedia di repo GitHub:
+`examples/toko-sepatu-example/seed-data.sql`.
+
+> Catatan: folder `examples/` **tidak ikut** saat `npm install` (paket npm hanya
+> berisi `dist/`). Untuk mengambil file SQL contoh, kloning repo GitHub atau
+> salin manual dari halaman repositori.
+
+**D. Aktifkan Realtime** di Supabase Dashboard:
+Database → Replication → centang tabel `orders`, `products`, `customers`.
 
-### 1. Buat Supabase client
+### Step 2 — Buat Supabase client
 
 ```js
 // src/lib/supabaseClient.js
 import { createClient } from '@supabase/supabase-js';
+
 export const supabase = createClient(
-  process.env.REACT_APP_SUPABASE_URL,
+  process.env.REACT_APP_SUPABASE_URL,    // CRA
   process.env.REACT_APP_SUPABASE_ANON_KEY
+  // Jika pakai Vite: import.meta.env.VITE_SUPABASE_URL
 );
 ```
 
 ```env
-# .env
-REACT_APP_SUPABASE_URL=https://xxx.supabase.co
-REACT_APP_SUPABASE_ANON_KEY=eyJ...
+# .env (di root project)
+REACT_APP_SUPABASE_URL=https://xxxxxx.supabase.co
+REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+
+# Jika pakai Vite:
+# VITE_SUPABASE_URL=https://xxxxxx.supabase.co
+# VITE_SUPABASE_ANON_KEY=eyJ...
 ```
 
-### 2. Pakai di halaman dashboard
+Nilai URL dan ANON KEY didapat dari Supabase Dashboard:
+**Settings → API → Project URL & anon key**.
+
+### Step 3 — Implementasi halaman Dashboard
 
 ```jsx
+// src/pages/Dashboard.jsx
 import React, { useMemo } from "react";
-import { supabase } from "./lib/supabaseClient";
+import { supabase } from "../lib/supabaseClient";
 import {
   ReusableDashboardView,
-  cidikaWidgetConfig,
-  createCidikaSupabaseSource,
-  adaptCidikaDashboardData,
-  createEmptyDashboardData,
-  createDashboardLabels,
+  tokoSepatuWidgetConfig,
+  createTokoSepatuSupabaseSource,
+  adaptTokoSepatuData,
+  createEmptyTokoSepatuData,
   useReusableDashboard,
 } from "@rozaqi02/reusable-dashboard";
 
-const source = createCidikaSupabaseSource(supabase);
+// Inisialisasi data source — dibuat sekali di luar komponen
+const source = createTokoSepatuSupabaseSource(supabase);
 
-export default function Dashboard() {
-  const labels = useMemo(() => createDashboardLabels((key) => key), []);
+// Label UI dalam Bahasa Indonesia
+// Ganti nilai-nilai ini sesuai bahasa/konteks bisnis kamu
+const labels = {
+  title: "Dashboard Toko Saya",
+  refresh: "Refresh",
+  liveUpdate: "Live",
+  loadFailed: "Gagal memuat data.",
+  retry: "Coba Lagi",
+  confirmedOnly: "Confirmed",
+  pendingOnly: "Pending",
+  allStatus: "Semua Status",
+  showPendingOverlay: "Tampilkan pending",
+  allAudience: "Semua",
+  audienceDomestic: "Domestic",
+  audienceForeign: "Foreign",
+  customDate: "Kustom",
+  reset: "Reset",
+  topSort: "Urutkan",
+  sortBookings: "Qty Terjual",
+  sortRevenue: "Revenue",
+  sortDesc: "Turun",
+  sortAsc: "Naik",
+  confirmedBookings: "Total Pesanan",
+  confirmedRevenue: "Total Pendapatan",
+  avgRevenue: "Rata-rata / Pesanan",
+  conversionRate: "Conversion Rate",
+  totalProducts: "Total Produk",
+  dailyTrends: "Tren Harian",
+  statusDistribution: "Distribusi Status",
+  topPackages: "Produk Terlaris",
+  recentBookings: "Pesanan Terbaru",
+  date: "Tanggal",
+  customer: "Pelanggan",
+  package: "Produk",
+  audience: "Audiens",
+  total: "Total",
+  status: "Status",
+  noRecentBookings: "Belum ada pesanan",
+  bookingsMetric: "Pesanan",
+  revenueMetric: "Pendapatan",
+  pendingMetric: "Pesanan (Pending)",
+  confirmedBookingMetric: "Pesanan (Confirmed)",
+  confirmedRevenueMetric: "Pendapatan (Confirmed)",
+  unknownAudience: "Unknown",
+  dayLabel: (n) => `${n} hari`,
+  formatStatusLabel: (s) => ({ confirmed: "Confirmed", pending: "Pending", cancelled: "Cancelled" })[s] || s,
+  formatAudienceLabel: (v) => v || "Unknown",
+};
 
+export default function Dashboard() {
   const state = useReusableDashboard({
-    config: cidikaWidgetConfig,
+    config: tokoSepatuWidgetConfig,
     dataSource: source,
-    adapter: adaptCidikaDashboardData,
-    createEmptyState: createEmptyDashboardData,
+    adapter: adaptTokoSepatuData,
+    createEmptyState: createEmptyTokoSepatuData,
     languageCode: "id",
     dateLocale: "id-ID",
     labels,
@@ -70,7 +285,7 @@ export default function Dashboard() {
 
   return (
     <ReusableDashboardView
-      config={cidikaWidgetConfig}
+      config={tokoSepatuWidgetConfig}
       labels={labels}
       loading={state.loading}
       error={state.error}
@@ -86,77 +301,905 @@ export default function Dashboard() {
 }
 ```
 
-### 3. Jalankan
+### Step 4 — Jalankan
 
 ```bash
-npm start
+npm start   # Create React App
+# atau
+npm run dev  # Vite
+```
+
+Buka browser → dashboard tampil dengan data dari Supabase.
+
+---
+
+## 5. Quick Start — Cidika Travel
+
+Ganti hanya 4 baris dari contoh Toko Sepatu di atas:
+
+```jsx
+import {
+  ReusableDashboardView,
+  cidikaWidgetConfig,              // ← ganti ini
+  createCidikaSupabaseSource,      // ← ganti ini
+  adaptCidikaDashboardData,        // ← ganti ini
+  createEmptyDashboardData,        // ← ganti ini
+  createDashboardLabels,
+  useReusableDashboard,
+} from "@rozaqi02/reusable-dashboard";
+
+// Jika pakai react-i18next:
+const { t } = useTranslation();
+const labels = useMemo(() => createDashboardLabels(t), [t]);
+
+// Jika tidak pakai i18n, gunakan objek labels manual seperti contoh Toko Sepatu
+
+const source = createCidikaSupabaseSource(supabase);
+
+const state = useReusableDashboard({
+  config: cidikaWidgetConfig,
+  dataSource: source,
+  adapter: adaptCidikaDashboardData,
+  createEmptyState: createEmptyDashboardData,
+  languageCode: "id",
+  dateLocale: "id-ID",
+  labels,
+});
+```
+
+**Tabel Supabase yang dibutuhkan untuk Cidika Travel:**
+
+```sql
+-- Tabel utama
+bookings (id, created_at, total_idr, status, package_id, audience, customer_name)
+packages (id, slug, price, is_active)
+package_locales (package_id, lang, title)  -- untuk nama paket multi-bahasa
+page_sections (id, page_id, type, order)   -- untuk menghitung jumlah section
+```
+
+---
+
+## 6. Setup Database Supabase
+
+### Cara mendapatkan URL dan API Key
+
+1. Login ke [app.supabase.com](https://app.supabase.com)
+2. Buka project kamu
+3. Klik **Settings** (ikon gear) di sidebar kiri
+4. Klik **API**
+5. Salin:
+   - **Project URL** → `REACT_APP_SUPABASE_URL`
+   - **anon public** key → `REACT_APP_SUPABASE_ANON_KEY`
+
+### Mengaktifkan Realtime (wajib untuk live update)
+
+1. Di Supabase Dashboard, klik **Database** di sidebar
+2. Klik **Replication**
+3. Di bagian **Source**, aktifkan toggle untuk tabel yang ingin di-listen
+4. Atau jalankan SQL berikut:
+
+```sql
+-- Untuk Toko Sepatu:
+ALTER PUBLICATION supabase_realtime ADD TABLE public.orders;
+ALTER PUBLICATION supabase_realtime ADD TABLE public.products;
+
+-- Untuk Cidika Travel:
+ALTER PUBLICATION supabase_realtime ADD TABLE public.bookings;
+ALTER PUBLICATION supabase_realtime ADD TABLE public.packages;
+```
+
+### Row Level Security (RLS)
+
+Jika dashboard tidak menampilkan data padahal data sudah ada, kemungkinan
+RLS (Row Level Security) memblokir query. Solusi sementara untuk development:
+
+```sql
+-- PERHATIAN: Hanya untuk development. Jangan gunakan di production
+-- tanpa menambahkan policy yang benar.
+ALTER TABLE public.orders DISABLE ROW LEVEL SECURITY;
+ALTER TABLE public.customers DISABLE ROW LEVEL SECURITY;
+ALTER TABLE public.products DISABLE ROW LEVEL SECURITY;
+```
+
+Untuk production, tambahkan policy yang sesuai:
+
+```sql
+-- Contoh policy: izinkan semua operasi SELECT untuk role anon
+CREATE POLICY "Allow read for anon" ON public.orders
+  FOR SELECT TO anon USING (true);
+```
+
+---
+
+## 7. Cara Membuat Adapter untuk Domain Bisnis Baru
+
+Bab ini adalah panduan **dari nol** untuk client yang domainnya **bukan** travel
+atau toko sepatu (misal: laundry, klinik, rental mobil, kursus, dll). Kamu hanya
+perlu menulis **3 file kecil**, tanpa pernah menyentuh kode inti modul.
+
+### 7.0 Pahami dulu alurnya (WAJIB dibaca)
+
+Modul ini memisahkan 3 tanggung jawab. Memahami peran masing-masing membuat
+sisanya gampang:
+
+```
+  DATABASE Supabase
+        │
+        ▼
+  ┌───────────────┐  "Ambil data mentah dari Supabase"
+  │ 1. DATA SOURCE │  → tahu nama tabel & kolom kamu
+  └───────────────┘  → output: objek { bookings, recent, staticCounts }
+        │
+        ▼
+  ┌───────────────┐  "Ubah data mentah → format standar dashboard"
+  │ 2. ADAPTER     │  → hitung stats, susun data chart & tabel
+  └───────────────┘  → output: objek { stats, charts, table }
+        │
+        ▼
+  ┌───────────────┐  "Tentukan WIDGET apa yang tampil & labelnya"
+  │ 3. WIDGET      │  → kartu mana, chart mana, kolom tabel mana
+  │    CONFIG      │
+  └───────────────┘
+        │
+        ▼
+  useReusableDashboard(...)  →  <ReusableDashboardView />   (UI jadi)
+```
+
+Aturan emas:
+- **Data Source** = satu-satunya bagian yang tahu nama tabel/kolom database kamu.
+- **Adapter** = satu-satunya bagian yang berisi logika hitung (revenue, konversi, dll).
+- **Widget Config** = satu-satunya bagian yang menentukan tampilan (deklaratif, tanpa logika).
+
+Urutan mengerjakan: **Data Source → Adapter → Widget Config → rangkai di halaman**.
+
+---
+
+### 7.1 Kontrak antar-lapisan (referensi cepat)
+
+**Output Data Source** (yang masuk ke adapter sebagai `raw`):
+
+```javascript
+{
+  bookings: [...],      // WAJIB. Array semua transaksi dalam rentang tanggal.
+  recent: [...],        // WAJIB. Array 10 transaksi terbaru (untuk tabel).
+  packageLocales: [],   // Opsional. Untuk nama multi-bahasa. Boleh [].
+  staticCounts: {       // Opsional. Angka agregat (mis. jumlah produk).
+    packages: 0,
+    sections: 0,
+  },
+}
+```
+
+> Nama field **harus** `bookings` dan `recent` walau domainmu bukan booking —
+> ini istilah internal modul. Isi datanya bebas (order, transaksi, reservasi, dll).
+
+**Output Adapter** (yang dirender oleh komponen):
+
+```javascript
+{
+  stats: {
+    bookingsConfirm: number,  // angka untuk stat card (key bebas, asal cocok config)
+    revenueConfirm: number,
+    // ...tambahkan key lain sesuai kebutuhan
+  },
+  charts: {
+    dailyTrends: [            // area chart tren harian
+      { dateKey: "2026-05-01", label: "01 Mei", count: 5, revenue: 2500000, pendingCount: 2 }
+    ],
+    statusDistribution: [     // pie chart distribusi status
+      { status: "confirmed", label: "Confirmed", count: 30 },
+    ],
+    audienceDistribution: [], // pie chart kedua (boleh kosong [])
+    topPackages: [            // bar chart terlaris (boleh kosong [])
+      { packageId: "uuid", name: "Nama Produk", value: 10 },
+    ],
+  },
+  table: {
+    recentBookings: [         // baris tabel transaksi terbaru
+      {
+        id: "uuid",
+        createdAt: "2026-05-01T10:00:00Z",  // ISO string
+        customerName: "Budi Santoso",
+        packageName: "Nama Produk",
+        audienceLabel: "Domestic",          // boleh "-"
+        totalIDR: 500000,                   // integer Rupiah
+        status: "confirmed",                // lowercase
+        statusLabel: "Confirmed",
+      }
+    ],
+  },
+}
+```
+
+> Penting: `valueKey` di widget config (Bab 8) harus cocok dengan key di `stats`.
+> Contoh: jika config punya `valueKey: "revenueConfirm"`, adapter wajib
+> mengembalikan `stats.revenueConfirm`.
+
+---
+
+### 7.2 STUDI KASUS: Aplikasi Laundry (dari nol)
+
+Misalkan client punya 1 tabel Supabase bernama `laundry_orders`:
+
+| Kolom | Tipe | Contoh |
+|-------|------|--------|
+| `id` | uuid | `a1b2...` |
+| `created_at` | timestamptz | `2026-05-01T10:00:00Z` |
+| `customer_name` | text | `Budi Santoso` |
+| `total_price` | integer | `50000` |
+| `status` | text | `confirmed` / `pending` |
+| `service_type` | text | `Cuci Kering` |
+
+Target dashboard: 2 stat card (total order, total pendapatan), 2 chart
+(tren harian + distribusi status), dan 1 tabel order terbaru.
+
+---
+
+#### Langkah 1 — Tulis DATA SOURCE
+
+Buat file `src/datasources/laundryDataSource.js`. Tugasnya: query Supabase,
+kembalikan dalam bentuk `{ bookings, recent, staticCounts }`.
+
+```javascript
+// src/datasources/laundryDataSource.js
+export function createLaundrySupabaseSource(supabase) {
+  return {
+    // Dipanggil otomatis oleh useReusableDashboard setiap filter berubah.
+    // Parameter fromISO/toISO/statusScope sudah dihitung oleh modul.
+    async fetchDashboardSnapshot({ fromISO, toISO, statusScope }) {
+      // (a) Semua order dalam rentang tanggal → untuk chart & stats
+      const { data: orders = [] } = await supabase
+        .from("laundry_orders")
+        .select("id, created_at, customer_name, total_price, status, service_type")
+        .gte("created_at", fromISO)
+        .lte("created_at", toISO)
+        .order("created_at", { ascending: true });
+
+      // (b) 10 order terbaru → untuk tabel "Order Terbaru"
+      const recentQuery = supabase
+        .from("laundry_orders")
+        .select("id, created_at, customer_name, total_price, status, service_type")
+        .gte("created_at", fromISO)
+        .lte("created_at", toISO)
+        .order("created_at", { ascending: false })
+        .limit(10);
+
+      // Hormati filter status dari UI (confirmed/pending/all)
+      if (statusScope && statusScope !== "all") {
+        recentQuery.eq("status", statusScope);
+      }
+      const { data: recent = [] } = await recentQuery;
+
+      // (c) Angka agregat opsional, mis. jumlah jenis layanan
+      const { count: serviceCount } = await supabase
+        .from("services")
+        .select("*", { count: "exact", head: true });
+
+      // Kembalikan SESUAI KONTRAK (nama bookings & recent wajib)
+      return {
+        bookings: orders,
+        recent,
+        packageLocales: [],
+        staticCounts: { packages: serviceCount || 0, sections: 0 },
+      };
+    },
+
+    // OPSIONAL — aktifkan live update realtime. Hapus jika tak perlu.
+    subscribeLiveUpdate(onEvent) {
+      const channel = supabase
+        .channel("laundry-dashboard-live")
+        .on("postgres_changes",
+          { event: "*", schema: "public", table: "laundry_orders" }, onEvent)
+        .subscribe();
+      return () => supabase.removeChannel(channel);
+    },
+  };
+}
+```
+
+> Tips: kalau kamu **tidak** butuh realtime, cukup hapus fungsi
+> `subscribeLiveUpdate`. Badge "Live" otomatis tidak muncul.
+
+---
+
+#### Langkah 2 — Tulis ADAPTER
+
+Buat file `src/adapters/laundryAdapter.js`. Tugasnya: ubah `raw` dari data source
+menjadi `{ stats, charts, table }`. Pakai helper `toNumber` & `buildDayBuckets`
+dari modul agar tidak menulis ulang logika tanggal.
+
+```javascript
+// src/adapters/laundryAdapter.js
+import { toNumber, buildDayBuckets } from "@rozaqi02/reusable-dashboard";
+
+// (1) State kosong — dipakai modul sebagai initial state & saat error.
+//     Strukturnya HARUS sama dengan output adaptLaundryData di bawah.
+export function createEmptyLaundryData() {
+  return {
+    stats: { bookingsConfirm: 0, revenueConfirm: 0 },
+    charts: { dailyTrends: [], statusDistribution: [], audienceDistribution: [], topPackages: [] },
+    table: { recentBookings: [] },
+  };
+}
+
+// (2) Fungsi adapter utama.
+export function adaptLaundryData({ raw, filters, range, dateLocale, labels }) {
+  if (!raw) return createEmptyLaundryData();
+
+  const orders = raw.bookings || [];
+  const recent = raw.recent || [];
+
+  // Siapkan bucket harian kosong untuk chart tren (1 bucket = 1 hari)
+  const dailyBuckets = buildDayBuckets(range.daysWindow, range.fromISO, dateLocale);
+  const dayLookup = new Map(dailyBuckets.map((b) => [b.dateKey, b]));
+
+  const statusMap = new Map();
+  let confirmed = 0;
+  let revenue = 0;
+
+  // Loop semua order: hitung total & isi bucket harian
+  orders.forEach((row) => {
+    const status = String(row.status || "pending").toLowerCase();
+    const amount = toNumber(row.total_price);          // ← kolom DB kamu
+    const dayKey = String(row.created_at || "").slice(0, 10);
+
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+
+    const bucket = dayLookup.get(dayKey);
+    if (bucket && status === "confirmed") {
+      bucket.count += 1;
+      bucket.revenue += amount;
+    }
+
+    if (status === "confirmed") { confirmed += 1; revenue += amount; }
+  });
+
+  return {
+    // stats: key di sini HARUS cocok dengan valueKey di widget config
+    stats: {
+      bookingsConfirm: confirmed,
+      revenueConfirm: revenue,
+    },
+    charts: {
+      dailyTrends: dailyBuckets,
+      statusDistribution: Array.from(statusMap.entries()).map(([status, count]) => ({
+        status,
+        label: labels?.formatStatusLabel?.(status) || status,
+        count,
+      })),
+      audienceDistribution: [],   // tidak dipakai laundry → kosong
+      topPackages: [],            // tidak dipakai laundry → kosong
+    },
+    table: {
+      recentBookings: recent.map((row) => {
+        const status = String(row.status || "pending").toLowerCase();
+        return {
+          id: row.id,
+          createdAt: row.created_at,
+          customerName: row.customer_name || "-",
+          packageName: row.service_type || "-",     // ← kolom DB kamu
+          audienceLabel: "-",
+          totalIDR: toNumber(row.total_price),
+          status,
+          statusLabel: labels?.formatStatusLabel?.(status) || status,
+        };
+      }),
+    },
+  };
+}
 ```
 
-Selesai.
+> Catatan: `audienceDistribution` dan `topPackages` boleh `[]` jika domainmu
+> tidak butuh. Lebih baik lagi: **jangan daftarkan** chart itu di widget config
+> (Langkah 3), supaya tidak tampil sama sekali.
 
 ---
 
-## Preset yang tersedia
+#### Langkah 3 — Tulis WIDGET CONFIG
+
+Buat file `src/config/laundryConfig.js`. Ini murni deklaratif — menentukan
+widget apa yang muncul. `valueKey` harus cocok dengan key `stats` dari adapter,
+dan `label` adalah key dari objek labels (Langkah 4).
+
+```javascript
+// src/config/laundryConfig.js
+export const laundryConfig = {
+  id: "laundry.dashboard",
+  defaultFilters: {
+    statusScope: "confirmed",   // filter awal saat dibuka
+    daysPreset: 30,             // tampilkan 30 hari terakhir
+    sortPkgBy: "bookings",
+    sortPkgDir: "desc",
+  },
+  widgets: {
+    // 2 stat card → valueKey cocok dgn stats di adapter
+    stats: [
+      { id: "orders",  label: "confirmedBookings", icon: "TrendingUp",
+        valueKey: "bookingsConfirm", format: "number",   accentColor: "blue" },
+      { id: "revenue", label: "confirmedRevenue",  icon: "DollarSign",
+        valueKey: "revenueConfirm",  format: "currency", accentColor: "green" },
+    ],
+    // 2 chart → hanya yang ada datanya (tren & status)
+    charts: [
+      { id: "trend",  type: "dailyArea", label: "dailyTrends",        icon: "BarChart3" },
+      { id: "status", type: "statusPie", label: "statusDistribution", icon: "PieChart" },
+    ],
+    // 1 tabel → kolom mengacu ke field recentBookings dari adapter
+    table: {
+      id: "recentOrders",
+      label: "recentBookings",
+      icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date",     label: "date",     accessor: "createdAt",  type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "service",  label: "package",  accessor: "packageName" },
+        { id: "total",    label: "total",    accessor: "totalIDR",   type: "currency" },
+        { id: "status",   label: "status",   accessor: "statusLabel",
+          type: "statusBadge", statusAccessor: "status" },
+      ],
+    },
+  },
+};
+```
 
-| Preset | Import | Tabel Supabase yang dibutuhkan |
-|--------|--------|-------------------------------|
-| **Cidika Travel** | `cidikaWidgetConfig`, `createCidikaSupabaseSource`, `adaptCidikaDashboardData` | `bookings`, `packages`, `package_locales`, `page_sections` |
-| **Toko Sepatu** | `tokoSepatuWidgetConfig`, `createTokoSepatuSupabaseSource`, `adaptTokoSepatuData` | `orders`, `order_items`, `products`, `customers` |
-| **Dummy UMKM** | `dummyUmkmWidgetConfig`, `adaptDummyUmkmData` | (gunakan salah satu source di atas) |
+> Detail tiap field config (tipe kolom, nama ikon, format) ada di
+> [Bab 8 — Konfigurasi Widget](#8-konfigurasi-widget).
 
 ---
 
-## Pakai dengan i18n (react-i18next)
+#### Langkah 4 — Rangkai semuanya di halaman Dashboard
+
+Sekarang gabungkan ke-3 file di atas + objek labels, lalu serahkan ke
+`useReusableDashboard` dan render `ReusableDashboardView`.
+
+```jsx
+// src/pages/LaundryDashboard.jsx
+import React, { useMemo } from "react";
+import { supabase } from "../lib/supabaseClient";
+import {
+  ReusableDashboardView,
+  useReusableDashboard,
+} from "@rozaqi02/reusable-dashboard";
+
+// 3 file yang baru kamu buat:
+import { laundryConfig } from "../config/laundryConfig";
+import { createLaundrySupabaseSource } from "../datasources/laundryDataSource";
+import { adaptLaundryData, createEmptyLaundryData } from "../adapters/laundryAdapter";
+
+// Data source dibuat sekali di luar komponen (anti re-render)
+const source = createLaundrySupabaseSource(supabase);
+
+// Label UI — semua teks yang tampil. Sesuaikan bahasa/konteks bisnismu.
+const labels = {
+  title: "Dashboard Laundry",
+  refresh: "Refresh",
+  liveUpdate: "Live",
+  loadFailed: "Gagal memuat data.",
+  retry: "Coba Lagi",
+  allStatus: "Semua Status",
+  confirmedOnly: "Selesai",
+  pendingOnly: "Proses",
+  reset: "Reset",
+  confirmedBookings: "Total Order",
+  confirmedRevenue: "Total Pendapatan",
+  dailyTrends: "Tren Harian",
+  statusDistribution: "Distribusi Status",
+  recentBookings: "Order Terbaru",
+  noRecentBookings: "Belum ada order",
+  date: "Tanggal",
+  customer: "Pelanggan",
+  package: "Layanan",
+  total: "Total",
+  status: "Status",
+  bookingsMetric: "Order",
+  revenueMetric: "Pendapatan",
+  confirmedBookingMetric: "Order (Selesai)",
+  confirmedRevenueMetric: "Pendapatan (Selesai)",
+  dayLabel: (n) => `${n} hari`,
+  formatStatusLabel: (s) =>
+    ({ confirmed: "Selesai", pending: "Proses", cancelled: "Batal" })[s] || s,
+  formatAudienceLabel: (v) => v || "-",
+};
+
+export default function LaundryDashboard() {
+  const state = useReusableDashboard({
+    config: laundryConfig,                // ← Langkah 3
+    dataSource: source,                   // ← Langkah 1
+    adapter: adaptLaundryData,            // ← Langkah 2
+    createEmptyState: createEmptyLaundryData,  // ← Langkah 2
+    languageCode: "id",
+    dateLocale: "id-ID",
+    labels,
+  });
+
+  return (
+    <ReusableDashboardView
+      config={laundryConfig}
+      labels={labels}
+      loading={state.loading}
+      error={state.error}
+      filters={state.filters}
+      onFilterChange={state.updateFilter}
+      onResetFilters={state.resetFilters}
+      onRefresh={state.refresh}
+      data={state.data}
+      dateLocale="id-ID"
+      liveUpdateEnabled={state.liveUpdateEnabled}
+    />
+  );
+}
+```
+
+Selesai. Buka halaman tersebut → dashboard laundry tampil lengkap dengan data
+dari Supabase, filter tanggal, search, sort, dan pagination — semua sudah
+ditangani modul.
+
+---
+
+### 7.3 Checklist & troubleshooting domain baru
+
+| Gejala | Penyebab umum | Solusi |
+|--------|---------------|--------|
+| Stat card menampilkan `0` terus | `valueKey` di config tidak cocok dengan key `stats` adapter | Samakan nama, mis. `valueKey: "revenueConfirm"` ↔ `stats.revenueConfirm` |
+| Chart kosong | Data source tidak mengembalikan `bookings`, atau status bukan `"confirmed"` | Pastikan field bernama `bookings` & status lowercase |
+| Tabel kosong padahal ada data | Data source tidak mengembalikan `recent` | Tambahkan query `recent` (10 terbaru) |
+| Error "is not a function" | Lupa pasang `createEmptyState` | Wajib kirim `createEmptyXxxData` ke hook |
+| Label tampil sebagai key mentah | Key di config (`label`) tidak ada di objek `labels` | Tambahkan key tersebut di objek labels |
+| Badge "Live" tidak muncul | `subscribeLiveUpdate` tidak ada / Realtime belum aktif | Tambahkan fungsi + aktifkan Realtime di Supabase |
+
+Checklist final sebelum rilis ke client:
+- [ ] Data source mengembalikan `{ bookings, recent }` (nama persis).
+- [ ] Adapter mengembalikan `{ stats, charts, table }` lengkap.
+- [ ] `createEmptyXxxData` punya struktur sama dengan output adapter.
+- [ ] Semua `valueKey` di config ada di `stats`.
+- [ ] Semua `label`/`emptyLabel` di config ada di objek `labels`.
+- [ ] RLS Supabase mengizinkan `SELECT` untuk role `anon` (lihat [Bab 6](#6-setup-database-supabase)).
+
+---
+
+## 8. Konfigurasi Widget
+
+Widget configuration menentukan apa yang ditampilkan di dashboard.
+Kamu bisa gunakan preset yang ada atau buat konfigurasi baru.
+
+```javascript
+export const myConfig = {
+  id: "my.dashboard",
+
+  // Filter default saat pertama kali dibuka
+  defaultFilters: {
+    statusScope: "confirmed",          // "confirmed" | "pending" | "all"
+    includePendingOverlay: false,      // tampilkan overlay pending di chart?
+    audience: "",                      // "" | "domestic" | "foreign"
+    daysPreset: 30,                    // 7 | 30 | 90 | 0 (0 = custom range)
+    sortPkgBy: "revenue",              // "bookings" | "revenue"
+    sortPkgDir: "desc",                // "desc" | "asc"
+  },
+
+  widgets: {
+    // Stat cards (1–4 kartu)
+    stats: [
+      {
+        id: "totalOrders",
+        label: "confirmedBookings",     // key dari objek labels
+        icon: "TrendingUp",             // nama ikon Lucide
+        valueKey: "bookingsConfirm",    // key dari data.stats yang dikembalikan adapter
+        format: "number",              // "number" | "currency" | "percent"
+        accentColor: "blue",           // "blue" | "green" | "violet" | "orange" | "sky" | "rose"
+      },
+      {
+        id: "totalRevenue",
+        label: "confirmedRevenue",
+        icon: "DollarSign",
+        valueKey: "revenueConfirm",
+        format: "currency",
+        accentColor: "green",
+      },
+    ],
+
+    // Chart cards (1–4 chart)
+    charts: [
+      {
+        id: "trendHarian",
+        type: "dailyArea",             // "dailyArea" | "statusPie" | "audiencePie" | "topPackagesBar"
+        label: "dailyTrends",          // key dari objek labels
+        icon: "BarChart3",
+      },
+      {
+        id: "distribusiStatus",
+        type: "statusPie",
+        label: "statusDistribution",
+        icon: "PieChart",
+      },
+    ],
+
+    // Tabel (hanya 1)
+    table: {
+      id: "recentOrders",
+      label: "recentBookings",         // key dari objek labels
+      icon: "Calendar",
+      emptyLabel: "noRecentBookings",  // key dari objek labels, untuk empty state
+      columns: [
+        { id: "date",     label: "date",     accessor: "createdAt",    type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "product",  label: "package",  accessor: "packageName" },
+        { id: "total",    label: "total",    accessor: "totalIDR",     type: "currency" },
+        {
+          id: "status", label: "status", accessor: "statusLabel",
+          type: "statusBadge",
+          statusAccessor: "status",   // kolom yang berisi status lowercase (confirmed/pending/cancelled)
+        },
+      ],
+    },
+  },
+};
+```
+
+**Tipe kolom tabel:**
+| `type` | Format Output |
+|--------|---------------|
+| `date` | Diformat dengan `dateLocale` (contoh: "01 Mei 2026") |
+| `currency` | Diformat dengan prefix "Rp" dan titik ribuan |
+| `statusBadge` | Badge berwarna sesuai status |
+| _(tanpa type)_ | Ditampilkan apa adanya (string) |
+
+**Nama ikon yang tersedia:**
+`TrendingUp`, `TrendingDown`, `DollarSign`, `Users`, `PieChart`, `BarChart3`,
+`Calendar`, `RotateCcw`, `Search`, `ChevronLeft`, `ChevronRight`, `ArrowUp`,
+`ArrowDown`, `AlertCircle`
+
+---
+
+## 9. Label & Internasionalisasi
+
+### Tanpa i18n (objek manual)
+
+Buat objek labels dengan semua key yang diperlukan:
+
+```javascript
+const labels = {
+  // Header
+  title: "Dashboard",
+  refresh: "Refresh",
+  liveUpdate: "Live",
+  loadFailed: "Gagal memuat data.",
+  retry: "Coba Lagi",
+
+  // Filter
+  confirmedOnly: "Confirmed",
+  pendingOnly: "Pending",
+  allStatus: "Semua Status",
+  showPendingOverlay: "Tampilkan pending",
+  allAudience: "Semua",
+  audienceDomestic: "Domestic",
+  audienceForeign: "Foreign",
+  customDate: "Kustom",
+  reset: "Reset",
+  topSort: "Urutkan",
+  sortBookings: "Qty Terjual",
+  sortRevenue: "Revenue",
+  sortDesc: "Turun",
+  sortAsc: "Naik",
+
+  // Stat cards (sesuaikan dengan valueKey di config)
+  confirmedBookings: "Total Pesanan",
+  confirmedRevenue: "Total Pendapatan",
+  avgRevenue: "Rata-rata / Pesanan",
+  conversionRate: "Conversion Rate",
+  totalProducts: "Total Produk",
+
+  // Chart & tabel
+  dailyTrends: "Tren Harian",
+  statusDistribution: "Distribusi Status",
+  audienceDistribution: "Distribusi Audiens",
+  topPackages: "Produk Terlaris",
+  recentBookings: "Pesanan Terbaru",
+  date: "Tanggal",
+  customer: "Pelanggan",
+  package: "Produk",
+  audience: "Audiens",
+  total: "Total",
+  status: "Status",
+  noRecentBookings: "Belum ada pesanan",
+
+  // Chart metrics
+  bookingsMetric: "Pesanan",
+  revenueMetric: "Pendapatan",
+  pendingMetric: "Pesanan (Pending)",
+  confirmedBookingMetric: "Pesanan (Confirmed)",
+  confirmedRevenueMetric: "Pendapatan (Confirmed)",
+  unknownAudience: "Unknown",
+
+  // Fungsi formatter (wajib ada)
+  dayLabel: (n) => `${n} hari`,
+  formatStatusLabel: (status) => ({
+    confirmed: "Confirmed",
+    pending: "Pending",
+    cancelled: "Cancelled",
+    shipped: "Dikirim",
+    delivered: "Terkirim",
+  })[status] || status,
+  formatAudienceLabel: (value) => value || "Unknown",
+};
+```
+
+### Dengan react-i18next
 
 ```jsx
 import { useTranslation } from "react-i18next";
 import { createDashboardLabels } from "@rozaqi02/reusable-dashboard";
 
-const { t } = useTranslation();
-const labels = useMemo(() => createDashboardLabels(t), [t]);
+function Dashboard() {
+  const { t, i18n } = useTranslation();
+  const languageCode = (i18n.language || "id").slice(0, 2);
+  const dateLocale = languageCode === "id" ? "id-ID" : "en-US";
+  const labels = useMemo(() => createDashboardLabels(t), [t]);
+  // ...
+}
 ```
 
+> `createDashboardLabels(t)` menggunakan key i18n dari namespace default.
+> Pastikan file terjemahan kamu memiliki key `admin.dashboard.*`.
+
 ---
 
-## API Ringkas
+## 10. API Reference Lengkap
 
-```js
-// Config
-import { cidikaWidgetConfig, tokoSepatuWidgetConfig, dummyUmkmWidgetConfig }
+### Config
+
+| Export | Tipe | Deskripsi |
+|--------|------|-----------|
+| `cidikaWidgetConfig` | Object | Config dashboard Cidika Travel |
+| `tokoSepatuWidgetConfig` | Object | Config dashboard Toko Sepatu |
+| `dummyUmkmWidgetConfig` | Object | Config dashboard UMKM generik |
 
-// Data source
-import { createCidikaSupabaseSource, createTokoSepatuSupabaseSource }
+### Data Source
 
-// Adapter
-import { adaptCidikaDashboardData, createEmptyDashboardData }
-import { adaptTokoSepatuData, createEmptyTokoSepatuData }
-import { adaptDummyUmkmData, createEmptyDummyUmkmData }
+| Export | Parameter | Deskripsi |
+|--------|-----------|-----------|
+| `createCidikaSupabaseSource(supabase)` | Supabase client | Data source Cidika Travel |
+| `createTokoSepatuSupabaseSource(supabase)` | Supabase client | Data source Toko Sepatu |
 
-// Hook
-import { useReusableDashboard, useRealtimeUpdate }
+### Data Adapter
 
-// View
-import { ReusableDashboardView }
+| Export | Parameter | Deskripsi |
+|--------|-----------|-----------|
+| `adaptCidikaDashboardData({ raw, filters, range, dateLocale, languageCode, labels })` | — | Adapter Cidika |
+| `createEmptyDashboardData()` | — | Empty state Cidika |
+| `adaptTokoSepatuData({ raw, filters, range, dateLocale, labels })` | — | Adapter Toko Sepatu |
+| `createEmptyTokoSepatuData()` | — | Empty state Toko Sepatu |
+| `adaptDummyUmkmData({ raw, filters, range, dateLocale, labels })` | — | Adapter UMKM generik |
+| `createEmptyDummyUmkmData()` | — | Empty state UMKM generik |
 
-// Utils
-import { createDashboardLabels, createDefaultFilters, resolveDateRange }
-import { formatIDR, formatDate, shortId, formatYYYYMMDD }
+### Hook Utama
+
+```typescript
+const state = useReusableDashboard({
+  config: object,              // Widget configuration
+  dataSource: object,          // Objek dari createXxxSupabaseSource()
+  adapter: Function,           // Fungsi adaptXxxData
+  createEmptyState: Function,  // Fungsi createEmptyXxxData
+  languageCode: "id" | "en",
+  dateLocale: "id-ID" | "en-US",
+  labels: object,
+});
+
+// state yang dikembalikan:
+state.data              // Data dashboard terproses
+state.loading           // boolean — sedang loading?
+state.error             // string — pesan error (kosong jika tidak ada)
+state.filters           // State filter aktif saat ini
+state.updateFilter      // (field: string, value: any) => void
+state.resetFilters      // () => void
+state.refresh           // ({ silent?: boolean }) => void
+state.liveUpdateEnabled // boolean — realtime subscription aktif?
+state.lastUpdatedAt     // Date | null
+state.range             // { fromISO, toISO, daysWindow }
 ```
 
+### Komponen
+
+| Komponen | Deskripsi |
+|----------|-----------|
+| `ReusableDashboardView` | Halaman dashboard lengkap — gunakan ini untuk integrasi cepat |
+| `StatCard` | Kartu metrik dengan warna aksen |
+| `ChartCard` | Kartu grafik (area/pie/bar) |
+| `DataTable` | Tabel dengan search, sort, pagination |
+| `FilterPanel` | Panel filter |
+| `SearchBar` | Input pencarian |
+| `DateRangeFilter` | Filter rentang tanggal (dropdown picker) |
+| `Badge` | Label status berwarna |
+| `Button` | Tombol |
+| `Input` | Input field |
+| `Typography` | Komponen teks |
+| `Icon` | Ikon (Lucide) |
+| `SkeletonLoader` | Placeholder loading |
+| `DashboardLayout` | Template layout dengan slot sidebar dan content |
+| `SidebarNavigation` | Navigasi sidebar |
+| `TopbarHeader` | Header atas |
+
+### Utility
+
+| Function | Deskripsi |
+|----------|-----------|
+| `createDashboardLabels(t)` | Buat labels dari fungsi `t` react-i18next |
+| `createDefaultFilters(base?)` | Buat state filter default |
+| `resolveDateRange({ daysPreset, dateFrom, dateTo })` | Resolve ke `{ fromISO, toISO, daysWindow }` |
+| `formatYYYYMMDD(date)` | Format `Date` ke `"YYYY-MM-DD"` |
+| `formatIDR(value)` | Format angka ke format Rupiah (`1.500.000`) |
+| `formatDate(value, locale)` | Format ISO date string dengan locale |
+| `shortId(value, length?)` | Potong string (default 8 karakter) |
+| `toNumber(value)` | Konversi ke angka, fallback ke 0 |
+| `buildDayBuckets(daysWindow, fromISO, dateLocale)` | Bangun array bucket harian untuk chart |
+| `sortMapEntries(map, direction)` | Urutkan entri Map berdasarkan nilai |
+
 ---
 
-## Development
+## 11. Pengembangan & Kontribusi
 
 ```bash
-git clone <repo>
+# Clone repository
+git clone https://github.com/rozaqi02/reusable-dashboard-umkm.git
 cd reusable-dashboard-umkm
+
+# Install dependencies
 npm install
-npm run build   # output ke dist/
-npm test
+
+# Build
+npm run build        # Output ke dist/
+
+# Test
+npm test             # Jest + React Testing Library
+npm test -- --coverage  # Lihat code coverage
 ```
 
+### Cara Publish Versi Baru ke npm
+
+Modul ini publik di npm: `@rozaqi02/reusable-dashboard`. Setiap kali kode modul
+berubah, kamu wajib publish versi baru agar perubahan sampai ke client.
+
+```bash
+# 1. Pastikan sudah login (sekali saja per device)
+npm login            # buka browser untuk autentikasi
+npm whoami           # verifikasi → harus muncul "rozaqi02"
+
+# 2. Naikkan versi (pilih salah satu sesuai jenis perubahan)
+npm version patch    # 1.1.2 → 1.1.3  (bug fix / perbaikan kecil)
+npm version minor    # 1.1.2 → 1.2.0  (fitur baru, tanpa breaking change)
+npm version major    # 1.1.2 → 2.0.0  (breaking change)
+
+# 3. Publish (build otomatis jalan dulu lewat prepublishOnly)
+npm publish          # akan meminta OTP (One-Time Password)
+```
+
+> **Catatan OTP:** karena akun npm kamu mengaktifkan 2FA, `npm publish` akan
+> meminta one-time password. Masukkan kode dari aplikasi authenticator kamu
+> (atau gunakan `npm publish --otp=123456`). Langkah ini **harus dijalankan
+> manual di terminal kamu** — tidak bisa diotomasi.
+
+> **Publish ≠ git push.** `npm publish` hanya mengunggah isi folder `dist/`
+> (lihat field `files` di `package.json`) ke registry npm. Tidak bergantung pada
+> commit/push git terakhir. Jadi kamu tidak perlu push ke GitHub dulu agar
+> bisa publish — keduanya independen. (Tetap disarankan commit & push agar
+> source code di GitHub sinkron dengan versi yang dirilis.)
+
+### Update Modul di Project Client
+
+Setelah versi baru terbit, di setiap project yang memakai modul:
+
+```bash
+npm install @rozaqi02/reusable-dashboard@latest
+```
+
+Lalu restart dev server (`npm start` / `npm run dev`) agar perubahan termuat.
+
 ---
 
 ## License
 
 MIT — Ahmad Abror Rozaqi Fatoni
+
+---
+
+**Made with ❤️ for UMKM Indonesia**