style: add page transaksi laporan

control & pagination

.gitlab/merge_request_templates/Default.md

@@ -0,0 +1,28 @@
+# MERGE REQUEST
+
+## Summary
+
+(Summarize the changes that have been made)
+
+## Videos
+
+- Please upload videos if there are interactions included: e.g: progress bar, spinner, popup, drawer, etc
+- Remove this section if not uploading Videos
+
+## Screenshots
+
+- Show whole browser screenshot with URL bar shown where the route is shown
+- Remove this section if not uploading Screenshots
+
+## Redmine
+
+- Put any related links related to this Merge Request
+
+## Checklist
+
+Change the `[ ]` to `[x]` for each of these list that are applicable, remove any list item that are not applicable
+
+- [ ] I fixed|updated|added unit tests and integration tests for each feature (if applicable).
+- [ ] No `error` nor `warning` in the console.
+- [ ] I added videos for the developed feature / bug fix. (Please upload videos if there are interactions included: e.g: progress bar, spinner, popup, drawer, etc)
+- [ ] I added screenshots of developed feature

BankSampahApp.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net9.0</TargetFramework>
@@ -15,6 +15,7 @@
     <PackageReference Include="Microsoft.Extensions.Logging.ApplicationInsights" Version="2.22.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="9.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.0" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="9.0.0" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.8.1" />
   </ItemGroup>
 
@@ -27,4 +28,10 @@
     </Content>
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include=".gitlab\.gitkeep" />
+    <None Include=".gitlab\merge_request_templates\.gitkeep" />
+    <None Include=".gitlab\merge_request_templates\Default.md" />
+  </ItemGroup>
+
 </Project>

