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

Category	Technology	Version
Framework	Nuxt	4.2.1
UI Framework	Vue	3.x (latest)
Language	TypeScript	5.7.2
Package Manager	pnpm	10.24.0

State Management

Category	Technology	Version
Store	Pinia	3.0.4
Persistence	pinia-plugin-persistedstate	4.7.1

UI & Styling

Category	Technology	Version
Component Library	Nuxt UI	4.2.1
CSS Framework	TailwindCSS	4.1.17
Icons	Iconify (heroicons, lucide)	Latest
Spreadsheet	Handsontable	16.2.0

Internationalization

Category	Technology	Version
i18n	@nuxtjs/i18n	10.2.1
Locales	English, Indonesian, Japanese	-

Data & Storage

Category	Technology	Version
IndexedDB	Dexie	4.2.1
Excel Export	xlsx	0.18.5
JWT Decode	jwt-decode	4.0.0

Development

Category	Technology	Version
Inspector	vite-plugin-vue-inspector	5.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

Authentication

JWT token-based authentication
Access token disimpan di memory (tidak di localStorage)
Refresh token sebagai HttpOnly cookie
Auto token refresh saat 401

Authorization

Role-based access control (RBAC)
Permission checking per feature
Route guards untuk protected pages

Data Security

HTTPS-only communication
No sensitive data in localStorage
Credentials included for cookie auth

Quick Start

Clone Repository

git clone <repository-url>
cd mstore_dashboard

Install Dependencies

pnpm install

Setup Environment

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

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

Backend API Documentation - API yang digunakan dashboard
Mobile Flutter - Aplikasi mobile dengan arsitektur serupa
RBAC Guide - Role-based access control

Introduction

MStore Dashboard Overview

MStore Dashboard - Nuxt 4 Application

Key Features

12 Domain Modules

Spreadsheet Integration

Secure Authentication

Multi-Language

Architecture

Tech Stack

Core Technologies

State Management

UI & Styling

Internationalization

Data & Storage

Development

Architecture Diagram

Design Principles

Domain-Driven Design (DDD)

Clean Architecture

Offline-First (Partial)

Security Features

Quick Start

Next Steps

Installation Guide

Configuration

Architecture Deep Dive

Authentication

​MStore Dashboard - Nuxt 4 Application

​Key Features

12 Domain Modules

Spreadsheet Integration

Secure Authentication

Multi-Language

​Architecture

​Tech Stack

​Core Technologies

​State Management

​UI & Styling

​Internationalization

​Data & Storage

​Development

​Architecture Diagram

​Design Principles

​Domain-Driven Design (DDD)

​Clean Architecture

​Offline-First (Partial)

​Security Features

​Quick Start

​Next Steps

Installation Guide

Configuration

Architecture Deep Dive

Authentication

​Related Documentation

MStore Dashboard - Nuxt 4 Application

Key Features

Architecture

Tech Stack

Core Technologies

State Management

UI & Styling

Internationalization

Data & Storage

Development

Architecture Diagram

Design Principles

Domain-Driven Design (DDD)

Clean Architecture

Offline-First (Partial)

Security Features

Quick Start

Next Steps

Related Documentation