Skip to main content

​
MStore Dashboard - Nuxt 4 Application

MStore Dashboard adalah aplikasi backoffice modern yang dibangun dengan Nuxt 4 dan Vue 3 menggunakan Domain-Driven Design (DDD) dan Clean Architecture.

​
Key Features

12 Domain Modules

Arsitektur modular dengan 12 domain bisnis terpisah (01_core - 12_global)

Spreadsheet Integration

Handsontable untuk editing data seperti Excel dengan validasi server-side

Secure Authentication

JWT dengan access token di memory dan refresh token HttpOnly cookie

Multi-Language

Dukungan 3 bahasa: English, Bahasa Indonesia, dan Japanese

​
Architecture

mstore_dashboard/
├── app/                    # Nuxt app layer (pages, layouts, middleware)
├── features/               # Domain modules (DDD)
│   ├── 01_core/           # Auth, notifications, settings
│   ├── 02_finance/        # Invoice, payment, AR/AP
│   ├── 03_inventory/      # Products, stock management
│   ├── 04_procurement/    # Purchase orders, suppliers
│   ├── 05_sales/          # POS, transactions
│   ├── 06_hr/             # Employees, payroll
│   ├── 07_crm/            # Customers, campaigns
│   ├── 08_cs/             # Customer service, tickets
│   ├── 09_audit/          # Audit logs, compliance
│   ├── 10_analytics/      # Dashboards, reports
│   ├── 11_holding/        # Multi-entity management
│   └── 12_global/         # Security, IAM
├── components/             # Global UI components
├── composables/            # Global composables
├── server/                 # Nitro backend
└── utils/                  # Utility functions

​
Tech Stack

​
Core Technologies

CategoryTechnologyVersion
FrameworkNuxt4.2.1
UI FrameworkVue3.x (latest)
LanguageTypeScript5.7.2
Package Managerpnpm10.24.0

​
State Management

CategoryTechnologyVersion
StorePinia3.0.4
Persistencepinia-plugin-persistedstate4.7.1

​
UI & Styling

CategoryTechnologyVersion
Component LibraryNuxt UI4.2.1
CSS FrameworkTailwindCSS4.1.17
IconsIconify (heroicons, lucide)Latest
SpreadsheetHandsontable16.2.0

​
Internationalization

CategoryTechnologyVersion
i18n@nuxtjs/i18n10.2.1
LocalesEnglish, Indonesian, Japanese-

​
Data & Storage

CategoryTechnologyVersion
IndexedDBDexie4.2.1
Excel Exportxlsx0.18.5
JWT Decodejwt-decode4.0.0

​
Development

CategoryTechnologyVersion
Inspectorvite-plugin-vue-inspector5.3.2
Dev Server Port-4001

​
Architecture Diagram

​
Design Principles

​
Domain-Driven Design (DDD)

  • Bounded Contexts: Setiap domain (inventory, sales, finance) terpisah dan independen
  • Ubiquitous Language: Terminologi bisnis konsisten di seluruh codebase
  • Aggregate Roots: Entitas utama per domain mengelola state-nya sendiri

​
Clean Architecture

  • Separation of Concerns: UI, business logic, dan data access terpisah
  • Dependency Inversion: High-level modules tidak bergantung pada low-level modules
  • Testability: Setiap layer dapat di-test secara independen
  • Maintainability: Perubahan di satu layer tidak mempengaruhi layer lain

​
Offline-First (Partial)

  • IndexedDB Cache: Data geografis (countries, states, cities) di-cache lokal
  • Optimistic UI: UI update sebelum konfirmasi server
  • Background Sync: Sinkronisasi data di background

​
Security Features

  • JWT token-based authentication
  • Access token disimpan di memory (tidak di localStorage)
  • Refresh token sebagai HttpOnly cookie
  • Auto token refresh saat 401
  • Role-based access control (RBAC)
  • Permission checking per feature
  • Route guards untuk protected pages
  • HTTPS-only communication
  • No sensitive data in localStorage
  • Credentials included for cookie auth

​
Quick Start

1

Clone Repository

git clone <repository-url>
cd mstore_dashboard
2

Install Dependencies

pnpm install
3

Setup Environment

cp .env.example .env
# Edit .env dengan konfigurasi yang sesuai
4

Run Development Server

pnpm dev
Dashboard akan berjalan di http://localhost:4001

​
Next Steps

Installation Guide

Panduan instalasi lengkap

Configuration

Konfigurasi environment dan Nuxt

Architecture Deep Dive

Memahami arsitektur DDD

Authentication

Implementasi autentikasi