bank-sampah/Views/Main/ProfilNasabah/Index.cshtml

130 lines
7.1 KiB
Plaintext

@{
ViewData["Title"] = "Profil Nasabah";
Layout = "~/Views/Shared/_LayoutApp.cshtml";
}
<div class="flex flex-col gap-5">
<!-- Page Title -->
<div class="flex justify-start items-center gap-2">
<h1 class="text-xl font-semibold text-gray-900 font-jakarta-plus">Profil Nasabah</h1>
</div>
<!-- Profile Card -->
<div class="px-5 py-6 bg-white rounded-lg flex flex-col sm:flex-row justify-start items-start sm:items-center gap-4">
<div class="w-20 h-20 relative bg-gray-50 rounded overflow-hidden flex-shrink-0">
<img class="w-20 h-20 object-cover" src="https://placehold.co/81x81" alt="Profile Photo" />
</div>
<div class="flex-1 flex flex-col justify-start items-start gap-1">
<div class="text-slate-600 text-xl font-semibold font-jakarta-plus">Ikhdan Nizar Maulana</div>
<div class="text-slate-600 text-base font-normal font-jakarta-plus">Nasabah</div>
</div>
<div class="px-2 bg-green-100 rounded-full flex justify-center items-center">
<div class="text-center text-green-600 text-xs font-semibold font-jakarta-plus py-1">Status Aktif</div>
</div>
</div>
<!-- Information Card -->
<div class="px-5 py-6 bg-white rounded-lg flex flex-col justify-start items-start gap-6">
<!-- Header with Edit Button -->
<div class="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h2 class="text-base font-bold text-slate-600 font-jakarta-plus">Informasi Biodata</h2>
<a asp-action="Edit" class="px-3.5 py-2 bg-white rounded-full border border-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50 transition-colors">
<i class="ph ph-pencil text-lg text-zinc-800"></i>
<span class="text-sm font-semibold text-slate-800 font-jakarta-plus">Edit Biodata</span>
</a>
</div>
<hr class="w-full border-gray-200" />
<!-- Personal Information -->
<div class="w-full flex flex-col gap-8">
<!-- Row 1 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Nama Nasabah</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Ikhdan Nizar Maulana</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">NIK</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">7123981241</span>
</div>
</div>
<!-- Row 2 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Email</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">banksampahjaktim@gmail.com</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">No. HP Penanggung Jawab</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">0822472812142</span>
</div>
</div>
<!-- Row 3 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Nama Bank</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Mandiri</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">No. Rekening</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">71494814124</span>
</div>
</div>
<hr class="w-full border-gray-200" />
<!-- Address Information -->
<div class="w-full flex flex-col gap-6">
<!-- Address Row -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex flex-col gap-1 sm:col-span-2 lg:col-span-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Alamat</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Jalan Raya Pasar Minggu No. 45, Jakarta Timur, DKI Jakarta</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">RT</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">02</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">RW</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">02</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kode Pos</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">61374</span>
</div>
</div>
</div>
<!-- Area Information -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kelurahan</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Pasar Minggu</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kecamatan</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Pasarejo</span>
</div>
</div>
<!-- City and Province -->
<div class="w-full flex flex-col gap-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kota</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">Koda Adm, Jakarta Timur</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xs font-normal text-gray-500 font-jakarta-plus">Provinsi</span>
<span class="text-base font-normal text-slate-600 font-jakarta-plus">DKI Jakarta</span>
</div>
</div>
</div>
</div>
</div>
</div>