eSPJ/Views/Admin/Transport/SpjDriverUpst/History/Index.cshtml

151 lines
6.8 KiB
Plaintext

@{
Layout = "~/Views/Admin/Transport/SpjDriverUpst/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-upst text-white px-6 pt-10 pb-16 rounded-b-[40px] shadow-lg relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-16 -mt-16"></div>
<div class="flex items-center justify-between relative z-10">
<a href="@Url.Action("Index", "History")" class="w-10 h-10 flex items-center justify-center bg-white/20 hover:bg-white/30 rounded-xl transition-colors">
<i class="w-5 h-5" data-lucide="arrow-left"></i>
</a>
<div class="text-center">
<h1 class="text-lg font-bold tracking-wide uppercase">History Perjalanan</h1>
<p class="text-[10px] text-white/70 font-medium">Riwayat Lengkap Perjalanan</p>
</div>
<img src="@Url.Content("~/driver/upst_white.svg")" alt="UPST Logo" class="absolute top-6 left-8 w-20 h-auto opacity-20">
<div class="w-10"></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-5 -mt-8 space-y-5 relative z-20">
@foreach (var spj in spjList)
{
<a href="@Url.Action("Details", "History", new { id = spj.Id })" class="block group">
<div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 group-hover:shadow-md group-hover:-translate-y-1 transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div class="space-y-0.5">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Nomor Dokumen</p>
<p class="text-sm font-black text-gray-800">@spj.NoSpj</p>
</div>
@if (spj.Status == "Completed")
{
<span class="bg-green-50 text-green-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase border border-green-100">
Selesai
</span>
}
else
{
<span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase border border-blue-100 animate-pulse">
Proses
</span>
}
</div>
<div class="flex items-center gap-4 bg-gray-50/80 p-3 rounded-2xl border border-dashed border-gray-200">
<div class="w-12 h-12 bg-upst rounded-xl flex items-center justify-center shadow-inner">
<i class="w-6 h-6 text-white" data-lucide="truck"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-baseline">
<h2 class="font-black text-gray-900 leading-tight">@spj.Plat</h2>
<span class="text-[11px] font-bold text-upst">@spj.Waktu</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-500 font-medium">@spj.Kode</span>
<span class="text-[10px] text-gray-400 font-semibold">@spj.Tanggal</span>
</div>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-upst/40"></div>
<div class="flex flex-col">
<span class="text-[10px] text-gray-400 font-bold uppercase">Tujuan Akhir</span>
<span class="text-sm font-bold text-gray-700">@spj.Tujuan</span>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-upst transition-colors">
<i class="w-4 h-4" data-lucide="chevron-right"></i>
</div>
</div>
</div>
</a>
}
</div>
<partial name="~/Views/Admin/Transport/SpjDriverUpst/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>