create-nala 3.0.0

package/template/src/layouts/AuthLayout.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { usePreferredDark } from '@vueuse/core'
+import { watchEffect, onUnmounted } from 'vue'
+
+// Strictly follow OS system preference (dark / light) on all auth pages
+const prefersDark = usePreferredDark()
+const previousTheme = localStorage.getItem('vueuse-color-scheme')
+
+watchEffect(() => {
+  if (prefersDark.value) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+})
+
+// Restore stored admin theme preference when navigating away from auth layout
+onUnmounted(() => {
+  if (previousTheme === 'dark') {
+    document.documentElement.classList.add('dark')
+  } else if (previousTheme === 'light') {
+    document.documentElement.classList.remove('dark')
+  } else {
+    if (prefersDark.value) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex min-h-dvh w-full flex-col items-center justify-start pt-8 pb-12 px-4 sm:justify-center sm:py-8 sm:px-6 bg-muted/40 transition-colors duration-200 overflow-y-auto">
+    <RouterView v-slot="{ Component }">
+      <Transition name="page" mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </div>
+</template>

package/template/src/lib/axios.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { api, tokenStorage } from './axios'
+
+vi.mock('@/components/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+vi.mock('@/lib/loading-bar', () => ({
+  loadingBar: {
+    start: vi.fn(),
+    finish: vi.fn(),
+    fail: vi.fn(),
+  },
+}))
+
+describe('Axios Client & Token Storage', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('manages accessToken and refreshToken in storage', () => {
+    tokenStorage.setAccessToken('access_token_abc')
+    tokenStorage.setRefreshToken('refresh_token_xyz')
+
+    expect(tokenStorage.getAccessToken()).toBe('access_token_abc')
+    expect(tokenStorage.getRefreshToken()).toBe('refresh_token_xyz')
+
+    tokenStorage.clearTokens()
+    expect(tokenStorage.getAccessToken()).toBeNull()
+    expect(tokenStorage.getRefreshToken()).toBeNull()
+  })
+
+  it('has base configuration with JSON content type', () => {
+    expect(api.defaults.headers['Content-Type']).toBe('application/json')
+    expect(api.defaults.timeout).toBe(15000)
+  })
+})

package/template/src/lib/axios.ts

