From 1f040c45618474befae05f84cddde67d4566a203 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 10 Apr 2026 15:26:50 +0530
Subject: [PATCH] refactor: jobs list and form ui

---
 frontend/src/pages/JobForm.vue | 145 ++++++++++++++++++++++++++-------
 frontend/src/pages/Jobs.vue    |   8 +-
 2 files changed, 120 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index 5524223b..424df035 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -13,13 +13,13 @@
 				</Button>
 			</div>
 		</header>
-		<div class="py-5">
-			<div class="container border-b mb-4 pb-5">
-				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
-					{{ __('Job Details') }}
-				</div>
-				<div class="grid grid-cols-2 gap-5">
-					<div class="space-y-4">
+		<div class="">
+			<div class="grid grid-cols-[70%,30%] gap-5 px-5">
+				<div class="space-y-5 pt-5">
+					<div class="text-ink-gray-9 font-semibold">
+						{{ __('Job Details') }}
+					</div>
+					<div class="grid grid-cols-3 gap-5">
 						<FormControl
 							v-model="job.job_title"
 							:label="__('Title')"
@@ -40,7 +40,34 @@
 							:required="true"
 						/>
 					</div>
-					<div class="space-y-4">
+					<div>
+						<label class="block text-ink-gray-5 text-xs mb-1">
+							{{ __('Description') }}
+							<span class="text-ink-red-3">*</span>
+						</label>
+						<TextEditor
+							:content="job.description"
+							@change="(val) => (job.description = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[20rem] max-h-[70vh] overflow-y-auto mb-4"
+						/>
+					</div>
+				</div>
+				<div class="border-l h-[93vh]">
+					<div v-if="jobName != 'new'" class="p-5 space-y-5 border-b">
+						<FormControl
+							v-model="job.status"
+							:label="__('Status')"
+							type="select"
+							:options="jobStatuses"
+							:required="true"
+						/>
+					</div>
+					<div class="p-5 space-y-5 border-b">
+						<div class="text-ink-gray-9 font-semibold">
+							{{ __('Location') }}
+						</div>
 						<FormControl
 							v-model="job.location"
 							:label="__('City')"
@@ -52,23 +79,11 @@
 							:label="__('Country')"
 							:required="true"
 						/>
-						<FormControl
-							v-if="jobName != 'new'"
-							v-model="job.status"
-							:label="__('Status')"
-							type="select"
-							:options="jobStatuses"
-							:required="true"
-						/>
 					</div>
-				</div>
-			</div>
-			<div class="container border-b mb-4 pb-5">
-				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
-					{{ __('Company Details') }}
-				</div>
-				<div class="grid grid-cols-2 gap-5">
-					<div>
+					<div class="p-5 space-y-5">
+						<div class="text-ink-gray-9 font-semibold">
+							{{ __('Company Details') }}
+						</div>
 						<FormControl
 							v-model="job.company_name"
 							:label="__('Company Name')"
@@ -80,8 +95,6 @@
 							:label="__('Company Website')"
 							:required="true"
 						/>
-					</div>
-					<div>
 						<FormControl
 							v-model="job.company_email_address"
 							:label="__('Company Email Address')"
@@ -96,7 +109,81 @@
 					</div>
 				</div>
 			</div>
-			<div class="container mt-4">
+			<!-- <div class="border-b mb-4 pb-5 px-5">
+				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
+					{{ __('Job Details') }}
+				</div>
+				<div class="grid grid-cols-3 gap-5">
+					<FormControl
+						v-model="job.job_title"
+						:label="__('Title')"
+						:required="true"
+					/>
+					<FormControl
+						v-model="job.type"
+						:label="__('Type')"
+						type="select"
+						:options="jobTypes"
+						:required="true"
+					/>
+					<FormControl
+						v-model="job.work_mode"
+						:label="__('Work Mode')"
+						type="select"
+						:options="workModes"
+						:required="true"
+					/>
+					<FormControl
+						v-model="job.location"
+						:label="__('City')"
+						:required="true"
+					/>
+					<Link
+						v-model="job.country"
+						doctype="Country"
+						:label="__('Country')"
+						:required="true"
+					/>
+					<FormControl
+						v-if="jobName != 'new'"
+						v-model="job.status"
+						:label="__('Status')"
+						type="select"
+						:options="jobStatuses"
+						:required="true"
+					/>
+				</div>
+			</div>
+			<div class="border-b mb-4 pb-5 px-5">
+				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
+					{{ __('Company Details') }}
+				</div>
+				<div class="grid grid-cols-3 gap-5">
+					<FormControl
+						v-model="job.company_name"
+						:label="__('Company Name')"
+						class="mb-4"
+						:required="true"
+					/>
+					<FormControl
+						v-model="job.company_website"
+						:label="__('Company Website')"
+						:required="true"
+					/>
+					<FormControl
+						v-model="job.company_email_address"
+						:label="__('Company Email Address')"
+						class="mb-4"
+						:required="true"
+					/>
+					<Uploader
+						v-model="job.company_logo"
+						:label="__('Company Logo')"
+						:required="true"
+					/>
+				</div>
+			</div>
+			<div class="px-5 mt-4">
 				<label class="block text-ink-gray-5 text-xs mb-1">
 					{{ __('Description') }}
 					<span class="text-ink-red-3">*</span>
@@ -106,9 +193,9 @@
 					@change="(val) => (job.description = val)"
 					:editable="true"
 					:fixedMenu="true"
-					editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
+					editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-auto mb-4"
 				/>
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/pages/Jobs.vue b/frontend/src/pages/Jobs.vue
index d068d257..44688380 100644
--- a/frontend/src/pages/Jobs.vue
+++ b/frontend/src/pages/Jobs.vue
@@ -22,13 +22,13 @@
 					<template #prefix>
 						<Plus class="h-4 w-4" />
 					</template>
-					{{ __('New Job') }}
+					{{ __('Create') }}
 				</Button>
 			</router-link>
 		</header>
 		<div>
 			<div
-				class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto mb-2 p-5"
+				class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full mx-auto mb-2 p-5"
 			>
 				<div class="flex items-center justify-between">
 					<div class="text-xl font-semibold text-ink-gray-9 md:mb-0">
@@ -96,8 +96,8 @@
 					</div>
 				</div>
 			</div>
-			<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">
-				<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+			<div v-if="jobs.data?.length" class="w-full mx-auto p-5 pt-0">
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 					<router-link
 						v-for="job in jobs.data"
 						:to="{