diff --git a/Controllers/WebsiteController/WebsiteController.cs b/Controllers/WebsiteController/WebsiteController.cs index e563948..3863673 100644 --- a/Controllers/WebsiteController/WebsiteController.cs +++ b/Controllers/WebsiteController/WebsiteController.cs @@ -32,6 +32,12 @@ public class WebsiteController : Controller { return View("~/Views/Website/Kontak/Index.cshtml"); } + + [HttpGet("tutorial")] + public IActionResult Tutorial() + { + return View("~/Views/Website/Tutorial/Index.cshtml"); + } [HttpGet("usaha")] public IActionResult Usaha() diff --git a/Views/Website/Jasa/PengangkutanSampah.cshtml b/Views/Website/Jasa/PengangkutanSampah.cshtml index 8a3b930..3036c1d 100644 --- a/Views/Website/Jasa/PengangkutanSampah.cshtml +++ b/Views/Website/Jasa/PengangkutanSampah.cshtml @@ -27,79 +27,217 @@ -
-
-
-
- - - -
-
-

Pengangkutan Residu Sampah

-

- Pelaksanaan pengangkutan residu sampah dari usaha dan/atau kegiatan serta kawasan telah diatur dalam Peraturan Daerah Nomor 3 Tahun 2020 Pasal 36 ayat (2): -

-
- “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.” -
-
-
-
-

Izin Usaha Pelayanan Angkutan

-

- Badan usaha yang melakukan pengangkutan sampah wajib memiliki izin usaha pelayanan angkutan di bidang kebersihan sesuai Peraturan Gubernur Nomor 47 Tahun 2017. Pendaftaran dilakukan melalui UP PMPTSP Kota dengan kelengkapan dokumen sesuai ketentuan. -

-
    -
  • Pengecekan kendaraan dilakukan bersama Tim Teknis Bersama (UP PMPTSP Kota & Dinas Lingkungan Hidup).
    • -
  • Izin diterbitkan jika persyaratan administrasi dan teknis kendaraan terpenuhi.
    • -
-
-
-

Persyaratan Teknis Kendaraan

-
-
    -
  • Berbadan usaha.
    • -
  • Jenis truk yang diizinkan: Arm Roll Truck (6-10 m3), Dump Truck (6-14 m3), Compactor (6-10 m3).
    • -
  • Truk wajib lulus uji KIR.
    • -
  • Bak truk tidak bocor, ada tanggul penahan air lindi, bahan tahan korosif.
    • -
  • Bak penampung air lindi dari plat besi/sejenisnya, model & dimensi sesuai kebutuhan, pipa/selang kuat & tahan bocor.
    • -
  • Umur truk maksimal 6 tahun saat pendaftaran: -
    - - - - - - - - - - - - - - - - - - - - - -
    Umur KendaraanMasa Berlaku Izin
    0 – 4 tahunMaks. 3 tahun
    5 tahunMaks. 2 tahun
    6 tahunMaks. 1 tahun
    + +
    +
    +
    +
    +
    + + +
    -
    • -
  • Domisili perusahaan di DKI Jakarta.
    • -
  • STNK truk sesuai domisili perusahaan atau wilayah hukum Polda Metro Jaya.
    • -
  • STNK atas nama pemohon atau lampirkan surat pernyataan penguasaan kendaraan & perjanjian kerja sama.
    • -
  • Atribut khusus berupa stiker identitas perusahaan & nomor pintu kendaraan (tidak boleh atribut Pemprov DKI/DLH).
    • -
  • Truk dilengkapi GPS & akses login untuk DLH DKI Jakarta.
    • -
  • Truk dilengkapi jaring, terpal, dan APD untuk supir & kru.
    • -
  • Perusahaan wajib menyediakan lahan parkir sesuai jumlah kendaraan, dibuktikan surat & foto lokasi.
    • -
+
+

Pengangkutan Residu Sampah

+

Pelaksanaan pengangkutan residu sampah sesuai regulasi DKI Jakarta

+
+
+
+ +
+
+
+

+ Pelaksanaan pengangkutan residu sampah dari usaha dan/atau kegiatan serta kawasan telah diatur dalam Peraturan Daerah Nomor 3 Tahun 2020 Pasal 36 ayat (2): +

+
+ "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." +
+
+
+
+ +
+
+
+
+ + + +
+
+

Izin Usaha Pelayanan Angkutan

+

Persyaratan izin usaha untuk pengangkutan sampah

+
+
+
+ +
+
+
+
+
+

+ Badan usaha yang melakukan pengangkutan sampah wajib memiliki izin usaha pelayanan angkutan di bidang kebersihan sesuai Peraturan Gubernur Nomor 47 Tahun 2017. Pendaftaran dilakukan melalui UP PMPTSP Kota dengan kelengkapan dokumen sesuai ketentuan. +

+
+
    +
  • + + Pengecekan kendaraan dilakukan bersama Tim Teknis Bersama (UP PMPTSP Kota & Dinas Lingkungan Hidup) +
    • +
  • + + Izin diterbitkan jika persyaratan administrasi dan teknis kendaraan terpenuhi +
    • +
+
+
+
+ +
+
+
+
+ + + +
+
+

Persyaratan Teknis Kendaraan

+

Spesifikasi dan persyaratan kendaraan pengangkut sampah

+
+
+
+ +
+
+
+
+
+
    +
  • + 1 + Berbadan usaha +
    • +
  • + 2 + Jenis truk yang diizinkan: Arm Roll Truck (6-10 m³), Dump Truck (6-14 m³), Compactor (6-10 m³) +
    • +
  • + 3 + Truk wajib lulus uji KIR +
    • +
  • + 4 + Bak truk tidak bocor, ada tanggul penahan air lindi, bahan tahan korosif +
    • +
  • + 5 + Bak penampung air lindi dari plat besi/sejenisnya, model & dimensi sesuai kebutuhan, pipa/selang kuat & tahan bocor +
    • +
  • + 6 +
    + Umur truk maksimal 6 tahun saat pendaftaran +
    + + + + + + + + + + + + + + + + + + + + + +
    Umur KendaraanMasa Berlaku Izin
    0 – 4 tahunMaks. 3 tahun
    5 tahunMaks. 2 tahun
    6 tahunMaks. 1 tahun
    +
    +
    +
    • +
  • + 7 + Domisili perusahaan di DKI Jakarta +
    • +
  • + 8 + STNK truk sesuai domisili perusahaan atau wilayah hukum Polda Metro Jaya +
    • +
  • + 9 + STNK atas nama pemohon atau lampirkan surat pernyataan penguasaan kendaraan & perjanjian kerja sama +
    • +
  • + 10 + Atribut khusus berupa stiker identitas perusahaan & nomor pintu kendaraan (tidak boleh atribut Pemprov DKI/DLH) +
    • +
  • + 11 + Truk dilengkapi GPS & akses login untuk DLH DKI Jakarta +
    • +
  • + 12 + Truk dilengkapi jaring, terpal, dan APD untuk supir & kru +
    • +
  • + 13 + Perusahaan wajib menyediakan lahan parkir sesuai jumlah kendaraan, dibuktikan surat & foto lokasi +
    • +
+
+
+
+
+
+ + + + +
+
+
+

📋 Daftar Jasa Pengangkutan Sampah

+

Data perusahaan yang memiliki izin pengangkutan sampah di DKI Jakarta

+
+ +
+ + + + + + + + + + + + +
NoPerusahaanAlamatBerlaku Hingga
+
+ +
+
+ + + + + Memuat data... +
+ diff --git a/Views/Website/Jasa/PengolahanSampah.cshtml b/Views/Website/Jasa/PengolahanSampah.cshtml index f5894fb..9b98c16 100644 --- a/Views/Website/Jasa/PengolahanSampah.cshtml +++ b/Views/Website/Jasa/PengolahanSampah.cshtml @@ -27,228 +27,296 @@ -
-
-
-
- - - -
-
-

Izin Usaha Pengolahan Sampah

-

- Dalam melaksanakan kegiatan usaha pengolahan sampah, badan usaha yang melakukan usaha pengolahan sampah wajib memiliki izin usaha pengolahan sampah. Jenis izin yang diterbitkan sesuai dengan Peraturan Gubernur Nomor 47 Tahun 2017 tentang Petunjuk Pelaksanaan Pelayanan Terpadu Satu Pintu, adapun jenis izin pengangkutan sampah yaitu Izin Usaha Pengelolaan Sampah. -

-

- Mekanisme perolehan Izin Usaha didaftarkan melalui Unit Pengelola Penanaman Modal dan Pelayanan Terpadu Satu Pintu Kota (UP PMPTSP Kota). Adapun formulir dan kelengkapan dokumen sesuai dengan ketentuan yang diatur oleh UP PMPTSP Kota. Setelah berkas administrasi dinyatakan lengkap dan lolos verifikasi, maka dilanjutkan dengan pengecekan/survey terhadap lokasi dan teknologi pengolahan sampah yang diajukan dalam proses permohonan izin. -

-
-
-
- -
-
-

Alur Permohonan Izin

-
-
-
- Gambaran Alur -
-
-

- Pelaksanaan survey dimaksud dilakukan bersama-sama oleh Tim Teknis Bersama yang terdiri dari unsur UP PMPTSP Kota dan Dinas Lingkungan Hidup. Izin akan diterbitkan apabila telah memenuhi persyaratan administrasi dan hasil survey telah disetujui atau dinyatakan sesuai persyaratan teknis oleh Tim Teknis Bersama. -

-
-
- -
-
-
- - - -
-
-

Teknologi Pengolahan

-

Teknologi yang diizinkan untuk pengolahan sampah

-
-
-

- Dalam pelaksanaan survey/pengecekan lokasi dan teknologi pengolahan sampah, dilakukan pemeriksaan kesesuaian persyaratan teknis yang diatur dalam SK Kepala Dinas Lingkungan Hidup Nomor 374 Tahun 2017 tentang Persyaratan Teknis Izin Usaha Pengelolaan Sampah. -

-
-
-

Teknologi Fisik

-

Pengurangan ukuran, pemadatan, pemisahan magnetis, masa-jenis, dan optik

-
-
-

Teknologi Biologi

-

Pengolahan aerobik dan/atau anaerobik seperti pengomposan dan biogasifikasi

-
-
-

Teknologi Termal

-

Gasifikasi, pirolisis, plasma dan insenerasi

-
-
-

Teknologi Lainnya

-

Teknologi lain atau gabungan dari beberapa macam teknologi

-
-
-
- -
-
-
-
+
+
+
+
+
-

Persyaratan Umum

+

Izin Usaha Pengolahan Sampah

+

Persyaratan dan mekanisme perolehan izin usaha pengolahan sampah

-
-
-
    -
  • - ✓ - Pemohon wajib berbadan usaha +
    + +
    +
+
+
+

+ Dalam melaksanakan kegiatan usaha pengolahan sampah, badan usaha yang melakukan usaha pengolahan sampah wajib memiliki izin usaha pengolahan sampah. Jenis izin yang diterbitkan sesuai dengan Peraturan Gubernur Nomor 47 Tahun 2017 tentang Petunjuk Pelaksanaan Pelayanan Terpadu Satu Pintu. +

+

+ Mekanisme perolehan Izin Usaha didaftarkan melalui Unit Pengelola Penanaman Modal dan Pelayanan Terpadu Satu Pintu Kota (UP PMPTSP Kota). Adapun formulir dan kelengkapan dokumen sesuai dengan ketentuan yang diatur oleh UP PMPTSP Kota. +

+
+

+ Proses Survey: Setelah berkas administrasi dinyatakan lengkap dan lolos verifikasi, dilanjutkan dengan pengecekan/survey terhadap lokasi dan teknologi pengolahan sampah yang diajukan dalam proses permohonan izin. +

+
+
+
+
+ +
+
+
+
+ + + +
+
+

Teknologi Pengolahan

+

Jenis teknologi yang diizinkan untuk pengolahan sampah

+
+
+
+ +
+
+
+
+

+ Dalam pelaksanaan survey/pengecekan lokasi dan teknologi pengolahan sampah, dilakukan pemeriksaan kesesuaian persyaratan teknis yang diatur dalam SK Kepala Dinas Lingkungan Hidup Nomor 374 Tahun 2017 tentang Persyaratan Teknis Izin Usaha Pengelolaan Sampah. +

+
+
+

