// Add after UserStatus enum

enum EmploymentType {
  FULL_TIME
  PART_TIME
  CONTRACTOR
  INTERN
  TEMPORARY
}

cat packages/database/prisma/schema.prisma | grep -A 6 "enum EmploymentType"
# Should show: FULL_TIME, PART_TIME, CONTRACTOR, INTERN, TEMPORARY

# Remove EmploymentType enum from schema.prisma manually

enum WorkMode {
  ONSITE
  REMOTE
  HYBRID
}

cat packages/database/prisma/schema.prisma | grep -A 4 "enum WorkMode"
# Should show: ONSITE, REMOTE, HYBRID

# Remove WorkMode enum from schema.prisma manually

enum EmployeeStatus {
  ACTIVE
  INACTIVE
  ON_LEAVE
  TERMINATED
}

cat packages/database/prisma/schema.prisma | grep -A 5 "enum EmployeeStatus"
# Should show: ACTIVE, INACTIVE, ON_LEAVE, TERMINATED

# Remove EmployeeStatus enum from schema.prisma manually

// Phase 02: Employee
model Employee {
  id             String   @id @default(cuid())
  tenantId       String
  employeeNumber String?

  // Personal Info
  firstName  String
  lastName   String
  email      String
  phone      String?
  pictureUrl String?

  // Job Information
  jobTitle  String?
  jobFamily String?
  jobLevel  String?

  // Employment Details
  employmentType  EmploymentType @default(FULL_TIME)
  workMode        WorkMode       @default(ONSITE)
  status          EmployeeStatus @default(ACTIVE)
  hireDate        DateTime?
  terminationDate DateTime?

  // Metadata
  customFields Json     @default("{}")
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt

  // Relations
  tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)

  @@unique([tenantId, email])
  @@unique([tenantId, employeeNumber])
  @@index([tenantId, status])
  @@map("employees")
}

model Tenant {
  // ... existing fields ...

  users     User[]
  employees Employee[]  // ADD THIS LINE

  @@map("tenants")
}

cat packages/database/prisma/schema.prisma | grep -A 35 "model Employee"
# Should show Employee model with all fields
# Should show: tenantId, firstName, lastName, email, etc.
# Should show: @@unique([tenantId, email])
# Should show: @@unique([tenantId, employeeNumber])

# Remove Employee model and `employees Employee[]` from Tenant

model User {
  id            String     @id @default(cuid())
  tenantId      String?
  email         String
  emailVerified DateTime?
  name          String?
  image         String?
  systemRole    SystemRole @default(EMPLOYEE)
  status        UserStatus @default(ACTIVE)
  employeeId    String?    @unique  // ADD THIS LINE
  lastLoginAt   DateTime?
  createdAt     DateTime   @default(now())
  updatedAt     DateTime   @updatedAt

  tenant   Tenant?   @relation(fields: [tenantId], references: [id], onDelete: Cascade)
  employee Employee? @relation(fields: [employeeId], references: [id])  // ADD THIS LINE
  accounts Account[]
  sessions Session[]

  @@unique([email])
  @@index([tenantId])
  @@map("users")
}

model Employee {
  // ... existing fields ...

  // Relations
  tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
  user   User?  // ADD THIS LINE - back-reference from User.employee

  // ... existing constraints ...
}

# Validate schema compiles
cd packages/database && npx prisma validate
# Should succeed with no errors

# Check User has employeeId
cat packages/database/prisma/schema.prisma | grep "employeeId"
# Should show: employeeId String? @unique

# Remove employeeId from User
# Remove user from Employee

cd packages/database

# Push schema to database
npm run db:push

# Regenerate Prisma client
npm run db:generate

# Verify tables exist
npm run db:studio

# Check Employee table exists
cd packages/database && npx prisma db execute --stdin <<< "SELECT table_name FROM information_schema.tables WHERE table_name = 'employees';"
# Should return: employees