BankSampahApp.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36518.9 d17.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BankSampahApp", "BankSampahApp.csproj", "{078C2387-84C7-749E-CF2F-39F220EE6AC2}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{078C2387-84C7-749E-CF2F-39F220EE6AC2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{078C2387-84C7-749E-CF2F-39F220EE6AC2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{078C2387-84C7-749E-CF2F-39F220EE6AC2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{078C2387-84C7-749E-CF2F-39F220EE6AC2}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {0A72A21C-64CB-4E58-B1C3-B0021BE77706}
+	EndGlobalSection
+EndGlobal

Controllers/DashboardController.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers
+{
+    public class DashboardController : Controller
+    {
+        // GET: DashboardController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+    }
+}

Controllers/DataBankSampahController.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers
+{
+    public class DataBankSampahController : Controller
+    {
+        public ActionResult Index()
+        {
+            return View();
+        }
+    }
+}

Controllers/DataOfftakerController.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers
+{
+    public class DataOfftakerController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

Controllers/TransaksiLaporanController.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers
+{
+    public class TransaksiLaporanController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

Properties/launchSettings.json

@@ -0,0 +1,12 @@
+{
+  "profiles": {
+    "BankSampahApp": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:62517;http://localhost:62518"
+    }
+  }
+}

Views/Dashboard/Index.cshtml

@@ -0,0 +1,173 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Dashboard";
+    ViewData["DashboardActive"] = "menu-active";
+}
+
+<div class="flex">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">Dashboard Administrator</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white">
+    <div class="card-body gap-0">
+        <span class="text-gray-500">Selamat Datang</span>
+        <span class="bg-gradient-to-r from-[#089A7B] to-[#46C881] bg-clip-text text-2xl font-semibold text-transparent">Sudin Kota M. Fransisco</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+    <div class="card bg-gradient-to-tl from-[#88C293] to-[#247332] text-white">
+        <div class="card-body">
+            <div class="card-title">
+                <i class="ph ph-building-office text-2xl"></i>
+            </div>
+            <div class="flex">
+                <div class="flex w-3/5 flex-col gap-0 self-end">
+                    <span>Total BSI</span>
+                    <span class="text-3xl">1203 Unit</span>
+                </div>
+                <div class="divider divider-horizontal before:bg-white after:bg-white"></div>
+                <div class="grid w-2/5 grid-rows-3 gap-2 text-[12px]">
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Sudah Verifikasi</span>
+                        <span>145 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Belum Verifikasi</span>
+                        <span>5432 Unit</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card bg-gradient-to-tl from-indigo-200 to-blue-700 text-white">
+        <div class="card-body">
+            <div class="card-title">
+                <i class="ph ph-building-office text-2xl"></i>
+            </div>
+            <div class="flex">
+                <div class="flex w-3/5 flex-col gap-0 self-end">
+                    <span>Total BSU</span>
+                    <span class="text-3xl">1203 Unit</span>
+                </div>
+                <div class="divider divider-horizontal before:bg-white after:bg-white"></div>
+                <div class="grid w-2/5 grid-rows-3 gap-2 text-[12px]">
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Sudah Aktif</span>
+                        <span>145 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Belum Aktif</span>
+                        <span>5432 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Ditolak</span>
+                        <span>5432 Unit</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card bg-gradient-to-tl from-amber-200 to-amber-700 text-white">
+        <div class="card-body">
+            <div class="card-title">
+                <i class="ph ph-factory text-2xl"></i>
+            </div>
+            <div class="flex">
+                <div class="flex w-3/5 flex-col gap-0 self-end">
+                    <span>Total Offtaker</span>
+                    <span class="text-3xl">39 Unit</span>
+                </div>
+                <div class="divider divider-horizontal before:bg-white after:bg-white"></div>
+                <div class="grid w-2/5 grid-rows-3 gap-2 text-[12px]">
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Sudah Aktif</span>
+                        <span>145 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Belum Aktif</span>
+                        <span>5432 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Ditolak</span>
+                        <span>5432 Unit</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card bg-gradient-to-tl from-violet-200 to-violet-700 text-white">
+        <div class="card-body">
+            <div class="card-title">
+                <i class="ph ph-users-three text-2xl"></i>
+            </div>
+            <div class="flex">
+                <div class="flex w-3/5 flex-col gap-0 self-end">
+                    <span>Total Nasabah</span>
+                    <span class="text-3xl">2780 Unit</span>
+                </div>
+                <div class="divider divider-horizontal before:bg-white after:bg-white"></div>
+                <div class="grid w-2/5 grid-rows-3 gap-2 text-[12px]">
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Sudah Aktif</span>
+                        <span>145 Unit</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-semibold">Belum Aktif</span>
+                        <span>5432 Unit</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSI</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSU</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah Offtaker</div>
+            <div class="stat-value">89.4 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+</div>

Views/DataBankSampah/Index.cshtml

@@ -0,0 +1,195 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Data Bank Sampah";
+    ViewData["DataBankSampahActive"] = "menu-active";
+}
+
+<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">
+            Data Bank Sampah
+        </span>
+    </div>
+
+    <div>
+        <button class="btn btn-sm rounded-full bg-white" onclick="modal_filter.showModal()">
+            <i class="ph ph-funnel-simple"></i>
+            Filter
+        </button>
+    </div>
+</div>
+
+<!-- Modal Filter -->
+<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <h3 class="text-lg font-bold">Filter</h3>
+        <form action="#" method="get">
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Jenis Bank Sampah</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih salah satu</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Kategori Bank Sampah</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih salah satu</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Status Bank Sampah</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih salah satu</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="button" class="btn btn-outline rounded-full" onclick="modal_filter.close()">Tutup</button>
+                <button type="submit" class="btn bg-bank-sampah-primary-500 rounded-full text-white">Terapkan</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+<!-- /modal filter -->
+
+<div class="h-6"></div>
+
+<div class="card bg-white">
+    <div class="card-body p-2">
+        @await Html.PartialAsync("Components/Table/_Control")
+        <div class="overflow-x-auto">
+            <table class="table-zebra table">
+                <!-- head -->
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Nama Bank Sampah</th>
+                        <th>Kabupaten</th>
+                        <th>Kecamatan</th>
+                        <th>Kelurahan</th>
+                        <th>Jenis Bank Sampah</th>
+                        <th>Kategori Bank Sampah</th>
+                        <th>Status</th>
+                        <th>Aksi</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th>1</th>
+                        <td>Bank Sampah Hijau Sej...</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Cipayung</td>
+                        <td>Kebon Jeruk</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>2</th>
+                        <td>Bank Sampah Cinta Lin...</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Matraman</td>
+                        <td>Pancoran</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>3</th>
+                        <td>Bank Sampah Bersih Ja...</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Kramat Jati</td>
+                        <td>Kembangan</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>4</th>
+                        <td>Bank Sampah Mandiri</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Pulogadung</td>
+                        <td>Sene</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>5</th>
+                        <td>Bank Sampah Roda Hij...</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Cakung</td>
+                        <td>Kebayoran Baru</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-error badge-soft rounded-full">
+                                Belum Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>6</th>
+                        <td>Bank Sampah Karya Be...</td>
+                        <td>Kota Adm Jakar...</td>
+                        <td>Jatinegara</td>
+                        <td>Menteng</td>
+                        <td>BSU</td>
+                        <td>Warga</td>
+                        <td>
+                            <div class="badge badge-error badge-soft rounded-full">
+                                Belum Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        @await Html.PartialAsync("Components/Table/_Pagination")
+    </div>
+</div>

Views/DataOfftaker/Index.cshtml

@@ -0,0 +1,186 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Data Offtaker";
+    ViewData["DataOfftakerActive"] = "menu-active";
+}
+
+<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">
+            Data Offtaker
+        </span>
+    </div>
+
+    <div class="flex flex-col gap-2 md:flex-row">
+        <button class="btn btn-sm max-w-full rounded-full bg-white" onclick="modal_download.showModal()">
+            <i class="ph ph-download"></i>
+            Download
+        </button>
+        <button class="btn btn-sm bg-bank-sampah-primary-500 max-w-full rounded-full text-white">
+            <i class="ph ph-plus"></i>
+            Tambah Offtaker
+        </button>
+    </div>
+</div>
+
+<!-- Modal Download -->
+<dialog id="modal_download" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <form method="dialog">
+            <button class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2">✕</button>
+        </form>
+        <h3 class="text-lg font-bold">Download Data</h3>
+        <form action="#" method="get">
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Jumlah Nasabah</legend>
+                <select class="select w-full">
+                    <option disabled selected>Semua</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="submit" class="btn bg-bank-sampah-primary-500 w-full rounded-full text-white">Download</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+<!-- /modal download -->
+
+<div class="h-6"></div>
+
+<div class="card bg-white">
+    <div class="card-body p-2">
+        @await Html.PartialAsync("Components/Table/_Control")
+        <div class="overflow-x-auto">
+            <table class="table-zebra table">
+                <!-- head -->
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Nama Offtaker</th>
+                        <th>Kabupaten</th>
+                        <th>Kecamatan</th>
+                        <th>Status</th>
+                        <th>Aksi</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th>1</th>
+                        <td>Andi Prabowo</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Cipayung</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>2</th>
+                        <td>Siti Nurhaliza</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Matraman</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>3</th>
+                        <td>Budi Santoso</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Kramat Jati</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>4</th>
+                        <td>Nina Sari</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Pulogadung</td>
+                        <td>
+                            <div class="badge badge-success badge-soft rounded-full">
+                                Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>5</th>
+                        <td>Dewi Lestasi</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Cakung</td>
+                        <td>
+                            <div class="badge badge-error badge-soft rounded-full">
+                                Belum Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>6</th>
+                        <td>Rudi Hartono</td>
+                        <td>Kota Adm Jakarta Timur</td>
+                        <td>Jatinegara</td>
+                        <td>
+                            <div class="badge badge-error badge-soft rounded-full">
+                                Belum Disetujui
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" class="btn btn-circle btn-primary btn-sm">
+                                <i class="ph ph-eye"></i>
+                            </a>
+                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
+                                <i class="ph ph-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        @await Html.PartialAsync("Components/Table/_Pagination")
+    </div>
+</div>

Views/Shared/Components/Table/_Control.cshtml

@@ -0,0 +1,18 @@
+<div class="flex w-full flex-col items-center justify-between gap-2 rounded-t-md bg-gray-50 p-2 md:flex-row md:gap-0">
+    <div>
+        <span>Show</span>
+        <select class="select select-sm mx-1 w-16">
+            <option value="10" selected>10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+        </select>
+        <span>Entries</span>
+    </div>
+    <div>
+        <label class="input input-sm rounded-full">
+            <i class="ph ph-magnifying-glass"></i>
+            <input type="search" required placeholder="Cari data disini..." />
+        </label>
+    </div>
+</div>

Views/Shared/Components/Table/_Pagination.cshtml

@@ -0,0 +1,23 @@
+<div class="flex w-full flex-col items-center justify-between gap-2 p-2 md:flex-row md:gap-0">
+    <div>
+        <span>
+            Showing 1 to 10 of 57 entries
+        </span>
+    </div>
+    <div>
+        <div class="join">
+            <button class="join-item btn-ghost btn-sm btn" disabled>
+                <i class="ph ph-arrow-left"></i>
+                Prev
+            </button>
+            <button class="join-item btn-ghost btn-sm btn btn-active rounded-lg">1</button>
+            <button class="join-item btn-ghost btn-sm btn rounded-lg">2</button>
+            <button class="join-item btn-ghost btn-sm btn rounded-lg">3</button>
+            <button class="join-item btn-ghost btn-sm btn rounded-lg">4</button>
+            <button class="join-item btn-ghost btn-sm btn rounded-lg">
+                Next
+                <i class="ph ph-arrow-right"></i>
+            </button>
+        </div>
+    </div>
+</div>

Views/Shared/_Layout.cshtml

@@ -63,7 +63,7 @@
             </div>
 
             <div class="navbar-end">
-                <button class="btn bg-green-800 hover:bg-green-700 text-white border-none px-8 py-2.5 rounded-full font-semibold text-base font-jakarta">Login</button>
+                <a href="@Url.Action("Index","Dashboard")" class="btn bg-green-800 hover:bg-green-700 text-white border-none px-8 py-2.5 rounded-full font-semibold text-base font-jakarta">Login</a>
             </div>
         </div>
     </header>

Views/Shared/_LayoutApp.cshtml

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>@ViewData["Title"] - E-Bank Sampah</title>
+
+    <!-- Meta tags untuk SEO -->
+    <meta name="description" content="Aplikasi E-Bank Sampah untuk mengelola sampah dan mendapatkan reward">
+    <meta name="keywords" content="bank sampah, recycle, environment, go green, sampah">
+    <meta name="author" content="E-Bank Sampah">
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="@ViewData[" Title"] - E-Bank Sampah">
+    <meta property="og:description" content="Kelola sampah Anda dengan mudah dan dapatkan reward!">
+    <meta property="og:type" content="website">
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+        rel="stylesheet">
+
+    <!-- Phosphor Icons -->
+    <link rel="stylesheet" type="text/css"
+        href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/regular/style.css" />
+    <link rel="stylesheet" type="text/css"
+        href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/fill/style.css" />
+
+    <!-- Material Icon -->
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+</head>
+
+<body class="min-h-dvh bg-gray-100 font-sans antialiased">
+    <div class="drawer md:drawer-open">
+        <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+        <div class="drawer-content">
+            @await Html.PartialAsync("_Navbar")
+            <!-- Page content here -->
+            <main class="container mx-auto p-6">
+                @RenderBody()
+            </main>
+        </div>
+        <div class="drawer-side z-50 lg:z-0">
+            @await Html.PartialAsync("_Sidebar")
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="~/js/site.js" asp-append-version="true"></script>
+    @await RenderSectionAsync("Scripts", required: false)
+</body>
+
+</html>

Views/Shared/_Navbar.cshtml

@@ -0,0 +1,29 @@
+<div class="navbar bg-base-100 sticky top-0 z-20 w-full justify-between lg:justify-end">
+    <div class="navbar-start">
+        <label for="my-drawer-2" class="btn bg-bpsrw-500 drawer-button btn-square lg:hidden">
+            <i class="ph ph-list text-lg"></i>
+        </label>
+    </div>
+    <div class="navbar-end gap-4">
+        <button class="btn btn-ghost btn-square rounded-lg border-gray-200">
+            <span class="icon icon-outline">help</span>
+        </button>
+        <button class="btn btn-ghost btn-square avatar avatar-online rounded-lg border-gray-200">
+            <span class="icon icon-outline">notifications</span>
+        </button>
+        <div class="divider divider-horizontal m-0"></div>
+        <div class="dropdown dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar border-bpsrw-500 border-2">
+                <div class="w-10 rounded-full">
+                    <img alt="Avatar"
+                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                </div>
+            </div>
+            <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+                <li><a>Profile</a></li>
+                <li><a>Settings</a></li>
+                <li><a href="@Url.Action("Index", "Home")">Logout</a></li>
+            </ul>
+        </div>
+    </div>
+</div>

Views/Shared/_Sidebar.cshtml

@@ -0,0 +1,69 @@
+<label class="drawer-overlay" for="my-drawer-2" aria-label="close sidebar"></label>
+
+<aside class="bg-base-100 min-h-screen">
+    <!-- Navbar -->
+    <div
+        class="navbar sticky top-0 hidden items-center justify-center gap-2 bg-gray-50 px-4 py-2 font-bold lg:z-50 lg:flex">
+        <div class="avatar bg-white">
+            <div class="w-10 rounded-md p-1 shadow">
+                <img src="/images/logo.png" alt="Logo" width="48" />
+            </div>
+        </div>
+        <span class="font-jakarta-plus text-xl">e-Bank Sampah</span>
+    </div>
+    <ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-64 p-4">
+        <!-- Sidebar content here -->
+        <li>
+            <a href="@Url.Action("Index","Dashboard")" class="w-full rounded-full text-gray-500 @ViewData["DashboardActive"]">
+                <i class="ph ph-gauge me-2 text-lg"></i>
+                Dashboard
+            </a>
+        </li>
+        <li>
+            <a href="@Url.Action("Index","DataBankSampah")" class="rounded-full text-gray-500 @ViewData["DataBankSampahActive"]">
+                <i class="ph ph-house-line me-2 text-lg"></i>
+                Data Bank Sampah
+            </a>
+        </li>
+        <li>
+            <a class="rounded-full text-gray-500">
+                <i class="ph ph-users-four me-2 text-lg"></i>
+                Data Nasabah
+            </a>
+        </li>
+        <li>
+            <a href="@Url.Action("Index","DataOfftaker")" class="rounded-full text-gray-500 @ViewData["DataOfftakerActive"]">
+                <i class="ph ph-read-cv-logo me-2 text-lg"></i>
+                Data Offtaker
+            </a>
+        </li>
+        <li>
+            <a href="@Url.Action("Index","TransaksiLaporan")" class="rounded-full text-gray-500 @ViewData["TransaksiLaporanActive"]">
+                <i class="ph ph-database me-2 text-lg"></i>
+                Transaksi Laporan
+            </a>
+        </li>
+    </ul>
+    <div class="card absolute inset-x-0 bottom-0 m-3 bg-gradient-to-tl from-[#FFDBAC] to-[#F79009] text-white">
+        <div class="card-body px-2 py-4">
+            <div class="card-title">
+                <i class="ph ph-whatsapp-logo text-lg"></i>
+                Help Desk
+            </div>
+            <hr class="text-white/30" />
+            <div class="flex flex-col gap-0">
+                <span>Senin s.d Jumat</span>
+                <span>08.00 - 15.00 WIB</span>
+            </div>
+            <hr class="text-white/30" />
+            <div class="flex flex-col gap-0">
+                <span class="font-semibold text-[10px]">
+                    Bidang Pengurangan dan Penanganan Sampah Dinas Lingkungan Hidup Provinsi DKI Jakarta
+                </span>
+                <span class="text-[10px]">
+                    Jl.Mandala V Cililitan Kramatjati Jakarta Timur
+                </span>
+            </div>
+        </div>
+    </div>
+</aside>

Views/TransaksiLaporan/Index.cshtml

@@ -0,0 +1,40 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Transaksi Laporan";
+    ViewData["TransaksiLaporanActive"] = "menu-active";
+}
+
+<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">
+            Transaksi Laporan
+        </span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white">
+    <div class="card-body">
+        <form class="grid-col-1 grid items-end gap-4 md:grid-cols-4">
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Tanggal Awal</legend>
+                <input type="date" class="input" />
+            </fieldset>
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Tanggal Akhir</legend>
+                <input type="date" class="input" />
+            </fieldset>
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Jenis Laporan</legend>
+                <select class="select">
+                    <option disabled selected>Pilih Jenis Laporan</option>
+                </select>
+            </fieldset>
+            <button class="btn bg-bank-sampah-primary-500 w-full rounded-full text-white">
+                Download Excel
+                <i class="ph ph-download ms-2"></i>
+            </button>
+        </form>
+    </div>
+</div>

package.json

@@ -7,7 +7,13 @@
     "build": "tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/site.css --minify"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.10",
-    "daisyui": "^4.12.10"
+    "daisyui": "^5.1.29",
+    "tailwindcss": "^4.1.14"
+  },
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.14",
+    "@tailwindcss/typography": "^0.5.19",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14"
   }
 }