Teknologi Fisik

+

Pengurangan ukuran, pemadatan, pemisahan magnetis, masa-jenis, dan optik

+
+
+

Teknologi Biologi

+

Pengolahan aerobik dan/atau anaerobik seperti pengomposan dan biogasifikasi

+
+
+

Teknologi Termal

+

Gasifikasi, pirolisis, plasma dan insenerasi

+
+
+

Teknologi Lainnya

+

Teknologi lain atau gabungan dari beberapa macam teknologi

+
+
+
+
+
+ +
+
+
+
+ + + +
+
+

Persyaratan Umum

+

Persyaratan umum untuk izin usaha pengolahan sampah

+
+
+
+ +
+
+
+
+
+
    +
  • + 1 + Pemohon wajib berbadan usaha
    • -
  • - ✓ - Melampirkan deskripsi dari lokasi kegiatan dengan tata letak (layout) di lokasi kegiatan dan terhadap bangunan sekelilingnya +
  • + 2 + Melampirkan deskripsi dari lokasi kegiatan dengan tata letak (layout) di lokasi kegiatan
    • -
  • - ✓ - Papan nama yang mudah terlihat dengan tulisan "Fasilitas Pengolahan Sampah Non B3" yang dipasang pada unit/bangunan pengolah sampah +
  • + 3 + Papan nama yang mudah terlihat dengan tulisan "Fasilitas Pengolahan Sampah Non B3"
    • -
  • - ✓ - Melampirkan dokumen rencana pengolahan sampah yang menjelaskan jenis, karakteristik, jumlah, komposisi dan asal/sumber sampah yang akan diolah +
  • + 4 + Melampirkan dokumen rencana pengolahan sampah yang menjelaskan jenis, karakteristik, jumlah, komposisi dan asal/sumber sampah
    • -
  • - ✓ - Melampirkan dokumen studi kelayakan +
  • + 5 + Melampirkan dokumen studi kelayakan
    • -
  • - ✓ - Melampirkan dokumen lingkungan (Amdal/UKL-UPL) dan izin lingkungan atau SPPL (Surat Pernyataan Pengelolaan Lingkungan) +
  • + 6 + Melampirkan dokumen lingkungan (Amdal/UKL-UPL) dan izin lingkungan atau SPPL
    • -
  • - ✓ - Umur truk sampah pada saat pendaftaran maksimal 6 tahun, dengan masa berlaku izin minimal 1 tahun dan maksimal 3 tahun +
  • + 7 + Melampirkan DED/detailed engineering design fasilitas pengolahan sampah
    • -
  • - ✓ - Melampirkan DED/detailed engineering design fasilitas pengolahan sampah +
  • + 8 + Memiliki fasilitas pendukung berupa peralatan/instalasi pengendalian pencemaran lingkungan
    • -
  • - ✓ - Memiliki fasilitas pendukung berupa peralatan/instalasi pengendalian pencemaran lingkungan (air dan/atau udara) +
  • + 9 + Melampirkan Standar Operasional Prosedur (SOP)
    • -
  • - ✓ - Melampirkan Standar Operasional Prosedur (SOP) +
  • + 10 + Memiliki Alat Pelindung Diri (APD) untuk petugas
    • -
  • - ✓ - Memiliki Alat Pelindung Diri (APD) untuk petugas +
  • + 11 + Memiliki alat perlengkapan peralatan tanggap darurat
    • -
  • - ✓ - Memiliki alat perlengkapan peralatan tanggap darurat +
  • + 12 + Melampirkan Izin Gangguan – Tempat Usaha Berdasarkan Undang-Undang Gangguan (UUG/HO)
    • -
  • - ✓ - Melampirkan Izin Gangguan – Tempat Usaha Berdasarkan Undang-Undang Gangguan (UUG/HO) -
    • -
  • - ✓ - Memiliki fasilitas pendukung: ruang pemilahan dan bak penampung air lindi +
  • + 13 + Memiliki fasilitas pendukung: ruang pemilahan dan bak penampung air lindi
+
-
-
-
+
+
+
+
-

Persyaratan Khusus

+

Persyaratan Khusus Teknologi

+

Persyaratan spesifik berdasarkan jenis teknologi yang digunakan

-
-
-

Teknologi Fisik

-

Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²

-
-
-

Teknologi Biologi

-
    -
  • • Kapasitas minimal 10 ton/hari atau luas >200 m²
    • -
  • • Wajib memenuhi baku mutu kebauan
    • -
  • • Wajib memenuhi baku mutu air lindi
    • -
-
-
-

Teknologi Termal

-
    -
  • • Insinerasi: minimal 8000°C
    • -
  • • Pirolisis: minimal 4000°C
    • -
  • • Gasifikasi: minimal 7000°C
    • -
  • • Plasma: minimal 5000°C
    • -
  • • Wajib memenuhi baku mutu emisi
    • -
-
-
-

Teknologi Lainnya

-
    -
  • • Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m2
    • -
  • • Wajib memenuhi persyaratan khusus pada semua jenis teknologi yang digunakan
    • -
  • • Memenuhi baku mutu lingkungan
    • -
+
+ +
+
+
+
+
+
+

Teknologi Fisik

+

Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²

+
+
+

Teknologi Biologi

+
    +
  • • Kapasitas minimal 10 ton/hari atau luas >200 m²
    • +
  • • Wajib memenuhi baku mutu kebauan
    • +
  • • Wajib memenuhi baku mutu air lindi
    • +
+
+
+

Teknologi Termal

+
    +
  • • Insinerasi: minimal 8000°C
    • +
  • • Pirolisis: minimal 4000°C
    • +
  • • Gasifikasi: minimal 7000°C
    • +
  • • Plasma: minimal 5000°C
    • +
  • • Wajib memenuhi baku mutu emisi
    • +
+
+
+

Teknologi Lainnya

+
    +
  • • Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²
    • +
  • • Wajib memenuhi persyaratan khusus pada semua jenis teknologi yang digunakan
    • +
  • • Memenuhi baku mutu lingkungan
    • +
+
-
-
-
- - - +
+
+
+
+ + + +
+
+

Kewajiban Setelah Memperoleh Izin

+

Kewajiban yang harus dipenuhi setelah mendapat izin usaha

+
+
+
+
-

Kewajiban Setelah Memperoleh Izin

-

- Setelah memperoleh Izin Usaha Pengelolaan Sampah, penyedia jasa pengolahan sampah wajib melaporkan izinnya kepada Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk melakukan pendaftaran/registrasi secara online melalui website ini. -

-
-

Penyedia jasa pengolahan sampah wajib melakukan:

-
-
-
1
-

Pendaftaran sebagai penyedia jasa yang teregistrasi

-
-
-
2
-

Melaporkan kontrak kerjasama pengolahan sampah

-
-
-
3
-

Melaporkan hasil kegiatan pengolahan sampah

+
+
+

+ Setelah memperoleh Izin Usaha Pengelolaan Sampah, penyedia jasa pengolahan sampah wajib melaporkan izinnya kepada Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk melakukan pendaftaran/registrasi secara online melalui website ini. +

+
+

Penyedia jasa pengolahan sampah wajib melakukan:

+
+
+
1
+

Pendaftaran sebagai penyedia jasa yang teregistrasi

+
+
+
2
+

Melaporkan kontrak kerjasama pengolahan sampah

+
+
+
3
+

Melaporkan hasil kegiatan pengolahan sampah

+
+
-
-
+ +
+
+
+

🏭 Daftar Jasa Pengolahan Sampah

+

Data perusahaan yang memiliki izin pengolahan sampah di DKI Jakarta

+
+ +
+ + + + + + + + + + + + +
NoPerusahaanAlamatBerlaku Hingga
+
+ +
+
+ + + + + Memuat data... +
+
+
+
+ +
\ No newline at end of file diff --git a/Views/Website/Kontak/Index.cshtml b/Views/Website/Kontak/Index.cshtml index 3311459..3946af5 100644 --- a/Views/Website/Kontak/Index.cshtml +++ b/Views/Website/Kontak/Index.cshtml @@ -75,6 +75,33 @@

+ +
+
+ +
+
+

Helpdesk Sistem Pesapakawan

+

+ + 0852-1243-6339 + +

+
+
+
+
+ +
+
+

Helpdesk BLUD UPST

+

+ + 0822-1100-1180 + +

+
+
diff --git a/Views/Website/Shared/Partials/Frontend/_Footer.cshtml b/Views/Website/Shared/Partials/Frontend/_Footer.cshtml index 8c5cbf4..2743b63 100644 --- a/Views/Website/Shared/Partials/Frontend/_Footer.cshtml +++ b/Views/Website/Shared/Partials/Frontend/_Footer.cshtml @@ -58,5 +58,80 @@

+ +
+
+
+ + + +
+
+
+
+ +
+
+
+
+ +
+
+
+

Pesapakawan Support

+

Online - Siap membantu Anda

+
+
+ +
+ +
+
+ @*
+ Support +
*@ +
+

Halo! 👋

+

Selamat datang di Pesapakawan. Bagaimana kami bisa membantu Anda hari ini?

+
+ +
+
+
+ + @*
+
Pilihan Bantuan Cepat:
+
+ + + + +
+
*@ +
+ +
+ +
+
+
+
- + \ No newline at end of file diff --git a/Views/Website/Shared/Partials/Frontend/_Navbar.cshtml b/Views/Website/Shared/Partials/Frontend/_Navbar.cshtml index 5b5390e..e041b64 100644 --- a/Views/Website/Shared/Partials/Frontend/_Navbar.cshtml +++ b/Views/Website/Shared/Partials/Frontend/_Navbar.cshtml @@ -32,7 +32,11 @@
- + + TUTORIAL + + + KONTAK @@ -86,6 +90,9 @@ KONTAK + + TUTORIAL +
MASUK diff --git a/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml b/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml index cfc71bf..7526ca6 100644 --- a/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml +++ b/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml @@ -1,8 +1,18 @@ - - \ No newline at end of file + + + + + + + + + + + + diff --git a/Views/Website/Shared/_Layout.cshtml b/Views/Website/Shared/_Layout.cshtml index 8a37b29..301980d 100644 --- a/Views/Website/Shared/_Layout.cshtml +++ b/Views/Website/Shared/_Layout.cshtml @@ -49,6 +49,10 @@ + + + + @await RenderSectionAsync("css", required: false) diff --git a/Views/Website/Tutorial/Index.cshtml b/Views/Website/Tutorial/Index.cshtml new file mode 100644 index 0000000..6742277 --- /dev/null +++ b/Views/Website/Tutorial/Index.cshtml @@ -0,0 +1,77 @@ +@{ + Layout = "~/Views/Website/Shared/_Layout.cshtml"; + ViewData["Title"] = "Tutorial & Manual Book Sistem Informasi Pesapakawan"; +} + + +
+
+
+ + + +
+
+

Tutorial & Manual Book Sistem Informasi Pesapakawan

+

Panduan lengkap dan petunjuk teknis untuk membantu Anda menggunakan Sistem Informasi Pesapakawan dengan mudah dan efektif.

+
+
+ +
+
+ +
+
+
+
+

Manual Book

+ +
+
+ +
+
+

Panduan Pengguna

+

+ Dokumen ini berisi petunjuk lengkap penggunaan sistem informasi Pesapakawan + untuk semua fitur dan modul. +

+ + Download PDF + +
+
+
+ +
+

Video Tutorial

+
+ +
+
+

+ Pelajari cara menggunakan sistem melalui video tutorial lengkap kami. + Video ini memberikan panduan langkah demi langkah untuk memahami dan memanfaatkan fitur-fitur utama Sistem Informasi Pesapakawan secara optimal. +

