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:

```prisma
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:
```ts
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
```txt
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`:
```env
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:

```txt
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
```bash
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.