155 lines
6.8 KiB
Plaintext
155 lines
6.8 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "History - DLH";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
|
|
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
|
|
<div class="flex items-center justify-between">
|
|
<a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-lg font-bold">Riwayat Perjalanan</h1>
|
|
<div class="w-9"></div>
|
|
</div>
|
|
</div>
|
|
|
|
@{
|
|
var spjList = new[]
|
|
{
|
|
new {
|
|
Id = 1,
|
|
NoSpj = "SPJ/07-2025/PKM/000478",
|
|
Plat = "B 5678 ABC",
|
|
Kode = "JRC 007",
|
|
Tujuan = "Bantar Gebang",
|
|
Status = "In Progress",
|
|
Tanggal = "28 Jul 2025",
|
|
Waktu = "16:45"
|
|
},
|
|
new {
|
|
Id = 2,
|
|
NoSpj = "SPJ/07-2025/PKM/000476",
|
|
Plat = "B 9632 TOR",
|
|
Kode = "JRC 005",
|
|
Tujuan = "RDF Rorotan",
|
|
Status = "Completed",
|
|
Tanggal = "27 Jul 2025",
|
|
Waktu = "14:30"
|
|
},
|
|
new {
|
|
Id = 3,
|
|
NoSpj = "SPJ/07-2025/PKM/000477",
|
|
Plat = "B 1234 XYZ",
|
|
Kode = "JRC 006",
|
|
Tujuan = "RDF Pesanggarahan",
|
|
Status = "Completed",
|
|
Tanggal = "26 Jul 2025",
|
|
Waktu = "09:15"
|
|
},
|
|
new {
|
|
Id = 4,
|
|
NoSpj = "SPJ/07-2025/PKM/000479",
|
|
Plat = "B 9876 DEF",
|
|
Kode = "JRC 008",
|
|
Tujuan = "RDF Sunter",
|
|
Status = "Completed",
|
|
Tanggal = "25 Jul 2025",
|
|
Waktu = "11:20"
|
|
},
|
|
new {
|
|
Id = 5,
|
|
NoSpj = "SPJ/07-2025/PKM/000480",
|
|
Plat = "B 4321 GHI",
|
|
Kode = "JRC 009",
|
|
Tujuan = "Bantar Gebang",
|
|
Status = "Completed",
|
|
Tanggal = "24 Jul 2025",
|
|
Waktu = "08:45"
|
|
}
|
|
};
|
|
}
|
|
|
|
<div class="px-4 py-4 space-y-3">
|
|
@foreach (var spj in spjList)
|
|
{
|
|
<a href="@Url.Action("HistoryDetails", "SpjDriver", new { id = spj.Id })" class="block">
|
|
<div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-cyan-200 transition-all duration-300 relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-cyan-500"></div>
|
|
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class="w-2 h-2 bg-cyan-400 rounded-full"></div>
|
|
<span class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. SPJ</span>
|
|
</div>
|
|
<div class="font-bold text-gray-900 text-sm">@spj.NoSpj</div>
|
|
</div>
|
|
<div class="flex flex-col items-end gap-1">
|
|
@if (spj.Status == "Completed")
|
|
{
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs font-semibold flex items-center gap-1">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
|
Selesai
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-full text-xs font-semibold flex items-center gap-1">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
|
|
Berlangsung
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-xl p-3 mb-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
|
|
<i class="w-5 h-5 text-cyan-600" data-lucide="car"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-gray-900 text-sm">@spj.Plat</div>
|
|
<div class="text-xs text-gray-500">@spj.Kode</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-gray-500">@spj.Tanggal</div>
|
|
<div class="text-xs font-medium text-gray-700">@spj.Waktu</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 pt-2 border-t border-gray-100">
|
|
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<i class="w-4 h-4 text-green-600" data-lucide="map-pin"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs text-gray-500 mb-1">Tujuan</div>
|
|
<div class="font-semibold text-gray-900 text-sm">@spj.Tujuan</div>
|
|
</div>
|
|
<div class="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
|
<i class="w-4 h-4 text-gray-400" data-lucide="chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
|
|
|
|
<!-- Bottom Navigation -->
|
|
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
|
|
|
|
<!-- Kalau butuh tampilan kosong (jika tidak ada data) -->
|
|
|
|
@* <div class="flex flex-col items-center justify-center py-16 px-4">
|
|
<div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<i class="w-12 h-12 text-gray-400" data-lucide="clock"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Belum Ada Riwayat</h3>
|
|
<p class="text-gray-500 text-center text-sm">Riwayat perjalanan Anda akan muncul di sini setelah melakukan perjalanan pertama.</p>
|
|
</div> *@
|
|
|
|
</div> |