B4L/buildfor_life_budget
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add personal/address/emergency sections to new-employee form

Browse Source 
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>
This commit is contained in:
Alexander Grabowski
2026-04-15 09:58:38 +07:00
parent ed98aefecd
commit f222ac3989
2 changed files with 168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/companies/[companyId]/employees/new/+page.server.ts
+29
View File
@@ -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();
src/routes/(app)/companies/[companyId]/employees/new/+page.svelte
+139
View File
@@ -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">