tailwind.config.js

@@ -1,53 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./Views/**/*.cshtml",
-    "./wwwroot/js/**/*.js"
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        'jakarta': ['Plus Jakarta Sans', 'sans-serif'],
-      },
-    },
-  },
-  plugins: [
-    require('daisyui'),
-  ],
-  daisyui: {
-    themes: [
-      "light",
-      "dark",
-      "cupcake",
-      "bumblebee",
-      "emerald",
-      "corporate",
-      "synthwave",
-      "retro",
-      "cyberpunk",
-      "valentine",
-      "halloween",
-      "garden",
-      "forest",
-      "aqua",
-      "lofi",
-      "pastel",
-      "fantasy",
-      "wireframe",
-      "black",
-      "luxury",
-      "dracula",
-      "cmyk",
-      "autumn",
-      "business",
-      "acid",
-      "lemonade",
-      "night",
-      "coffee",
-      "winter",
-      "dim",
-      "nord",
-      "sunset",
-    ],
-  },
-}

tailwind.extension.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/refs/heads/main/tailwind.extension.schema.json",
+  "BuildFiles": [
+    {
+      "Input": "wwwroot\\css\\input.css",
+      "Output": "wwwroot\\css\\site.css",
+      "Behavior": "Default"
+    }
+  ],
+  "PackageConfigurationFile": null,
+  "CustomRegexes": {
+    "Razor": {
+      "Override": false,
+      "Values": []
+    },
+    "HTML": {
+      "Override": false,
+      "Values": []
+    },
+    "JavaScript": {
+      "Override": false,
+      "Values": []
+    }
+  },
+  "UseCli": true
+}

