Merge branch '35153/01' into 'main'

35153/01

See merge request imp/dki-bps-rw!2

.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

BpsRwApp.csproj

@@ -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>
 

Controllers/DashboardController.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BpsRw.Controllers
+{
+    public class DashboardController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Reports()
+        {
+            return View();
+        }
+    }
+}

Controllers/RumahMemilahController.cs

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

Views/Dashboard/Index.cshtml

@@ -0,0 +1,5 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Dashboard";
+    ViewData["DashboardActive"] = "menu-active";
+}

Views/RumahMemilah/Index.cshtml

@@ -0,0 +1,157 @@
+@{
+    Layout = "_LayoutApp";
+    ViewData["Title"] = "Rumah Memilah";
+    ViewData["RumahMemilahActive"] = "menu-active";
+}
+
+<div class="breadcrumbs text-sm">
+    <ul>
+        <li class="text-gray-500"><a>Data Sudin</a></li>
+        <li>Rumah Memilah</li>
+    </ul>
+</div>
+
+<!-- Header -->
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+    <div class="prose">
+        <h3 class="mb-2">Rumah Memilah</h3>
+    </div>
+    <div class="justify-self-end lg:self-center">
+        <a class="btn bg-white rounded-full" href="#">
+            <span class="icon icon-fill me-2">filter_list</span>
+            Filter
+        </a>
+    </div>
+</div>
+
+<div class="h-8"></div>
+
+<div class="card bg-white shadow-sm">
+    <div class="card-body p-2">
+        <div class="overflow-x-auto">
+            <table class="table table-zebra">
+                <!-- head -->
+                <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Kecamatan</th>
+                    <th>Jumlah RW</th>
+                    <th>Total Rumah</th>
+                    <th>Rumah Aktif Memilah</th>
+                    <th>Rumah Nasabah</th>
+                    <th>Bank Sampah</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th>1</th>
+                    <td>Kebayoran Baru</td>
+                    <td>92</td>
+                    <td>701</td>
+                    <td>581</td>
+                    <td>581</td>
+                    <td>581</td>
+                </tr>
+                <tr>
+                    <th>2</th>
+                    <td>Tebet</td>
+                    <td>44</td>
+                    <td>934</td>
+                    <td>889</td>
+                    <td>889</td>
+                    <td>889</td>
+                </tr>
+                <tr>
+                    <th>3</th>
+                    <td>Mentang</td>
+                    <td>9</td>
+                    <td>1378</td>
+                    <td>673</td>
+                    <td>673</td>
+                    <td>673</td>
+                </tr>
+                <tr>
+                    <th>4</th>
+                    <td>Cilandak</td>
+                    <td>18</td>
+                    <td>1094</td>
+                    <td>790</td>
+                    <td>790</td>
+                    <td>790</td>
+                </tr>
+                <tr>
+                    <th>5</th>
+                    <td>Setiabudi</td>
+                    <td>17</td>
+                    <td>794</td>
+                    <td>750</td>
+                    <td>750</td>
+                    <td>750</td>
+                </tr>
+                <tr>
+                    <th>6</th>
+                    <td>Gambir</td>
+                    <td>4</td>
+                    <td>1573</td>
+                    <td>780</td>
+                    <td>780</td>
+                    <td>780</td>
+                </tr>
+                <tr>
+                    <th>7</th>
+                    <td>Cakung</td>
+                    <td>55</td>
+                    <td>1160</td>
+                    <td>552</td>
+                    <td>552</td>
+                    <td>552</td>
+                </tr>
+                <tr>
+                    <th>8</th>
+                    <td>Kepala Gading</td>
+                    <td>95</td>
+                    <td>1663</td>
+                    <td>582</td>
+                    <td>582</td>
+                    <td>582</td>
+                </tr>
+                <tr>
+                    <th>9</th>
+                    <td>Pancoran</td>
+                    <td>48</td>
+                    <td>730</td>
+                    <td>935</td>
+                    <td>935</td>
+                    <td>935</td>
+                </tr>
+                <tr>
+                    <th>10</th>
+                    <td>Tanah Abang</td>
+                    <td>80</td>
+                    <td>1046</td>
+                    <td>593</td>
+                    <td>593</td>
+                    <td>593</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="flex flex-col gap-2 md:flex-row justify-between items-center">
+            <a href="#" class="btn btn-ghost btn-sm">
+                <span class="icon icon-fill text-sm me-2">arrow_back</span>
+            Prev
+            </a>
+            <div class="join gap-2">
+                <button class="join-item btn btn-circle bg-bpsrw-500 text-white">1</button>
+                <button class="join-item btn btn-circle bg-white text-gray-500">2</button>
+                <button class="join-item btn btn-circle bg-white text-gray-500">...</button>
+                <button class="join-item btn btn-circle bg-white text-gray-500">5</button>
+                <button class="join-item btn btn-circle bg-white text-gray-500">6</button>
+            </div>
+            <a href="#" class="btn btn-ghost btn-sm">
+                Next
+                <span class="icon icon-fill text-sm ms-2">arrow_forward</span>
+            </a>
+        </div>
+    </div>
+</div>

