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

Modernize PTO (Paid Time Off) page with contemporary design

Browse Source 
Complete redesign of the PTO management page:

**Layout Improvements**:
- Migrated from Bootstrap 2 to Bootstrap 5 grid system
- Replaced .span classes with modern .col classes
- Side-by-side calendar and form layout on desktop
- Responsive cards with proper spacing

**Removed Google Charts**:
- Replaced sick days chart with 3 colorful stat cards
- Replaced PTO chart with 3 colorful stat cards
- Shows Earned, Taken, Remaining at a glance
- Color-coded with left borders (blue, red, green)
- No loading delays or JavaScript errors

**Modern Form**:
- Bootstrap 5 form controls with proper labels
- Icon-enhanced input groups
- Rounded inputs with better spacing
- Primary button for submission
- Form clears after successful submission

**Enhanced Calendar**:
- Kept FullCalendar but styled with modern theme
- Rounded corners and better button styling
- Brand-colored buttons and events
- Responsive layout

**Improved Alerts**:
- Bootstrap 5 dismissible alerts
- Icon-enhanced success/error messages
- Better visual hierarchy

**Additional Polish**:
- Formatted dates ("December 07, 2024" format)
- Info icons with contextual help
- Card shadows for depth
- Consistent spacing throughout
- Turbolinks compatibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ken Johnson
2025-12-07 02:37:40 -05:00
parent 9f9044f19d
commit 032dc33ffa
1 changed files with 242 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/paid_time_off/index.html.erb
+242 -211
View File
@@ -1,120 +1,181 @@
<div class="dashboard-wrapper">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<div id="success" style="display: none;" class="alert alert-block alert-success fade in">
<h4 class="alert-heading">
Success!
</h4>
<p>
Information successfully updated.
</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="failure" style="display: none;" class="alert alert-block alert-error fade in">
<h4 class="alert-heading">
Error!
</h4>
<p>
Failed to update.
</p>
</div>
</div>
</div>
<!-- Begin DP-->
<div class="row-fluid">
<!-- begin cal -->
<div class="span6">
<div class="widget">
<div class="widget-header">
<div class="title">
<span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> PTO Calendar
</div>
</div>
<div id="calendarDiv" class="widget-body">
<div id='calendar'></div>
</div>
</div>
</div>
<!-- End cal-->
<div class="span6">
<div class="widget">
<div class="widget-header">
<div class="title">
<span class="fs1" aria-hidden="true" data-icon="&#xe052;"></span> Schedule PTO
</div>
</div>
<!-- Begin WB-->
<div id="scheduleDiv" class="widget-body">
<%= form_for @schedule, :url => "#",:html => {:id => "cal_update"} do |s|%>
<div class="control-group">
<%= s.label :event_name, "Event Name", {:class => "control-label"}%>
<%= s.text_field :event_name, {:placeholder => "My PTO", :class => "span6"}%>
</div>
<div class="control-group">
<%= s.text_field :event_type, {:type => "hidden", :value => "pto", :class => "span6"}%>
</div>
<div class="control-group">
<%= s.label :event_desc, "Event Description", {:class => "control-label"}%>
<%= s.text_field :event_desc, {:placeholder => "Travel to Europe", :class => "span6"}%>
</div>
<div class="control-group">
<label class="control-label" for="date_range1">
Event Dates
</label>
<div class="controls">
<div class="input-append">
<input type="text" name="date_range1" id="date_range1" class="span8 date_picker" placeholder="Select Date"/>
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>
</div>
</div>
<%= s.submit "Submit", {:id => 'cal_update_submit', :class => "btn btn-primary pull-left"} %>
<% end %>
<div class="clearfix">
</div>
</div>
<!-- End WB-->
<div class="container-fluid">
<!-- Alert Messages -->
<div class="row">
<div class="col-12">
<div id="success" style="display: none;" class="alert alert-success alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill me-2" style="font-size: 1.5rem;"></i>
<div>
<h5 class="alert-heading mb-1">Success!</h5>
<p class="mb-0">Information successfully updated.</p>
</div>
</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div id="failure" style="display: none;" class="alert alert-danger alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center">
<i class="bi bi-exclamation-triangle-fill me-2" style="font-size: 1.5rem;"></i>
<div>
<h5 class="alert-heading mb-1">Error!</h5>
<p class="mb-0">Failed to update. Please try again.</p>
</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<!-- End DP-->
<div class="row-fluid">
<div class="span12">
<div class="widget">
<div class="widget-header">
<div class="title">
<span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> Sick Days
</div>
<!-- Calendar and Schedule Form Row -->
<div class="row g-3">
<!-- PTO Calendar -->
<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<h4 class="mb-0">
<i class="bi bi-calendar3 text-primary"></i> PTO Calendar
</h4>
</div>
<div id="calendarDiv" class="card-body">
<div id='calendar'></div>
</div>
</div>
</div>
<!-- Schedule PTO Form -->
<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<h4 class="mb-0">
<i class="bi bi-calendar-plus text-primary"></i> Schedule PTO
</h4>
</div>
<div id="scheduleDiv" class="card-body">
<%= form_for @schedule, url: "#", html: { id: "cal_update" } do |s| %>
<div class="mb-3">
<%= s.label :event_name, "Event Name", class: "form-label" %>
<%= s.text_field :event_name, {
placeholder: "My PTO",
class: "form-control"
} %>
</div>
<%= s.text_field :event_type, type: "hidden", value: "pto" %>
<div class="mb-3">
<%= s.label :event_desc, "Event Description", class: "form-label" %>
<%= s.text_field :event_desc, {
placeholder: "Travel to Europe",
class: "form-control"
} %>
</div>
<div class="mb-3">
<label class="form-label" for="date_range1">Event Dates</label>
<div class="input-group">
<span class="input-group-text">
<i class="bi bi-calendar-range"></i>
</span>
<input type="text" name="date_range1" id="date_range1" class="form-control date_picker" placeholder="Select Date Range"/>
</div>
</div>
<%= s.submit "Schedule PTO", {
id: 'cal_update_submit',
class: "btn btn-primary"
} %>
<% end %>
</div>
</div>
</div>
</div>
<!-- Sick Days Stats -->
<div class="row mt-3">
<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-bandaid text-primary"></i> Sick Days
</h4>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #579da9;">
<div class="card-body">
<div class="text-muted small mb-1">Days Earned</div>
<h3 class="mb-0" style="color: #579da9;"><%= @pto.sick_days_earned %></h3>
</div>
</div>
<div class="widget-body">
<div id="column_chart_1"></div>
</div>
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #e26666;">
<div class="card-body">
<div class="text-muted small mb-1">Days Taken</div>
<h3 class="mb-0" style="color: #e26666;"><%= @pto.sick_days_taken %></h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #1e825e;">
<div class="card-body">
<div class="text-muted small mb-1">Days Remaining</div>
<h3 class="mb-0" style="color: #1e825e;"><%= @pto.sick_days_remaining %></h3>
</div>
</div>
</div>
</div>
<div class="text-center text-muted mt-3 small">
<i class="bi bi-info-circle"></i> As of today: <%= Date.today.strftime("%B %d, %Y") %>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="widget">
<div class="widget-header">
<div class="title">
<span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> Paid Time Off
</div>
</div>
</div>
<!-- PTO Stats -->
<div class="row mt-3">
<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-umbrella-fill text-primary"></i> Paid Time Off
</h4>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #579da9;">
<div class="card-body">
<div class="text-muted small mb-1">Days Earned</div>
<h3 class="mb-0" style="color: #579da9;"><%= @pto.pto_earned %></h3>
</div>
</div>
<div class="widget-body">
<div id="column_chart_2"></div>
</div>
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #e26666;">
<div class="card-body">
<div class="text-muted small mb-1">Days Taken</div>
<h3 class="mb-0" style="color: #e26666;"><%= @pto.pto_taken %></h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="border-left: 4px solid #1e825e;">
<div class="card-body">
<div class="text-muted small mb-1">Days Remaining</div>
<h3 class="mb-0" style="color: #1e825e;"><%= @pto.pto_days_remaining %></h3>
</div>
</div>
</div>
</div>
<div class="text-center text-muted mt-3 small">
<i class="bi bi-info-circle"></i> As of today: <%= Date.today.strftime("%B %d, %Y") %>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -122,130 +183,100 @@
<%= javascript_include_tag "fullcalendar.min.js" %>
<script type="text/javascript">
function makeActive(){
function makeActive() {
$('li[id="pto"]').addClass('active');
};
}
$(document).ready(function() {
makeActive();
// Initialize FullCalendar
$('#calendar').fullCalendar({
events: <%= get_pto_schedule_schedule_index_path(:format => "json").inspect.html_safe %>,
events: <%= get_pto_schedule_schedule_index_path(:format => "json").inspect.html_safe %>,
height: 'auto',
contentHeight: 'auto',
aspectRatio: 1.5
});
// Initialize date range picker
$('.date_picker').daterangepicker({
opens: 'right',
locale: {
format: 'MM/DD/YYYY'
}
});
});
//Date picker
$('.date_picker').daterangepicker({
opens: 'right'
// Handle Turbolinks page loads
$(document).on('turbolinks:load', function() {
makeActive();
});
$(document).ready(function () {
drawChart1(),
drawChart2(),
resizeTopWidgets(),
makeActive()
});
google.load("visualization", "1", {
packages: ["corechart"]
});
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
[ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.sick_days_earned %>, <%= @pto.sick_days_taken %>, <%= @pto.sick_days_remaining %> ], ]);
var options = {
width: 'auto',
height: '160',
backgroundColor: 'transparent',
colors: ['#579da9', '#e26666', '#1e825e'],
tooltip: {
textStyle: {
color: '#666666',
fontSize: 11
},
showColorCode: true
},
legend: {
textStyle: {
color: 'black',
fontSize: 12
}
},
chartArea: {
left: 60,
top: 10,
height: '80%'
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_1'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
[ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.pto_earned %>, <%= @pto.pto_taken %>, <%= @pto.pto_days_remaining %> ], ]);
var options = {
width: 'auto',
height: '160',
backgroundColor: 'transparent',
colors: ['#579da9', '#e26666', '#1e825e'],
tooltip: {
textStyle: {
color: '#666666',
fontSize: 11
},
showColorCode: true
},
legend: {
textStyle: {
color: 'black',
fontSize: 12
}
},
chartArea: {
left: 60,
top: 10,
height: '80%'
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_2'));
chart.draw(data, options);
}
function resizeTopWidgets(){
var calHeight = $("#calendarDiv").height();
$("#scheduleDiv").css({'height':calHeight});
};
// Form submission
$("#cal_update_submit").click(function(event) {
var valuesToSubmit = $("#cal_update").serialize();
event.preventDefault();
$.ajax({
url: "/schedule.json",
event.preventDefault();
var valuesToSubmit = $("#cal_update").serialize();
$.ajax({
url: "/schedule.json",
data: valuesToSubmit,
type: "POST",
success: function(response) {
if (response.msg == "failure") {
$('#failure').show(500).delay(1500).fadeOut();
} else {
$('#success').show(500).delay(1500).fadeOut();
$('#calendar').fullCalendar('refetchEvents')
}
if (response.msg == "failure") {
$('#failure').show(500).delay(1500).fadeOut();
} else {
$('#success').show(500).delay(1500).fadeOut();
$('#calendar').fullCalendar('refetchEvents');
// Clear form
$('#cal_update')[0].reset();
}
},
error: function(event) {
$('#failure').show(500).delay(1500).fadeOut();
$('#failure').show(500).delay(1500).fadeOut();
}
});
});
</script>
<style>
/* FullCalendar modern styling */
#calendar {
border-radius: 0.5rem;
}
.fc-toolbar {
background: var(--rg-light);
padding: 1rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.fc-button {
background: var(--rg-primary) !important;
border-color: var(--rg-primary) !important;
border-radius: 0.5rem !important;
text-transform: none !important;
padding: 0.375rem 0.75rem !important;
}
.fc-button:hover {
background: var(--rg-primary-dark) !important;
border-color: var(--rg-primary-dark) !important;
}
.fc-day-header {
background: var(--rg-light);
padding: 0.75rem;
font-weight: 600;
}
.fc-event {
background: var(--rg-primary);
border-color: var(--rg-primary);
border-radius: 0.375rem;
padding: 0.25rem 0.5rem;
}
.fc-today {
background: rgba(230, 57, 70, 0.05) !important;
}
</style>