team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit (history cleared)
CI / test (3.4.1) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Robbie Paul
2026-04-29 11:21:39 +01:00
commit 298610b5f6
277 changed files with 30877 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/performance/index.html.erb
+347
View File
@@ -0,0 +1,347 @@
<div class="container-fluid">
<div class="row mb-4">
<div class="col-12">
<h2 class="mb-3">
<i class="bi bi-graph-up-arrow text-primary"></i> Performance Reviews
</h2>
<p class="text-muted">Track your performance history and feedback</p>
</div>
</div>
<!-- Performance Summary Stats -->
<div class="row g-3 mb-4">
<%
total_reviews = @perf.count
avg_score = @perf.any? ? (@perf.sum(&:score).to_f / total_reviews).round(1) : 0
latest_score = @perf.last&.score || 0
highest_score = @perf.any? ? @perf.max_by(&:score).score : 0
%>
<div class="col-lg-3 col-md-6">
<div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #579da9;">
<div class="card-body p-4">
<div class="mb-3">
<i class="bi bi-star-fill" style="font-size: 2.5rem; color: #579da9;"></i>
</div>
<h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
Average Score
</h6>
<h2 class="mb-0" style="color: #579da9; font-weight: 700; font-size: 2.5rem;">
<%= avg_score %>
</h2>
<p class="text-muted mt-2 mb-0 small">Out of 5.0</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid var(--rg-primary);">
<div class="card-body p-4">
<div class="mb-3">
<i class="bi bi-trophy-fill" style="font-size: 2.5rem; color: var(--rg-primary);"></i>
</div>
<h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
Highest Score
</h6>
<h2 class="mb-0" style="color: var(--rg-primary); font-weight: 700; font-size: 2.5rem;">
<%= highest_score %>
</h2>
<p class="text-muted mt-2 mb-0 small">Best performance</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #1e825e;">
<div class="card-body p-4">
<div class="mb-3">
<i class="bi bi-calendar-check-fill" style="font-size: 2.5rem; color: #1e825e;"></i>
</div>
<h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
Latest Score
</h6>
<h2 class="mb-0" style="color: #1e825e; font-weight: 700; font-size: 2.5rem;">
<%= latest_score %>
</h2>
<p class="text-muted mt-2 mb-0 small">Most recent review</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #b5799e;">
<div class="card-body p-4">
<div class="mb-3">
<i class="bi bi-file-earmark-text-fill" style="font-size: 2.5rem; color: #b5799e;"></i>
</div>
<h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
Total Reviews
</h6>
<h2 class="mb-0" style="color: #b5799e; font-weight: 700; font-size: 2.5rem;">
<%= total_reviews %>
</h2>
<p class="text-muted mt-2 mb-0 small">Performance evaluations</p>
</div>
</div>
</div>
</div>
<!-- Performance Timeline -->
<div class="row mb-4">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<h4 class="mb-0">
<i class="bi bi-graph-up text-primary"></i> Performance Trend
</h4>
<p class="text-muted mb-0 small mt-1">Your performance scores over time</p>
</div>
<div class="card-body p-4">
<% if @perf.any? %>
<div class="performance-timeline">
<% @perf.each_with_index do |p, index| %>
<%
score_percentage = (p.score.to_f / 5.0) * 100
score_color = case p.score
when 5 then '#1e825e'
when 4 then '#579da9'
when 3 then '#ffb703'
else '#e26666'
end
%>
<div class="timeline-item" style="animation-delay: <%= index * 0.1 %>s;">
<div class="timeline-marker">
<div class="timeline-date">
<small class="text-muted"><%= p.date_submitted %></small>
</div>
<div class="timeline-dot" style="background-color: <%= score_color %>;">
<span style="font-weight: 700; color: white; font-size: 0.9rem;"><%= p.score %></span>
</div>
<div class="timeline-reviewer">
<small class="text-muted"><%= p.reviewer_name %></small>
</div>
</div>
<div class="timeline-content">
<div class="progress" style="height: 30px; border-radius: 15px;">
<div class="progress-bar" role="progressbar"
style="width: <%= score_percentage %>%; background-color: <%= score_color %>; font-weight: 600; font-size: 1rem;"
aria-valuenow="<%= p.score %>" aria-valuemin="0" aria-valuemax="5">
<%= p.score %> / 5 - <%= p.comments %>
</div>
</div>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="text-center text-muted py-5">
<i class="bi bi-graph-up" style="font-size: 3rem; opacity: 0.3;"></i>
<p class="mt-3 mb-0">No performance data to display</p>
</div>
<% end %>
</div>
</div>
</div>
</div>
<!-- Performance History Table -->
<div class="row">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<h4 class="mb-0">
<i class="bi bi-table text-primary"></i> Performance History
</h4>
<p class="text-muted mb-0 small mt-1">Detailed review feedback and comments</p>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th style="width: 20%;">
<i class="bi bi-person-badge me-2"></i>Reviewer
</th>
<th style="width: 15%;">
<i class="bi bi-calendar-event me-2"></i>Date
</th>
<th style="width: 10%;">
<i class="bi bi-star me-2"></i>Score
</th>
<th style="width: 55%;">
<i class="bi bi-chat-left-text me-2"></i>Comments
</th>
</tr>
</thead>
<tbody>
<% if @perf.any? %>
<% @perf.each do |p| %>
<tr>
<td class="fw-semibold">
<div class="d-flex align-items-center">
<div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
<i class="bi bi-person-fill text-primary"></i>
</div>
<%= p.reviewer_name %>
</div>
</td>
<td>
<span class="badge bg-light text-dark">
<i class="bi bi-calendar-date me-1"></i><%= p.date_submitted %>
</span>
</td>
<td>
<%
score_color = case p.score
when 5 then 'success'
when 4 then 'primary'
when 3 then 'warning'
else 'danger'
end
%>
<span class="badge bg-<%= score_color %>" style="font-size: 1rem; padding: 0.5rem 0.75rem;">
<%= p.score %> / 5
</span>
</td>
<td>
<div class="text-muted">
<%= p.comments %>
</div>
</td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="4" class="text-center text-muted py-5">
<i class="bi bi-inbox" style="font-size: 3rem; opacity: 0.3;"></i>
<p class="mt-3 mb-0">No performance reviews available yet</p>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function makeActive(){
$('li[id="performance"]').addClass('active');
}
$(document).ready(function() {
makeActive();
});
// Handle Turbolinks page loads
$(document).on('turbolinks:load', function() {
makeActive();
});
</script>
<style>
.hover-stat-card {
transition: all 0.3s ease;
}
.hover-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
.hover-stat-card h2 {
transition: transform 0.3s ease;
}
.hover-stat-card:hover h2 {
transform: scale(1.05);
}
.table tbody tr {
transition: background-color 0.2s ease;
}
.table tbody tr:hover {
background-color: rgba(230, 57, 70, 0.03);
}
/* Performance Timeline Styles */
.performance-timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.timeline-item {
display: flex;
align-items: center;
gap: 1.5rem;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-marker {
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
gap: 0.5rem;
}
.timeline-dot {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-dot {
transform: scale(1.15);
}
.timeline-content {
flex: 1;
}
.timeline-date, .timeline-reviewer {
text-align: center;
white-space: nowrap;
}
.progress {
transition: transform 0.3s ease;
}
.timeline-item:hover .progress {
transform: translateX(5px);
}
@media (max-width: 768px) {
.timeline-item {
flex-direction: column;
text-align: center;
}
.timeline-marker {
min-width: auto;
}
}
</style>