webdlh-net/Views/Profil/Bidang.cshtml

446 lines
24 KiB
Plaintext

@{
Layout = "_Layout";
ViewData["Title"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Keywords"] = "Bidang, Suku Dinas dan UPT, DLH, Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgTitle"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterTitle"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
// Breadcumb
ViewData["BreadcrumbText"] = "Bidang, Suku Dinas dan UPT";
ViewData["TitleBeforeHighlight"] = "Bidang, Suku Dinas";
ViewData["TitleHighlight"] = "dan UPT";
}
<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
<!-- Content Section -->
<section class="container mx-auto px-6 lg:px-12 py-16">
<div class="max-w-6xl mx-auto space-y-12">
<!-- Accordion Container -->
<div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
<!-- Main Accordion Container -->
<div class="accordion" id="mainAccordion">
<!-- Sekretariat Dinas Lingkungan Hidup -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('sekretariat')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="building-2"></i>
<h3 class="text-lg font-semibold text-gray-800">Sekretariat Dinas Lingkungan Hidup</h3>
</div>
<i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsekretariat"></i>
</button>
<div id="sekretariat" class="px-6 py-4 bg-white">
<p class="text-gray-700 leading-relaxed text-md mb-6">
Sekretariat Dinas Lingkungan Hidup mempunyai tugas menyelenggarakan kesekretariatan di lingkungan Dinas Lingkungan Hidup.
</p>
<div class="mt-4">
<h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">
Pengoordinasian penyusunan rencana strategis, rencana kerja, dan anggaran Dinas Lingkungan Hidup
</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pengelolaan kepegawaian, keuangan, dan barang Dinas Lingkungan Hidup</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pelaksanaan kegiatan ketatausahaan dan kerumahtanggaan Dinas Lingkungan Hidup</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Bidang Tata Lingkungan -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('tataLingkungan')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="leaf"></i>
<h3 class="text-lg font-semibold text-gray-800">Bidang Tata Lingkungan</h3>
</div>
<i
class="text-gray-600 transition-transform duration-200"
data-lucide="chevron-down"
id="icontataLingkungan"
></i>
</button>
<div id="tataLingkungan" class="hidden px-6 py-4 bg-white">
<p class="text-gray-700 leading-relaxed text-md mb-6">
Bidang Tata Lingkungan merupakan unit kerja lini Dinas Lingkungan Hidup mempunyai tugas melaksanakan perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan.
</p>
<div class="mt-4">
<h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Tata Lingkungan</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Tata Lingkungan</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">
Penyusunan bahan kebijakan, pedoman dan standar perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan
</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Bidang Pengelolaan Sampah dan Limbah B3 -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('sampahLimbah')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="recycle"></i>
<h3 class="text-lg font-semibold text-gray-800">Bidang Pengelolaan Sampah dan Limbah B3</h3>
</div>
<i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsampahLimbah"></i>
</button>
<div id="sampahLimbah" class="hidden px-6 py-4 bg-white">
<p class="text-gray-700 leading-relaxed text-md mb-6">
Bidang Pengelolaan Sampah dan Limbah B3 mempunyai tugas melaksanakan Pengelolaan Sampah, pengelolaan Limbah B3, dan pengembangan fasilitas teknis.
</p>
<div class="mt-4">
<h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">
Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengelolaan Sampah dan Limbah B3
</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengelolaan Sampah dan Limbah B3</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pengelolaan sampah dan limbah B3 serta pengembangan fasilitas teknis pengelolaan</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('pengendalianPencemaran')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="shield"></i>
<h3 class="text-lg font-semibold text-gray-800">Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</h3>
</div>
<i
class="text-gray-600 transition-transform duration-200"
data-lucide="chevron-down"
id="iconpengendalianPencemaran"
></i>
</button>
<div id="pengendalianPencemaran" class="hidden px-6 py-4 bg-white">
<p class="text-gray-700 leading-relaxed text-md mb-6">
Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan mempunyai tugas melaksanakan pemantauan lingkungan, penanggulangan pencemaran lingkungan, dan penanggulangan kerusakan lingkungan.
</p>
<div class="mt-4">
<h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">
Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan
</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</span>
</li>
<li class="flex items-start space-x-2">
<div
class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
>
<i data-lucide="check" class="w-3 h-3"></i>
</div>
<span class="text-gray-700">
Penyusunan regulasi dan kebijakan teknis pemantauan kualitas lingkungan, pencegahan pencemaran dan/atau kerusakan lingkungan hidup
</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Suku Dinas Section -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('sukuDinas')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="building"></i>
<h3 class="text-lg font-semibold text-gray-800">Suku Dinas Lingkungan Hidup</h3>
</div>
<i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsukuDinas"></i>
</button>
<div id="sukuDinas" class="hidden px-6 py-4 bg-white">
<p class="text-gray-700 leading-relaxed text-md mb-6">
Dinas Lingkungan Hidup Provinsi DKI Jakarta membawahi 5 (lima) wilayah Suku Dinas Lingkungan Hidup Kota Administrasi dan 1 (satu) Kabupaten Administrasi.
</p>
<h4 class="font-semibold text-gray-800 mb-3 mt-4">Suku Dinas Lingkungan Hidup Kota Administrasi</h4>
<p class="text-gray-700 mb-4">
Suku Dinas Lingkungan Hidup Kota Administrasi mempunyai tugas menyelenggarakan urusan pemerintahan bidang lingkungan hidup dan urusan pemerintahan bidang pekerjaan umum dan penataan ruang pada sub urusan persampahan di Kota Administrasi.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Jakarta Pusat
</h5>
<p class="text-sm text-gray-600 mt-1">Suku Dinas Lingkungan Hidup Kota Administrasi Jakarta Pusat</p>
</div>
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Jakarta Utara
</h5>
<p class="text-sm text-gray-600 mt-1">Jl. Alur Laut 9, RT.9/RW.5, Rawabadak Sel., Kec. Koja, Jakarta Utara</p>
</div>
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Jakarta Timur
</h5>
<p class="text-sm text-gray-600 mt-1">Pinang Ranti, Kec. Makasar, Kota Jakarta Timur</p>
</div>
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Jakarta Barat
</h5>
<p class="text-sm text-gray-600 mt-1">Jl. Perdana No.2 8, RT.1/RW.4, Wijaya Kusuma, Kec. Grogol Petamburan</p>
</div>
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Jakarta Selatan
</h5>
<p class="text-sm text-gray-600 mt-1">Jl. Hj. Tutty Alawiyah No.41, RT.2/RW.5, Kalibata, Kec. Pancoran</p>
</div>
<div
class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
>
<h5 class="font-semibold text-gray-800 flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
Kepulauan Seribu
</h5>
<p class="text-sm text-gray-600 mt-1">Kab. Administrasi Kepulauan Seribu, DKI Jakarta</p>
</div>
</div>
</div>
</div>
<!-- UPT Section -->
<div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
<button
class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
onclick="toggleAccordion('upt')"
>
<div class="flex items-center space-x-3">
<i class="text-orange-600" data-lucide="wrench"></i>
<h3 class="text-lg font-semibold text-gray-800">Unit Pelaksana Teknis</h3>
</div>
<i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconupt"></i>
</button>
<div id="upt" class="hidden px-6 py-4 bg-white">
<!-- Nested sections for UPTs -->
<div class="space-y-6">
<!-- Laboratorium Lingkungan Hidup Daerah -->
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
<h4 class="font-semibold text-gray-800 mb-3 flex items-center">
<i data-lucide="flask" class="w-5 h-5 mr-2 text-orange-600"></i>
Laboratorium Lingkungan Hidup Daerah
</h4>
<p class="text-gray-700 mb-4">
Laboratorium Lingkungan Hidup Daerah mempunyai tugas melaksanakan pengambilan contoh uji, pengujian, dan analisis lingkungan secara laboratoris.
</p>
<div class="mt-3">
<h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
<ul class="space-y-1">
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Melaksanakan pengambilan sampel uji pengujian dan analisa lingkungan</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Melakukan pemantauan kualitas air dan udara</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Menyediakan data dan informasi kualitas lingkungan</span>
</li>
</ul>
</div>
</div>
<!-- Unit Penanganan Sampah Badan Air -->
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
<h4 class="font-semibold text-gray-800 mb-3 flex items-center">
<i data-lucide="droplet" class="w-5 h-5 mr-2 text-orange-600"></i>
Unit Penanganan Sampah Badan Air
</h4>
<p class="text-gray-700 mb-4">
Unit Penanganan Sampah Badan Air mempunyai tugas melaksanakan penanganan sampah di badan air.
</p>
<div class="mt-3">
<h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
<ul class="space-y-1">
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Melaksanakan pengelolaan sampah di badan air</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Melakukan pemeliharaan kebersihan badan air</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Mengelola sarana dan prasarana kebersihan badan air</span>
</li>
</ul>
</div>
</div>
<!-- Unit Pengelola Sampah Terpadu -->
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
<h4 class="font-semibold text-gray-800 mb-3 flex items-center">
<i data-lucide="recycle" class="w-5 h-5 mr-2 text-orange-600"></i>
Unit Pengelola Sampah Terpadu
</h4>
<p class="text-gray-700 mb-4">
Unit Pengelola Sampah Terpadu mempunyai tugas melaksanakan Pengelolaan Sampah secara terpadu.
</p>
<div class="mt-3">
<h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
<ul class="space-y-1">
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Pengelolaan dan pelaksanaan kegiatan pengangkutan sampah di tempat pengolahan sampah terpadu</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Pengaturan dan pelaksanaan kegiatan pengelolaan sampah di tempat pengolahan sampah terpadu</span>
</li>
<li class="flex items-start space-x-2">
<i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
<span class="text-sm text-gray-700">Penyusunan pedoman, standar dan prosedur teknis Unit Pengelola Sampah Terpadu</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End mainAccordion -->
</div>
</div>
</section>
<register-block dynamic-section="scripts" key="jsProgramUdara">
<script>
function toggleAccordion(accordionId) {
const accordion = document.getElementById(accordionId);
const icon = document.getElementById('icon' + accordionId.slice(-1));
if (accordion.classList.contains('hidden')) {
accordion.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
accordion.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
}
}
</script>
</register-block>