banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: slicing page dashboard 

role sudin
main
Yuri Dimas 2025-10-09 16:44:44 +07:00
parent 6598312c90
commit 8775685e3b
No known key found for this signature in database
GPG Key ID: 4A421F9108FB5D2C
7 changed files with 398 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Controllers/DashboardController.cs 100644
View File

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

173
Views/Dashboard/Index.cshtml 100644
View File

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

2
Views/Shared/_Layout.cshtml
View File

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

60
Views/Shared/_LayoutApp.cshtml 100644
View File

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

29
Views/Shared/_Navbar.cshtml 100644
View File

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

69
Views/Shared/_Sidebar.cshtml 100644
View File

@ -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 class="rounded-full text-gray-500">
<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 class="rounded-full text-gray-500">
<i class="ph ph-read-cv-logo me-2 text-lg"></i>
Data Offtaker
</a>
</li>
<li>
<a class="rounded-full text-gray-500">
<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>

52
wwwroot/css/input.css
View File

@ -1,3 +1,4 @@
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap);
@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";
@ -93,4 +94,55 @@
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;
}