# Or open Prisma Studio and verify employees table is visible
npm run db:studio

# Reset database completely
docker compose down -v
docker compose up -d
cd packages/database
git checkout -- prisma/schema.prisma
npm run db:push

cd apps/api

# Install validation dependencies
npm install class-validator class-transformer

# Create DTO directory
mkdir -p src/employees/dto

import {
  IsString,
  IsEmail,
  IsOptional,
  IsEnum,
  IsDateString,
  IsObject,
  MinLength,
  MaxLength,
} from 'class-validator';

export enum EmploymentType {
  FULL_TIME = 'FULL_TIME',
  PART_TIME = 'PART_TIME',
  CONTRACTOR = 'CONTRACTOR',
  INTERN = 'INTERN',
  TEMPORARY = 'TEMPORARY',
}

export enum WorkMode {
  ONSITE = 'ONSITE',
  REMOTE = 'REMOTE',
  HYBRID = 'HYBRID',
}

export enum EmployeeStatus {
  ACTIVE = 'ACTIVE',
  INACTIVE = 'INACTIVE',
  ON_LEAVE = 'ON_LEAVE',
  TERMINATED = 'TERMINATED',
}

export class CreateEmployeeDto {
  @IsOptional()
  @IsString()
  @MaxLength(50)
  employeeNumber?: string;

  @IsString()
  @MinLength(1)
  @MaxLength(100)
  firstName: string;

  @IsString()
  @MinLength(1)
  @MaxLength(100)
  lastName: string;

  @IsEmail()
  email: string;

  @IsOptional()
  @IsString()
  @MaxLength(20)
  phone?: string;

  @IsOptional()
  @IsString()
  pictureUrl?: string;

  @IsOptional()
  @IsString()
  @MaxLength(100)
  jobTitle?: string;

  @IsOptional()
  @IsString()
  @MaxLength(50)
  jobFamily?: string;

  @IsOptional()
  @IsString()
  @MaxLength(20)
  jobLevel?: string;

  @IsOptional()
  @IsEnum(EmploymentType)
  employmentType?: EmploymentType;

  @IsOptional()
  @IsEnum(WorkMode)
  workMode?: WorkMode;

  @IsOptional()
  @IsEnum(EmployeeStatus)
  status?: EmployeeStatus;

  @IsOptional()
  @IsDateString()
  hireDate?: string;

  @IsOptional()
  @IsDateString()
  terminationDate?: string;

  @IsOptional()
  @IsObject()
  customFields?: Record<string, unknown>;
}

# Verify file exists with correct exports
cat apps/api/src/employees/dto/create-employee.dto.ts | grep "export class CreateEmployeeDto"
# Should show: export class CreateEmployeeDto

# Verify all required fields have decorators
cat apps/api/src/employees/dto/create-employee.dto.ts | grep -c "@Is"
# Should show at least 10 decorator usages

rm apps/api/src/employees/dto/create-employee.dto.ts

cd apps/api

# Install mapped-types for PartialType
npm install @nestjs/mapped-types

import { PartialType } from '@nestjs/mapped-types';
import { CreateEmployeeDto } from './create-employee.dto';

export class UpdateEmployeeDto extends PartialType(CreateEmployeeDto) {}

export * from './create-employee.dto';
export * from './update-employee.dto';

# Verify both DTOs export correctly
cat apps/api/src/employees/dto/index.ts
# Should show exports for both DTOs

# Verify UpdateEmployeeDto extends PartialType
cat apps/api/src/employees/dto/update-employee.dto.ts | grep "PartialType"
# Should show: extends PartialType(CreateEmployeeDto)

rm apps/api/src/employees/dto/update-employee.dto.ts
rm apps/api/src/employees/dto/index.ts

import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { CreateEmployeeDto, UpdateEmployeeDto } from './dto';
import { Prisma, EmployeeStatus } from '@prisma/client';

