TMT/tmtsaqatravelmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stable main pages

Browse Source
This commit is contained in:
hermes
2026-07-09 21:41:26 +02:00
parent 4daa2bfca4
commit 192772f0c2
15 changed files with 9171 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tmt.SaqaTravel/Components/Pages/TripReports.razor
+181 -2
View File
@@ -1,7 +1,186 @@
@page "/trip-reports"
@rendermode InteractiveServer
<h3>TripReports</h3>
<div class="p-6 lg:p-7 bg-[#f4f7fb] min-h-screen font-sans text-[#1f2a3a]">
<!-- PAGE HEADER -->
<div class="flex items-end justify-between mb-[22px] flex-wrap gap-3">
<div>
<h2 class="text-[22px] font-bold text-[#1f2a3a] tracking-tight">Trip Reports</h2>
<p class="text-[13px] text-[#5a6577] mt-1">System generated consolidated cost per trip, in line with NT Cost Containment reporting</p>
</div>
<div class="flex gap-2">
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-[#e4eaf2] bg-white text-[#1f2a3a] hover:bg-[#f4f7fb] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
Filter
</button>
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-transparent bg-[#0066b3] text-white hover:bg-[#003b71] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
Export to Excel
</button>
</div>
</div>
<!-- MAIN TRIP REPORT CARD -->
<div class="bg-white border border-[#e4eaf2] rounded-[10px] p-5 shadow-[0_1px_2px_rgba(15,23,42,.06),_0_1px_3px_rgba(15,23,42,.04)] mb-[22px]">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-[15px] font-bold text-[#1f2a3a]">Trip TRP-2026-0488, J. Mokoena, Cape Town engagement</h3>
<p class="text-[12px] text-[#8a96a8] mt-[2px]">Travel Authorisation TA-44219, dated 02 to 04 Jun 2026</p>
</div>
<span class="bg-[#e3f6ed] text-[#22a06b] px-[10px] py-[3px] rounded-full text-[11px] font-semibold">All components consolidated</span>
</div>
<div class="overflow-x-auto">
<table class="w-full border-collapse">
<thead>
<tr class="border-b border-[#e4eaf2]">
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Component</th>
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Supplier</th>
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Reference</th>
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Date</th>
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Negotiated</th>
<th class="text-left text-[11px] text-[#8a96a8] uppercase tracking-[.06em] font-semibold px-3 py-[10px] whitespace-nowrap">Amount</th>
</tr>
</thead>
<tbody>
@foreach (var item in ConsolidatedItems)
{
<tr class="hover:bg-[#fafcfe] border-b border-[#e4eaf2] last:border-b-0">
<td class="px-3 py-3 text-[13px] text-[#1f2a3a] align-middle">
<span class="@GetComponentBadgeClass(item.Type) px-[10px] py-[3px] rounded-full text-[11px] font-semibold">
@item.Component
</span>
</td>
<td class="px-3 py-3 text-[13px] text-[#1f2a3a] align-middle font-medium">@item.Supplier</td>
<td class="px-3 py-3 text-[13px] text-[#5a6577] align-middle font-mono">@item.Reference</td>
<td class="px-3 py-3 text-[13px] text-[#5a6577] align-middle">@item.Date</td>
<td class="px-3 py-3 text-[13px] text-[#5a6577] align-middle">@item.Negotiated</td>
<td class="px-3 py-3 text-[13px] text-[#1f2a3a] align-middle font-semibold">@item.Amount</td>
</tr>
}
<tr class="bg-[#f6fafe] border-t border-[#e4eaf2]">
<td colspan="5" class="px-3 py-3 text-[13px] text-[#1f2a3a] font-bold">Total trip cost</td>
<td class="px-3 py-3 text-[13px] text-[#1f2a3a] font-bold">R 12,960.00</td>
</tr>
<tr class="bg-[#effaf3] border-t border-[#e4eaf2]">
<td colspan="5" class="px-3 py-3 text-[13px] text-[#22a06b] font-medium">Savings against open rates</td>
<td class="px-3 py-3 text-[13px] text-[#22a06b] font-bold">R 1,840.00</td>
</tr>
</tbody>
</table>
</div>
<div class="flex gap-2 mt-4 flex-wrap">
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-transparent bg-[#0066b3] text-white hover:bg-[#003b71] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">Download PDF</button>
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-[#e4eaf2] bg-white text-[#1f2a3a] hover:bg-[#f4f7fb] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">Send to Finance</button>
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-[#e4eaf2] bg-white text-[#1f2a3a] hover:bg-[#f4f7fb] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">Attach to PO 44219</button>
</div>
</div>
<!-- MONTHLY AND SLA REPORTS GRID -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Standard Monthly Reports Card -->
<div class="bg-white border border-[#e4eaf2] rounded-[10px] p-5 shadow-[0_1px_2px_rgba(15,23,42,.06),_0_1px_3px_rgba(15,23,42,.04)]">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-[15px] font-bold text-[#1f2a3a]">Standard Monthly Reports</h3>
<p class="text-[12px] text-[#8a96a8] mt-[2px]">Auto-issued per NT Cost Containment template</p>
</div>
</div>
<div class="flex flex-col">
@foreach (var report in MonthlyReports)
{
<div class="flex items-center justify-between py-3 border-b border-dashed border-[#e4eaf2] last:border-b-0">
<div>
<div class="text-[13px] text-[#1f2a3a] font-medium">@report.Title</div>
<div class="text-[11px] text-[#8a96a8]">@report.Description</div>
</div>
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-[#e4eaf2] bg-white text-[#1f2a3a] hover:bg-[#f4f7fb] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">Download</button>
</div>
}
</div>
</div>
<!-- SLA Reports Card -->
<div class="bg-white border border-[#e4eaf2] rounded-[10px] p-5 shadow-[0_1px_2px_rgba(15,23,42,.06),_0_1px_3px_rgba(15,23,42,.04)]">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-[15px] font-bold text-[#1f2a3a]">SLA Reports</h3>
<p class="text-[12px] text-[#8a96a8] mt-[2px]">Per the SAQA SLA template</p>
</div>
</div>
<div class="flex flex-col">
@foreach (var report in SlaReports)
{
<div class="flex items-center justify-between py-3 border-b border-dashed border-[#e4eaf2] last:border-b-0">
<div>
<div class="text-[13px] text-[#1f2a3a] font-medium">@report.Title</div>
<div class="text-[11px] text-[#8a96a8]">@report.Description</div>
</div>
<button class="inline-flex items-center gap-[6px] px-[14px] py-2 rounded-lg text-[13px] font-semibold border border-[#e4eaf2] bg-white text-[#1f2a3a] hover:bg-[#f4f7fb] transition-all duration-150 cursor-pointer shadow-[0_1px_2px_rgba(15,23,42,.06)]">Download</button>
</div>
}
</div>
</div>
</div>
</div>
@code {
public class ReportItem
{
public string Component { get; set; } = string.Empty;
public string Supplier { get; set; } = string.Empty;
public string Reference { get; set; } = string.Empty;
public string Date { get; set; } = string.Empty;
public string Negotiated { get; set; } = string.Empty;
public string Amount { get; set; } = string.Empty;
public string Type { get; set; } = "default";
}
}
public class ReportInfo
{
public string Title { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
}
private List<ReportItem> ConsolidatedItems = new()
{
new ReportItem { Component = "Flight (out)", Supplier = "SAA, SA 311", Reference = "AB23PQ", Date = "02 Jun", Negotiated = "Yes, 12 percent off", Amount = "R 2,890.00", Type = "blue" },
new ReportItem { Component = "Flight (return)", Supplier = "SAA, SA 322", Reference = "AB23PQ", Date = "04 Jun", Negotiated = "Yes", Amount = "R 2,640.00", Type = "blue" },
new ReportItem { Component = "Hotel", Supplier = "Premier Hotel Waterfront", Reference = "HT7811", Date = "02 to 04 Jun, 2 nights", Negotiated = "Govt rate", Amount = "R 3,790.00", Type = "default" },
new ReportItem { Component = "Car rental", Supplier = "Avis, Group B", Reference = "AV1140", Date = "02 to 04 Jun, 3 days", Negotiated = "Yes", Amount = "R 1,420.00", Type = "gold" },
new ReportItem { Component = "Shuttle", Supplier = "SA Express Shuttle", Reference = "SX0921", Date = "02 Jun", Negotiated = "No", Amount = "R 380.00", Type = "default" },
new ReportItem { Component = "Daily allowance", Supplier = "SAQA per diem policy", Reference = "PD-019", Date = "3 days", Negotiated = "n/a", Amount = "R 1,560.00", Type = "default" },
new ReportItem { Component = "Service fee", Supplier = "TMT Projects", Reference = "SF-2026-0488", Date = "02 Jun", Negotiated = "Flat", Amount = "R 280.00", Type = "green" }
};
private List<ReportInfo> MonthlyReports = new()
{
new ReportInfo { Title = "Cost per trip report", Description = "Consolidated, all components, all travellers" },
new ReportInfo { Title = "Spend by category", Description = "Air, accommodation, ground, other" },
new ReportInfo { Title = "Traveller activity", Description = "Per cost centre and per traveller" }
};
private List<ReportInfo> SlaReports = new()
{
new ReportInfo { Title = "After hours report", Description = "All out of hours support events" },
new ReportInfo { Title = "Consultant productivity", Description = "Bookings handled per consultant" },
new ReportInfo { Title = "Refund and open voucher log", Description = "Status of all open items" }
};
private string GetComponentBadgeClass(string type)
{
return type switch
{
"blue" => "bg-[#e2eefb] text-[#0066b3]",
"green" => "bg-[#e3f6ed] text-[#22a06b]",
"gold" => "bg-[#fff4dd] text-[#b06b00]",
_ => "bg-[#e8f4f4] text-[#00a3a1]"
};
}
}