Views/Shared/_Layout.cshtml

@@ -57,13 +57,13 @@
 
             <!-- Login Button -->
             <div class="flex-1 flex justify-end items-center gap-4">
-                <button class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
+                <a href="@Url.Action("Index", "Dashboard")" class="btn btn-success rounded-full shadow-none bg-bpsrw-500 border-0">
                     <span class="text-white text-base font-semibold font-jakarta leading-normal">Login</span>
-                </button>
+                </a>
             </div>
 
             <!-- Mobile Menu Button -->
-            <div class="dropdown lg:hidden">
+            <div class="dropdown dropdown-bottom dropdown-end lg:hidden">
                 <div tabindex="0" role="button" class="btn btn-ghost">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
@@ -102,7 +102,7 @@
                 </div>
 
                 <!-- Navigation Menu -->
-                <div class="flex justify-start items-center gap-8">
+                <div class="grid gap-8 grid-cols-4">
                     <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
                         <div class="text-white text-base font-semibold font-jakarta leading-normal">Beranda</div>
                     </a>

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"] - BPS RW</title>
+
+    <!-- Meta tags untuk SEO -->
+    <meta name="description" content="Aplikasi Bank Sampah Digital untuk mengelola sampah dan mendapatkan reward">
+    <meta name="keywords" content="bank sampah, recycle, environment, go green, sampah">
+    <meta name="author" content="Bank Sampah Digital">
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="@ViewData[" Title"] - Bank Sampah Digital">
+    <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="bg-gray-100 min-h-dvh 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,33 @@
+<div class="navbar sticky top-0 z-20 w-full justify-between bg-base-100 lg:justify-end">
+    <div class="navbar-start">
+        <label for="my-drawer-2" class="btn bg-bpsrw-500 text-white drawer-button btn-square lg:hidden">
+            <span class="icon icon-outline">menu_open</span>
+        </label>
+    </div>
+    <div class="navbar-end gap-4">
+        <label class="input rounded-full bg-gray-100">
+            <span class="icon icon-outline text-gray-400">search</span>
+            <input type="search" required placeholder="Cari berkas atau data..." />
+        </label>
+        <button class="btn btn-ghost btn-square border-gray-200 rounded-lg">
+            <span class="icon icon-outline">help</span>
+        </button>
+        <button class="btn btn-ghost btn-square border-gray-200 rounded-lg avatar avatar-online">
+            <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-2 border-bpsrw-500">
+                <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,137 @@
+<label class="drawer-overlay" for="my-drawer-2" aria-label="close sidebar"></label>
+
+<aside class="min-h-screen bg-base-100 border-e border-gray-200">
+    <!-- Navbar -->
+    <div
+        class="navbar sticky top-0 hidden border-b border-gray-200 items-center justify-center gap-2 bg-profiling-500 px-4 py-2 font-bold lg:z-50 lg:flex">
+        <img src="/images/logo.png" alt="Logo" width="48" />
+        <span>BPS RW</span>
+    </div>
+    <ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-80 p-4">
+        <!-- Sidebar content here -->
+        <li>
+            <a href="@Url.Action("Index", "Dashboard")" class="text-gray-500 @ViewData["DashboardActive"]">
+                <span class="icon icon-fill">analytics</span>
+                Dashboard
+            </a>
+        </li>
+        <li>
+            <details open>
+                <summary class="text-bpsrw-500 font-semibold">DATA SUDIN</summary>
+                <ul>
+                    <li>
+                        <a href="@Url.Action("Index", "RumahMemilah")" class="text-gray-500 @ViewData["RumahMemilahActive"]">
+                            <span class="icon icon-fill">house</span>
+                            Rumah Memilah
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">playlist_add_check</span>
+                            Checklist Harian
+                        </a>
+                    </li>
+                </ul>
+            </details>
+        </li>
+        <li>
+            <details open>
+                <summary class="text-bpsrw-500 font-semibold">DATA KECAMATAN</summary>
+                <ul>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data Kecamatan
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">house</span>
+                            Rumah Memilah
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">playlist_add_check</span>
+                            Checklist Harian
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data RW
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data RT
+                        </a>
+                    </li>
+                </ul>
+            </details>
+        </li>
+        <li>
+            <details open>
+                <summary class="text-bpsrw-500 font-semibold">DATA RUMAH</summary>
+                <ul>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">house</span>
+                            Rumah
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">playlist_add_check</span>
+                            Potensi Rumah
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data Bank Sampah
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data Pendamping RW
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">list</span>
+                            Data Berat Sampah
+                        </a>
+                    </li>
+                </ul>
+            </details>
+        </li>
+        <li>
+            <details open>
+                <summary class="text-bpsrw-500 font-semibold">DATA VERIFIKASI</summary>
+                <ul>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">house</span>
+                            Laporan RW
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">playlist_add_check</span>
+                            Checklist Harian
+                        </a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500">
+                            <span class="icon icon-fill">playlist_add_check</span>
+                            Total Checklist Rumah
+                        </a>
+                    </li>
+                </ul>
+            </details>
+        </li>
+    </ul>
+</aside>