@Injectable()
export class EmployeeRepository {
  constructor(private prisma: PrismaService) {}

  async create(tenantId: string, data: CreateEmployeeDto) {
    return this.prisma.employee.create({
      data: {
        ...data,
        tenantId,
        hireDate: data.hireDate ? new Date(data.hireDate) : null,
        terminationDate: data.terminationDate ? new Date(data.terminationDate) : null,
      },
    });
  }

  async findAll(
    tenantId: string,
    options?: {
      status?: EmployeeStatus;
      search?: string;
      skip?: number;
      take?: number;
    },
  ) {
    const where: Prisma.EmployeeWhereInput = {
      tenantId,
      // Exclude TERMINATED by default (soft delete)
      status: options?.status ?? { not: EmployeeStatus.TERMINATED },
    };

    if (options?.search) {
      where.OR = [
        { firstName: { contains: options.search, mode: 'insensitive' } },
        { lastName: { contains: options.search, mode: 'insensitive' } },
        { email: { contains: options.search, mode: 'insensitive' } },
        { employeeNumber: { contains: options.search, mode: 'insensitive' } },
      ];
    }

    const [employees, total] = await Promise.all([
      this.prisma.employee.findMany({
        where,
        skip: options?.skip,
        take: options?.take,
        orderBy: { createdAt: 'desc' },
      }),
      this.prisma.employee.count({ where }),
    ]);

    return { employees, total };
  }

  async findById(tenantId: string, id: string) {
    return this.prisma.employee.findFirst({
      where: {
        id,
        tenantId,
      },
    });
  }

  async findByEmail(tenantId: string, email: string) {
    return this.prisma.employee.findFirst({
      where: {
        tenantId,
        email,
      },
    });
  }

  async update(tenantId: string, id: string, data: UpdateEmployeeDto) {
    return this.prisma.employee.updateMany({
      where: {
        id,
        tenantId,
      },
      data: {
        ...data,
        hireDate: data.hireDate ? new Date(data.hireDate) : undefined,
        terminationDate: data.terminationDate ? new Date(data.terminationDate) : undefined,
      },
    });
  }

  async softDelete(tenantId: string, id: string) {
    return this.prisma.employee.updateMany({
      where: {
        id,
        tenantId,
      },
      data: {
        status: EmployeeStatus.TERMINATED,
        terminationDate: new Date(),
      },
    });
  }

  async hardDelete(tenantId: string, id: string) {
    return this.prisma.employee.deleteMany({
      where: {
        id,
        tenantId,
      },
    });
  }
}

# Verify file exists with all methods
cat apps/api/src/employees/employee.repository.ts | grep "async "
# Should show: create, findAll, findById, findByEmail, update, softDelete, hardDelete

# Verify ALL methods filter by tenantId
grep -c "tenantId" apps/api/src/employees/employee.repository.ts
# Should show at least 7 (one per method)

rm apps/api/src/employees/employee.repository.ts

import {
  Injectable,
  NotFoundException,
  ConflictException,
} from '@nestjs/common';
import { EmployeeRepository } from './employee.repository';
import { CreateEmployeeDto, UpdateEmployeeDto, EmployeeStatus } from './dto';

@Injectable()
export class EmployeeService {
  constructor(private employeeRepository: EmployeeRepository) {}

  async create(tenantId: string, dto: CreateEmployeeDto) {
    // Check for duplicate email within tenant
    const existing = await this.employeeRepository.findByEmail(tenantId, dto.email);
    if (existing) {
      throw new ConflictException('Employee with this email already exists');
    }

    return this.employeeRepository.create(tenantId, dto);
  }

  async findAll(
    tenantId: string,
    options?: {
      status?: EmployeeStatus;
      search?: string;
      page?: number;
      limit?: number;
    },
  ) {
    const page = options?.page ?? 1;
    const limit = options?.limit ?? 20;
    const skip = (page - 1) * limit;

    const { employees, total } = await this.employeeRepository.findAll(tenantId, {
      status: options?.status,
      search: options?.search,
      skip,
      take: limit,
    });

    return {
      data: employees,
      meta: {
        total,
        page,
        limit,
        totalPages: Math.ceil(total / limit),
      },
    };
  }

