myApp/codex.md

Codex Task: Build 4TECH Login + User Management Web App

1) Project Goal

สร้าง Web App สำหรับบริษัท 4TECH โดยใช้ Next.js + Tailwind CSS + PostgreSQL มีระบบ Login และจัดการผู้ใช้งาน พร้อม UI แนว Glassmorphism + Responsive Design และใช้โทนสีให้เข้ากับโลโก้บริษัท

Logo color reference:

• Primary Orange: #DC2F02
• Black: #000000
• White: #FFFFFF
• Dark Background: #090909 / #111111
• Glass Border: rgba(255,255,255,0.15)
• Glass Background: rgba(255,255,255,0.08)

2) Tech Stack

• Next.js latest stable version, App Router
• TypeScript
• Tailwind CSS
• PostgreSQL
• Prisma ORM
• NextAuth.js or custom JWT auth; choose the cleaner implementation for production
• bcrypt for password hashing
• Zod for validation
• React Hook Form for forms
• Lucide React for icons

3) Required Pages

3.1 Login Page /login

Requirements:

• Full-screen responsive login page
• Glassmorphism login card
• 4TECH logo area at top
• Email and password fields
• Show/hide password button
• Remember me checkbox
• Login button with orange gradient
• Error message area
• Redirect authenticated users to /home
• On successful login, redirect to /home

UI style:

• Dark gradient background
• Orange glow accents using #DC2F02
• Card with backdrop-blur-xl, transparent white background, soft border, shadow

3.2 Home Page /home

Requirements:

• Protected route
• Dashboard landing page after login
• Welcome message with current user name
• Summary cards:
  • Total Users
  • Active Users
  • Admin Users
  • Last Login
• Responsive card grid
• Sidebar or top navigation

3.3 User Profile Page /profile

Requirements:

• Protected route
• Show current user profile:
  • Avatar placeholder
  • Full name
  • Email
  • Role
  • Status
  • Created date
  • Last login date
• Edit profile form:
  • Full name
  • Phone number
  • Department
  • Position
• Change password section:
  • Current password
  • New password
  • Confirm password

3.4 Users Management Page /users

Requirements:

• Protected route
• Admin-only page
• Users table with:
  • Name
  • Email
  • Role
  • Status
  • Department
  • Created at
  • Actions
• Search users by name/email
• Filter by role and status
• Create user modal
• Edit user modal
• Delete/disable user confirmation
• Pagination
• Responsive mobile layout; table should become stacked cards on small screens

4) User Roles

Implement role-based access control.

Roles:

• SUPER_ADMIN
• ADMIN
• USER

Permissions:

• SUPER_ADMIN: full access, can manage all users and roles
• ADMIN: can manage users but cannot edit/delete SUPER_ADMIN
• USER: can access Home and Profile only

5) Database Schema

Use Prisma with PostgreSQL.

Create models similar to:

model User {
  id            String   @id @default(cuid())
  email         String   @unique
  passwordHash  String
  fullName      String
  phone         String?
  department    String?
  position      String?
  role          Role     @default(USER)
  status        Status   @default(ACTIVE)
  lastLoginAt   DateTime?
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

enum Role {
  SUPER_ADMIN
  ADMIN
  USER
}

enum Status {
  ACTIVE
  INACTIVE
  SUSPENDED
}

6) API Routes / Server Actions

Create secure backend actions or API routes for:

Authentication:

• POST /api/auth/login
• POST /api/auth/logout
• GET /api/auth/me

Users:

• GET /api/users
• POST /api/users
• GET /api/users/:id
• PATCH /api/users/:id
• DELETE /api/users/:id or soft disable user

Profile:

• GET /api/profile
• PATCH /api/profile
• PATCH /api/profile/password

Validation:

• Validate all inputs with Zod
• Never return password hash
• Hash password with bcrypt before saving

7) UI/UX Requirements

Overall design:

• Glassmorphism
• Corporate modern look, similar enterprise app style
• Dark mode first
• Responsive desktop/tablet/mobile
• Smooth hover states and transitions
• Orange accent color from logo
• Rounded corners: rounded-2xl
• Use consistent spacing and typography

Tailwind design tokens:

colors: {
  brand: {
    orange: '#DC2F02',
    orangeDark: '#A82000',
    black: '#000000',
    dark: '#090909',
    panel: 'rgba(255,255,255,0.08)'
  }
}

Reusable components:

• GlassCard
• Button
• Input
• Select
• Modal
• ConfirmDialog
• DataTable
• Sidebar
• Topbar
• Badge
• Avatar

8) Suggested Folder Structure

src/
  app/
    login/
      page.tsx
    home/
      page.tsx
    profile/
      page.tsx
    users/
      page.tsx
    api/
      auth/
      users/
      profile/
    layout.tsx
    globals.css
  components/
    ui/
    layout/
    users/
    profile/
  lib/
    auth.ts
    prisma.ts
    password.ts
    validations.ts
    permissions.ts
  middleware.ts
prisma/
  schema.prisma
  seed.ts

9) Security Requirements

• Protect all private routes with middleware
• Redirect unauthenticated users to /login
• Prevent logged-in users from accessing /login
• Use httpOnly cookie if using JWT custom auth
• Store password only as bcrypt hash
• Validate role permissions on server side, not only client side
• Add basic rate limiting for login if possible
• Use environment variables for database URL and secrets

Required .env.example:

DATABASE_URL="postgresql://postgres:password@localhost:5432/4tech_app?schema=public"
AUTH_SECRET="57afa027bf1f1213acb32e26b261dfb250f4b871f35c3fbb9cfadf3aa28b924f"
NEXT_PUBLIC_APP_NAME="4TECH"

10) Seed Data

Create seed script with initial SUPER_ADMIN:

Email: admin@4tech.co.th
Password: Admin@123456
Role: SUPER_ADMIN
Status: ACTIVE

Show this credential only in README/development note, not in UI.

11) Acceptance Criteria

Codex should finish with:

• Complete working Next.js project
• Login works with PostgreSQL user data
• Protected Home/Profile/Users pages
• Admin-only Users Management
• Responsive glassmorphism UI
• Prisma migration and seed ready
• Clear README with setup commands

12) Setup Commands Expected in README

npm install
cp .env.example .env
npx prisma migrate dev
npx prisma db seed
npm run dev

13) Important Design Direction

Use the uploaded 4TECH logo as brand inspiration. The final UI should feel like a modern internal enterprise system: dark, premium, clean, glass-like, with orange highlights from the company logo. Avoid colorful gradients that do not match the logo. Keep the design professional and suitable for HR/admin/business systems.