@@ -0,0 +1,243 @@
+/**
+ * Enterprise Axios Client & Interceptor Layer
+ * -------------------------------------------
+ * Features:
+ * - Base URL & timeout configuration
+ * - Automatic Bearer token injection
+ * - Silent Token Refresh queue with 401 auto-retry
+ * - Global Error Toasts via vue-sonner (toggleable with `skipToast`)
+ * - Global Route / API Loading Bar integration
+ * - TypeScript Generics support for typed responses
+ */
+
+import axios, {
+  type AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+  type InternalAxiosRequestConfig,
+} from 'axios'
+import { toast } from '@/components/ui/sonner'
+import { loadingBar } from '@/lib/loading-bar'
+
+// ─── Custom Request Config Type ───────────────────────────────────────────────
+export interface CustomRequestConfig extends AxiosRequestConfig {
+  /** Skip auto toast notification on error */
+  skipToast?: boolean
+  /** Skip Bearer authorization header injection */
+  skipAuth?: boolean
+  /** Skip global loading bar progress */
+  skipLoading?: boolean
+  /** Internal retry flag for 401 token refresh */
+  _retry?: boolean
+}
+
+interface CustomInternalRequestConfig extends InternalAxiosRequestConfig {
+  skipToast?: boolean
+  skipAuth?: boolean
+  skipLoading?: boolean
+  _retry?: boolean
+}
+
+// ─── Storage Keys & Helpers ───────────────────────────────────────────────────
+export const TOKEN_KEY = 'auth_token'
+export const REFRESH_TOKEN_KEY = 'auth_refresh_token'
+
+export const tokenStorage = {
+  getAccessToken(): string | null {
+    return localStorage.getItem(TOKEN_KEY)
+  },
+  setAccessToken(token: string) {
+    localStorage.setItem(TOKEN_KEY, token)
+  },
+  getRefreshToken(): string | null {
+    return localStorage.getItem(REFRESH_TOKEN_KEY)
+  },
+  setRefreshToken(token: string) {
+    localStorage.setItem(REFRESH_TOKEN_KEY, token)
+  },
+  clearTokens() {
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(REFRESH_TOKEN_KEY)
+  },
+}
+
+// ─── Create Instance ──────────────────────────────────────────────────────────
+export const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000',
+  timeout: 15_000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+})
+
+// ─── Token Refresh Queue Manager ──────────────────────────────────────────────
+let isRefreshing = false
+let failedQueue: Array<{
+  resolve: (value?: unknown) => void
+  reject: (reason?: unknown) => void
+}> = []
+
+const processQueue = (error: AxiosError | null, token: string | null = null) => {
+  failedQueue.forEach((promise) => {
+    if (error) {
+      promise.reject(error)
+    } else {
+      promise.resolve(token)
+    }
+  })
+  failedQueue = []
+}
+
+// ─── Request Interceptor ──────────────────────────────────────────────────────
+api.interceptors.request.use(
+  (config: CustomInternalRequestConfig) => {
+    // 1. Trigger global loading bar
+    if (!config.skipLoading) {
+      loadingBar.start()
+    }
+
+    // 2. Attach Authorization token
+    if (!config.skipAuth) {
+      const token = tokenStorage.getAccessToken()
+      if (token && config.headers) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+    }
+
+    return config
+  },
+  (error: AxiosError) => {
+    loadingBar.fail()
+    return Promise.reject(error)
+  },
+)
+
+// ─── Response Interceptor ─────────────────────────────────────────────────────
+api.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const config = response.config as CustomInternalRequestConfig
+    if (!config.skipLoading) {
+      loadingBar.finish()
+    }
+    return response
+  },
+  async (error: AxiosError<{ message?: string; error?: string }>) => {
+    const originalRequest = error.config as CustomInternalRequestConfig | undefined
+    const status = error.response?.status
+
+    if (!originalRequest?.skipLoading) {
+      loadingBar.fail()
+    }
+
+    // ─── 1. Handle 401 Unauthorized & Silent Token Refresh ─────────────────
+    if (status === 401 && originalRequest && !originalRequest._retry) {
+      const refreshToken = tokenStorage.getRefreshToken()
+
+      // If no refresh token available or request was to auth/refresh itself
+      if (!refreshToken || originalRequest.url?.includes('/auth/refresh')) {
+        tokenStorage.clearTokens()
+        if (!originalRequest.skipToast) {
+          toast.error('Session expired. Please log in again.')
+        }
+        if (window.location.pathname !== '/auth/login') {
+          window.location.href = `/auth/login?redirect=${encodeURIComponent(window.location.pathname)}`
+        }
+        return Promise.reject(error)
+      }
+
+      if (isRefreshing) {
+        // Queue this request while refresh is in flight
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject })
+        })
+          .then((token) => {
+            if (originalRequest.headers) {
+              originalRequest.headers.Authorization = `Bearer ${token}`
+            }
+            return api(originalRequest)
+          })
+          .catch((err) => Promise.reject(err))
+      }
+
+      originalRequest._retry = true
+      isRefreshing = true
+
+      try {
+        // Execute token refresh call
+        const response = await axios.post<{
+          accessToken: string
+          refreshToken?: string
+        }>(
+          `${import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000'}/auth/refresh`,
+          { refreshToken },
+          { headers: { 'Content-Type': 'application/json' } },
+        )
+
+        const { accessToken, refreshToken: newRefreshToken } = response.data
+        tokenStorage.setAccessToken(accessToken)
+        if (newRefreshToken) {
+          tokenStorage.setRefreshToken(newRefreshToken)
+        }
+
+        if (originalRequest.headers) {
+          originalRequest.headers.Authorization = `Bearer ${accessToken}`
+        }
+
+        processQueue(null, accessToken)
+        return api(originalRequest)
+      } catch (refreshError) {
+        processQueue(refreshError as AxiosError, null)
+        tokenStorage.clearTokens()
+        toast.error('Session has ended. Please sign in again.')
+        window.location.href = '/auth/login'
+        return Promise.reject(refreshError)
+      } finally {
+        isRefreshing = false
+      }
+    }
+
+    // ─── 2. Handle 403 Forbidden ──────────────────────────────────────────
+    if (status === 403) {
+      if (!originalRequest?.skipToast) {
+        toast.error('Access denied. You do not have permission for this action.')
+      }
+    }
+
+    // ─── 3. Handle 500+ Server Errors & Network Errors ────────────────────
+    if (!originalRequest?.skipToast) {
+      const serverMessage =
+        error.response?.data?.message ||
+        error.response?.data?.error ||
+        (status ? `Server error (${status}). Please try again later.` : 'Network connection failed. Please check your internet.')
+
+      if (status !== 401 && status !== 403) {
+        toast.error(serverMessage)
+      }
+    }
+
+    return Promise.reject(error)
+  },
+)
+
+// ─── Typed API Client Helper Wrapper ──────────────────────────────────────────
+export const apiClient = {
+  get<T = unknown>(url: string, config?: CustomRequestConfig): Promise<T> {
+    return api.get<T, AxiosResponse<T>>(url, config).then((res) => res.data)
+  },
+  post<T = unknown>(url: string, data?: unknown, config?: CustomRequestConfig): Promise<T> {
+    return api.post<T, AxiosResponse<T>>(url, data, config).then((res) => res.data)
+  },
+  put<T = unknown>(url: string, data?: unknown, config?: CustomRequestConfig): Promise<T> {
+    return api.put<T, AxiosResponse<T>>(url, data, config).then((res) => res.data)
+  },
+  patch<T = unknown>(url: string, data?: unknown, config?: CustomRequestConfig): Promise<T> {
+    return api.patch<T, AxiosResponse<T>>(url, data, config).then((res) => res.data)
+  },
+  delete<T = unknown>(url: string, config?: CustomRequestConfig): Promise<T> {
+    return api.delete<T, AxiosResponse<T>>(url, config).then((res) => res.data)
+  },
+}
+
+export default api