  async findById(tenantId: string, id: string) {
    const employee = await this.employeeRepository.findById(tenantId, id);
    if (!employee) {
      throw new NotFoundException('Employee not found');
    }
    return employee;
  }

  async update(tenantId: string, id: string, dto: UpdateEmployeeDto) {
    // Verify employee exists
    await this.findById(tenantId, id);

    // Check email uniqueness if email is being updated
    if (dto.email) {
      const existing = await this.employeeRepository.findByEmail(tenantId, dto.email);
      if (existing && existing.id !== id) {
        throw new ConflictException('Employee with this email already exists');
      }
    }

    await this.employeeRepository.update(tenantId, id, dto);
    return this.findById(tenantId, id);
  }

  async delete(tenantId: string, id: string) {
    // Verify employee exists
    await this.findById(tenantId, id);

    // Soft delete by default
    await this.employeeRepository.softDelete(tenantId, id);
    return { success: true };
  }
}

# Verify file exists with all methods
cat apps/api/src/employees/employee.service.ts | grep "async "
# Should show: create, findAll, findById, update, delete

# Verify proper exception handling
grep -c "throw new" apps/api/src/employees/employee.service.ts
# Should show at least 3 (NotFoundException, ConflictException)

rm apps/api/src/employees/employee.service.ts

import {
  Controller,
  Get,
  Post,
  Patch,
  Delete,
  Body,
  Param,
  Query,
  UseGuards,
} from '@nestjs/common';
import { EmployeeService } from './employee.service';
import { CreateEmployeeDto, UpdateEmployeeDto } from './dto';
import { EmployeeStatus } from '@prisma/client';
import { TenantGuard } from '../common/guards';
import { TenantId } from '../common/decorators';

@Controller('api/v1/employees')
@UseGuards(TenantGuard)
export class EmployeeController {
  constructor(private employeeService: EmployeeService) {}

  @Post()
  async create(
    @TenantId() tenantId: string,
    @Body() dto: CreateEmployeeDto,
  ) {
    const employee = await this.employeeService.create(tenantId, dto);
    return { data: employee, error: null };
  }

  @Get()
  async findAll(
    @TenantId() tenantId: string,
    @Query('page') page?: string,
    @Query('limit') limit?: string,
    @Query('status') status?: EmployeeStatus,
    @Query('search') search?: string,
  ) {
    const result = await this.employeeService.findAll(tenantId, {
      page: page ? parseInt(page, 10) : undefined,
      limit: limit ? parseInt(limit, 10) : undefined,
      status,
      search,
    });
    return { data: result.data, meta: result.meta, error: null };
  }

  @Get(':id')
  async findById(
    @TenantId() tenantId: string,
    @Param('id') id: string,
  ) {
    const employee = await this.employeeService.findById(tenantId, id);
    return { data: employee, error: null };
  }

  @Patch(':id')
  async update(
    @TenantId() tenantId: string,
    @Param('id') id: string,
    @Body() dto: UpdateEmployeeDto,
  ) {
    const employee = await this.employeeService.update(tenantId, id, dto);
    return { data: employee, error: null };
  }

  @Delete(':id')
  async delete(
    @TenantId() tenantId: string,
    @Param('id') id: string,
  ) {
    await this.employeeService.delete(tenantId, id);
    return { data: null, error: null };
  }
}

# Verify file exists with all endpoints
cat apps/api/src/employees/employee.controller.ts | grep "@"
# Should show: @Controller, @UseGuards, @Post, @Get (x2), @Patch, @Delete

# Verify TenantGuard is applied
grep "TenantGuard" apps/api/src/employees/employee.controller.ts
# Should show: @UseGuards(TenantGuard)

