Utilities

Utility modules live in apps/frontend/src/utils/.

---

request.ts — HTTP Client

The global Axios instance used for all API calls throughout the application.

import request from '@/utils/request'

const response = await request({
  url: '/api/v1/unit/',
  method: 'get',
})

Configuration

Setting	Value
baseURL	VITE_API_BASE_URL env var or https://app.intecoglogistech.com
timeout	30000 ms (30 seconds)
withCredentials	true — always sends the userAccessToken cookie

Request Interceptor

Passes the config through unchanged. Errors are re-thrown.

Response Interceptor

On 401 Unauthorized: automatically redirects to /signin (unless already on the signin page). This prevents infinite redirect loops.

// Simplified interceptor logic
if (error.response?.status === 401) {
  if (window.location.hash !== '#/signin') {
    window.location.hash = '#/signin'
  }
}

Usage Pattern

All views make direct request({...}) calls:

const response = await request({
  url: '/api/v1/unit/',
  method: 'post',
  data: { name: 'Cold Room A', min_temperature: 2, max_temperature: 8 }
})

---

notifications.ts — Toast Notifications

A thin wrapper around ElNotification for consistent toast messages.

import { showSuccessNotification, showFailureNotification } from '@/utils/notifications'

showSuccessNotification(title, message, options?)

showSuccessNotification('Unit Created', 'Cold Room A has been created successfully')

• Type: success
• Position: bottom-right
• Duration: 4500ms (default)

showFailureNotification(title, message, options?)

showFailureNotification('Error', 'Failed to fetch units. Please try again.')

• Type: error
• Position: bottom-right
• Duration: 4500ms (default)

Both functions accept an optional third options argument to override any ElNotification options.

---

env.ts — Environment Variables

Typed helpers for accessing Vite environment variables:

import { env } from '@/utils/env'

env.apiBaseUrl  // → import.meta.env.VITE_API_BASE_URL
env.appEnv      // → import.meta.env.VITE_APP_ENV
env.isDev       // → env.appEnv === 'development'
env.isProd      // → env.appEnv === 'production'

Use this instead of reading import.meta.env directly to get TypeScript type safety and a single access point.

---

index.ts — CSS & Theme Utilities

import { setProperty, mix } from '@/utils'

setProperty(prop, val, dom?)

Sets a CSS custom property on a DOM element (defaults to document.documentElement):

setProperty('--el-color-primary', '#409EFF')

Used by themeStore to apply dynamic theme colors.

mix(color1, color2, weight)

Blends two hex colors by weight (0–100). Used internally by themeStore to generate the lighter/darker Element Plus color variants (e.g. --el-color-primary-light-3):

const lightVariant = mix('#409EFF', '#ffffff', 30) // 30% white blend

---

api/index.ts — API Helpers

Thin fetch wrappers used in a few contexts:

fetchData(url)       // GET any URL
fetchUserData()      // GET ./mock/user.json  (development mock)
fetchRoleData()      // GET ./mock/role.json  (development mock)

Most API calls in the app do not go through this module — they use request({...}) directly from @/utils/request. This module is mainly used for fetching mock data during development.