Hero and Service tile added newly
This commit is contained in:
@@ -252,118 +252,136 @@
|
||||
</div>
|
||||
|
||||
<!-- Applications View -->
|
||||
<div *ngIf="showApplications && selectedJobForApplications" class="applications-container">
|
||||
<div class="applications-card">
|
||||
<div class="applications-header">
|
||||
<div class="header-info">
|
||||
<h3>Applications</h3>
|
||||
<p>{{ selectedJobForApplications.title }}</p>
|
||||
</div>
|
||||
<span class="application-count">{{ applications.length }} {{ applications.length === 1 ? 'Application' : 'Applications' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="applications-body">
|
||||
<div *ngIf="applications.length > 0" class="table-wrapper">
|
||||
<table class="applications-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Applicant</th>
|
||||
<th>Contact</th>
|
||||
<th>Experience</th>
|
||||
<th>Status</th>
|
||||
<th>Applied Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let application of applications">
|
||||
<td>
|
||||
<div class="applicant-info">
|
||||
<div class="applicant-avatar">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<span class="applicant-name">{{ application.fullName }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<span>{{ application.email }}</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fa fa-phone"></i>
|
||||
<span>{{ application.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="experience-badge">{{ application.experience }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge" [ngClass]="getStatusBadgeClass(application.status || 'pending')">
|
||||
{{ application.status || 'PENDING' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="date-text">{{ application.createdDate | date:'MMM d, y' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<div class="dropdown">
|
||||
<button class="btn-action btn-status">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>Status</span>
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'PENDING')">
|
||||
<i class="fa fa-clock"></i>
|
||||
Pending
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'REVIEWED')">
|
||||
<i class="fa fa-eye"></i>
|
||||
Reviewed
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'SHORTLISTED')">
|
||||
<i class="fa fa-star"></i>
|
||||
Shortlisted
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'INTERVIEWED')">
|
||||
<i class="fa fa-comments"></i>
|
||||
Interviewed
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'HIRED')">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
Hired
|
||||
</button>
|
||||
<button class="dropdown-item item-danger" (click)="updateApplicationStatus(application, 'REJECTED')">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
Rejected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-action btn-delete" (click)="deleteApplication(application)">
|
||||
<i class="fa fa-trash"></i>
|
||||
<!-- Applications View -->
|
||||
<div *ngIf="showApplications && selectedJobForApplications" class="applications-container">
|
||||
<div class="applications-card">
|
||||
<div class="applications-header">
|
||||
<div class="header-info">
|
||||
<h3>Applications</h3>
|
||||
<p>{{ selectedJobForApplications.title }}</p>
|
||||
</div>
|
||||
<span class="application-count">{{ applications.length }} {{ applications.length === 1 ? 'Application' : 'Applications' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="applications-body">
|
||||
<div *ngIf="applications.length > 0" class="table-wrapper">
|
||||
<table class="applications-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Applicant</th>
|
||||
<th>Contact</th>
|
||||
<th>Experience</th>
|
||||
<th>Resume</th>
|
||||
<th>Status</th>
|
||||
<th>Applied Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let application of applications; let i = index">
|
||||
<td>
|
||||
<div class="applicant-info">
|
||||
<div class="applicant-avatar">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<span class="applicant-name">{{ application.fullName }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<span>{{ application.email }}</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fa fa-phone"></i>
|
||||
<span>{{ application.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="experience-badge">{{ application.experience }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="resume-actions" *ngIf="hasResume(application)">
|
||||
<button class="btn-resume btn-view" (click)="viewResume(application)" title="View Resume">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>View</span>
|
||||
</button>
|
||||
<button class="btn-resume btn-download" (click)="downloadResume(application)" title="Download Resume">
|
||||
<i class="fa fa-download"></i>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="no-resume" *ngIf="!hasResume(application)">
|
||||
<i class="fa fa-file-excel"></i>
|
||||
<span>No Resume</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge" [ngClass]="getStatusBadgeClass(application.status || 'pending')">
|
||||
{{ application.status || 'PENDING' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="date-text">{{ application.createdDate | date:'MMM d, y' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<div class="dropdown" [class.active]="activeDropdownIndex === i">
|
||||
<button class="btn-action btn-status" (click)="toggleDropdown(i, $event)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>Status</span>
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'PENDING')">
|
||||
<i class="fa fa-clock"></i>
|
||||
Pending
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'REVIEWED')">
|
||||
<i class="fa fa-eye"></i>
|
||||
Reviewed
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'SHORTLISTED')">
|
||||
<i class="fa fa-star"></i>
|
||||
Shortlisted
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'INTERVIEWED')">
|
||||
<i class="fa fa-comments"></i>
|
||||
Interviewed
|
||||
</button>
|
||||
<button class="dropdown-item" (click)="updateApplicationStatus(application, 'HIRED')">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
Hired
|
||||
</button>
|
||||
<button class="dropdown-item item-danger" (click)="updateApplicationStatus(application, 'REJECTED')">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
Rejected
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-action btn-delete" (click)="deleteApplication(application)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Empty State for Applications -->
|
||||
<div *ngIf="applications.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<h3>No applications yet</h3>
|
||||
<p>This job hasn't received any applications</p>
|
||||
</div>
|
||||
<!-- Empty State for Applications -->
|
||||
<div *ngIf="applications.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<h3>No applications yet</h3>
|
||||
<p>This job hasn't received any applications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jobs List -->
|
||||
<div *ngIf="!showJobForm && !showApplications" class="jobs-list-container">
|
||||
|
||||
Reference in New Issue
Block a user