579 lines
25 KiB
HTML
579 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Service Reports - HarborSmith Portal</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
<link rel="stylesheet" href="../css/voyage-layout.css">
|
|
<link rel="stylesheet" href="../css/themes.css">
|
|
<link rel="stylesheet" href="../css/portal-styles.css">
|
|
<link rel="stylesheet" href="../css/maintenance-enhanced.css">
|
|
<style>
|
|
.reports-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.report-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.report-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.report-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.report-status {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.report-status.completed {
|
|
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
|
color: #16a34a;
|
|
}
|
|
|
|
.report-status.pending {
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
color: #d97706;
|
|
}
|
|
|
|
.report-status.in-progress {
|
|
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
color: #2563eb;
|
|
}
|
|
|
|
.report-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.report-detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.filter-tab {
|
|
padding: 0.75rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.filter-tab:hover {
|
|
color: #667eea;
|
|
}
|
|
|
|
.filter-tab.active {
|
|
color: #667eea;
|
|
}
|
|
|
|
.filter-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-box {
|
|
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="portal">
|
|
<div class="portal-wrapper">
|
|
<!-- Sidebar -->
|
|
<aside class="portal-sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="maintenance-dashboard.html" class="sidebar-logo">
|
|
<img src="../logo.jpg" alt="HarborSmith">
|
|
<span>HarborSmith</span>
|
|
</a>
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()">
|
|
<i data-lucide="menu"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Main</div>
|
|
<a href="maintenance-dashboard.html" class="sidebar-link">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="maintenance-vessels.html" class="sidebar-link">
|
|
<i data-lucide="ship"></i>
|
|
<span>My Vessels</span>
|
|
</a>
|
|
<a href="maintenance-schedule.html" class="sidebar-link">
|
|
<i data-lucide="calendar"></i>
|
|
<span>Schedule Service</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Records</div>
|
|
<a href="maintenance-documents.html" class="sidebar-link">
|
|
<i data-lucide="file-text"></i>
|
|
<span>Documents</span>
|
|
</a>
|
|
<a href="maintenance-reports.html" class="sidebar-link active">
|
|
<i data-lucide="clipboard-list"></i>
|
|
<span>Service Reports</span>
|
|
</a>
|
|
<a href="maintenance-invoices.html" class="sidebar-link">
|
|
<i data-lucide="receipt"></i>
|
|
<span>Invoices</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Account</div>
|
|
<a href="#" class="sidebar-link">
|
|
<i data-lucide="settings"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a href="../portal-login.html" class="sidebar-link" onclick="logout()">
|
|
<i data-lucide="log-out"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="portal-main">
|
|
<!-- Header -->
|
|
<header class="portal-header">
|
|
<div class="portal-breadcrumb">
|
|
<span>Maintenance Portal</span>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<span>Service Reports</span>
|
|
</div>
|
|
|
|
<div class="portal-header-actions">
|
|
<div class="header-search">
|
|
<i data-lucide="search"></i>
|
|
<input type="text" placeholder="Search reports...">
|
|
</div>
|
|
|
|
<button class="header-notifications" style="background: none; border: none; cursor: pointer; position: relative;">
|
|
<i data-lucide="bell"></i>
|
|
<span class="notification-badge">3</span>
|
|
</button>
|
|
|
|
<div class="header-user">
|
|
<div class="user-avatar">JS</div>
|
|
<div>
|
|
<div style="font-weight: 600;">John Smith</div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Maintenance Client</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<div class="portal-content">
|
|
<div class="page-header">
|
|
<h1>Service Reports</h1>
|
|
<p>View and download your maintenance service reports</p>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="stats-row">
|
|
<div class="stat-box">
|
|
<div class="stat-value">24</div>
|
|
<div class="stat-label">Total Reports</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">18</div>
|
|
<div class="stat-label">Completed Services</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">3</div>
|
|
<div class="stat-label">Pending Reviews</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">98%</div>
|
|
<div class="stat-label">Satisfaction Rate</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="filter-tabs">
|
|
<button class="filter-tab active" onclick="filterReports('all')">All Reports</button>
|
|
<button class="filter-tab" onclick="filterReports('completed')">Completed</button>
|
|
<button class="filter-tab" onclick="filterReports('pending')">Pending</button>
|
|
<button class="filter-tab" onclick="filterReports('scheduled')">Scheduled</button>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
|
<div style="display: flex; gap: 1rem;">
|
|
<select class="form-select" style="width: 200px;">
|
|
<option>All Vessels</option>
|
|
<option>Sea Breeze</option>
|
|
<option>Wave Runner</option>
|
|
<option>Ocean Spirit</option>
|
|
</select>
|
|
<select class="form-select" style="width: 200px;">
|
|
<option>Last 30 Days</option>
|
|
<option>Last 3 Months</option>
|
|
<option>Last 6 Months</option>
|
|
<option>Last Year</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary">
|
|
<i data-lucide="download"></i>
|
|
Export All
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reports Grid -->
|
|
<div class="reports-grid">
|
|
<!-- Report Card 1 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Annual Inspection</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Sea Breeze</p>
|
|
</div>
|
|
<span class="report-status completed">Completed</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-089</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Nov 10, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Mike Johnson</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Duration</span>
|
|
<strong>5.5 hours</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View
|
|
</button>
|
|
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
|
<i data-lucide="download"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Card 2 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Engine Service</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Wave Runner</p>
|
|
</div>
|
|
<span class="report-status completed">Completed</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-087</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Oct 28, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Sarah Williams</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Duration</span>
|
|
<strong>3.5 hours</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View
|
|
</button>
|
|
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
|
<i data-lucide="download"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Card 3 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Hull Cleaning</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Ocean Spirit</p>
|
|
</div>
|
|
<span class="report-status pending">Pending Review</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-086</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Nov 5, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Tom Davis</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Duration</span>
|
|
<strong>2.5 hours</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
Review
|
|
</button>
|
|
<button class="btn btn-sm" style="flex: 1; background: #fbbf24; color: #78350f;">
|
|
<i data-lucide="message-circle"></i>
|
|
Feedback
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Card 4 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Electronics Check</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Sea Breeze</p>
|
|
</div>
|
|
<span class="report-status completed">Completed</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-085</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Oct 15, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Tom Davis</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Duration</span>
|
|
<strong>4.0 hours</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View
|
|
</button>
|
|
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
|
<i data-lucide="download"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Card 5 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Quarterly Maintenance</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Wave Runner</p>
|
|
</div>
|
|
<span class="report-status in-progress">In Progress</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-090</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Dec 22, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Mike Johnson</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Status</span>
|
|
<strong>Scheduled</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="calendar"></i>
|
|
Details
|
|
</button>
|
|
<button class="btn btn-sm" style="flex: 1; background: #ef4444; color: white;">
|
|
<i data-lucide="x-circle"></i>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Card 6 -->
|
|
<div class="report-card">
|
|
<div class="report-header">
|
|
<div>
|
|
<h4>Safety Equipment</h4>
|
|
<p style="color: #6b7280; font-size: 0.875rem;">Ocean Spirit</p>
|
|
</div>
|
|
<span class="report-status completed">Completed</span>
|
|
</div>
|
|
<div class="report-details">
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Report #</span>
|
|
<strong>SR-2024-084</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Date</span>
|
|
<strong>Sep 20, 2024</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Technician</span>
|
|
<strong>Sarah Williams</strong>
|
|
</div>
|
|
<div class="report-detail-row">
|
|
<span style="color: #6b7280;">Duration</span>
|
|
<strong>2.0 hours</strong>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View
|
|
</button>
|
|
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
|
<i data-lucide="download"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div style="display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem;">
|
|
<button class="btn btn-sm" disabled style="opacity: 0.5;">
|
|
<i data-lucide="chevron-left"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-primary">1</button>
|
|
<button class="btn btn-sm">2</button>
|
|
<button class="btn btn-sm">3</button>
|
|
<button class="btn btn-sm">4</button>
|
|
<button class="btn btn-sm">
|
|
<i data-lucide="chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Toggle sidebar
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('collapsed');
|
|
}
|
|
|
|
// Logout function
|
|
function logout() {
|
|
localStorage.clear();
|
|
window.location.href = '../portal-login.html';
|
|
}
|
|
|
|
// Filter reports
|
|
function filterReports(type) {
|
|
document.querySelectorAll('.filter-tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
// In a real app, this would filter the reports
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |