Stockdd Mobile — Frontend

React + TypeScript + Vite frontend สำหรับ Stockdd Mobile (Inventory Management System)

Tech Stack

• React 18 + TypeScript
• Vite — dev server + build (+ proxy /api ไป backend :8080)
• TanStack Query v5 — server state + caching
• React Router v6 — routing + protected routes
• Axios — HTTP client พร้อม JWT interceptor + auto-refresh
• Zustand — auth state (persisted ใน localStorage)
• Tailwind CSS — styling
• react-hook-form — form management
• react-hot-toast — notifications
• lucide-react — icons

Setup

cd stockddmobile-frontend

# 1) Install dependencies
npm install

# 2) (Optional) Copy env file
cp .env.example .env.local

# 3) Start dev server
npm run dev
# เปิด http://localhost:5173

ต้องรัน Backend (stockddmobile) ที่ localhost:8080 ก่อน — Vite dev server จะ proxy /api ไปยัง backend อัตโนมัติ (ไม่ติด CORS ใน dev)

Test Accounts

Role	Username	Password
ADMIN	admin	Admin@1234
MANAGER	manager01	Manager@1234
STAFF	staff01	Staff@1234

Pages

Path	Role	คำอธิบาย
/login	Public	Login form
/	Authenticated	Dashboard — สถิติ + ตารางสต็อกล่าสุด
/inventory	Authenticated	รายการสต็อก + IMEI scan
/products	Authenticated	สินค้า (ADMIN/MANAGER สร้างได้)
/products/:id	Authenticated	รายละเอียด + Variants
/inbound	Authenticated	รับสินค้าเข้า (รองรับ IMEI หลายตัว)
/outbound	Authenticated	จ่ายสินค้าออก (รองรับ IMEI หลายตัว)
/transactions	MANAGER/ADMIN	ประวัติ stock movements
/alerts	MANAGER/ADMIN	Low Stock Alerts + acknowledge

Architecture Notes

• Authentication flow: Login → store accessToken + refreshToken ใน Zustand (persist ใน localStorage)
• Axios interceptor:
  • Request: แนบ Authorization: Bearer <accessToken>
  • Response 401: ลอง POST /auth/refresh อัตโนมัติ → ถ้าสำเร็จ retry request เดิม / ถ้าล้มเหลว clear state + redirect /login
• TanStack Query: invalidate keys หลัง mutation → UI sync เอง
• RBAC: ProtectedRoute รับ roles array — STAFF เข้า /transactions /alerts ไม่ได้

Build & Deploy

npm run build        # output ใน dist/
npm run preview      # serve dist/ ดูก่อน deploy

Connect ไปกับ Backend Production

แก้ .env.production:

VITE_API_BASE_URL=https://api.stockddmobile.com/api/v1

แล้วใน backend (stockddmobile/src/main/resources/application.yaml):

app:
  cors:
    allowed-origins: https://app.stockddmobile.com