rm apps/api/src/employees/employee.controller.ts

import { Module } from '@nestjs/common';
import { EmployeeController } from './employee.controller';
import { EmployeeService } from './employee.service';
import { EmployeeRepository } from './employee.repository';
import { PrismaModule } from '../prisma/prisma.module';

@Module({
  imports: [PrismaModule],
  controllers: [EmployeeController],
  providers: [EmployeeService, EmployeeRepository],
  exports: [EmployeeService],
})
export class EmployeeModule {}

export * from './employee.module';
export * from './employee.service';
export * from './employee.repository';
export * from './dto';

import { Module } from '@nestjs/common';
// ... existing imports ...
import { EmployeeModule } from './employees';

@Module({
  imports: [
    // ... existing modules ...
    EmployeeModule,
  ],
  // ...
})
export class AppModule {}

import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Enable CORS for frontend
  app.enableCors({
    origin: 'http://localhost:3000',
    credentials: true,
  });

  // Enable validation - REQUIRED for DTO decorators to work
  app.useGlobalPipes(new ValidationPipe({
    whitelist: true,      // Strip properties not in DTO
    transform: true,      // Auto-transform payloads to DTO instances
    forbidNonWhitelisted: true,  // Throw error on extra properties
  }));

  await app.listen(3001);
}
bootstrap();

# Build the API
cd apps/api && npm run build
# Should succeed with no errors

# Verify module registered
cat apps/api/src/app.module.ts | grep "EmployeeModule"
# Should show: EmployeeModule in imports

rm apps/api/src/employees/employee.module.ts
rm apps/api/src/employees/index.ts
# Remove EmployeeModule from app.module.ts imports

cd apps/api && npm run dev

# Replace YOUR_TENANT_ID with actual tenant ID
export TENANT_ID="YOUR_TENANT_ID"

# 1. Create Employee
curl -X POST http://localhost:3001/api/v1/employees \
  -H "Content-Type: application/json" \
  -H "x-tenant-id: $TENANT_ID" \
  -d '{
    "firstName": "John",
    "lastName": "Doe",
    "email": "john.doe@example.com",
    "jobTitle": "Software Engineer",
    "employmentType": "FULL_TIME",
    "workMode": "HYBRID"
  }'
# Should return: { "data": { "id": "...", ... }, "error": null }

# Save the employee ID
export EMPLOYEE_ID="<id-from-response>"

# 2. List Employees
curl -X GET "http://localhost:3001/api/v1/employees" \
  -H "x-tenant-id: $TENANT_ID"
# Should return: { "data": [...], "meta": { "total": 1, ... }, "error": null }

# 3. Get Single Employee
curl -X GET "http://localhost:3001/api/v1/employees/$EMPLOYEE_ID" \
  -H "x-tenant-id: $TENANT_ID"
# Should return: { "data": { "id": "...", ... }, "error": null }

# 4. Update Employee
curl -X PATCH "http://localhost:3001/api/v1/employees/$EMPLOYEE_ID" \
  -H "Content-Type: application/json" \
  -H "x-tenant-id: $TENANT_ID" \
  -d '{
    "jobTitle": "Senior Software Engineer"
  }'
# Should return updated employee

# 5. Delete Employee (soft delete)
curl -X DELETE "http://localhost:3001/api/v1/employees/$EMPLOYEE_ID" \
  -H "x-tenant-id: $TENANT_ID"
# Should return: { "data": null, "error": null }

# 6. Verify soft delete (employee still exists but TERMINATED)
curl -X GET "http://localhost:3001/api/v1/employees?status=TERMINATED" \
  -H "x-tenant-id: $TENANT_ID"
# Should return the deleted employee with status: TERMINATED

# No rollback needed - testing only
# If tests fail, debug and fix code in previous steps

