init projectmycelium
This commit is contained in:
mik-tf
388
src/views/dashboard/service_request_report.html
Normal file
388
src/views/dashboard/service_request_report.html
Normal file
@@ -0,0 +1,388 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Request Report - ThreeFold Dashboard</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
|
||||
border: 2px solid #4caf50;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.report-details {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.status-in-progress {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffeaa7;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: "›";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-0-25 { background: #dc3545; }
|
||||
.progress-26-50 { background: #fd7e14; }
|
||||
.progress-51-75 { background: #ffc107; color: #000; }
|
||||
.progress-76-100 { background: #198754; }
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.card, .report-details {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #dee2e6 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark no-print">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<img src="/static/images/logo_dark.png" alt="ThreeFold Logo" class="me-2">
|
||||
<span>ThreeFold Dashboard</span>
|
||||
</a>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Dashboard
|
||||
</a>
|
||||
<a class="nav-link active" href="/dashboard/service-provider">
|
||||
<i class="bi bi-person-workspace me-1"></i>Service Provider
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-4 no-print">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/" class="text-decoration-none">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="/dashboard" class="text-decoration-none">Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="/dashboard/service-provider" class="text-decoration-none">Service Provider</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Service Report</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{% if request %}
|
||||
<!-- Report Header -->
|
||||
<div class="report-header p-4 mb-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h1 class="h2 mb-2">
|
||||
<i class="bi bi-file-earmark-text me-2"></i>Service Request Report
|
||||
</h1>
|
||||
<p class="mb-0 text-muted">
|
||||
<i class="bi bi-hash me-1"></i>Request ID: {{ request.id }}
|
||||
</p>
|
||||
{% if request.completed_date %}
|
||||
<p class="mb-0 text-muted">
|
||||
<i class="bi bi-calendar me-1"></i>Completed on {{ request.completed_date }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="mb-0 text-muted">
|
||||
<i class="bi bi-calendar me-1"></i>Completed recently
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<span class="status-badge status-{{ status_class }}">
|
||||
<i class="bi bi-check-circle me-1"></i>{{ request.status }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Report Details -->
|
||||
<div class="col-lg-8">
|
||||
<div class="report-details p-4 mb-4">
|
||||
<h3 class="mb-4">
|
||||
<i class="bi bi-info-circle me-2"></i>Service Details
|
||||
</h3>
|
||||
|
||||
<!-- Client Information -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">CLIENT INFORMATION</h6>
|
||||
<div class="mb-2">
|
||||
<strong>Name:</strong> {{ request.client_name }}
|
||||
</div>
|
||||
{% if request.client_email %}
|
||||
<div class="mb-2">
|
||||
<strong>Email:</strong> {{ request.client_email }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="mb-2">
|
||||
<strong>Email:</strong> <span class="text-muted">Not provided</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if request.client_phone %}
|
||||
<div class="mb-2">
|
||||
<strong>Phone:</strong> {{ request.client_phone }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">SERVICE INFORMATION</h6>
|
||||
<div class="mb-2">
|
||||
<strong>Service:</strong> {{ request.service_name }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>Requested Date:</strong> {{ request.requested_date }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>Estimated Hours:</strong> {{ request.estimated_hours }} hours
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Description -->
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted mb-2">SERVICE DESCRIPTION</h6>
|
||||
<div class="p-3 bg-light rounded">
|
||||
{% if request.description %}
|
||||
{{ request.description }}
|
||||
{% else %}
|
||||
<span class="text-muted">{{ request.service_name }} service for {{ request.client_name }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Information -->
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted mb-2">COMPLETION STATUS</h6>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress-circle
|
||||
{% if request.progress <= 25 %}progress-0-25
|
||||
{% elif request.progress <= 50 %}progress-26-50
|
||||
{% elif request.progress <= 75 %}progress-51-75
|
||||
{% else %}progress-76-100{% endif %} me-3">
|
||||
{{ request.progress }}%
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">{{ request.progress }}% Complete</div>
|
||||
<small class="text-muted">Service completion progress</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Financial Summary -->
|
||||
<div class="border-top pt-4 mt-4">
|
||||
<h6 class="text-muted mb-3">FINANCIAL SUMMARY</h6>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<strong class="text-muted">Service Rate:</strong>
|
||||
<div>${{ rate }} per hour</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<strong class="text-muted">Hours Worked:</strong>
|
||||
<div>{{ request.estimated_hours }} hours</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="text-md-end">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Subtotal:</span>
|
||||
<span>${{ request.budget }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="text-muted">Platform fee:</span>
|
||||
<span class="text-muted">Free</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="fw-bold fs-5">Total Amount:</span>
|
||||
<span class="fw-bold text-success fs-4">${{ request.budget }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Sidebar -->
|
||||
<div class="col-lg-4 no-print">
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-gear me-2"></i>Report Actions
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/dashboard/service-provider" class="btn btn-primary">
|
||||
<i class="bi bi-arrow-left me-2"></i>Back to Dashboard
|
||||
</a>
|
||||
<button class="btn btn-success js-print">
|
||||
<i class="bi bi-printer me-2"></i>Print Report
|
||||
</button>
|
||||
<a href="/api/dashboard/service-requests/{{ request.id }}/invoice" class="btn btn-outline-primary">
|
||||
<i class="bi bi-receipt me-2"></i>View Invoice
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h6 class="mb-3">Need Help?</h6>
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/docs" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-book me-1"></i>Documentation
|
||||
</a>
|
||||
<a href="https://threefoldfaq.crisp.help/en/" class="btn btn-sm btn-outline-success" target="_blank">
|
||||
<i class="bi bi-chat-dots me-1"></i>Live Chat
|
||||
</a>
|
||||
<a href="mailto:support@threefold.io" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-envelope me-1"></i>Email Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Timeline -->
|
||||
<div class="card mt-4">
|
||||
<div class="card-header bg-light">
|
||||
<h6 class="mb-0">
|
||||
<i class="bi bi-clock-history me-2"></i>Service Timeline
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="timeline">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-check-circle-fill text-success fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">Request Submitted</div>
|
||||
<small class="text-muted">
|
||||
{% if request.created_date %}
|
||||
{{ request.created_date }}
|
||||
{% else %}
|
||||
{{ request.requested_date }}
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-check-circle-fill text-success fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">Service Started</div>
|
||||
<small class="text-muted">{{ request.requested_date }}</small>
|
||||
</div>
|
||||
</div>
|
||||
{% if request.status == "Completed" %}
|
||||
<div class="d-flex mb-3">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-check-circle-fill text-success fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">Service Completed</div>
|
||||
<small class="text-muted">
|
||||
{% if request.completed_date %}
|
||||
{{ request.completed_date }}
|
||||
{% else %}
|
||||
Recently completed
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-exclamation-triangle fs-1 text-warning mb-3"></i>
|
||||
<h3>Service Request Not Found</h3>
|
||||
<p class="text-muted">The requested service request could not be found.</p>
|
||||
<a href="/dashboard/service-provider" class="btn btn-primary">Back to Dashboard</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="application/json" id="service-report-data">{}</script>
|
||||
<script src="/static/js/print-utils.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user