style: add tab surat usulan

Controllers/ProfilRwController.cs

@@ -103,5 +103,130 @@ namespace BpsRwApp.Controllers
 
             return Json(response);
         }
+
+        [HttpGet]
+        public IActionResult TableSuratUsulan()
+        {
+            var data = new[]
+            {
+                new {
+                    nama_surat = "Surat Permohonan Perbaikan Jalan Lingkungan",
+                    tanggal_surat = "11/07/2023",
+                    file_upload = "Surat Pengantar Proposal",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Rekomendasi untuk Pengajuan Kredit UMKM",
+                    tanggal_surat = "09/01/2023",
+                    file_upload = "Surat Undangan Rapat Warga",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",                    
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Pernyataan Persetujuan Pembangunan Pos Kamling",
+                    tanggal_surat = "21/04/2023",
+                    file_upload = "Surat Pemberitahuan Gotong Royong",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Keterangan Tidak Mampu untuk Berobat",
+                    tanggal_surat = "17/02/2023",
+                    file_upload = "Surat Keputusan Ketua RW",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Laporan Keuangan RW Triwulan II 2023",
+                    tanggal_surat = "18/08/2023",
+                    file_upload = "Surat Edaran Kebersihan",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Keputusan RW tentang Jadwal Ronda Malam",
+                    tanggal_surat = "14/05/2023",
+                    file_upload = "Surat Rekomendasi Usaha",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Pemberitahuan Kerja Bakti Rutin",
+                    tanggal_surat = "02/06/2023",
+                    file_upload = "Laporan Kegiatan RW",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Edaran tentang Pembayaran Iuran Sampah",
+                    tanggal_surat = "22/06/2023",
+                    file_upload = "Surat Keterangan Domisili",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Pengantar untuk Pembuatan KTP",
+                    tanggal_surat = "01/03/2023",
+                    file_upload = "Surat Permohonan Bantuan Dana",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+                new {
+                    nama_surat = "Surat Undangan Pertemuan Rutin PKK",
+                    tanggal_surat = "28/04/2023",
+                    file_upload = "Surat Pernyataan Kesanggupan",
+                    status = "<div class=\"badge badge-success badge-soft rounded-full\">Aktif</div>",
+                    aksi = "<div class=\"flex gap-2 \">" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Detail</a>" +
+                    "<a class=\"btn btn-sm btn-outline rounded-full\">Edit</a>" +
+                    "<a class=\"btn btn-sm btn-error btn-outline rounded-full\">Delete</a>" +
+                    "</div>"
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
     }
 }

Views/ProfilRw/Index.cshtml

@@ -25,18 +25,20 @@
 
 <!-- Tabs -->
 <div class="tabs tabs-lift">
-    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Profil" />
+    <input type="radio" name="tab_profil_rw" checked class="tab checked:text-white [--tab-bg:green]" aria-label="Profil" />
     <div class="tab-content bg-base-100 border-base-300 p-0">
-     @await Html.PartialAsync("_TabIndexProfil")
+        @await Html.PartialAsync("_TabIndexProfil")
     </div>
 
     <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="BPS-RW" />
     <div class="tab-content bg-base-100 border-base-300 p-0">
-     @await Html.PartialAsync("_TabIndexBpsRw")
+        @await Html.PartialAsync("_TabIndexBpsRw")
     </div>
 
     <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Surat Usulan" />
-    <div class="tab-content bg-base-100 border-base-300 p-0"></div>
+    <div class="tab-content bg-base-100 border-base-300 p-0">
+        @await Html.PartialAsync("_TabIndexSuratUsulan")
+    </div>
 
     <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Pengadaan Wadah" />
     <div class="tab-content bg-base-100 border-base-300 p-0"></div>
@@ -44,7 +46,7 @@
     <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Kebutuhan Sarpras" />
     <div class="tab-content bg-base-100 border-base-300 p-0"></div>
 
-    <input type="radio" name="tab_profil_rw" checked class="tab checked:text-white [--tab-bg:green]" aria-label="Lokasi TP3SR & Parkir Pengumpulan Sampah" />
+    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Lokasi TP3SR & Parkir Pengumpulan Sampah" />
     <div class="tab-content bg-base-100 border-base-300 p-0">
         @await Html.PartialAsync("_TabIndexLokasi")
     </div>
@@ -118,6 +120,51 @@
                 );
             });
         });