+
+
+
+
+
+
\ No newline at end of file diff --git a/wwwroot/website/css/datatables-responsive.css b/wwwroot/website/css/datatables-responsive.css new file mode 100644 index 0000000..a89baae --- /dev/null +++ b/wwwroot/website/css/datatables-responsive.css @@ -0,0 +1,180 @@ +/* #pengangkutanTable { + width: 100% !important; + table-layout: fixed; +} + +#pengangkutanTable thead th, +#pengangkutanTable tbody td { + display: table-cell !important; + vertical-align: top; + word-wrap: break-word; + word-break: break-word; + white-space: normal; + overflow-wrap: break-word; +} + +.dtr-details { + display: none !important; +} + +.dtr-control { + display: none !important; +} + +.child { + display: none !important; +} + +#pengangkutanTable tbody tr:nth-child(even) { + background-color: #f9fafb; +} + +#pengangkutanTable tbody tr:hover { + background-color: #e0f2fe !important; + transition: background-color 0.2s ease; + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.dt-paging .dt-paging-button { + display: inline-block !important; + margin: 0 2px; +} + +@media (max-width: 768px) { + .dataTables_wrapper { + overflow-x: visible; + } + + #pengangkutanTable th:nth-child(1), + #pengangkutanTable td:nth-child(1) { + width: 10%; + min-width: 40px; + } + + #pengangkutanTable th:nth-child(2), + #pengangkutanTable td:nth-child(2) { + width: 35%; + min-width: 120px; + } + + #pengangkutanTable th:nth-child(3), + #pengangkutanTable td:nth-child(3) { + width: 35%; + min-width: 120px; + } + + #pengangkutanTable th:nth-child(4), + #pengangkutanTable td:nth-child(4) { + width: 20%; + min-width: 100px; + } + + #pengangkutanTable { + font-size: 13px; + } + + #pengangkutanTable th, + #pengangkutanTable td { + padding: 10px 6px; + line-height: 1.4; + } + + .overflow-x-auto { + overflow-x: visible; + } +} + +@media (max-width: 640px) { + #pengangkutanTable { + font-size: 12px; + } + + #pengangkutanTable th, + #pengangkutanTable td { + padding: 8px 4px; + line-height: 1.3; + } + + #pengangkutanTable th:nth-child(1), + #pengangkutanTable td:nth-child(1) { + width: 8%; + min-width: 35px; + } + + #pengangkutanTable th:nth-child(2), + #pengangkutanTable td:nth-child(2) { + width: 42%; + } + + #pengangkutanTable th:nth-child(3), + #pengangkutanTable td:nth-child(3) { + width: 30%; + } + + #pengangkutanTable th:nth-child(4), + #pengangkutanTable td:nth-child(4) { + width: 20%; + } + + .status-badge { + display: block; + margin-top: 4px; + font-size: 10px; + padding: 2px 6px; + } +} + +.dt-paging { + text-align: center; + margin-top: 1rem; +} + +.dt-paging .dt-paging-button { + padding: 6px 12px; + margin: 0 2px; + border: 1px solid #d1d5db; + border-radius: 6px; + background: white; + color: #374151; + text-decoration: none; + transition: all 0.2s ease; +} + +.dt-paging .dt-paging-button:hover { + background: #e0f2fe; + border-color: #0ea5e9; + color: #0369a1; +} + +.dt-paging .dt-paging-button.current { + background: #0ea5e9; + border-color: #0ea5e9; + color: white; +} + +.dt-paging .dt-paging-button.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.dt-search input { + padding: 8px 12px; + border: 1px solid #d1d5db; + border-radius: 6px; + font-size: 14px; + transition: border-color 0.2s ease; +} + +.dt-search input:focus { + outline: none; + border-color: #0ea5e9; + box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); +} + +.dt-length select { + padding: 6px 10px; + border: 1px solid #d1d5db; + border-radius: 6px; + font-size: 14px; +} */ diff --git a/wwwroot/website/css/watch.css b/wwwroot/website/css/watch.css index f974b83..56f92a4 100644 --- a/wwwroot/website/css/watch.css +++ b/wwwroot/website/css/watch.css @@ -85,12 +85,21 @@ --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-300: oklch(78.5% 0.115 274.713); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-800: oklch(39.8% 0.195 277.366); --color-purple-50: oklch(97.7% 0.014 308.299); + --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); + --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-500: oklch(62.7% 0.265 303.9); + --color-purple-600: oklch(55.8% 0.288 302.321); + --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-pink-50: oklch(97.1% 0.014 343.198); + --color-pink-500: oklch(65.6% 0.241 354.308); + --color-pink-600: oklch(59.2% 0.249 0.584); + --color-pink-700: oklch(52.5% 0.223 3.958); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); @@ -118,6 +127,7 @@ --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; + --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; @@ -140,6 +150,8 @@ --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-light: 300; @@ -169,6 +181,8 @@ --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; + --blur-xl: 24px; + --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -399,6 +413,9 @@ .top-0 { top: calc(var(--spacing) * 0); } + .top-1 { + top: calc(var(--spacing) * 1); + } .top-1\/2 { top: calc(1/2 * 100%); } @@ -453,6 +470,9 @@ .right-full { right: 100%; } + .-bottom-0 { + bottom: calc(var(--spacing) * -0); + } .-bottom-0\.5 { bottom: calc(var(--spacing) * -0.5); } @@ -489,6 +509,9 @@ .left-0 { left: calc(var(--spacing) * 0); } + .left-1 { + left: calc(var(--spacing) * 1); + } .left-1\/2 { left: calc(1/2 * 100%); } @@ -696,6 +719,9 @@ .my-6 { margin-block: calc(var(--spacing) * 6); } + .my-12 { + margin-block: calc(var(--spacing) * 12); + } .my-auto { margin-block: auto; } @@ -783,6 +809,9 @@ .mt-8 { margin-top: calc(var(--spacing) * 8); } + .mt-12 { + margin-top: calc(var(--spacing) * 12); + } .mt-25 { margin-top: calc(var(--spacing) * 25); } @@ -837,12 +866,21 @@ .mb-auto { margin-bottom: auto; } + .-ml-1 { + margin-left: calc(var(--spacing) * -1); + } + .ml-0 { + margin-left: calc(var(--spacing) * 0); + } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-4 { margin-left: calc(var(--spacing) * 4); } + .ml-9 { + margin-left: calc(var(--spacing) * 9); + } .ml-auto { margin-left: auto; } @@ -888,6 +926,12 @@ .table-row { display: table-row; } + .aspect-video { + aspect-ratio: var(--aspect-video); + } + .h-0 { + height: calc(var(--spacing) * 0); + } .h-0\.5 { height: calc(var(--spacing) * 0.5); } @@ -1134,6 +1178,9 @@ .grow { flex-grow: 1; } + .table-fixed { + table-layout: fixed; + } .caption-top { caption-side: top; } @@ -1143,6 +1190,10 @@ .origin-top { transform-origin: top; } + .-translate-x-1 { + --tw-translate-x: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -1155,6 +1206,10 @@ --tw-translate-x: calc(var(--spacing) * 16); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-y-1 { + --tw-translate-y: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -1179,6 +1234,12 @@ --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-102 { + --tw-scale-x: 102%; + --tw-scale-y: 102%; + --tw-scale-z: 102%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; @@ -1338,6 +1399,13 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -1380,6 +1448,16 @@ border-color: var(--color-amber-100); } } + .divide-gray-100 { + :where(& > :not(:last-child)) { + border-color: var(--color-gray-100); + } + } + .divide-gray-200 { + :where(& > :not(:last-child)) { + border-color: var(--color-gray-200); + } + } .truncate { overflow: hidden; text-overflow: ellipsis; @@ -1551,12 +1629,24 @@ .border-black { border-color: var(--color-black); } + .border-blue-100 { + border-color: var(--color-blue-100); + } .border-blue-200 { border-color: var(--color-blue-200); } .border-blue-500 { border-color: var(--color-blue-500); } + .border-blue-600 { + border-color: var(--color-blue-600); + } + .border-blue-800 { + border-color: var(--color-blue-800); + } + .border-cyan-100 { + border-color: var(--color-cyan-100); + } .border-cyan-200 { border-color: var(--color-cyan-200); } @@ -1572,12 +1662,18 @@ border-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent); } } + .border-cyan-600 { + border-color: var(--color-cyan-600); + } .border-cyan-600\/50 { border-color: color-mix(in srgb, oklch(60.9% 0.126 221.723) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-cyan-600) 50%, transparent); } } + .border-cyan-700 { + border-color: var(--color-cyan-700); + } .border-cyan-700\/50 { border-color: color-mix(in srgb, oklch(52% 0.105 223.128) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1605,6 +1701,9 @@ .border-gray-300 { border-color: var(--color-gray-300); } + .border-gray-400 { + border-color: var(--color-gray-400); + } .border-green-100 { border-color: var(--color-green-100); } @@ -1650,6 +1749,9 @@ border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent); } } + .border-transparent { + border-color: transparent; + } .border-white { border-color: var(--color-white); } @@ -1725,6 +1827,9 @@ .bg-blue-500 { background-color: var(--color-blue-500); } + .bg-blue-600 { + background-color: var(--color-blue-600); + } .bg-cyan-50 { background-color: var(--color-cyan-50); } @@ -1740,6 +1845,9 @@ .bg-cyan-500 { background-color: var(--color-cyan-500); } + .bg-cyan-600 { + background-color: var(--color-cyan-600); + } .bg-cyan-700 { background-color: var(--color-cyan-700); } @@ -1800,6 +1908,9 @@ .bg-green-600 { background-color: var(--color-green-600); } + .bg-indigo-100 { + background-color: var(--color-indigo-100); + } .bg-indigo-300 { background-color: var(--color-indigo-300); } @@ -1818,6 +1929,15 @@ .bg-orange-500 { background-color: var(--color-orange-500); } + .bg-pink-500 { + background-color: var(--color-pink-500); + } + .bg-purple-50 { + background-color: var(--color-purple-50); + } + .bg-purple-100 { + background-color: var(--color-purple-100); + } .bg-purple-500 { background-color: var(--color-purple-500); } @@ -1920,6 +2040,10 @@ --tw-gradient-from: var(--color-blue-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-blue-400 { + --tw-gradient-from: var(--color-blue-400); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-blue-500 { --tw-gradient-from: var(--color-blue-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2000,6 +2124,10 @@ --tw-gradient-from: var(--color-purple-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-purple-500 { + --tw-gradient-from: var(--color-purple-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-red-50 { --tw-gradient-from: var(--color-red-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2024,6 +2152,10 @@ --tw-gradient-from: var(--color-slate-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-slate-800 { + --tw-gradient-from: var(--color-slate-800); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-teal-400 { --tw-gradient-from: var(--color-teal-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2058,6 +2190,11 @@ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-blue-700 { + --tw-gradient-via: var(--color-blue-700); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .via-cyan-400 { --tw-gradient-via: var(--color-cyan-400); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -2083,6 +2220,11 @@ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-slate-700 { + --tw-gradient-via: var(--color-slate-700); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .via-white { --tw-gradient-via: var(--color-white); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -2112,6 +2254,10 @@ --tw-gradient-to: var(--color-blue-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-blue-700 { + --tw-gradient-to: var(--color-blue-700); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-cyan-50 { --tw-gradient-to: var(--color-cyan-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2196,6 +2342,14 @@ --tw-gradient-to: var(--color-purple-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-purple-500 { + --tw-gradient-to: var(--color-purple-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-purple-600 { + --tw-gradient-to: var(--color-purple-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-red-50 { --tw-gradient-to: var(--color-red-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2228,6 +2382,10 @@ --tw-gradient-to: var(--color-slate-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-slate-800 { + --tw-gradient-to: var(--color-slate-800); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-slate-900 { --tw-gradient-to: var(--color-slate-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2322,6 +2480,9 @@ .py-0 { padding-block: calc(var(--spacing) * 0); } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } .py-1 { padding-block: calc(var(--spacing) * 1); } @@ -2592,6 +2753,9 @@ .break-all { word-break: break-all; } + .whitespace-nowrap { + white-space: nowrap; + } .text-amber-400 { color: var(--color-amber-400); } @@ -2673,6 +2837,9 @@ .text-gray-900 { color: var(--color-gray-900); } + .text-green-100 { + color: var(--color-green-100); + } .text-green-400 { color: var(--color-green-400); } @@ -2691,6 +2858,9 @@ .text-green-900 { color: var(--color-green-900); } + .text-indigo-800 { + color: var(--color-indigo-800); + } .text-orange-100 { color: var(--color-orange-100); } @@ -2709,6 +2879,12 @@ .text-orange-900 { color: var(--color-orange-900); } + .text-purple-100 { + color: var(--color-purple-100); + } + .text-purple-600 { + color: var(--color-purple-600); + } .text-purple-800 { color: var(--color-purple-800); } @@ -2784,6 +2960,11 @@ .underline { text-decoration-line: underline; } + .placeholder-gray-400 { + &::placeholder { + color: var(--color-gray-400); + } + } .opacity-0 { opacity: 0%; } @@ -3019,6 +3200,13 @@ } } } + .group-hover\:bg-cyan-100 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + background-color: var(--color-cyan-100); + } + } + } .group-hover\:text-cyan-500 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -3127,6 +3315,13 @@ } } } + .hover\:border-transparent { + &:hover { + @media (hover: hover) { + border-color: transparent; + } + } + } .hover\:bg-amber-50 { &:hover { @media (hover: hover) { @@ -3155,6 +3350,13 @@ } } } + .hover\:bg-blue-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-700); + } + } + } .hover\:bg-cyan-500 { &:hover { @media (hover: hover) { @@ -3218,6 +3420,13 @@ } } } + .hover\:bg-purple-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-purple-50); + } + } + } .hover\:bg-red-50 { &:hover { @media (hover: hover) { @@ -3269,6 +3478,30 @@ } } } + .hover\:bg-gradient-to-r { + &:hover { + @media (hover: hover) { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + } + } + .hover\:from-blue-500 { + &:hover { + @media (hover: hover) { + --tw-gradient-from: var(--color-blue-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + } + .hover\:from-blue-600 { + &:hover { + @media (hover: hover) { + --tw-gradient-from: var(--color-blue-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + } .hover\:from-cyan-600 { &:hover { @media (hover: hover) { @@ -3333,6 +3566,22 @@ } } } + .hover\:to-purple-600 { + &:hover { + @media (hover: hover) { + --tw-gradient-to: var(--color-purple-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + } + .hover\:to-purple-700 { + &:hover { + @media (hover: hover) { + --tw-gradient-to: var(--color-purple-700); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + } .hover\:text-amber-300 { &:hover { @media (hover: hover) { @@ -3347,6 +3596,13 @@ } } } + .hover\:text-blue-600 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-600); + } + } + } .hover\:text-cyan-200 { &:hover { @media (hover: hover) { @@ -3471,6 +3727,11 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } + .focus\:ring-blue-500 { + &:focus { + --tw-ring-color: var(--color-blue-500); + } + } .focus\:ring-cyan-200 { &:focus { --tw-ring-color: var(--color-cyan-200); @@ -3517,11 +3778,21 @@ margin-top: calc(var(--spacing) * 8); } } + .sm\:mb-0 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 0); + } + } .sm\:mb-8 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 8); } } + .sm\:block { + @media (width >= 40rem) { + display: block; + } + } .sm\:h-5 { @media (width >= 40rem) { height: calc(var(--spacing) * 5); @@ -3552,6 +3823,11 @@ max-width: var(--container-md); } } + .sm\:flex-row { + @media (width >= 40rem) { + flex-direction: row; + } + } .sm\:space-y-6 { @media (width >= 40rem) { :where(& > :not(:last-child)) { @@ -3596,6 +3872,11 @@ padding-left: calc(var(--spacing) * 10); } } + .sm\:text-right { + @media (width >= 40rem) { + text-align: right; + } + } .sm\:text-3xl { @media (width >= 40rem) { font-size: var(--text-3xl); @@ -3684,6 +3965,21 @@ flex-direction: row; } } + .md\:items-center { + @media (width >= 48rem) { + align-items: center; + } + } + .md\:justify-between { + @media (width >= 48rem) { + justify-content: space-between; + } + } + .md\:gap-0 { + @media (width >= 48rem) { + gap: calc(var(--spacing) * 0); + } + } .md\:space-x-4 { @media (width >= 48rem) { :where(& > :not(:last-child)) { @@ -3804,6 +4100,25 @@ flex-direction: row; } } + .lg\:items-center { + @media (width >= 64rem) { + align-items: center; + } + } + .lg\:justify-between { + @media (width >= 64rem) { + justify-content: space-between; + } + } + .lg\:space-y-0 { + @media (width >= 64rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } + } + } .lg\:p-8 { @media (width >= 64rem) { padding: calc(var(--spacing) * 8); diff --git a/wwwroot/website/css/website.css b/wwwroot/website/css/website.css index c255e71..16416d4 100644 --- a/wwwroot/website/css/website.css +++ b/wwwroot/website/css/website.css @@ -1,3 +1,729 @@ .font-sans { font-family: "Figtree", sans-serif; } + +.dropdown-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, + border-color 0.3s ease; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + border-top: 1px solid #e5e7eb; + border-radius: 0 0 12px 12px; + position: relative; +} + +.dropdown-content.open { + border: 1px solid #e5e7eb; + border-top: none; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(59, 130, 246, 0.1); +} + +.dropdown-content.opening { + border-color: #3b82f6; + box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.25); +} + +.dropdown-content.closing { + border-color: #e5e7eb; +} + +.dropdown-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 1.5rem; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + border: 2px solid #e5e7eb; + border-radius: 12px; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + margin-bottom: 0.5rem; + font-weight: 600; + color: #374151; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); + transform: translateY(0); +} + +.dropdown-header::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(59, 130, 246, 0.1), + transparent + ); + transition: left 0.5s ease; +} + +.dropdown-header:hover::before { + left: 100%; +} + +.dropdown-header:hover { + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + border-color: #3b82f6; + box-shadow: 0 8px 25px -5px rgba(59, 130, 246, 0.2), + 0 8px 10px -5px rgba(59, 130, 246, 0.1); + transform: translateY(-2px); +} + +.dropdown-header.active { + background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); + border-color: #2563eb; + color: #1e40af; + box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.3), + 0 0 0 3px rgba(59, 130, 246, 0.1); + transform: translateY(-1px); +} + +.dropdown-header:active { + transform: translateY(0); + transition: transform 0.1s ease; +} + +.dropdown-icon { + width: 24px; + height: 24px; + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, + filter 0.3s ease; + color: #6b7280; + flex-shrink: 0; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); +} + +.dropdown-header:hover .dropdown-icon { + color: #3b82f6; + filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)); +} + +.dropdown-header.active .dropdown-icon { + color: #1e40af; + filter: drop-shadow(0 6px 12px rgba(30, 64, 175, 0.4)); +} + +.dropdown-content > div { + padding: 2rem; + color: #4b5563; + line-height: 1.7; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.9) 0%, + rgba(248, 250, 252, 0.9) 100% + ); + position: relative; +} + +.dropdown-content > div::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4); + opacity: 0; + transition: opacity 0.3s ease; +} + +.dropdown-content.open > div::before { + opacity: 1; +} + +.dropdown-content h3 { + margin: 0 0 1.5rem 0; + color: #111827; + font-size: 1.25rem; + font-weight: 700; + position: relative; + padding-left: 1rem; +} + +.dropdown-content h3::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 1.5rem; + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + border-radius: 2px; +} + +.dropdown-content p { + margin: 0 0 1.5rem 0; + transition: transform 0.3s ease; +} + +.dropdown-content p:hover { + transform: translateX(5px); +} + +.dropdown-content ul { + margin: 1.5rem 0; + padding-left: 2rem; + position: relative; +} + +.dropdown-content li { + margin-bottom: 0.75rem; + color: #4b5563; + position: relative; + transition: all 0.3s ease; + padding-left: 0.5rem; +} + +.dropdown-content li:hover::before { + transform: translateX(3px); +} + +.dropdown-content li:hover { + color: #1f2937; + transform: translateX(5px); +} + +.dropdown-content table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + background: white; +} + +.dropdown-content th, +.dropdown-content td { + padding: 1rem 0.75rem; + text-align: left; + border-bottom: 1px solid #f1f5f9; + transition: background-color 0.3s ease; +} + +.dropdown-content th { + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + font-weight: 700; + color: #374151; + position: relative; +} + +.dropdown-content th::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6); +} + +.dropdown-content tr:hover td { + background-color: #f0f9ff; + transform: scale(1.01); +} + +.dropdown-content tbody tr { + transition: all 0.3s ease; +} + +.content-item { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dropdown-content.opening .content-item { + opacity: 0; + transform: translateY(20px); +} + +.dropdown-content.open .content-item { + opacity: 1; + transform: translateY(0); +} + +.ripple-effect { + position: absolute; + border-radius: 50%; + background: radial-gradient( + circle, + rgba(59, 130, 246, 0.3) 0%, + transparent 70% + ); + transform: scale(0); + animation: ripple-animation 0.6s ease-out; + pointer-events: none; +} + +.dropdown-header::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(-50%); +} + +.dropdown-header.active::after { + width: 100%; +} + +.dropdown-header.active h2 { + background: linear-gradient(135deg, #1e40af, #7c3aed); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +@keyframes pulse-glow { + 0%, + 100% { + box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); + } + 50% { + box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); + } +} + +.dropdown-header:hover { + animation: pulse-glow 2s infinite; +} + +.dropdown-content.opening { + animation: slide-in-content 0.5s ease-out; +} + +@keyframes slide-in-content { + from { + opacity: 0; + transform: translateY(-20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.dropdown-header:hover .bg-gradient-to-br { + transform: scale(1.1) rotate(5deg); + transition: transform 0.3s ease; +} + +.dropdown-header.active .bg-gradient-to-br { + transform: scale(1.1) rotate(-5deg); + animation: icon-bounce 0.6s ease; +} + +@keyframes icon-bounce { + 0%, + 20%, + 60%, + 100% { + transform: scale(1.1) rotate(-5deg); + } + 40% { + transform: scale(1.2) rotate(-10deg); + } + 80% { + transform: scale(1.15) rotate(-2deg); + } +} + +@media (max-width: 768px) { + .dropdown-header { + padding: 1rem; + font-size: 0.875rem; + border-radius: 10px; + } + + .dropdown-content > div { + padding: 1.5rem 1rem; + } + + .dropdown-content h3 { + font-size: 1.125rem; + margin-bottom: 1rem; + } + + .dropdown-icon { + width: 20px; + height: 20px; + } + + .dropdown-content > div { + padding: 1rem; + } +} + +.whatsapp-widget { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +.whatsapp-button { + position: relative; + width: 60px; + height: 60px; + background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + animation: bounce 2s infinite; +} + +.whatsapp-button:hover { + transform: scale(1.1); + box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6); +} + +.whatsapp-icon { + width: 32px; + height: 32px; + color: white; + z-index: 2; +} + +.pulse-ring { + position: absolute; + width: 60px; + height: 60px; + border: 2px solid #25d366; + border-radius: 50%; + animation: pulse 2s infinite; + opacity: 0; +} + +.pulse-ring-2 { + position: absolute; + width: 60px; + height: 60px; + border: 2px solid #25d366; + border-radius: 50%; + animation: pulse 2s infinite 1s; + opacity: 0; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.3); + opacity: 0.3; + } + 100% { + transform: scale(1.6); + opacity: 0; + } +} + +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-3px); + } +} + +.whatsapp-popup { + position: absolute; + bottom: 80px; + right: 0; + width: 350px; + background: white; + border-radius: 15px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); + opacity: 0; + transform: translateY(20px) scale(0.9); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; + overflow: hidden; +} + +.whatsapp-popup.show { + opacity: 1; + transform: translateY(0) scale(1); + pointer-events: all; +} + +.popup-header { + background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); + color: white; + padding: 15px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.header-content { + display: flex; + align-items: center; + gap: 12px; +} + +.avatar { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 45px; + height: 45px; + border-radius: 50%; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.3); +} + +.avatar img { + width: 100%; + height: 100%; + object-fit: cover; + background: white; + padding: 5px; +} + +.online-indicator { + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + background: #4caf50; + border-radius: 50%; + border: 2px solid white; + animation: blink 2s infinite; +} + +@keyframes blink { + 0%, + 50% { + opacity: 1; + } + 51%, + 100% { + opacity: 0.3; + } +} + +.header-text h4 { + margin: 0; + font-size: 16px; + font-weight: 600; +} + +.online-status { + margin: 0; + font-size: 12px; + opacity: 0.9; +} + +.close-btn { + background: none; + border: none; + color: white; + width: 24px; + height: 24px; + cursor: pointer; + border-radius: 50%; + transition: background 0.2s; +} + +.close-btn:hover { + background: rgba(255, 255, 255, 0.2); +} + +.popup-body { + padding: 20px; + max-height: 300px; + overflow-y: auto; +} + +.chat-message { + display: flex; + gap: 10px; + margin-bottom: 20px; + animation: slideInUp 0.5s ease-out; +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.message-avatar { + width: 30px; + height: 30px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + +.message-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + background: #f0f0f0; + padding: 3px; +} + +.message-bubble { + background: #f0f0f0; + border-radius: 15px 15px 15px 5px; + padding: 12px 15px; + flex: 1; + position: relative; +} + +.message-bubble p { + margin: 0 0 5px 0; + font-size: 14px; + line-height: 1.4; + color: #333; +} + +.message-bubble p:last-of-type { + margin-bottom: 0; +} + +.message-time { + text-align: right; + margin-top: 8px; +} + +.message-time span { + font-size: 11px; + color: #999; +} + +.quick-options h5 { + margin: 0 0 15px 0; + font-size: 14px; + font-weight: 600; + color: #333; +} + +.options-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.option-btn { + background: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 12px 15px; + text-align: left; + cursor: pointer; + transition: all 0.2s; + font-size: 13px; + color: #495057; +} + +.option-btn:hover { + background: #25d366; + color: white; + border-color: #25d366; + transform: translateX(5px); +} + +.popup-footer { + padding: 15px; + border-top: 1px solid #f0f0f0; +} + +.whatsapp-chat-btn { + width: 100%; + background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); + color: white; + border: none; + border-radius: 25px; + padding: 12px 20px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.3s; +} + +.whatsapp-chat-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); +} + +.chat-icon { + width: 18px; + height: 18px; +} + +@media (max-width: 768px) { + .whatsapp-popup { + width: 300px; + right: -25px; + } + + .whatsapp-widget { + bottom: 15px; + right: 15px; + } +} + +@media (max-width: 480px) { + .whatsapp-popup { + width: 280px; + right: 5px; + } +} + +.popup-body::-webkit-scrollbar { + width: 4px; +} + +.popup-body::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 2px; +} + +.popup-body::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 2px; +} + +.popup-body::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; +} diff --git a/wwwroot/website/data/pengangkutan-data.json b/wwwroot/website/data/pengangkutan-data.json new file mode 100644 index 0000000..410ce0b --- /dev/null +++ b/wwwroot/website/data/pengangkutan-data.json @@ -0,0 +1,302 @@ +[ + { + "no": 1, + "nama": "PT. Bersih Sejahtera", + "alamat": "Jl. Sudirman No. 123, Jakarta Pusat", + "tglBerlakuIzin": "2025-12-31" + }, + { + "no": 2, + "nama": "CV. Lingkungan Hijau", + "alamat": "Jl. Thamrin No. 45, Jakarta Selatan", + "tglBerlakuIzin": "2025-11-15" + }, + { + "no": 3, + "nama": "PT. Waste Management Pro", + "alamat": "Jl. Gatot Subroto No. 78 Kelurahan Grogol Selatan, Kebauoran Lama, Jakarta Selatan", + "tglBerlakuIzin": "2026-01-20" + }, + { + "no": 4, + "nama": "UD. Sampah Bersih", + "alamat": "Jl. Cikini No. 56, Jakarta Pusat", + "tglBerlakuIzin": "2025-10-30" + }, + { + "no": 5, + "nama": "PT. Eco Transport", + "alamat": "Jl. Kuningan No. 89, Jakarta Selatan", + "tglBerlakuIzin": "2026-02-14" + }, + { + "no": 6, + "nama": "CV. Green Waste Solution", + "alamat": "Jl. Matraman No. 34, Jakarta Timur", + "tglBerlakuIzin": "2025-09-25" + }, + { + "no": 7, + "nama": "PT. Clean Environment", + "alamat": "Jl. Casablanca No. 67, Jakarta Selatan", + "tglBerlakuIzin": "2026-03-10" + }, + { + "no": 8, + "nama": "UD. Waste Collector", + "alamat": "Jl. Kramat No. 12, Jakarta Pusat", + "tglBerlakuIzin": "2025-08-18" + }, + { + "no": 9, + "nama": "PT. Urban Waste Management", + "alamat": "Jl. Sudirman No. 234, Jakarta Pusat", + "tglBerlakuIzin": "2026-04-05" + }, + { + "no": 10, + "nama": "CV. Environmental Care", + "alamat": "Jl. Tebet No. 78, Jakarta Selatan", + "tglBerlakuIzin": "2025-07-22" + }, + { + "no": 11, + "nama": "PT. Sumber Alam Bersih", + "alamat": "Jl. Merdeka No. 101, Jakarta Barat", + "tglBerlakuIzin": "2026-05-12" + }, + { + "no": 12, + "nama": "CV. Hijau Lestari", + "alamat": "Jl. Mangga Dua No. 56, Jakarta Utara", + "tglBerlakuIzin": "2025-06-30" + }, + { + "no": 13, + "nama": "PT. Lingkungan Asri", + "alamat": "Jl. Daan Mogot No. 88, Jakarta Barat", + "tglBerlakuIzin": "2026-07-19" + }, + { + "no": 14, + "nama": "UD. Bersih Mandiri", + "alamat": "Jl. Salemba No. 23, Jakarta Pusat", + "tglBerlakuIzin": "2025-05-15" + }, + { + "no": 15, + "nama": "PT. Eco Waste Nusantara", + "alamat": "Jl. Fatmawati No. 77, Jakarta Selatan", + "tglBerlakuIzin": "2026-08-25" + }, + { + "no": 16, + "nama": "CV. Solusi Bersih", + "alamat": "Jl. Pramuka No. 45, Jakarta Timur", + "tglBerlakuIzin": "2025-04-10" + }, + { + "no": 17, + "nama": "PT. Lestari Bersama", + "alamat": "Jl. Panjang No. 12, Jakarta Barat", + "tglBerlakuIzin": "2026-09-30" + }, + { + "no": 18, + "nama": "UD. Hijau Bersih", + "alamat": "Jl. Kemang No. 34, Jakarta Selatan", + "tglBerlakuIzin": "2025-03-18" + }, + { + "no": 19, + "nama": "PT. Mitra Lingkungan", + "alamat": "Jl. Pluit No. 56, Jakarta Utara", + "tglBerlakuIzin": "2026-10-11" + }, + { + "no": 20, + "nama": "CV. Bersih Jaya", + "alamat": "Jl. Pasar Minggu No. 89, Jakarta Selatan", + "tglBerlakuIzin": "2025-02-05" + }, + { + "no": 21, + "nama": "PT. Bersih Prima", + "alamat": "Jl. Sudirman No. 321, Jakarta Pusat", + "tglBerlakuIzin": "2026-11-01" + }, + { + "no": 22, + "nama": "CV. Lingkungan Bersama", + "alamat": "Jl. Thamrin No. 99, Jakarta Selatan", + "tglBerlakuIzin": "2025-12-12" + }, + { + "no": 23, + "nama": "PT. Waste Solution", + "alamat": "Jl. Gatot Subroto No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-01-15" + }, + { + "no": 24, + "nama": "UD. Sampah Mandiri", + "alamat": "Jl. Cikini No. 78, Jakarta Pusat", + "tglBerlakuIzin": "2025-10-10" + }, + { + "no": 25, + "nama": "PT. Eco Transportasi", + "alamat": "Jl. Kuningan No. 100, Jakarta Selatan", + "tglBerlakuIzin": "2026-02-20" + }, + { + "no": 26, + "nama": "CV. Green Solution", + "alamat": "Jl. Matraman No. 56, Jakarta Timur", + "tglBerlakuIzin": "2025-09-10" + }, + { + "no": 27, + "nama": "PT. Clean Indo", + "alamat": "Jl. Casablanca No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-03-15" + }, + { + "no": 28, + "nama": "UD. Waste Pro", + "alamat": "Jl. Kramat No. 34, Jakarta Pusat", + "tglBerlakuIzin": "2025-08-10" + }, + { + "no": 29, + "nama": "PT. Urban Waste Pro", + "alamat": "Jl. Sudirman No. 345, Jakarta Pusat", + "tglBerlakuIzin": "2026-04-10" + }, + { + "no": 30, + "nama": "CV. Environmental Solution", + "alamat": "Jl. Tebet No. 99, Jakarta Selatan", + "tglBerlakuIzin": "2025-07-10" + }, + { + "no": 31, + "nama": "PT. Sumber Alam Lestari", + "alamat": "Jl. Merdeka No. 200, Jakarta Barat", + "tglBerlakuIzin": "2026-05-20" + }, + { + "no": 32, + "nama": "CV. Hijau Bersama", + "alamat": "Jl. Mangga Dua No. 78, Jakarta Utara", + "tglBerlakuIzin": "2025-06-10" + }, + { + "no": 33, + "nama": "PT. Lingkungan Hijau", + "alamat": "Jl. Daan Mogot No. 99, Jakarta Barat", + "tglBerlakuIzin": "2026-07-10" + }, + { + "no": 34, + "nama": "UD. Bersih Lestari", + "alamat": "Jl. Salemba No. 45, Jakarta Pusat", + "tglBerlakuIzin": "2025-05-10" + }, + { + "no": 35, + "nama": "PT. Eco Nusantara", + "alamat": "Jl. Fatmawati No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-08-10" + }, + { + "no": 36, + "nama": "CV. Solusi Hijau", + "alamat": "Jl. Pramuka No. 67, Jakarta Timur", + "tglBerlakuIzin": "2025-04-20" + }, + { + "no": 37, + "nama": "PT. Lestari Hijau", + "alamat": "Jl. Panjang No. 34, Jakarta Barat", + "tglBerlakuIzin": "2026-09-10" + }, + { + "no": 38, + "nama": "UD. Hijau Mandiri", + "alamat": "Jl. Kemang No. 56, Jakarta Selatan", + "tglBerlakuIzin": "2025-03-10" + }, + { + "no": 39, + "nama": "PT. Mitra Bersih", + "alamat": "Jl. Pluit No. 78, Jakarta Utara", + "tglBerlakuIzin": "2026-10-10" + }, + { + "no": 40, + "nama": "CV. Bersih Mandiri", + "alamat": "Jl. Pasar Minggu No. 100, Jakarta Selatan", + "tglBerlakuIzin": "2025-02-10" + }, + { + "no": 41, + "nama": "PT. Bersih Jaya", + "alamat": "Jl. Sudirman No. 400, Jakarta Pusat", + "tglBerlakuIzin": "2026-11-10" + }, + { + "no": 42, + "nama": "CV. Lingkungan Lestari", + "alamat": "Jl. Thamrin No. 120, Jakarta Selatan", + "tglBerlakuIzin": "2025-12-20" + }, + { + "no": 43, + "nama": "PT. Waste Bersih", + "alamat": "Jl. Gatot Subroto No. 120, Jakarta Selatan", + "tglBerlakuIzin": "2026-01-25" + }, + { + "no": 44, + "nama": "UD. Sampah Lestari", + "alamat": "Jl. Cikini No. 100, Jakarta Pusat", + "tglBerlakuIzin": "2025-10-20" + }, + { + "no": 45, + "nama": "PT. Eco Transport Mandiri", + "alamat": "Jl. Kuningan No. 120, Jakarta Selatan", + "tglBerlakuIzin": "2026-02-25" + }, + { + "no": 46, + "nama": "CV. Green Mandiri", + "alamat": "Jl. Matraman No. 78, Jakarta Timur", + "tglBerlakuIzin": "2025-09-20" + }, + { + "no": 47, + "nama": "PT. Clean Solution", + "alamat": "Jl. Casablanca No. 120, Jakarta Selatan", + "tglBerlakuIzin": "2026-03-25" + }, + { + "no": 48, + "nama": "UD. Waste Lestari", + "alamat": "Jl. Kramat No. 56, Jakarta Pusat", + "tglBerlakuIzin": "2025-08-20" + }, + { + "no": 49, + "nama": "PT. Urban Waste Lestari", + "alamat": "Jl. Sudirman No. 500, Jakarta Pusat", + "tglBerlakuIzin": "2026-04-20" + }, + { + "no": 50, + "nama": "CV. Environmental Mandiri", + "alamat": "Jl. Tebet No. 120, Jakarta Selatan", + "tglBerlakuIzin": "2025-07-20" + } +] diff --git a/wwwroot/website/data/pengolahan-data.json b/wwwroot/website/data/pengolahan-data.json new file mode 100644 index 0000000..3d9bccf --- /dev/null +++ b/wwwroot/website/data/pengolahan-data.json @@ -0,0 +1,242 @@ +[ + { + "no": 1, + "nama": "PT. Waste Processing Jakarta", + "alamat": "Jl. Soekarno Hatta No. 123, Jakarta Timur", + "tglBerlakuIzin": "2025-12-31" + }, + { + "no": 2, + "nama": "CV. Eco Recycle Indonesia", + "alamat": "Jl. Gatot Subroto No. 45, Jakarta Selatan", + "tglBerlakuIzin": "2025-11-15" + }, + { + "no": 3, + "nama": "PT. Green Processing Solution", + "alamat": "Jl. Sudirman No. 78 Kelurahan Tanah Abang, Jakarta Pusat", + "tglBerlakuIzin": "2026-01-20" + }, + { + "no": 4, + "nama": "UD. Daur Ulang Mandiri", + "alamat": "Jl. Thamrin No. 56, Jakarta Pusat", + "tglBerlakuIzin": "2025-10-30" + }, + { + "no": 5, + "nama": "PT. Komposter Nusantara", + "alamat": "Jl. Kuningan No. 89, Jakarta Selatan", + "tglBerlakuIzin": "2026-02-14" + }, + { + "no": 6, + "nama": "CV. Recycle Pro Indonesia", + "alamat": "Jl. Matraman No. 34, Jakarta Timur", + "tglBerlakuIzin": "2025-09-25" + }, + { + "no": 7, + "nama": "PT. Waste Treatment Center", + "alamat": "Jl. Casablanca No. 67, Jakarta Selatan", + "tglBerlakuIzin": "2026-03-10" + }, + { + "no": 8, + "nama": "UD. Pengolah Sampah Bersih", + "alamat": "Jl. Kramat No. 12, Jakarta Pusat", + "tglBerlakuIzin": "2025-08-18" + }, + { + "no": 9, + "nama": "PT. Urban Waste Processing", + "alamat": "Jl. Sudirman No. 234, Jakarta Pusat", + "tglBerlakuIzin": "2026-04-05" + }, + { + "no": 10, + "nama": "CV. Environmental Processing", + "alamat": "Jl. Tebet No. 78, Jakarta Selatan", + "tglBerlakuIzin": "2025-07-22" + }, + { + "no": 11, + "nama": "PT. Sumber Daya Pengolahan", + "alamat": "Jl. Merdeka No. 101, Jakarta Barat", + "tglBerlakuIzin": "2026-05-12" + }, + { + "no": 12, + "nama": "CV. Hijau Processing", + "alamat": "Jl. Mangga Dua No. 56, Jakarta Utara", + "tglBerlakuIzin": "2025-06-30" + }, + { + "no": 13, + "nama": "PT. Lingkungan Processing", + "alamat": "Jl. Daan Mogot No. 88, Jakarta Barat", + "tglBerlakuIzin": "2026-07-19" + }, + { + "no": 14, + "nama": "UD. Bersih Processing", + "alamat": "Jl. Salemba No. 23, Jakarta Pusat", + "tglBerlakuIzin": "2025-05-15" + }, + { + "no": 15, + "nama": "PT. Eco Processing Nusantara", + "alamat": "Jl. Fatmawati No. 77, Jakarta Selatan", + "tglBerlakuIzin": "2026-08-25" + }, + { + "no": 16, + "nama": "CV. Solusi Processing", + "alamat": "Jl. Pramuka No. 45, Jakarta Timur", + "tglBerlakuIzin": "2025-04-10" + }, + { + "no": 17, + "nama": "PT. Lestari Processing", + "alamat": "Jl. Panjang No. 12, Jakarta Barat", + "tglBerlakuIzin": "2026-09-30" + }, + { + "no": 18, + "nama": "UD. Hijau Processing", + "alamat": "Jl. Kemang No. 34, Jakarta Selatan", + "tglBerlakuIzin": "2025-03-18" + }, + { + "no": 19, + "nama": "PT. Mitra Processing", + "alamat": "Jl. Pluit No. 56, Jakarta Utara", + "tglBerlakuIzin": "2026-10-11" + }, + { + "no": 20, + "nama": "CV. Bersih Processing Jaya", + "alamat": "Jl. Pasar Minggu No. 89, Jakarta Selatan", + "tglBerlakuIzin": "2025-02-05" + }, + { + "no": 21, + "nama": "PT. Processing Prima", + "alamat": "Jl. Sudirman No. 321, Jakarta Pusat", + "tglBerlakuIzin": "2026-11-01" + }, + { + "no": 22, + "nama": "CV. Lingkungan Processing", + "alamat": "Jl. Thamrin No. 99, Jakarta Selatan", + "tglBerlakuIzin": "2025-12-12" + }, + { + "no": 23, + "nama": "PT. Waste Processing Solution", + "alamat": "Jl. Gatot Subroto No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-01-15" + }, + { + "no": 24, + "nama": "UD. Sampah Processing", + "alamat": "Jl. Cikini No. 78, Jakarta Pusat", + "tglBerlakuIzin": "2025-10-10" + }, + { + "no": 25, + "nama": "PT. Eco Processing Transportasi", + "alamat": "Jl. Kuningan No. 100, Jakarta Selatan", + "tglBerlakuIzin": "2026-02-20" + }, + { + "no": 26, + "nama": "CV. Green Processing Solution", + "alamat": "Jl. Matraman No. 56, Jakarta Timur", + "tglBerlakuIzin": "2025-09-10" + }, + { + "no": 27, + "nama": "PT. Clean Processing Indo", + "alamat": "Jl. Casablanca No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-03-15" + }, + { + "no": 28, + "nama": "UD. Waste Processing Pro", + "alamat": "Jl. Kramat No. 34, Jakarta Pusat", + "tglBerlakuIzin": "2025-08-10" + }, + { + "no": 29, + "nama": "PT. Urban Processing Pro", + "alamat": "Jl. Sudirman No. 345, Jakarta Pusat", + "tglBerlakuIzin": "2026-04-10" + }, + { + "no": 30, + "nama": "CV. Environmental Processing Solution", + "alamat": "Jl. Tebet No. 99, Jakarta Selatan", + "tglBerlakuIzin": "2025-07-10" + }, + { + "no": 31, + "nama": "PT. Sumber Alam Processing", + "alamat": "Jl. Merdeka No. 200, Jakarta Barat", + "tglBerlakuIzin": "2026-05-20" + }, + { + "no": 32, + "nama": "CV. Hijau Processing Bersama", + "alamat": "Jl. Mangga Dua No. 78, Jakarta Utara", + "tglBerlakuIzin": "2025-06-10" + }, + { + "no": 33, + "nama": "PT. Lingkungan Processing Hijau", + "alamat": "Jl. Daan Mogot No. 99, Jakarta Barat", + "tglBerlakuIzin": "2026-07-10" + }, + { + "no": 34, + "nama": "UD. Bersih Processing Lestari", + "alamat": "Jl. Salemba No. 45, Jakarta Pusat", + "tglBerlakuIzin": "2025-05-10" + }, + { + "no": 35, + "nama": "PT. Eco Processing Nusantara", + "alamat": "Jl. Fatmawati No. 88, Jakarta Selatan", + "tglBerlakuIzin": "2026-08-10" + }, + { + "no": 36, + "nama": "CV. Solusi Processing Hijau", + "alamat": "Jl. Pramuka No. 67, Jakarta Timur", + "tglBerlakuIzin": "2025-04-20" + }, + { + "no": 37, + "nama": "PT. Lestari Processing Hijau", + "alamat": "Jl. Panjang No. 34, Jakarta Barat", + "tglBerlakuIzin": "2026-09-10" + }, + { + "no": 38, + "nama": "UD. Hijau Processing Mandiri", + "alamat": "Jl. Kemang No. 56, Jakarta Selatan", + "tglBerlakuIzin": "2025-03-10" + }, + { + "no": 39, + "nama": "PT. Mitra Processing Bersih", + "alamat": "Jl. Pluit No. 78, Jakarta Utara", + "tglBerlakuIzin": "2026-10-10" + }, + { + "no": 40, + "nama": "CV. Bersih Processing Mandiri", + "alamat": "Jl. Pasar Minggu No. 100, Jakarta Selatan", + "tglBerlakuIzin": "2025-02-10" + } +] diff --git a/wwwroot/website/documents/manual_book_pesapakawan.pdf b/wwwroot/website/documents/manual_book_pesapakawan.pdf new file mode 100644 index 0000000..5e7f894 Binary files /dev/null and b/wwwroot/website/documents/manual_book_pesapakawan.pdf differ diff --git a/wwwroot/website/js/datatables_angkut.js b/wwwroot/website/js/datatables_angkut.js new file mode 100644 index 0000000..8a50717 --- /dev/null +++ b/wwwroot/website/js/datatables_angkut.js @@ -0,0 +1,303 @@ +document.addEventListener("DOMContentLoaded", function () { + initializePengangkutanDataTable(); +}); + +function initializePengangkutanDataTable() { + if (!document.getElementById("pengangkutanTable")) return; + + if (typeof $ !== "undefined" && $.fn.DataTable) { + $("#pengangkutanTable").DataTable({ + ajax: { + url: "/website/data/pengangkutan-data.json", + type: "GET", + dataSrc: "", + }, + columns: [ + { + data: "no", + className: "px-6 py-4 text-sm text-gray-900 text-center font-medium", + title: "No", + width: "8%", + }, + { + data: "nama", + className: "px-6 py-4 text-sm text-gray-900 font-medium", + title: "Nama Perusahaan", + width: "35%", + }, + { + data: "alamat", + className: "px-6 py-4 text-sm text-gray-700", + title: "Alamat", + width: "40%", + }, + { + data: "tglBerlakuIzin", + className: "px-6 py-4 text-sm text-gray-900 text-center", + title: "Berlaku Hingga", + width: "17%", + render: function (data, type, row) { + if (type === "display") { + const date = new Date(data); + const formattedDate = date.toLocaleDateString("id-ID", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + const today = new Date(); + const expiry = new Date(data); + const daysUntilExpiry = Math.ceil( + (expiry - today) / (1000 * 60 * 60 * 24) + ); + + let statusClass = "bg-green-100 text-green-800"; + if (daysUntilExpiry < 30) { + statusClass = "bg-red-100 text-red-800"; + } else if (daysUntilExpiry < 90) { + statusClass = "bg-yellow-100 text-yellow-800"; + } + + return `
+
${formattedDate}
+ + ${ + daysUntilExpiry > 0 + ? `${daysUntilExpiry} hari` + : "Expired" + } + +
`; + } + return data; + }, + }, + ], + language: { + search: "Cari:", + lengthMenu: "Tampilkan _MENU_ data per halaman", + info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data", + infoEmpty: "Menampilkan 0 sampai 0 dari 0 data", + infoFiltered: "(disaring dari _MAX_ total data)", + paginate: { + first: "Pertama", + last: "Terakhir", + next: "Selanjutnya", + previous: "Sebelumnya", + }, + emptyTable: "Tidak ada data yang tersedia", + zeroRecords: "Tidak ditemukan data yang sesuai", + }, + pageLength: 10, + responsive: false, + ordering: true, + searching: true, + paging: true, + info: true, + autoWidth: false, + scrollX: false, + layout: { + topStart: { + pageLength: { + text: "Tampilkan _MENU_ data", + }, + }, + topEnd: { + search: { + placeholder: "Cari perusahaan...", + }, + }, + bottomStart: "info", + bottomEnd: "paging", + }, + initComplete: function () { + $("#loadingIndicator").hide(); + + const wrapper = $(".dataTables_wrapper"); + + wrapper + .find('input[type="search"]') + .addClass( + "block w-full px-4 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" + ) + .attr("placeholder", "Cari perusahaan..."); + + wrapper + .find("select") + .addClass( + "px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" + ); + + wrapper + .find(".dt-paging .dt-paging-button") + .addClass( + "px-3 py-2 mx-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all duration-200" + ); + + wrapper + .find(".dt-paging .dt-paging-button.current") + .addClass("bg-blue-600 text-white border-blue-600 hover:bg-blue-700") + .removeClass("bg-white text-gray-700"); + + wrapper + .find(".dt-paging .dt-paging-button.disabled") + .addClass("opacity-50 cursor-not-allowed"); + + wrapper.find(".dt-length").addClass("flex items-center space-x-2"); + wrapper.find(".dt-search").addClass("flex items-center space-x-2"); + wrapper.find(".dt-info").addClass("text-sm text-gray-600"); + + $("#pengangkutanTable").removeClass("dataTable").addClass("w-full"); + $("#pengangkutanTable thead th").addClass( + "bg-cyan-400 text-white font-semibold text-sm uppercase tracking-wider border-b" + ); + + wrapper.find(".dtr-control").remove(); + + $("#pengangkutanTable tbody tr").addClass( + "transition-all duration-200" + ); + }, + drawCallback: function () { + $("#pengangkutanTable tbody tr") + .removeClass("bg-blue-50") + .hover( + function () { + $(this).addClass( + "bg-blue-50 shadow-sm transform transition-all duration-200" + ); + }, + function () { + $(this).removeClass("bg-blue-50 shadow-sm transform"); + } + ); + + $("#pengangkutanTable tbody tr:even").addClass("bg-gray-50"); + $("#pengangkutanTable tbody tr:odd").addClass("bg-white"); + }, + }); + } else { + loadPengangkutanDataManually(); + } +} + +function loadPengangkutanDataManually() { + fetch("/website/data/pengangkutan-data.json") + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + const tbody = document.querySelector("#pengangkutanTable tbody"); + tbody.innerHTML = ""; + + data.forEach((item, index) => { + const row = document.createElement("tr"); + row.className = `${ + index % 2 === 0 ? "bg-gray-50" : "bg-white" + } hover:bg-blue-50 transition-all duration-200`; + + const date = new Date(item.tglBerlakuIzin); + const formattedDate = date.toLocaleDateString("id-ID", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + const today = new Date(); + const expiry = new Date(item.tglBerlakuIzin); + const daysUntilExpiry = Math.ceil( + (expiry - today) / (1000 * 60 * 60 * 24) + ); + + let statusClass = "bg-green-100 text-green-800"; + let statusText = `${daysUntilExpiry} hari`; + + if (daysUntilExpiry < 0) { + statusClass = "bg-red-100 text-red-800"; + statusText = "Expired"; + } else if (daysUntilExpiry < 30) { + statusClass = "bg-red-100 text-red-800"; + } else if (daysUntilExpiry < 90) { + statusClass = "bg-yellow-100 text-yellow-800"; + } + + row.innerHTML = ` + ${item.no} + ${item.nama} + ${item.alamat} + +
${formattedDate}
+ + ${statusText} + + + `; + + tbody.appendChild(row); + }); + + const loadingIndicator = document.getElementById("loadingIndicator"); + if (loadingIndicator) { + loadingIndicator.style.display = "none"; + } + + addManualSearch(data); + }) + .catch((error) => { + console.error("Error loading data:", error); + const loadingIndicator = document.getElementById("loadingIndicator"); + if (loadingIndicator) { + loadingIndicator.innerHTML = ` +
+ + Error memuat data: ${error.message} +
+ `; + } + }); +} + +function addManualSearch(data) { + const tableContainer = document + .querySelector("#pengangkutanTable") + .closest(".bg-white"); + if (!document.getElementById("manualSearchInput")) { + const searchContainer = document.createElement("div"); + searchContainer.className = "mb-4 flex justify-end"; + searchContainer.innerHTML = ` +
+ +
+ + + +
+
+ `; + + tableContainer.insertBefore( + searchContainer, + document.querySelector(".overflow-x-auto") + ); + + document + .getElementById("manualSearchInput") + .addEventListener("input", function (e) { + const searchTerm = e.target.value.toLowerCase(); + const rows = document.querySelectorAll("#pengangkutanTable tbody tr"); + + rows.forEach((row) => { + const text = row.textContent.toLowerCase(); + if (text.includes(searchTerm)) { + row.style.display = ""; + } else { + row.style.display = "none"; + } + }); + }); + } +} diff --git a/wwwroot/website/js/datatables_pengolahan.js b/wwwroot/website/js/datatables_pengolahan.js new file mode 100644 index 0000000..1abee9a --- /dev/null +++ b/wwwroot/website/js/datatables_pengolahan.js @@ -0,0 +1,301 @@ +document.addEventListener("DOMContentLoaded", function () { + initializePengolahanDataTable(); +}); + +function initializePengolahanDataTable() { + if (!document.getElementById("pengolahanTable")) return; + + if (typeof $ !== "undefined" && $.fn.DataTable) { + $("#pengolahanTable").DataTable({ + ajax: { + url: "/website/data/pengolahan-data.json", + type: "GET", + dataSrc: "", + }, + columns: [ + { + data: "no", + className: "px-6 py-4 text-sm text-gray-900 text-center font-medium", + title: "No", + width: "8%", + }, + { + data: "nama", + className: "px-6 py-4 text-sm text-gray-900 font-medium", + title: "Nama Perusahaan", + width: "28%", + }, + { + data: "alamat", + className: "px-6 py-4 text-sm text-gray-700", + title: "Alamat", + width: "50%", + }, + { + data: "tglBerlakuIzin", + className: "px-6 py-4 text-sm text-gray-900 text-center", + title: "Berlaku Hingga", + width: "25%", + render: function (data, type, row) { + if (type === "display") { + const date = new Date(data); + const formattedDate = date.toLocaleDateString("id-ID", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + const today = new Date(); + const expiry = new Date(data); + const daysUntilExpiry = Math.ceil( + (expiry - today) / (1000 * 60 * 60 * 24) + ); + + let statusClass = "bg-green-100 text-green-800"; + if (daysUntilExpiry < 30) { + statusClass = "bg-red-100 text-red-800"; + } else if (daysUntilExpiry < 90) { + statusClass = "bg-yellow-100 text-yellow-800"; + } + + return `
+
${formattedDate}
+ + ${ + daysUntilExpiry > 0 + ? `${daysUntilExpiry} hari` + : "Expired" + } + +
`; + } + return data; + }, + }, + ], + language: { + search: "Cari:", + lengthMenu: "Tampilkan _MENU_ data per halaman", + info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data", + infoEmpty: "Menampilkan 0 sampai 0 dari 0 data", + infoFiltered: "(disaring dari _MAX_ total data)", + paginate: { + first: "Pertama", + last: "Terakhir", + next: "Selanjutnya", + previous: "Sebelumnya", + }, + emptyTable: "Tidak ada data yang tersedia", + zeroRecords: "Tidak ditemukan data yang sesuai", + }, + pageLength: 10, + responsive: false, + ordering: true, + searching: true, + paging: true, + info: true, + autoWidth: false, + scrollX: false, + layout: { + topStart: { + pageLength: { + text: "Tampilkan _MENU_ data", + }, + }, + topEnd: { + search: { + placeholder: "Cari perusahaan pengolahan...", + }, + }, + bottomStart: "info", + bottomEnd: "paging", + }, + initComplete: function () { + $("#loadingIndicator").hide(); + + const wrapper = $(".dataTables_wrapper"); + + wrapper + .find('input[type="search"]') + .addClass( + "block w-full px-4 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 w-full" + ) + .attr("placeholder", "Cari perusahaan pengolahan..."); + + wrapper + .find("select") + .addClass( + "px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" + ); + + wrapper + .find(".dt-paging .dt-paging-button") + .addClass( + "px-3 py-2 mx-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all duration-200" + ); + + wrapper + .find(".dt-paging .dt-paging-button.current") + .addClass("bg-blue-600 text-white border-blue-600 hover:bg-blue-700") + .removeClass("bg-white text-gray-700"); + + wrapper + .find(".dt-paging .dt-paging-button.disabled") + .addClass("opacity-50 cursor-not-allowed"); + + wrapper.find(".dt-length").addClass("flex items-center space-x-2"); + wrapper.find(".dt-search").addClass("flex items-center space-x-2"); + wrapper.find(".dt-info").addClass("text-sm text-gray-600"); + + $("#pengolahanTable").removeClass("dataTable").addClass("w-full"); + $("#pengolahanTable thead th").addClass( + "bg-cyan-400 text-white font-semibold text-sm uppercase tracking-wider border-b" + ); + + wrapper.find(".dtr-control").remove(); + + $("#pengolahanTable tbody tr").addClass("transition-all duration-200"); + }, + drawCallback: function () { + $("#pengolahanTable tbody tr") + .removeClass("bg-blue-50") + .hover( + function () { + $(this).addClass( + "bg-blue-50 shadow-sm transform transition-all duration-200" + ); + }, + function () { + $(this).removeClass("bg-blue-50 shadow-sm transform"); + } + ); + + $("#pengolahanTable tbody tr:even").addClass("bg-gray-50"); + $("#pengolahanTable tbody tr:odd").addClass("bg-white"); + }, + }); + } else { + loadPengolahanDataManually(); + } +} + +function loadPengolahanDataManually() { + fetch("/website/data/pengolahan-data.json") + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + const tbody = document.querySelector("#pengolahanTable tbody"); + tbody.innerHTML = ""; + + data.forEach((item, index) => { + const row = document.createElement("tr"); + row.className = `${ + index % 2 === 0 ? "bg-gray-50" : "bg-white" + } hover:bg-blue-50 transition-all duration-200`; + + const date = new Date(item.tglBerlakuIzin); + const formattedDate = date.toLocaleDateString("id-ID", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + const today = new Date(); + const expiry = new Date(item.tglBerlakuIzin); + const daysUntilExpiry = Math.ceil( + (expiry - today) / (1000 * 60 * 60 * 24) + ); + + let statusClass = "bg-green-100 text-green-800"; + let statusText = `${daysUntilExpiry} hari`; + + if (daysUntilExpiry < 0) { + statusClass = "bg-red-100 text-red-800"; + statusText = "Expired"; + } else if (daysUntilExpiry < 30) { + statusClass = "bg-red-100 text-red-800"; + } else if (daysUntilExpiry < 90) { + statusClass = "bg-yellow-100 text-yellow-800"; + } + + row.innerHTML = ` + ${item.no} + ${item.nama} + ${item.alamat} + +
${formattedDate}
+ + ${statusText} + + + `; + + tbody.appendChild(row); + }); + + const loadingIndicator = document.getElementById("loadingIndicator"); + if (loadingIndicator) { + loadingIndicator.style.display = "none"; + } + + addManualSearch(data); + }) + .catch((error) => { + console.error("Error loading data:", error); + const loadingIndicator = document.getElementById("loadingIndicator"); + if (loadingIndicator) { + loadingIndicator.innerHTML = ` +
+ + Error memuat data: ${error.message} +
+ `; + } + }); +} + +function addManualSearch(data) { + const tableContainer = document + .querySelector("#pengolahanTable") + .closest(".bg-white"); + if (!document.getElementById("manualSearchInput")) { + const searchContainer = document.createElement("div"); + searchContainer.className = "mb-4 flex justify-end"; + searchContainer.innerHTML = ` +
+ +
+ + + +
+
+ `; + + tableContainer.insertBefore( + searchContainer, + document.querySelector(".overflow-x-auto") + ); + + document + .getElementById("manualSearchInput") + .addEventListener("input", function (e) { + const searchTerm = e.target.value.toLowerCase(); + const rows = document.querySelectorAll("#pengolahanTable tbody tr"); + + rows.forEach((row) => { + const text = row.textContent.toLowerCase(); + if (text.includes(searchTerm)) { + row.style.display = ""; + } else { + row.style.display = "none"; + } + }); + }); + } +} diff --git a/wwwroot/website/js/dropdown.js b/wwwroot/website/js/dropdown.js new file mode 100644 index 0000000..0ffc3cf --- /dev/null +++ b/wwwroot/website/js/dropdown.js @@ -0,0 +1,199 @@ +let activeDropdown = null; +let isAnimating = false; + +function toggleDropdown(sectionId) { + if (isAnimating) return; + const content = document.getElementById(sectionId); + const header = content.previousElementSibling; + const icon = header.querySelector(".dropdown-icon"); + + isAnimating = true; + + if (content.classList.contains("open")) { + closeDropdown(content, header, icon); + activeDropdown = null; + } else { + if (activeDropdown) { + const activeContent = document.getElementById(activeDropdown); + const activeHeader = activeContent.previousElementSibling; + const activeIcon = activeHeader.querySelector(".dropdown-icon"); + closeDropdown(activeContent, activeHeader, activeIcon); + } + + openDropdown(content, header, icon, sectionId); + activeDropdown = sectionId; + } + + setTimeout(() => { + isAnimating = false; + }, 500); +} + +function openDropdown(content, header, icon, sectionId) { + createRipple(header, event); + + content.classList.add("opening"); + header.classList.add("active"); + + content.style.maxHeight = content.scrollHeight + "px"; + content.classList.add("open"); + + icon.style.transform = "rotate(180deg) scale(1.1)"; + setTimeout(() => { + icon.style.transform = "rotate(180deg) scale(1)"; + }, 150); + + const items = content.querySelectorAll("h3, p, ul, table, .content-item"); + items.forEach((item, index) => { + item.style.opacity = "0"; + item.style.transform = "translateY(20px)"; + setTimeout(() => { + item.style.opacity = "1"; + item.style.transform = "translateY(0)"; + }, 100 + index * 50); + }); + + setTimeout(() => { + content.classList.remove("opening"); + }, 400); +} + +function closeDropdown(content, header, icon) { + content.classList.add("closing"); + header.classList.remove("active"); + + const items = content.querySelectorAll("h3, p, ul, table, .content-item"); + items.forEach((item) => { + item.style.opacity = "0"; + item.style.transform = "translateY(-10px)"; + }); + + setTimeout(() => { + content.classList.remove("open"); + content.style.maxHeight = "0px"; + icon.style.transform = "rotate(0deg)"; + }, 150); + + setTimeout(() => { + content.classList.remove("closing"); + }, 400); +} + +function createRipple(element, event) { + const ripple = document.createElement("div"); + ripple.className = "ripple-effect"; + + const rect = element.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = + (event?.clientX || rect.left + rect.width / 2) - rect.left - size / 2; + const y = + (event?.clientY || rect.top + rect.height / 2) - rect.top - size / 2; + + ripple.style.cssText = ` + position: absolute; + width: ${size}px; + height: ${size}px; + left: ${x}px; + top: ${y}px; + background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%); + border-radius: 50%; + transform: scale(0); + pointer-events: none; + z-index: 1; + `; + + element.style.position = "relative"; + element.style.overflow = "hidden"; + element.appendChild(ripple); + + setTimeout(() => { + ripple.remove(); + }, 600); +} + +document.addEventListener("DOMContentLoaded", function () { + const style = document.createElement("style"); + style.textContent = ` + @keyframes ripple-animation { + to { + transform: scale(2); + opacity: 0; + } + } + + @keyframes glow-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } + 50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } + } + + @keyframes slide-in { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + `; + document.head.appendChild(style); + + const dropdownContents = document.querySelectorAll(".dropdown-content"); + dropdownContents.forEach((content, index) => { + content.style.maxHeight = "0px"; + content.style.overflow = "hidden"; + content.style.transition = + "max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease"; + + content.style.animation = `slide-in 0.6s ease ${index * 0.1}s both`; + + const items = content.querySelectorAll("h3, p, ul, table"); + items.forEach((item) => { + if (!item.classList.contains("content-item")) { + item.classList.add("content-item"); + } + }); + }); + + const dropdownHeaders = document.querySelectorAll(".dropdown-header"); + dropdownHeaders.forEach((header, index) => { + header.style.animation = `slide-in 0.6s ease ${index * 0.1}s both`; + + header.addEventListener("mouseenter", function () { + this.style.transform = "translateY(-2px)"; + }); + + header.addEventListener("mouseleave", function () { + this.style.transform = "translateY(0)"; + }); + }); +}); + +document.addEventListener("click", function (event) { + if ( + !event.target.closest(".dropdown-header") && + !event.target.closest(".dropdown-content") + ) { + if (activeDropdown && !isAnimating) { + const content = document.getElementById(activeDropdown); + const header = content.previousElementSibling; + const icon = header.querySelector(".dropdown-icon"); + + closeDropdown(content, header, icon); + activeDropdown = null; + } + } +}); + +document.addEventListener("keydown", function (event) { + if (event.key === "Escape" && activeDropdown) { + const content = document.getElementById(activeDropdown); + const header = content.previousElementSibling; + const icon = header.querySelector(".dropdown-icon"); + + closeDropdown(content, header, icon); + activeDropdown = null; + } +}); diff --git a/wwwroot/website/js/helpdesk.js b/wwwroot/website/js/helpdesk.js new file mode 100644 index 0000000..6d87c6d --- /dev/null +++ b/wwwroot/website/js/helpdesk.js @@ -0,0 +1,382 @@ +let isWhatsAppWidgetOpen = false; + +document.addEventListener("DOMContentLoaded", function () { + updateCurrentTime(); + setInterval(updateCurrentTime, 60000); +}); + +function toggleWhatsAppWidget() { + const popup = document.getElementById("whatsappPopup"); + const button = document.querySelector(".whatsapp-button"); + + if (!isWhatsAppWidgetOpen) { + popup.classList.add("show"); + button.style.transform = "rotate(360deg)"; + isWhatsAppWidgetOpen = true; + + setTimeout(() => { + const message = document.querySelector(".chat-message"); + if (message) { + message.style.animation = "slideInUp 0.5s ease-out"; + } + }, 200); + } else { + popup.classList.remove("show"); + button.style.transform = "rotate(0deg)"; + isWhatsAppWidgetOpen = false; + } +} + +function sendWhatsAppMessage(prefilledMessage, helpdesk = "sistem") { + const helpdeskNumbers = { + sistem: "6285212436339", + blud: "6282211001180", + }; + + const phoneNumber = helpdeskNumbers[helpdesk]; + const message = + prefilledMessage || + `Halo, saya membutuhkan bantuan mengenai ${ + helpdesk === "sistem" ? "Sistem Pesapakawan" : "BLUD UPST" + }.`; + const encodedMessage = encodeURIComponent(message); + const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`; + + const button = document.querySelector(".whatsapp-chat-btn"); + if (button) { + button.style.transform = "scale(0.95)"; + setTimeout(() => { + button.style.transform = "scale(1)"; + }, 150); + } + + window.open(whatsappUrl, "_blank"); + + setTimeout(() => { + toggleWhatsAppWidget(); + }, 300); +} + +function showHelpdeskSelection(prefilledMessage) { + const modal = document.createElement("div"); + modal.className = "helpdesk-modal"; + modal.innerHTML = ` +
+

Pilih Helpdesk

+

Silakan pilih helpdesk yang sesuai dengan kebutuhan Anda:

+
+ + +
+ +
+ `; + + document.body.appendChild(modal); + + setTimeout(() => { + modal.classList.add("show"); + }, 10); +} + +function selectHelpdesk(helpdesk, message) { + closeHelpdeskModal(); + sendWhatsAppMessage(message, helpdesk); +} + +function closeHelpdeskModal() { + const modal = document.querySelector(".helpdesk-modal"); + if (modal) { + modal.classList.remove("show"); + setTimeout(() => { + modal.remove(); + }, 300); + } +} + +function updateCurrentTime() { + const timeElement = document.getElementById("currentTime"); + if (timeElement) { + const now = new Date(); + const timeString = now.toLocaleTimeString("id-ID", { + hour: "2-digit", + minute: "2-digit", + }); + timeElement.textContent = timeString; + } +} + +document.addEventListener("click", function (event) { + const widget = document.querySelector(".whatsapp-widget"); + const popup = document.getElementById("whatsappPopup"); + + if (widget && !widget.contains(event.target) && isWhatsAppWidgetOpen) { + popup.classList.remove("show"); + document.querySelector(".whatsapp-button").style.transform = "rotate(0deg)"; + isWhatsAppWidgetOpen = false; + } +}); + +document.addEventListener("click", function (event) { + if (event.target.closest(".whatsapp-popup")) { + event.stopPropagation(); + } +}); + +document.addEventListener("DOMContentLoaded", function () { + const optionButtons = document.querySelectorAll(".option-btn"); + + optionButtons.forEach((button, index) => { + button.style.animationDelay = `${index * 0.1}s`; + button.classList.add("fade-in-up"); + }); +}); + +const style = document.createElement("style"); +style.textContent = ` + .fade-in-up { + animation: fadeInUp 0.6s ease-out forwards; + opacity: 0; + transform: translateY(20px); + } + + @keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } + } +`; +document.head.appendChild(style); + +function showTypingIndicator() { + const messageContainer = document.querySelector(".chat-message"); + const typingIndicator = document.createElement("div"); + typingIndicator.className = "typing-indicator"; + typingIndicator.innerHTML = ` +
+ + + +
+ `; + + messageContainer.appendChild(typingIndicator); + + setTimeout(() => { + typingIndicator.remove(); + }, 2000); +} + +document.addEventListener("DOMContentLoaded", function () { + const whatsappButton = document.querySelector(".whatsapp-button"); + + whatsappButton.addEventListener("mouseenter", function () { + this.style.animationPlayState = "paused"; + }); + + whatsappButton.addEventListener("mouseleave", function () { + this.style.animationPlayState = "running"; + }); +}); + +function createRipple(event) { + const button = event.currentTarget; + const circle = document.createElement("span"); + const diameter = Math.max(button.clientWidth, button.clientHeight); + const radius = diameter / 2; + + circle.style.width = circle.style.height = `${diameter}px`; + circle.style.left = `${event.clientX - button.offsetLeft - radius}px`; + circle.style.top = `${event.clientY - button.offsetTop - radius}px`; + circle.classList.add("ripple"); + + const ripple = button.getElementsByClassName("ripple")[0]; + if (ripple) { + ripple.remove(); + } + + button.appendChild(circle); +} + +document.addEventListener("DOMContentLoaded", function () { + const buttons = document.querySelectorAll(".option-btn, .whatsapp-chat-btn"); + buttons.forEach((button) => { + button.addEventListener("click", createRipple); + }); +}); + +const rippleStyle = document.createElement("style"); +rippleStyle.textContent = ` + .ripple { + position: absolute; + border-radius: 50%; + transform: scale(0); + animation: ripple 600ms linear; + background-color: rgba(255, 255, 255, 0.6); + pointer-events: none; + } + + @keyframes ripple { + to { + transform: scale(4); + opacity: 0; + } + } + + .option-btn, .whatsapp-chat-btn { + position: relative; + overflow: hidden; + } + + /* Helpdesk Modal Styles */ + .helpdesk-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; + opacity: 0; + transition: opacity 0.3s ease; + } + + .helpdesk-modal.show { + opacity: 1; + } + + .helpdesk-modal-content { + background: white; + border-radius: 15px; + padding: 25px; + max-width: 450px; + width: 90%; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + transform: translateY(20px); + transition: transform 0.3s ease; + } + + .helpdesk-modal.show .helpdesk-modal-content { + transform: translateY(0); + } + + .helpdesk-modal h3 { + margin: 0 0 10px 0; + color: #333; + font-size: 20px; + font-weight: 600; + } + + .helpdesk-modal p { + margin: 0 0 20px 0; + color: #666; + font-size: 14px; + } + + .helpdesk-options { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 20px; + } + + .helpdesk-option { + display: flex; + align-items: center; + gap: 15px; + padding: 15px; + border: 2px solid #e9ecef; + border-radius: 10px; + background: #f8f9fa; + cursor: pointer; + transition: all 0.3s ease; + text-align: left; + } + + .helpdesk-option:hover { + border-color: #25D366; + background: #f0fff4; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2); + } + + .option-icon { + font-size: 24px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: #25D366; + border-radius: 8px; + color: white; + } + + .option-details h4 { + margin: 0 0 5px 0; + font-size: 16px; + font-weight: 600; + color: #333; + } + + .option-details p { + margin: 0 0 5px 0; + font-size: 14px; + color: #25D366; + font-weight: 600; + } + + .option-details small { + font-size: 12px; + color: #666; + } + + .close-modal { + width: 100%; + padding: 12px; + background: #6c757d; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: background 0.3s ease; + } + + .close-modal:hover { + background: #5a6268; + } + + @media (max-width: 480px) { + .helpdesk-modal-content { + margin: 20px; + width: calc(100% - 40px); + } + + .helpdesk-option { + flex-direction: column; + text-align: center; + gap: 10px; + } + } +`; +document.head.appendChild(rippleStyle); diff --git a/wwwroot/website/js/site.js b/wwwroot/website/js/site.js index 0937657..e69de29 100644 --- a/wwwroot/website/js/site.js +++ b/wwwroot/website/js/site.js @@ -1,4 +0,0 @@ -// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification -// for details on configuring this project to bundle and minify static web assets. - -// Write your JavaScript code.