# Add to apps/web/.env.local (create if doesn't exist)
echo 'NEXT_PUBLIC_API_URL=http://localhost:3001' >> apps/web/.env.local

cd apps/web
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

import { auth } from "@/auth"
import { redirect } from 'next/navigation';
import Link from 'next/link';

interface Employee {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  jobTitle: string | null;
  status: string;
  employmentType: string;
}

interface EmployeesResponse {
  data: Employee[];
  meta: {
    total: number;
    page: number;
    limit: number;
    totalPages: number;
  };
  error: null | { code: string; message: string };
}

async function getEmployees(tenantId: string): Promise<EmployeesResponse> {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/employees`,
    {
      headers: {
        'x-tenant-id': tenantId,
      },
      cache: 'no-store',
    }
  );

  if (!res.ok) {
    throw new Error('Failed to fetch employees');
  }

  return res.json();
}

export default async function EmployeesPage() {
  const session = await auth()

  if (!session?.user?.tenantId) {
    redirect('/login');
  }

  const { data: employees, meta } = await getEmployees(session.user.tenantId);

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Employees</h1>
        <Link
          href="/dashboard/employees/new"
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          Add Employee
        </Link>
      </div>

      <div className="bg-white shadow-lg shadow-gray-200/50 rounded-2xl overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Name
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Email
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Job Title
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {employees.map((employee) => (
              <tr key={employee.id}>
                <td className="px-6 py-4 whitespace-nowrap">
                  {employee.firstName} {employee.lastName}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">{employee.email}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {employee.jobTitle || '-'}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span
                    className={`px-2 py-1 text-xs rounded ${
                      employee.status === 'ACTIVE'
                        ? 'bg-green-100 text-green-800'
                        : 'bg-gray-100 text-gray-800'
                    }`}
                  >
                    {employee.status}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <Link
                    href={`/dashboard/employees/${employee.id}`}
                    className="text-blue-600 hover:text-blue-900"
                  >
                    Edit
                  </Link>
                </td>
              </tr>
            ))}
            {employees.length === 0 && (
              <tr>
                <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
                  No employees found
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <div className="mt-4 text-sm text-gray-500">
        Showing {employees.length} of {meta.total} employees
      </div>
    </div>
  );
}

# Navigate to employees page in browser
# URL: http://localhost:3000/dashboard/employees
# Should show:
# - "Employees" heading
# - "Add Employee" button
# - Table with columns: Name, Email, Job Title, Status, Actions
# - Either employee data or "No employees found"

rm apps/web/app/dashboard/employees/page.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

interface EmployeeFormData {
  firstName: string;
  lastName: string;
  email: string;
  phone?: string;
  employeeNumber?: string;
  jobTitle?: string;
  jobFamily?: string;
  jobLevel?: string;
  employmentType: string;
  workMode: string;
  status: string;
  hireDate?: string;
}

interface EmployeeFormProps {
  initialData?: Partial<EmployeeFormData>;
  onSubmit: (data: EmployeeFormData) => Promise<void>;
  submitLabel: string;
}

const EMPLOYMENT_TYPES = [
  { value: 'FULL_TIME', label: 'Full Time' },
  { value: 'PART_TIME', label: 'Part Time' },
  { value: 'CONTRACTOR', label: 'Contractor' },
  { value: 'INTERN', label: 'Intern' },
  { value: 'TEMPORARY', label: 'Temporary' },
];

const WORK_MODES = [
  { value: 'ONSITE', label: 'Onsite' },
  { value: 'REMOTE', label: 'Remote' },
  { value: 'HYBRID', label: 'Hybrid' },
];

const STATUSES = [
  { value: 'ACTIVE', label: 'Active' },
  { value: 'INACTIVE', label: 'Inactive' },
  { value: 'ON_LEAVE', label: 'On Leave' },
];

export function EmployeeForm({
  initialData,
  onSubmit,
  submitLabel,
}: EmployeeFormProps) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [formData, setFormData] = useState<EmployeeFormData>({
    firstName: initialData?.firstName ?? '',
    lastName: initialData?.lastName ?? '',
    email: initialData?.email ?? '',
    phone: initialData?.phone ?? '',
    employeeNumber: initialData?.employeeNumber ?? '',
    jobTitle: initialData?.jobTitle ?? '',
    jobFamily: initialData?.jobFamily ?? '',
    jobLevel: initialData?.jobLevel ?? '',
    employmentType: initialData?.employmentType ?? 'FULL_TIME',
    workMode: initialData?.workMode ?? 'ONSITE',
    status: initialData?.status ?? 'ACTIVE',
    hireDate: initialData?.hireDate ?? '',
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
      await onSubmit(formData);
      router.push('/dashboard/employees');
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {error && (
        <div className="bg-red-50 shadow-lg shadow-red-100/50 text-red-700 px-6 py-3 rounded-2xl">
          {error}
        </div>
      )}

      {/* Personal Information */}
      <div className="bg-white shadow-lg shadow-gray-200/50 rounded-2xl p-6">
        <h2 className="text-lg font-medium mb-4">Personal Information</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">
              First Name *
            </label>
            <input
              type="text"
              name="firstName"
              value={formData.firstName}
              onChange={handleChange}
              required
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Last Name *
            </label>
            <input
              type="text"
              name="lastName"
              value={formData.lastName}
              onChange={handleChange}
              required
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Email *
            </label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Phone
            </label>
            <input
              type="tel"
              name="phone"
              value={formData.phone}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
        </div>
      </div>

      {/* Job Information */}
      <div className="bg-white shadow-lg shadow-gray-200/50 rounded-2xl p-6">
        <h2 className="text-lg font-medium mb-4">Job Information</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Employee Number
            </label>
            <input
              type="text"
              name="employeeNumber"
              value={formData.employeeNumber}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Job Title
            </label>
            <input
              type="text"
              name="jobTitle"
              value={formData.jobTitle}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Job Family
            </label>
            <input
              type="text"
              name="jobFamily"
              value={formData.jobFamily}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Job Level
            </label>
            <input
              type="text"
              name="jobLevel"
              value={formData.jobLevel}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
        </div>
      </div>

      {/* Employment Details */}
      <div className="bg-white shadow-lg shadow-gray-200/50 rounded-2xl p-6">
        <h2 className="text-lg font-medium mb-4">Employment Details</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Employment Type
            </label>
            <select
              name="employmentType"
              value={formData.employmentType}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            >
              {EMPLOYMENT_TYPES.map((type) => (
                <option key={type.value} value={type.value}>
                  {type.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Work Mode
            </label>
            <select
              name="workMode"
              value={formData.workMode}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            >
              {WORK_MODES.map((mode) => (
                <option key={mode.value} value={mode.value}>
                  {mode.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Status
            </label>
            <select
              name="status"
              value={formData.status}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            >
              {STATUSES.map((status) => (
                <option key={status.value} value={status.value}>
                  {status.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Hire Date
            </label>
            <input
              type="date"
              name="hireDate"
              value={formData.hireDate}
              onChange={handleChange}
              className="mt-1 block w-full rounded-2xl bg-gray-50 border border-gray-200 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
            />
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex justify-end space-x-4">
        <button
          type="button"
          onClick={() => router.back()}
          className="px-6 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
        >
          Cancel
        </button>
        <button
          type="submit"
          disabled={isSubmitting}
          className="px-4 py-2 rounded-2xl shadow-lg shadow-blue-600/30 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
        >
          {isSubmitting ? 'Saving...' : submitLabel}
        </button>
      </div>
    </form>
  );
}

# Verify file exists
cat apps/web/app/dashboard/employees/components/employee-form.tsx | head -20
# Should show: 'use client' directive and imports

# Verify all form fields present
grep -c "name=" apps/web/app/dashboard/employees/components/employee-form.tsx
# Should show at least 10 (one per field)

rm -rf apps/web/app/dashboard/employees/components

'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { EmployeeForm } from '../components/employee-form';

export default function NewEmployeePage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  if (status === 'loading') {
    return <div className="p-6">Loading...</div>;
  }

  if (!session?.user?.tenantId) {
    router.push('/login');
    return null;
  }

  const handleSubmit = async (data: Record<string, unknown>) => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/employees`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-tenant-id': session.user.tenantId!,
        },
        body: JSON.stringify(data),
      }
    );

    if (!res.ok) {
      const error = await res.json();
      throw new Error(error.error?.message || 'Failed to create employee');
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-6">Add New Employee</h1>
      <EmployeeForm onSubmit={handleSubmit} submitLabel="Create Employee" />
    </div>
  );
}