wwwroot/css/input.css

@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap);
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@tailwindcss/typography";
 
 /* Custom styles untuk Bank Sampah App */
 @layer components {
@@ -93,4 +94,59 @@
       line-height: 1.1;
     }
   }
+}
+
+@utility icon {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.5rem; /* 24px default */
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+@utility icon-outline {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+@utility icon-fill {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+@theme {
+    --font-jakarta-plus: "Plus Jakarta Sans", sans-serif;
+    --color-bank-sampah-primary-700: #184D21;
+    --color-bank-sampah-primary-600: #1E602A;
+    --color-bank-sampah-primary-500: #247332;
+    --color-bank-sampah-primary-200: #91B998;
+    --color-bank-sampah-primary-100: #B6D0BB;
+    --color-bank-sampah-primary-25: #EFFFF2;
+    --color-bank-sampah-secondary-700: #782D12;
+    --color-bank-sampah-secondary-600: #C94B1F;
+    --color-bank-sampah-secondary-500: #F15A25;
+    --color-bank-sampah-secondary-200: #F8AC92;
+    --color-bank-sampah-secondary-100: #FAC8B6;
+    --color-bank-sampah-secondary-25: #FCDED3;
+}
+
+.menu-sidebar a:active,
+.menu-sidebar a.menu-active,
+.menu-sidebar details > summary:active,
+.menu-sidebar a:hover,
+.menu-sidebar details > summary:hover {
+    @apply bg-bank-sampah-primary-500 rounded-full text-white;
+}
+
+.menu-sidebar a:active,
+.menu-sidebar a.menu-active,
+.menu-sidebar details > summary:active {
+    @apply bg-bank-sampah-primary-500 rounded-full text-white shadow-none;
+}
+
+.badge {
+    @apply text-nowrap;
 }