package/template/src/lib/formatters.spec.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import {
+  formatCurrency,
+  formatNumber,
+  formatCompactNumber,
+  formatDate,
+  formatDateTime,
+  formatRelativeTime,
+  formatBytes,
+  getInitials,
+  truncate,
+} from './formatters'
+
+describe('Formatters Utility', () => {
+  describe('formatCurrency', () => {
+    it('formats USD currency by default', () => {
+      const result = formatCurrency(1250.5)
+      expect(result).toBe('$1,250.50')
+    })
+
+    it('formats IDR without decimals by default', () => {
+      const result = formatCurrency(50000, { currency: 'IDR', locale: 'id-ID' })
+      expect(result.replace(/\s/g, ' ')).toMatch(/Rp\s?50\.000/)
+    })
+
+    it('handles null, undefined, empty, or invalid inputs safely', () => {
+      expect(formatCurrency(null)).toBe('-')
+      expect(formatCurrency(undefined)).toBe('-')
+      expect(formatCurrency('')).toBe('-')
+      expect(formatCurrency('not-a-number')).toBe('-')
+    })
+  })
+
+  describe('formatNumber', () => {
+    it('formats numbers with thousand separators', () => {
+      expect(formatNumber(1000000)).toBe('1,000,000')
+      expect(formatNumber('4500.5')).toBe('4,500.5')
+    })
+
+    it('returns "-" for invalid numbers', () => {
+      expect(formatNumber(null)).toBe('-')
+      expect(formatNumber('invalid')).toBe('-')
+    })
+  })
+
+  describe('formatCompactNumber', () => {
+    it('formats large numbers into compact strings', () => {
+      expect(formatCompactNumber(1500)).toBe('1.5K')
+      expect(formatCompactNumber(2500000)).toBe('2.5M')
+    })
+
+    it('handles small numbers', () => {
+      expect(formatCompactNumber(120)).toBe('120')
+    })
+  })
+
+  describe('formatDate and formatDateTime', () => {
+    it('formats dates into readable format', () => {
+      const date = new Date('2026-08-21T07:00:00Z')
+      expect(formatDate(date, 'medium')).toContain('2026')
+      expect(formatDateTime(date)).toContain('2026')
+    })
+
+    it('returns "-" for invalid dates', () => {
+      expect(formatDate(null)).toBe('-')
+      expect(formatDate('invalid-date')).toBe('-')
+      expect(formatDateTime(undefined)).toBe('-')
+    })
+  })
+
+  describe('formatRelativeTime', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date('2026-08-21T12:00:00Z'))
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('returns "just now" for dates within 45 seconds', () => {
+      const date = new Date('2026-08-21T11:59:30Z')
+      expect(formatRelativeTime(date)).toBe('just now')
+    })
+
+    it('returns relative minutes, hours, or days', () => {
+      const fiveMinsAgo = new Date('2026-08-21T11:55:00Z')
+      expect(formatRelativeTime(fiveMinsAgo)).toBe('5 minutes ago')
+
+      const twoHoursAgo = new Date('2026-08-21T10:00:00Z')
+      expect(formatRelativeTime(twoHoursAgo)).toBe('2 hours ago')
+    })
+  })
+
+  describe('formatBytes', () => {
+    it('formats bytes into KB, MB, GB accurately', () => {
+      expect(formatBytes(0)).toBe('0 B')
+      expect(formatBytes(1024)).toBe('1 KB')
+      expect(formatBytes(1048576)).toBe('1 MB')
+      expect(formatBytes(1073741824)).toBe('1 GB')
+    })
+
+    it('handles null/invalid bytes', () => {
+      expect(formatBytes(null)).toBe('-')
+      expect(formatBytes(undefined)).toBe('-')
+    })
+  })
+
+  describe('getInitials', () => {
+    it('extracts two letter initials from full names', () => {
+      expect(getInitials('Olivia Martin')).toBe('OM')
+      expect(getInitials('John')).toBe('JO')
+      expect(getInitials('Alexander Graham Bell')).toBe('AB')
+    })
+
+    it('returns fallback NA for empty or invalid values', () => {
+      expect(getInitials('')).toBe('NA')
+      expect(getInitials(null)).toBe('NA')
+      expect(getInitials(undefined)).toBe('NA')
+    })
+  })
+
+  describe('truncate', () => {
+    it('truncates text that exceeds maximum length', () => {
+      expect(truncate('Hello world this is a test', 10)).toBe('Hello worl...')
+    })
+
+    it('keeps text untouched if below limit', () => {
+      expect(truncate('Short', 10)).toBe('Short')
+    })
+
+    it('handles empty strings safely', () => {
+      expect(truncate('')).toBe('')
+      expect(truncate(null)).toBe('')
+    })
+  })
+})