163 lines
8.7 KiB
Plaintext
163 lines
8.7 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjAdmin/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Detail Perjalanan - DLH";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-r from-orange-500 to-orange-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", "History")" 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">Detail Perjalanan</h1>
|
|
<div class="w-9"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 space-y-4">
|
|
<!-- SPJ Information Card -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Muhammad Yusuf</h2>
|
|
<p class="text-xs text-gray-500">Data SPJ</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
|
<span class="text-sm text-gray-600">No. SPJ</span>
|
|
<span class="font-semibold text-gray-900 text-sm">SPJ/07-2025/PKM/000476</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
|
<span class="text-sm text-gray-600">Plat Nomor</span>
|
|
<span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
|
<span class="text-sm text-gray-600">Nomer Pintu</span>
|
|
<span class="font-mono text-sm text-gray-700">JRC 005</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-2">
|
|
<span class="text-sm text-gray-600">Tujuan Pembuangan</span>
|
|
<span class="font-semibold text-gray-900 text-sm">Taman Barito</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Summary Card -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
|
|
<p class="text-xs text-gray-500">Informasi perjalanan</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-3">
|
|
<div class="text-center p-3 bg-gray-50 rounded-xl">
|
|
<div class="text-xl font-bold text-gray-900">3</div>
|
|
<div class="text-xs text-gray-600">Total</div>
|
|
</div>
|
|
<div class="text-center p-3 bg-green-50 rounded-xl">
|
|
<div class="text-xl font-bold text-green-600">1</div>
|
|
<div class="text-xs text-gray-600">Selesai</div>
|
|
</div>
|
|
<div class="text-center p-3 bg-yellow-50 rounded-xl">
|
|
<div class="text-xl font-bold text-yellow-600">1</div>
|
|
<div class="text-xs text-gray-600">Proses</div>
|
|
</div>
|
|
<div class="text-center p-3 bg-red-50 rounded-xl">
|
|
<div class="text-xl font-bold text-red-600">1</div>
|
|
<div class="text-xs text-gray-600">Batal</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pickup Locations -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>
|
|
<p class="text-xs text-gray-500">Daftar lokasi yang dikunjungi</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Location 1 - In Progress -->
|
|
<div class="border border-yellow-200 bg-yellow-50 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-white" data-lucide="clock"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="bg-yellow-400 text-white text-xs font-semibold px-2 py-1 rounded-full">Pengangkutan</span>
|
|
<span class="text-xs text-gray-500">Lokasi 1</span>
|
|
</div>
|
|
<h4 class="font-bold text-gray-900 mb-1">CV Tri Mitra Utama</h4>
|
|
<p class="text-sm text-gray-600 mb-1">Shell Radio Dalam</p>
|
|
<p class="text-sm text-gray-600 mb-2">Alamat:</p>
|
|
<p class="text-sm text-gray-700 leading-relaxed">
|
|
Jl. Radio Dalam Raya No.6C Gandaria Utara, Kecamatan Kebayoran Baru, Kota Jakarta Selatan 12140
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location 2 - Completed -->
|
|
<div class="border border-green-200 bg-green-100 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-white" data-lucide="check"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Sudah Diangkut</span>
|
|
<span class="text-xs text-gray-500">Lokasi 2</span>
|
|
</div>
|
|
<h4 class="font-bold text-gray-900 mb-1">CV Tri Berkah Sejahtera</h4>
|
|
<p class="text-sm text-gray-600 mb-2">Alamat:</p>
|
|
<p class="text-sm text-gray-700 leading-relaxed">
|
|
Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location 3 - Cancelled -->
|
|
<div class="border border-red-200 bg-red-100 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-white" data-lucide="x"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Batal Angkut</span>
|
|
<span class="text-xs text-gray-500">Lokasi 3</span>
|
|
</div>
|
|
<h4 class="font-bold text-gray-900 mb-1">CV Tri Berkah Sejahtera</h4>
|
|
<p class="text-sm text-gray-600 mb-2">Alamat:</p>
|
|
<p class="text-sm text-gray-700 leading-relaxed">
|
|
Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<partial name="~/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml" />
|
|
</div> |