Job Board
Job Board
UltraViolet Pro includes a comprehensive job board system for managing job listings, candidates, and recruitment workflows. The job board features multiple views and filtering options for efficient job management.
Overview
The job board system provides a complete solution for posting jobs, managing applications, and tracking candidates through the hiring process.
Job Dashboard
The job dashboard provides an overview of all recruitment activities and key metrics.
Route: /admin/jobs/dashboard
Key Metrics
<div class="row g-3">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Total Jobs</h6>
<h2>48</h2>
<span class="badge bg-success">+5 this week</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Active Jobs</h6>
<h2>32</h2>
<span class="badge bg-info">Currently hiring</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Total Candidates</h6>
<h2>245</h2>
<span class="badge bg-primary">+18 today</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Positions Filled</h6>
<h2>16</h2>
<span class="badge bg-success">This month</span>
</div>
</div>
</div>
</div>Dashboard Features
- Overview Statistics: Total jobs, candidates, and placements
- Recent Activity: Latest applications and status changes
- Hiring Pipeline: Visual representation of candidate stages
- Department Breakdown: Jobs by department
- Performance Metrics: Time-to-hire, application rates
Job List View
A detailed list view of all job postings with sorting and filtering options.
Route: /admin/jobs/list
Job List Layout
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Job Listings</h5>
<button class="btn btn-primary">
<i class="material-symbols-rounded me-2">add</i>
Post New Job
</button>
</div>
</div>
<div class="card-body">
<!-- Filters -->
<div class="row mb-3">
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Search jobs...">
</div>
<div class="col-md-3">
<select class="form-select">
<option>All Departments</option>
<option>Engineering</option>
<option>Marketing</option>
<option>Sales</option>
</select>
</div>
<div class="col-md-3">
<select class="form-select">
<option>All Locations</option>
<option>Remote</option>
<option>New York</option>
<option>San Francisco</option>
</select>
</div>
<div class="col-md-3">
<select class="form-select">
<option>All Status</option>
<option>Active</option>
<option>Closed</option>
<option>Draft</option>
</select>
</div>
</div>
<!-- Job List Table -->
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Job Title</th>
<th>Department</th>
<th>Location</th>
<th>Type</th>
<th>Applications</th>
<th>Posted Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="fw-bold">Senior Software Engineer</div>
<small class="text-muted">Full Stack Development</small>
</td>
<td>Engineering</td>
<td>San Francisco, CA</td>
<td><span class="badge bg-primary">Full-time</span></td>
<td>
<span class="badge bg-info">24 Applicants</span>
</td>
<td>Oct 10, 2025</td>
<td><span class="badge bg-success">Active</span></td>
<td>
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-primary">View</button>
<button class="btn btn-outline-secondary">Edit</button>
</div>
</td>
</tr>
<!-- More job listings -->
</tbody>
</table>
</div>
</div>
</div>Job List Features
- Search: Full-text search across job titles and descriptions
- Filtering: Filter by department, location, status, type
- Sorting: Sort by date, applications, title
- Bulk Actions: Archive, delete, or modify multiple jobs
- Export: Export job listings to CSV/Excel
Job Grid View
A visual card-based layout for browsing job postings.
Route: /admin/jobs/grid
Grid Layout
<div class="row g-3">
<div class="col-md-6 col-lg-4">
<div class="card h-100 job-card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<h5 class="card-title mb-0">Senior Software Engineer</h5>
<span class="badge bg-success">Active</span>
</div>
<div class="mb-3">
<div class="d-flex align-items-center mb-2">
<i class="material-symbols-rounded me-2 text-muted">business</i>
<span>Engineering Department</span>
</div>
<div class="d-flex align-items-center mb-2">
<i class="material-symbols-rounded me-2 text-muted">location_on</i>
<span>San Francisco, CA</span>
</div>
<div class="d-flex align-items-center mb-2">
<i class="material-symbols-rounded me-2 text-muted">schedule</i>
<span>Full-time</span>
</div>
<div class="d-flex align-items-center">
<i class="material-symbols-rounded me-2 text-muted">payments</i>
<span>$120k - $180k</span>
</div>
</div>
<div class="mb-3">
<span class="badge bg-primary me-1">React</span>
<span class="badge bg-primary me-1">Node.js</span>
<span class="badge bg-primary me-1">TypeScript</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">24 applicants</small>
<button class="btn btn-outline-primary btn-sm">View Details</button>
</div>
</div>
<div class="card-footer">
<small class="text-muted">Posted on Oct 10, 2025</small>
</div>
</div>
</div>
<!-- More job cards -->
</div>Grid Features
- Visual Cards: Eye-catching card design with key information
- Quick Actions: View, edit, share buttons
- Status Indicators: Color-coded status badges
- Skills Tags: Visual representation of required skills
- Responsive: Adapts to different screen sizes
Job Categories
Organize jobs by categories and departments.
Route: /admin/jobs/categories
Category Management
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Add Category</h5>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<label class="form-label">Category Name</label>
<input type="text" class="form-control" placeholder="e.g., Engineering">
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="mb-3">
<label class="form-label">Icon</label>
<input type="text" class="form-control" placeholder="e.g., code">
</div>
<button type="submit" class="btn btn-primary w-100">Add Category</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Job Categories</h5>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<i class="material-symbols-rounded me-3 text-primary">code</i>
<div>
<h6 class="mb-0">Engineering</h6>
<small class="text-muted">Software development and tech roles</small>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<span class="badge bg-primary">18 jobs</span>
<button class="btn btn-sm btn-outline-secondary">Edit</button>
<button class="btn btn-sm btn-outline-danger">Delete</button>
</div>
</div>
</div>
<!-- More categories -->
</div>
</div>
</div>
</div>Category Features
- Custom Categories: Create unlimited job categories
- Icons: Assign Material Icons to categories
- Job Count: Track number of jobs per category
- Hierarchy: Support for parent/child categories
- Reordering: Drag-and-drop category ordering
Candidates Management
Track and manage job candidates throughout the hiring process.
Route: /admin/jobs/candidates
Candidate List
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Candidates</h5>
<div class="d-flex gap-2">
<input type="text" class="form-control" placeholder="Search candidates...">
<select class="form-select">
<option>All Stages</option>
<option>Applied</option>
<option>Screening</option>
<option>Interview</option>
<option>Offer</option>
</select>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Candidate</th>
<th>Position</th>
<th>Applied Date</th>
<th>Stage</th>
<th>Rating</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="./images/avatar1.jpg" class="rounded-circle me-2" width="40" height="40">
<div>
<div class="fw-bold">John Doe</div>
<small class="text-muted">john.doe@email.com</small>
</div>
</div>
</td>
<td>Senior Software Engineer</td>
<td>Oct 15, 2025</td>
<td><span class="badge bg-warning">Interview</span></td>
<td>
<div class="d-flex align-items-center">
<i class="material-symbols-rounded text-warning">star</i>
<i class="material-symbols-rounded text-warning">star</i>
<i class="material-symbols-rounded text-warning">star</i>
<i class="material-symbols-rounded text-warning">star</i>
<i class="material-symbols-rounded text-muted">star</i>
</div>
</td>
<td>
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-primary">View</button>
<button class="btn btn-outline-success">Approve</button>
<button class="btn btn-outline-danger">Reject</button>
</div>
</td>
</tr>
<!-- More candidates -->
</tbody>
</table>
</div>
</div>
</div>Candidate Pipeline
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Hiring Pipeline</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col">
<div class="pipeline-stage">
<div class="stage-header bg-primary">
<h6 class="mb-0">Applied</h6>
<span class="badge bg-white text-primary">24</span>
</div>
<div class="stage-content">
<!-- Candidate cards -->
</div>
</div>
</div>
<div class="col">
<div class="pipeline-stage">
<div class="stage-header bg-info">
<h6 class="mb-0">Screening</h6>
<span class="badge bg-white text-info">12</span>
</div>
<div class="stage-content">
<!-- Candidate cards -->
</div>
</div>
</div>
<div class="col">
<div class="pipeline-stage">
<div class="stage-header bg-warning">
<h6 class="mb-0">Interview</h6>
<span class="badge bg-white text-warning">8</span>
</div>
<div class="stage-content">
<!-- Candidate cards -->
</div>
</div>
</div>
<div class="col">
<div class="pipeline-stage">
<div class="stage-header bg-success">
<h6 class="mb-0">Offer</h6>
<span class="badge bg-white text-success">3</span>
</div>
<div class="stage-content">
<!-- Candidate cards -->
</div>
</div>
</div>
</div>
</div>
</div>Candidate Features
- Profile Management: Complete candidate profiles
- Resume Viewing: View and download resumes
- Stage Tracking: Move candidates through hiring stages
- Rating System: Rate and review candidates
- Notes: Add internal notes and comments
- Communication: Email integration for candidate communication
- Interview Scheduling: Schedule and track interviews
Job Posting Workflow
Create Job Posting
// Controller
public function store(Request $request)
{
$validated = $request->validate([
'title' => 'required|string|max:255',
'department' => 'required|string',
'location' => 'required|string',
'type' => 'required|in:full-time,part-time,contract,remote',
'description' => 'required|string',
'requirements' => 'required|string',
'salary_min' => 'nullable|numeric',
'salary_max' => 'nullable|numeric',
'skills' => 'array',
]);
$job = Job::create($validated);
return redirect()->route('admin.jobs.show', $job);
}Job Application Form
<form method="POST" action="{{ route('jobs.apply', $job) }}" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label">Full Name *</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Email *</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Phone</label>
<input type="tel" name="phone" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Resume *</label>
<input type="file" name="resume" class="form-control" accept=".pdf,.doc,.docx" required>
</div>
<div class="mb-3">
<label class="form-label">Cover Letter</label>
<textarea name="cover_letter" class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit Application</button>
</form>Best Practices
- Job Descriptions: Write clear, detailed job descriptions
- Requirements: List must-have vs. nice-to-have skills
- Response Time: Respond to candidates promptly
- Pipeline: Keep candidates moving through stages
- Communication: Maintain regular candidate communication
- Analytics: Track recruitment metrics and optimize
- Compliance: Ensure EEOC and legal compliance
Production Deployment
The job board system works in both the static HTML and Laravel Livewire editions. For dynamic features like applications in the static HTML version, consider using contact forms or mailto links.