first commit

2026-06-14 10:03:34 +07:00
commit b55a575ac3
53 changed files with 9257 additions and 0 deletions
@@ -0,0 +1,293 @@
+# 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.