244 lines
17 KiB
Plaintext
244 lines
17 KiB
Plaintext
@{
|
||
Layout = "~/Views/Website/Shared/_Layout.cshtml";
|
||
ViewData["Title"] = "Jasa Pengangkutan Sampah";
|
||
}
|
||
|
||
<div class="mx-auto bg-gray-50">
|
||
<div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
|
||
<div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
|
||
|
||
<div class="max-w-6xl mx-auto px-6 relative z-10">
|
||
<nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
|
||
<a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
|
||
<i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
|
||
<span class="font-semibold">Pengangkutan Sampah</span>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
|
||
<div class="flex-1 text-center max-w-xl md:text-left">
|
||
<h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Jasa Pengangkutan Sampah</h1>
|
||
<p class="text-lg text-white mb-4">Layanan pengangkutan residu sampah dari kawasan sesuai regulasi DKI Jakarta.</p>
|
||
<div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
|
||
</div>
|
||
<div class="flex-shrink-0 hidden md:block">
|
||
<img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<div class="mb-6">
|
||
<div class="dropdown-header" onclick="toggleDropdown('section1')">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-3 shadow-lg">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M9 1L5 3l4 2 4-2-4-2z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800 mb-1">Pengangkutan Residu Sampah</h2>
|
||
<p class="text-gray-600 text-sm">Pelaksanaan pengangkutan residu sampah sesuai regulasi DKI Jakarta</p>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-icon flex items-center space-x-2">
|
||
<i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-content" id="section1">
|
||
<div>
|
||
<p class="text-gray-600 leading-relaxed mb-4">
|
||
Pelaksanaan pengangkutan residu sampah dari usaha dan/atau kegiatan serta kawasan telah diatur dalam <span class="font-semibold text-blue-600">Peraturan Daerah Nomor 3 Tahun 2020 Pasal 36 ayat (2)</span>:
|
||
</p>
|
||
<blockquote class="mt-4 p-4 bg-blue-50 border-l-4 border-blue-500 italic text-blue-800 rounded-r-lg">
|
||
"Pengangkutan residu sampah kawasan dari TPS dan/atau TPS 3R kawasan sebagaimana dimaksud pada ayat (1), ke TPST menjadi kewajiban penanggung jawab dan/atau pengelola kawasan dan dapat dikerjasamakan dengan badan usaha di bidang kebersihan."
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<div class="dropdown-header" onclick="toggleDropdown('section2')">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-3 shadow-lg">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800 mb-1">Izin Usaha Pelayanan Angkutan</h2>
|
||
<p class="text-gray-600 text-sm">Persyaratan izin usaha untuk pengangkutan sampah</p>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-icon flex items-center space-x-2">
|
||
<i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-content" id="section2">
|
||
<div>
|
||
<p class="text-gray-600 mb-4">
|
||
Badan usaha yang melakukan pengangkutan sampah wajib memiliki izin usaha pelayanan angkutan di bidang kebersihan sesuai <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 47 Tahun 2017</span>. Pendaftaran dilakukan melalui <span class="font-semibold text-blue-600">UP PMPTSP Kota</span> dengan kelengkapan dokumen sesuai ketentuan.
|
||
</p>
|
||
<div class="bg-green-50 rounded-lg p-4 mb-4">
|
||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||
<li class="flex items-start">
|
||
<span class=" w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||
Pengecekan kendaraan dilakukan bersama Tim Teknis Bersama (UP PMPTSP Kota & Dinas Lingkungan Hidup)
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||
Izin diterbitkan jika persyaratan administrasi dan teknis kendaraan terpenuhi
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<div class="dropdown-header" onclick="toggleDropdown('section3')">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-3 shadow-lg">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800 mb-1">Persyaratan Teknis Kendaraan</h2>
|
||
<p class="text-gray-600 text-sm">Spesifikasi dan persyaratan kendaraan pengangkut sampah</p>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-icon flex items-center space-x-2">
|
||
<i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-content" id="section3">
|
||
<div>
|
||
<div class="bg-gray-50 rounded-lg p-4 mb-6">
|
||
<ul class="pl-5 text-gray-700 space-y-3">
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span>
|
||
Berbadan usaha
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span>
|
||
Jenis truk yang diizinkan: <span class="font-semibold text-purple-600">Arm Roll Truck (6-10 m³), Dump Truck (6-14 m³), Compactor (6-10 m³)</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span>
|
||
Truk wajib lulus uji KIR
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span>
|
||
Bak truk tidak bocor, ada tanggul penahan air lindi, bahan tahan korosif
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">5</span>
|
||
Bak penampung air lindi dari plat besi/sejenisnya, model & dimensi sesuai kebutuhan, pipa/selang kuat & tahan bocor
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">6</span>
|
||
<div>
|
||
Umur truk maksimal 6 tahun saat pendaftaran
|
||
<div class="overflow-x-auto mt-3 text-left">
|
||
<table class="min-w-full text-sm text-left border border-gray-200 rounded-lg overflow-hidden">
|
||
<thead>
|
||
<tr class="bg-purple-100">
|
||
<th class="px-3 py-2 border font-semibold text-purple-800 text-left">Umur Kendaraan</th>
|
||
<th class="px-3 py-2 border font-semibold text-purple-800 text-left">Masa Berlaku Izin</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-purple-50">
|
||
<td class="px-3 py-2 border">0 – 4 tahun</td>
|
||
<td class="px-3 py-2 border">Maks. 3 tahun</td>
|
||
</tr>
|
||
<tr class="hover:bg-purple-50">
|
||
<td class="px-3 py-2 border">5 tahun</td>
|
||
<td class="px-3 py-2 border">Maks. 2 tahun</td>
|
||
</tr>
|
||
<tr class="hover:bg-purple-50">
|
||
<td class="px-3 py-2 border">6 tahun</td>
|
||
<td class="px-3 py-2 border">Maks. 1 tahun</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">7</span>
|
||
Domisili perusahaan di DKI Jakarta
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">8</span>
|
||
STNK truk sesuai domisili perusahaan atau wilayah hukum Polda Metro Jaya
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">9</span>
|
||
STNK atas nama pemohon atau lampirkan surat pernyataan penguasaan kendaraan & perjanjian kerja sama
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">10</span>
|
||
Atribut khusus berupa stiker identitas perusahaan & nomor pintu kendaraan (tidak boleh atribut Pemprov DKI/DLH)
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">11</span>
|
||
Truk dilengkapi GPS & akses login untuk DLH DKI Jakarta
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">12</span>
|
||
Truk dilengkapi jaring, terpal, dan APD untuk supir & kru
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">13</span>
|
||
Perusahaan wajib menyediakan lahan parkir sesuai jumlah kendaraan, dibuktikan surat & foto lokasi
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="my-12 max-w-6xl mx-auto px-4">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
|
||
<div class="mb-6">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-2">📋 Daftar Jasa Pengangkutan Sampah</h2>
|
||
<p class="text-gray-600">Data perusahaan yang memiliki izin pengangkutan sampah di DKI Jakarta</p>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table id="pengangkutanTable" class="w-full bg-white table-fixed" style="width:100%">
|
||
<thead class="bg-cyan-400 text-white">
|
||
<tr>
|
||
<th class="px-3 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider" style="width: 5%">No</th>
|
||
<th class="px-3 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider" style="width: 25%">Perusahaan</th>
|
||
<th class="px-3 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider" style="width: 50%">Alamat</th>
|
||
<th class="px-3 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider" style="width: 20%">Berlaku Hingga</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-4 text-sm text-gray-500 text-center" id="loadingIndicator">
|
||
<div class="inline-flex items-center">
|
||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
Memuat data...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|