Initial import of HarborSmith website
Some checks failed
build-website / build (push) Failing after 1m2s
Some checks failed
build-website / build (push) Failing after 1m2s
This commit is contained in:
405
website-mockups/maintenance/maintenance-dashboard.html
Normal file
405
website-mockups/maintenance/maintenance-dashboard.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maintenance Dashboard - 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">
|
||||
</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 active">
|
||||
<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">
|
||||
<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>Dashboard</span>
|
||||
</div>
|
||||
|
||||
<div class="portal-header-actions">
|
||||
<div class="header-search">
|
||||
<i data-lucide="search"></i>
|
||||
<input type="text" placeholder="Search...">
|
||||
</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>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="portal-content">
|
||||
<!-- Welcome Section -->
|
||||
<div class="portal-page-header">
|
||||
<h1 class="portal-page-title">Welcome back, John!</h1>
|
||||
<p class="portal-page-subtitle">Here's an overview of your fleet maintenance status</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="dashboard-grid">
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Active Vessels</h3>
|
||||
<div class="card-icon">
|
||||
<i data-lucide="ship"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">3</div>
|
||||
<div class="card-change positive">
|
||||
<i data-lucide="trending-up"></i>
|
||||
+1 this month
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Upcoming Services</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);">
|
||||
<i data-lucide="wrench"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">2</div>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Next: Dec 15, 2024</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Open Invoices</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);">
|
||||
<i data-lucide="receipt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">$4,250</div>
|
||||
<span class="status-badge warning">1 overdue</span>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Service Score</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #10b981 0%, #34d399 100%);">
|
||||
<i data-lucide="award"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">98%</div>
|
||||
<div class="card-change positive">
|
||||
<i data-lucide="trending-up"></i>
|
||||
Excellent
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two Column Layout -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg);">
|
||||
<!-- Upcoming Services -->
|
||||
<div class="data-table">
|
||||
<div class="table-header">
|
||||
<h3 class="card-title">Upcoming Services</h3>
|
||||
<div class="table-actions">
|
||||
<button class="btn-portal-secondary" onclick="window.location.href='maintenance-schedule.html'">
|
||||
<i data-lucide="plus"></i>
|
||||
Schedule New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vessel</th>
|
||||
<th>Service</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sea Breeze</strong></td>
|
||||
<td>Annual Inspection</td>
|
||||
<td>Dec 15, 2024</td>
|
||||
<td><span class="status-badge warning">Scheduled</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Wave Runner</strong></td>
|
||||
<td>Engine Service</td>
|
||||
<td>Dec 22, 2024</td>
|
||||
<td><span class="status-badge info">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Ocean Spirit</strong></td>
|
||||
<td>Hull Cleaning</td>
|
||||
<td>Jan 5, 2025</td>
|
||||
<td><span class="status-badge success">Scheduled</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Timeline -->
|
||||
<div class="dashboard-card">
|
||||
<h3 class="card-title" style="margin-bottom: var(--space-md);">Recent Activity</h3>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">2 hours ago</div>
|
||||
<p><strong>Invoice #1247 paid</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Payment received for Wave Runner engine service</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">Yesterday</div>
|
||||
<p><strong>Service report uploaded</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Sea Breeze monthly maintenance complete</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">3 days ago</div>
|
||||
<p><strong>New document added</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Insurance renewal certificate for Ocean Spirit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fleet Overview -->
|
||||
<div class="data-table">
|
||||
<div class="table-header">
|
||||
<h3 class="card-title">Fleet Overview</h3>
|
||||
<div class="table-actions">
|
||||
<button class="btn-portal-secondary" onclick="window.location.href='maintenance-vessels.html'">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vessel Name</th>
|
||||
<th>Type</th>
|
||||
<th>Last Service</th>
|
||||
<th>Next Service</th>
|
||||
<th>Health Score</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../yacht_party_couple_holding_hands.jpg" alt="Sea Breeze" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Sea Breeze</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2019 Beneteau 45</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Sailboat</td>
|
||||
<td>Nov 10, 2024</td>
|
||||
<td>Dec 15, 2024</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 95%; height: 100%; background: var(--success);"></div>
|
||||
</div>
|
||||
<span>95%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../golden_gate.jpg" alt="Wave Runner" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Wave Runner</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2021 Sea Ray 350</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Motor Yacht</td>
|
||||
<td>Oct 28, 2024</td>
|
||||
<td>Dec 22, 2024</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 88%; height: 100%; background: var(--warning);"></div>
|
||||
</div>
|
||||
<span>88%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../diver.jpg" alt="Ocean Spirit" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Ocean Spirit</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2020 Catalina 425</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Sailboat</td>
|
||||
<td>Nov 5, 2024</td>
|
||||
<td>Jan 5, 2025</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 92%; height: 100%; background: var(--success);"></div>
|
||||
</div>
|
||||
<span>92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div style="margin-top: var(--space-lg);">
|
||||
<h3 class="card-title" style="margin-bottom: var(--space-md);">Quick Actions</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md);">
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-schedule.html'">
|
||||
<i data-lucide="calendar-plus" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Schedule Service</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-documents.html'">
|
||||
<i data-lucide="upload" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Upload Document</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-invoices.html'">
|
||||
<i data-lucide="credit-card" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Pay Invoice</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-reports.html'">
|
||||
<i data-lucide="file-text" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">View Reports</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
lucide.createIcons();
|
||||
|
||||
// Check authentication
|
||||
if (!localStorage.getItem('isLoggedIn')) {
|
||||
window.location.href = '../portal-login.html';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle sidebar
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
// Logout
|
||||
function logout() {
|
||||
localStorage.removeItem('isLoggedIn');
|
||||
localStorage.removeItem('userEmail');
|
||||
localStorage.removeItem('userName');
|
||||
localStorage.removeItem('userRole');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user