# Navigate to new employee page in browser
# URL: http://localhost:3000/dashboard/employees/new
# Should show:
# - "Add New Employee" heading
# - Employee form with all fields
# - "Create Employee" button

# Test form submission:
# 1. Fill required fields (firstName, lastName, email)
# 2. Click "Create Employee"
# 3. Should redirect to /dashboard/employees
# 4. New employee should appear in list

rm -rf apps/web/app/dashboard/employees/new

'use client';

import { use, useEffect, useState } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { EmployeeForm } from '../components/employee-form';

interface Employee {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phone: string | null;
  employeeNumber: string | null;
  jobTitle: string | null;
  jobFamily: string | null;
  jobLevel: string | null;
  employmentType: string;
  workMode: string;
  status: string;
  hireDate: string | null;
}

export default function EditEmployeePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  // Next.js 15: params is a Promise, use React.use() to unwrap
  const { id } = use(params);

  const { data: session, status } = useSession();
  const router = useRouter();
  const [employee, setEmployee] = useState<Employee | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (status === 'authenticated' && session?.user?.tenantId) {
      fetchEmployee();
    }
  }, [status, session]);

  const fetchEmployee = async () => {
    try {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/employees/${id}`,
        {
          headers: {
            'x-tenant-id': session!.user.tenantId!,
          },
        }
      );

      if (!res.ok) {
        throw new Error('Employee not found');
      }

      const { data } = await res.json();
      setEmployee(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load employee');
    } finally {
      setLoading(false);
    }
  };

  if (status === 'loading' || loading) {
    return <div className="p-6">Loading...</div>;
  }

  if (!session?.user?.tenantId) {
    router.push('/login');
    return null;
  }

  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-50 shadow-lg shadow-red-100/50 text-red-700 px-6 py-3 rounded-2xl">
          {error}
        </div>
      </div>
    );
  }

  if (!employee) {
    return <div className="p-6">Employee not found</div>;
  }

  const handleSubmit = async (data: Record<string, unknown>) => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/employees/${id}`,
      {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'x-tenant-id': session.user.tenantId!,
        },
        body: JSON.stringify(data),
      }
    );

    if (!res.ok) {
      const error = await res.json();
      throw new Error(error.error?.message || 'Failed to update employee');
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-6">
        Edit Employee: {employee.firstName} {employee.lastName}
      </h1>
      <EmployeeForm
        initialData={{
          firstName: employee.firstName,
          lastName: employee.lastName,
          email: employee.email,
          phone: employee.phone ?? undefined,
          employeeNumber: employee.employeeNumber ?? undefined,
          jobTitle: employee.jobTitle ?? undefined,
          jobFamily: employee.jobFamily ?? undefined,
          jobLevel: employee.jobLevel ?? undefined,
          employmentType: employee.employmentType,
          workMode: employee.workMode,
          status: employee.status,
          hireDate: employee.hireDate
            ? new Date(employee.hireDate).toISOString().split('T')[0]
            : undefined,
        }}
        onSubmit={handleSubmit}
        submitLabel="Save Changes"
      />
    </div>
  );
}