FileXXXXXXXXXXX

File manager - Edit - /var/www/ratemypay/resources/views/dashboard/job-descriptions/create.blade.php

Back
{{-- resources/views/dashboard/job-descriptions/create.blade.php - Step 1: Role Basics --}} @extends('layouts.dashboard') @section('content') <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20"> <div class="md:max-w-[90%] max-w-[90%] mx-auto px-6"> {{-- Wizard Container --}} <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm"> {{-- Stepper --}} <x-job-descriptions.stepper :currentStep="1" /> {{-- Step Content --}} <div class="px-6 md:px-10 pb-10"> <h2 class="text-2xl font-bold text-gray-900 mb-2">Let's start with the basics</h2> <p class="text-gray-500 mb-8">Provide the essential information about the role. We'll use this to generate a comprehensive job description.</p> <form action="{{ route('dashboard.job-descriptions.store') }}" method="POST" x-data="{ jobTitle: '{{ old('job_title') }}', department: '{{ old('department') }}', level: '{{ old('level') }}', location: '{{ old('location') }}', employmentType: '{{ old('employment_type') }}', errors: {}, validate() { this.errors = {}; if (!this.jobTitle.trim()) this.errors.jobTitle = 'Job title is required'; if (!this.department) this.errors.department = 'Department is required'; if (!this.level) this.errors.level = 'Level is required'; if (!this.location.trim()) this.errors.location = 'Location is required'; if (!this.employmentType) this.errors.employmentType = 'Employment type is required'; return Object.keys(this.errors).length === 0; }, submitForm(e) { if (!this.validate()) { e.preventDefault(); } } }"> @csrf {{-- Role Information Card --}} <div class="border border-gray-200 rounded-2xl p-6 md:p-8"> <h3 class="text-xl font-bold text-gray-900 mb-1">Role Information</h3> <p class="text-sm text-gray-500 mb-6 pb-6 border-b border-gray-100">Fill in the core details about this position</p> {{-- Job Title --}} <div class="mb-6"> <label class="block text-sm font-semibold text-gray-700 mb-2"> Job Title <span class="text-red-500"></span> </label> <input type="text" name="job_title" x-model="jobTitle" placeholder="e.g., Senior Software Engineer" :class="errors.jobTitle ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'" class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors"> <p x-show="errors.jobTitle" x-text="errors.jobTitle" class="text-red-500 text-xs mt-1.5 font-medium"></p> @error('job_title') <p class="text-red-500 text-xs mt-1.5 font-medium">{{ $message }}</p> @enderror </div> {{-- Department --}} <div class="mb-6"> <label class="block text-sm font-semibold text-gray-700 mb-2"> Department <span class="text-red-500"></span> </label> <div class="relative"> <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"> <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> </svg> </div> <input type="text" name="department" list="departments" x-model="department" placeholder="Search or enter department" :class="errors.department ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'" class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors bg-white"> </div> <datalist id="departments"> <option value="Engineering"> <option value="Product"> <option value="Design"> <option value="Marketing"> <option value="Sales"> <option value="Operations"> <option value="Finance"> <option value="Human Resources"> <option value="Customer Success"> <option value="Analytics"> <option value="Legal"> <option value="Compliance"> <option value="Research & Development"> <option value="Quality Assurance"> <option value="Infrastructure"> <option value="Security"> </datalist> <p x-show="errors.department" x-text="errors.department" class="text-red-500 text-xs mt-1.5 font-medium"></p> </div> {{-- Level / Grade --}} <div class="mb-6"> <label class="block text-sm font-semibold text-gray-700 mb-2"> Level / Grade <span class="text-red-500"></span> </label> <div class="relative"> <select name="level" x-model="level" :class="errors.level ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'" class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 bg-white appearance-none transition-colors"> <option value="">Select level</option> <option value="L1 - Entry Level">L1 - Entry Level</option> <option value="L2 - Associate">L2 - Associate</option> <option value="L3 - Junior">L3 - Junior</option> <option value="L4 - Mid-Level">L4 - Mid-Level</option> <option value="L5 - Senior">L5 - Senior</option> <option value="L5 - Lead">L5 - Lead</option> <option value="L6 - Principal">L6 - Principal</option> <option value="L7 - Director">L7 - Director</option> <option value="L8 - VP">L8 - VP</option> <option value="L9 - Executive">L9 - Executive</option> </select> <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> <p x-show="errors.level" x-text="errors.level" class="text-red-500 text-xs mt-1.5 font-medium"></p> </div> {{-- Location & Employment Type Row --}} <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> {{-- Location --}} <div> <label class="block text-sm font-semibold text-gray-700 mb-2"> Location <span class="text-red-500"></span> </label> <div class="relative"> <div class="absolute left-3 top-1/2 -translate-y-1/2"> <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> <input type="text" name="location" x-model="location" placeholder="e.g., New York, NY" :class="errors.location ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'" class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors"> </div> <p x-show="errors.location" x-text="errors.location" class="text-red-500 text-xs mt-1.5 font-medium"></p> </div> {{-- Employment Type --}} <div> <label class="block text-sm font-semibold text-gray-700 mb-2"> Employment Type <span class="text-red-500">*</span> </label> <div class="relative"> <div class="absolute left-3 top-1/2 -translate-y-1/2"> <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> </svg> </div> <select name="employment_type" x-model="employmentType" :class="errors.employmentType ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'" class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 bg-white appearance-none transition-colors"> <option value="">Select type</option> <option value="Full-Time">Full-Time</option> <option value="Part-Time">Part-Time</option> <option value="Contract">Contract</option> <option value="Temporary">Temporary</option> <option value="Internship">Internship</option> </select> <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> <p x-show="errors.employmentType" x-text="errors.employmentType" class="text-red-500 text-xs mt-1.5 font-medium"></p> </div> </div> </div> {{-- Info Banner --}} <div class="mt-8 bg-blue-50 border border-blue-100 rounded-2xl p-5 flex items-start gap-4"> <div class="w-10 h-10 bg-[#2F3D7E] rounded-xl flex items-center justify-center shrink-0"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> </div> <div> <h4 class="text-sm font-bold text-[#2F3D7E] mb-1">Professional Job Description Generation</h4> <p class="text-sm text-gray-600">Based on your inputs, we'll create a complete, structured job description including role summary, responsibilities, required skills, qualifications, and competencies aligned with your job architecture.</p> </div> </div> {{-- Action Buttons --}} <div class="flex items-center justify-end gap-4 mt-10"> <a href="{{ route('dashboard.job-descriptions.index') }}" class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors"> Cancel </a> <button type="submit" @click="submitForm($event)" class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> Generate Job Description </button> </div> </form> </div> </div> </div> </div> @endsection

| ver. 1.4 | Github | . | PHP 8.3.30 | Generation time: 0 | proxy | phpinfo | Settings