From f222ac3989a0658f514aee9facfd371371f36a97 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Wed, 15 Apr 2026 09:58:38 +0700
Subject: [PATCH] Add personal/address/emergency sections to new-employee form

Three new form blocks slot in between Tax & Bank and Salary:

- Personal: date of birth, gender (select), nationality (defaults
  to Thai), marital status (select)
- Address: line 1/2, subdistrict (Tambon), district (Amphoe),
  province (Changwat), postal code, country (defaults to Thailand)
- Emergency Contact: name, phone, relationship

Server action pulls each new field from formData (all optional)
and includes them in the employees insert.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../[companyId]/employees/new/+page.server.ts |  29 ++++
 .../[companyId]/employees/new/+page.svelte    | 139 ++++++++++++++++++
 2 files changed, 168 insertions(+)

diff --git a/src/routes/(app)/companies/[companyId]/employees/new/+page.server.ts b/src/routes/(app)/companies/[companyId]/employees/new/+page.server.ts
index 7761963..a3cdbb5 100644
--- a/src/routes/(app)/companies/[companyId]/employees/new/+page.server.ts
+++ b/src/routes/(app)/companies/[companyId]/employees/new/+page.server.ts
@@ -32,6 +32,21 @@ export const actions: Actions = {
 		const taxId = formData.get('taxId')?.toString().trim() || null;
 		const bankName = formData.get('bankName')?.toString().trim() || null;
 		const bankAccount = formData.get('bankAccount')?.toString().trim() || null;
+		const dateOfBirth = formData.get('dateOfBirth')?.toString().trim() || null;
+		const gender = formData.get('gender')?.toString().trim() || null;
+		const nationality = formData.get('nationality')?.toString().trim() || null;
+		const maritalStatus = formData.get('maritalStatus')?.toString().trim() || null;
+		const addressLine1 = formData.get('addressLine1')?.toString().trim() || null;
+		const addressLine2 = formData.get('addressLine2')?.toString().trim() || null;
+		const subdistrict = formData.get('subdistrict')?.toString().trim() || null;
+		const district = formData.get('district')?.toString().trim() || null;
+		const province = formData.get('province')?.toString().trim() || null;
+		const postalCode = formData.get('postalCode')?.toString().trim() || null;
+		const country = formData.get('country')?.toString().trim() || null;
+		const emergencyContactName = formData.get('emergencyContactName')?.toString().trim() || null;
+		const emergencyContactPhone = formData.get('emergencyContactPhone')?.toString().trim() || null;
+		const emergencyContactRelationship =
+			formData.get('emergencyContactRelationship')?.toString().trim() || null;
 		const initialSalaryRaw = formData.get('initialSalary')?.toString().trim();
 
 		if (!firstName) return fail(400, { error: 'First name is required' });
@@ -60,6 +75,20 @@ export const actions: Actions = {
 				taxId,
 				bankName,
 				bankAccount,
+				dateOfBirth,
+				gender,
+				nationality,
+				maritalStatus,
+				addressLine1,
+				addressLine2,
+				subdistrict,
+				district,
+				province,
+				postalCode,
+				country,
+				emergencyContactName,
+				emergencyContactPhone,
+				emergencyContactRelationship,
 				isActive: true
 			})
 			.returning();
diff --git a/src/routes/(app)/companies/[companyId]/employees/new/+page.svelte b/src/routes/(app)/companies/[companyId]/employees/new/+page.svelte
index 0ada9b6..4c46a20 100644
--- a/src/routes/(app)/companies/[companyId]/employees/new/+page.svelte
+++ b/src/routes/(app)/companies/[companyId]/employees/new/+page.svelte
@@ -190,6 +190,145 @@
 			</div>
 		</div>
 
+		<!-- Personal -->
+		<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+			<h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
+				Personal
+			</h3>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				<div>
+					<label for="dateOfBirth" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Date of Birth
+					</label>
+					<input type="date" id="dateOfBirth" name="dateOfBirth"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none" />
+				</div>
+				<div>
+					<label for="gender" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Gender
+					</label>
+					<select id="gender" name="gender"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm">
+						<option value="">—</option>
+						<option value="male">Male</option>
+						<option value="female">Female</option>
+						<option value="other">Other</option>
+						<option value="prefer_not_to_say">Prefer not to say</option>
+					</select>
+				</div>
+				<div>
+					<label for="nationality" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Nationality
+					</label>
+					<input type="text" id="nationality" name="nationality" value="Thai"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="maritalStatus" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Marital Status
+					</label>
+					<select id="maritalStatus" name="maritalStatus"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm">
+						<option value="">—</option>
+						<option value="single">Single</option>
+						<option value="married">Married</option>
+						<option value="divorced">Divorced</option>
+						<option value="widowed">Widowed</option>
+						<option value="other">Other</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<!-- Address -->
+		<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+			<h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
+				Address
+			</h3>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				<div class="sm:col-span-2">
+					<label for="addressLine1" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Address Line 1
+					</label>
+					<input type="text" id="addressLine1" name="addressLine1"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div class="sm:col-span-2">
+					<label for="addressLine2" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Address Line 2
+					</label>
+					<input type="text" id="addressLine2" name="addressLine2"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="subdistrict" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Subdistrict <span class="text-xs text-gray-400">(ตำบล / Tambon)</span>
+					</label>
+					<input type="text" id="subdistrict" name="subdistrict"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="district" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						District <span class="text-xs text-gray-400">(อำเภอ / Amphoe)</span>
+					</label>
+					<input type="text" id="district" name="district"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="province" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Province <span class="text-xs text-gray-400">(จังหวัด / Changwat)</span>
+					</label>
+					<input type="text" id="province" name="province"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="postalCode" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Postal Code
+					</label>
+					<input type="text" id="postalCode" name="postalCode" maxlength="10"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div class="sm:col-span-2">
+					<label for="country" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Country
+					</label>
+					<input type="text" id="country" name="country" value="Thailand"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+			</div>
+		</div>
+
+		<!-- Emergency Contact -->
+		<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+			<h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
+				Emergency Contact
+			</h3>
+			<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+				<div>
+					<label for="emergencyContactName" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Name
+					</label>
+					<input type="text" id="emergencyContactName" name="emergencyContactName"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="emergencyContactPhone" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Phone
+					</label>
+					<input type="tel" id="emergencyContactPhone" name="emergencyContactPhone"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+				<div>
+					<label for="emergencyContactRelationship" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+						Relationship
+					</label>
+					<input type="text" id="emergencyContactRelationship" name="emergencyContactRelationship"
+						placeholder="e.g. Spouse, Parent"
+						class="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm" />
+				</div>
+			</div>
+		</div>
+
 		<!-- Initial Salary -->
 		<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
 			<h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">