package.json

@@ -3,11 +3,15 @@
   "version": "1.0.0",
   "description": "BPW RW Application",
   "scripts": {
-    "build-css": "tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/site.css --watch",
-    "build": "tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/site.css --minify"
+    "build-css": "npx @tailwindcss/cli -i ./wwwroot/css/input.css -o ./wwwroot/css/site.css --watch",
+    "build": "npx @tailwindcss/cli -i ./wwwroot/css/input.css -o ./wwwroot/css/site.css --minify"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.10",
-    "daisyui": "^4.12.10"
+    "daisyui": "^5.1.26",
+    "tailwindcss": "^4.1.13"
+  },
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.13",
+    "@tailwindcss/typography": "^0.5.19"
   }
 }

wwwroot/css/input.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui/theme" {
+    name: 'light';
+}
 
 /* Custom styles untuk Bank Sampah App */
 @layer components {
@@ -94,3 +97,52 @@
     }
   }
 }
+
+@theme {
+    --color-bpsrw-25: #EFFFF2;
+    --color-bpsrw-50: #D3E3D6;
+    --color-bpsrw-100: #B6D0BB;
+    --color-bpsrw-200: #91B998;
+    --color-bpsrw-300: #6DA276;
+    --color-bpsrw-400: #488A54;
+    --color-bpsrw-500: #247332;
+    --color-bpsrw-600: #1E602A;
+    --color-bpsrw-700: #184D21;
+    --color-bpsrw-800: #123919;
+    --color-bpsrw-900: #0C2611;
+}
+
+.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-bpsrw-500 text-white border-b-[3px] border-bpsrw-600 font-semibold;
+}
+
+.menu-sidebar a:active,
+.menu-sidebar a.menu-active,
+.menu-sidebar details > summary:active {
+    @apply bg-bpsrw-500 text-white;
+}
+
+@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;
+}