+
+        // Datatable Surat Usulan
+        var tableSuratUsulan = new DataTable('#tableSuratUsulan', {
+            ajax: '@Url.Action("TableSuratUsulan", "ProfilRw")',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'nama_surat' },
+                { data: 'tanggal_surat' },
+                { data: 'file_upload' },
+                { data: 'status' },
+                {
+                    data: 'aksi',
+                    orderable: false,
+                    searchable: false
+                },
+            ]
+        });
+
+        // Delete Button
+        tableSuratUsulan.on('click', '.btn-error', function () {
+            const id = $(this).data('id');
+
+            Swal.fire({
+                title: 'Apakah Anda yakin?',
+                text: "Data yang dihapus tidak dapat dikembalikan!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#ef4444',
+                cancelButtonColor: '#6b7280',
+                confirmButtonText: 'Ya, Hapus!',
+                cancelButtonText: 'Batal'
+            }).then((result) => {
+                Swal.fire(
+                    'Terhapus!',
+                    'Data berhasil dihapus.',
+                    'success'
+                );
+            });
+        });
+
     });
     </script>
 }

Views/ProfilRw/_TabIndexSuratUsulan.cshtml

@@ -0,0 +1,79 @@
+<div class="flex w-full flex-col items-end p-4">
+    <button onclick="modal_add_surat_usulan.showModal()"
+            class="btn btn-primary w-32 rounded-full text-white">
+        <span class="icon icon-fill me-2">add</span>
+        Tambah
+    </button>
+</div>
+<div class="overflow-x-auto">
+    <table class="table-zebra table w-full text-sm" id="tableSuratUsulan">
+        <thead>
+            <tr>
+                <th class="w-[5%]">No</th>
+                <th class="w-[50%]">Nama Surat</th>
+                <th class="w-[10%]">Tanggal Surat</th>
+                <th class="w-[10%]">File Upload</th>
+                <th class="w-[10%]">Status</th>
+                <th class="w-[15%]">Aksi</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+</div>
+
+<!--Modal Add Surat Usulan-->
+<dialog id="modal_add_surat_usulan" class="modal">
+    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
+        <!-- Close Button -->
+        <label onclick="modal_add_surat_usulan.close()"
+               class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">
+            ✕
+        </label>
+
+        <!-- Header -->
+        <h3 class="mb-5 text-lg font-semibold text-gray-800">Tambah Lokasi</h3>
+
+        <!-- Form -->
+        <form method="post" action="" class="gap-y-6">
+            <!-- Jenis Usulan -->
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">
+                    Jenis Usulan
+                </legend>
+                <select class="select w-full">
+                    <option value="">Pilih jenis usulan</option>
+                    <option value="TP3SR">TP3SR</option>
+                    <option value="Parkir Pengumpulan">Parkir Pengumpulan</option>
+                </select>
+            </fieldset>
+
+            <!-- Detail Usulan -->
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">
+                    Detail Usulan
+                </legend>
+                <textarea class="textarea h-24 w-full" placeholder="Detail Usulan"></textarea>
+            </fieldset>
+
+            <!-- Nomor Usulan -->
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">
+                    Nomor Usulan
+                </legend>
+                <input type="number" class="input w-full" placeholder="Nomor Usulan" />
+            </fieldset>
+
+            <!-- Action Button -->
+            <div class="modal-action flex justify-end gap-3">
+                <button onclick="modal_add_surat_usulan.close()" type="button" class="btn btn-outline btn-sm">
+                    <span class="icon me-1">cancel</span>
+                    Batalkan
+                </button>
+                <button type="submit" class="btn btn-primary btn-sm text-white">
+                    <span class="icon me-1">save</span>
+                    Simpan
+                </button>
+            </div>
+        </form>
+    </div>
+</dialog>