nicoarya20/dashboard-noc-desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dark/light mode toggle across dashboard and profile

Browse Source
This commit is contained in:
bipproduction
2026-02-09 11:24:34 +08:00
parent 5ed9637a88
commit df707fe29b
12 changed files with 167 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/.well-known/assetlinks.json
View File

@@ -1,12 +1,12 @@
[
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.example.makuro",
"sha256_cert_fingerprints": [
"00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00"
]
}
}
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.example.makuro",
"sha256_cert_fingerprints": [
"00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00"
]
}
}
]

34
src/components/ColorSchemeToggle.tsx Normal file
View File

@@ -0,0 +1,34 @@
import {
ActionIcon,
Group,
rem,
useComputedColorScheme,
useMantineColorScheme,
} from "@mantine/core";
import { IconMoon, IconSun } from "@tabler/icons-react";
export function ColorSchemeToggle() {
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme("light", {
getInitialValueInEffect: true,
});
return (
<Group justify="center">
<ActionIcon
onClick={() =>
setColorScheme(computedColorScheme === "light" ? "dark" : "light")
}
variant="default"
size="lg"
aria-label="Toggle color scheme"
>
{computedColorScheme === "light" ? (
<IconMoon style={{ width: rem(22), height: rem(22) }} stroke={1.5} />
) : (
<IconSun style={{ width: rem(22), height: rem(22) }} stroke={1.5} />
)}
</ActionIcon>
</Group>
);
}

2
src/frontend.tsx
View File

@@ -56,7 +56,7 @@ const app = (
});
}}
>
<MantineProvider theme={theme}>
<MantineProvider theme={theme} defaultColorScheme="dark">
<ModalsProvider>
<RouterProvider router={router} />
</ModalsProvider>

2
src/index.css
View File

@@ -21,4 +21,4 @@ body {
place-items: center;
min-width: 320px;
min-height: 100vh;
} */
} */

8
src/index.ts
View File

@@ -171,8 +171,8 @@ if (!isProduction) {
const file = Bun.file(filePath);
return new Response(file, {
headers: {
"Vary": "Accept-Encoding",
}
Vary: "Accept-Encoding",
},
});
}
@@ -181,8 +181,8 @@ if (!isProduction) {
if (fs.existsSync(indexHtml)) {
return new Response(Bun.file(indexHtml), {
headers: {
"Vary": "Accept-Encoding",
}
Vary: "Accept-Encoding",
},
});
}

30
src/manifest.json
View File

@@ -1,17 +1,17 @@
{
"name": "Makuro Base Template",
"short_name": "Makuro",
"description": "A high-performance full-stack React template",
"start_url": "/",
"display": "standalone",
"background_color": "#1a1a1a",
"theme_color": "#f3d5a3",
"icons": [
{
"src": "/logo.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
"name": "Makuro Base Template",
"short_name": "Makuro",
"description": "A high-performance full-stack React template",
"start_url": "/",
"display": "standalone",
"background_color": "#1a1a1a",
"theme_color": "#f3d5a3",
"icons": [
{
"src": "/logo.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
}

35
src/routes/dashboard/index.tsx
View File

@@ -56,7 +56,11 @@ function DashboardComponent() {
return (
<Container size="lg" py="xl">
<Title order={1} ta="center" className=" text-blue-600 p-4 rounded-lg mt-10 shadow-lg">
<Title
order={1}
ta="center"
className=" text-blue-600 p-4 rounded-lg mt-10 shadow-lg"
>
Dashboard Overview
</Title>
@@ -66,8 +70,7 @@ function DashboardComponent() {
p="xl"
radius="md"
mb="xl"
bg="rgba(251, 240, 223, 0.05)"
style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{ border: "1px solid var(--mantine-color-default-border)" }}
>
<Group justify="space-between">
<Group>
@@ -77,14 +80,14 @@ function DashboardComponent() {
radius="xl"
style={{
cursor: "pointer",
border: "2px solid rgba(251, 240, 223, 0.3)",
border: "2px solid var(--mantine-color-orange-filled)",
}}
onClick={() => navigate({ to: "/profile" })}
>
{snap.user?.name?.charAt(0).toUpperCase()}
</Avatar>
<div>
<Text size="lg" fw={600} c="#fbf0df">
<Text size="lg" fw={600}>
{snap.user?.name}
</Text>
<Text c="dimmed" size="sm">
@@ -104,23 +107,17 @@ function DashboardComponent() {
{/* Stats Grid */}
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="lg" mb="xl">
{statsData.map((stat, index) => (
<Card
key={index.toString()}
withBorder
p="lg"
radius="md"
bg="rgba(251, 240, 223, 0.05)"
>
<Card key={index.toString()} withBorder p="lg" radius="md">
<Group justify="space-between">
<Box>
<Text size="sm" c="dimmed">
{stat.title}
</Text>
<Text size="lg" fw={700} c="#fbf0df">
<Text size="lg" fw={700}>
{stat.value}
</Text>
</Box>
<Box c="#f3d5a3">{stat.icon}</Box>
<Box c="orange.6">{stat.icon}</Box>
</Group>
</Card>
))}
@@ -128,13 +125,7 @@ function DashboardComponent() {
<Grid gutter="lg">
<Grid.Col span={{ base: 12, md: 8 }}>
<Card
withBorder
p="lg"
radius="md"
mb="lg"
bg="rgba(251, 240, 223, 0.05)"
>
<Card withBorder p="lg" radius="md" mb="lg">
<Title order={3} mb="md">
System Performance
</Title>
@@ -171,7 +162,7 @@ function DashboardComponent() {
</Grid.Col>
<Grid.Col span={{ base: 12, md: 4 }}>
<Card withBorder p="lg" radius="md" bg="rgba(251, 240, 223, 0.05)">
<Card withBorder p="lg" radius="md">
<Title order={3} mb="md">
Server Status
</Title>

50
src/routes/dashboard/route.tsx
View File

@@ -30,6 +30,7 @@ import {
useNavigate,
} from "@tanstack/react-router";
import { useSnapshot } from "valtio";
import { ColorSchemeToggle } from "@/components/ColorSchemeToggle";
import { authClient } from "@/utils/auth-client";
import { authStore } from "../../store/auth";
@@ -101,7 +102,9 @@ function DashboardLayout() {
header={{ height: 70 }}
navbar={{
width: 280,
breakpoint: "sm",
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
}}
padding="md"
@@ -109,10 +112,10 @@ function DashboardLayout() {
transitionTimingFunction="ease"
>
<AppShell.Header
bg="rgba(26, 26, 26, 0.8)"
style={{
backdropFilter: "blur(10px)",
borderBottom: "1px solid rgba(251, 240, 223, 0.1)",
borderBottom: "1px solid var(--mantine-color-default-border)",
}}
>
<Group h="100%" px="md" justify="space-between">
@@ -122,24 +125,24 @@ function DashboardLayout() {
onClick={toggleMobile}
hiddenFrom="sm"
size="sm"
color="#f3d5a3"
/>
<Burger
opened={desktopOpened}
onClick={toggleDesktop}
visibleFrom="sm"
size="sm"
color="#f3d5a3"
/>
<Box visibleFrom="xs" ml="xs">
<Text
fw={800}
size="xl"
c="#f3d5a3"
c="orange.6"
style={{ letterSpacing: "-0.5px" }}
>
ADMIN
<Text span c="#fbf0df">
<Text span c="var(--mantine-color-text)">
PANEL
</Text>
</Text>
@@ -147,6 +150,8 @@ function DashboardLayout() {
</Group>
<Group gap="md">
<ColorSchemeToggle />
<Menu
shadow="md"
width={200}
@@ -158,24 +163,28 @@ function DashboardLayout() {
gap="xs"
style={{ cursor: "pointer" }}
p="xs"
hover-bg="rgba(255,255,255,0.05)"
className="hover:bg-gray-50 dark:hover:bg-white/5 rounded-md"
>
<div
style={{ textAlign: "right" }}
className="visible-from-sm"
>
<Text size="sm" fw={600} c="#fbf0df">
<Text size="sm" fw={600}>
{snap.user?.name}
</Text>
<Text size="xs" c="dimmed">
Administrator
</Text>
</div>
<Avatar
src={snap.user?.image}
radius="xl"
size="md"
style={{ border: "2px solid #f3d5a3" }}
style={{
border: "2px solid var(--mantine-color-orange-filled)",
}}
>
{snap.user?.name?.charAt(0)}
</Avatar>
@@ -184,6 +193,7 @@ function DashboardLayout() {
<Menu.Dropdown>
<Menu.Label>Akun</Menu.Label>
<Menu.Item
leftSection={
<IconUser style={{ width: rem(14), height: rem(14) }} />
@@ -192,6 +202,7 @@ function DashboardLayout() {
>
Profil Saya
</Menu.Item>
<Menu.Item
leftSection={
<IconSettings style={{ width: rem(14), height: rem(14) }} />
@@ -204,6 +215,7 @@ function DashboardLayout() {
<Menu.Divider />
<Menu.Label>Bahaya</Menu.Label>
<Menu.Item
color="red"
leftSection={
@@ -221,8 +233,7 @@ function DashboardLayout() {
<AppShell.Navbar
p="md"
bg="rgba(20, 20, 20, 1)"
style={{ borderRight: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{ borderRight: "1px solid var(--mantine-color-default-border)" }}
>
<AppShell.Section grow component={ScrollArea} mx="-md" px="md">
<Stack gap="xs" mt="md">
@@ -237,6 +248,7 @@ function DashboardLayout() {
<NavLink
onClick={() => {
navigate({ to: item.to });
if (mobileOpened) toggleMobile();
}}
leftSection={
@@ -254,20 +266,15 @@ function DashboardLayout() {
}
rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
active={isActive(item.to)}
variant="filled"
variant="light"
color="orange"
styles={{
root: {
borderRadius: rem(8),
marginBottom: rem(4),
backgroundColor: isActive(item.to)
? "rgba(243, 213, 163, 0.1)"
: "transparent",
color: isActive(item.to) ? "#f3d5a3" : "#fbf0df",
"&:hover": {
backgroundColor: "rgba(243, 213, 163, 0.05)",
},
},
label: {
fontSize: rem(14),
},
@@ -279,7 +286,7 @@ function DashboardLayout() {
</AppShell.Section>
<AppShell.Section
style={{ borderTop: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}
pt="md"
>
<NavLink
@@ -292,6 +299,7 @@ function DashboardLayout() {
}
styles={{ root: { borderRadius: rem(8) } }}
/>
<NavLink
label="Keluar"
onClick={handleLogout}
@@ -308,7 +316,7 @@ function DashboardLayout() {
</AppShell.Section>
</AppShell.Navbar>
<AppShell.Main bg="rgba(15, 15, 15, 1)">
<AppShell.Main>
<Box p="lg" style={{ minHeight: "calc(100vh - 100px)" }}>
<Outlet />
</Box>

17
src/routes/profile/edit.tsx
View File

@@ -71,7 +71,7 @@ function EditProfile() {
<Stack gap="xl">
<Group justify="space-between" align="center">
<Box>
<Title order={1} c="#f3d5a3">
<Title order={1} c="orange.6">
Edit Profil
</Title>
<Text c="dimmed" size="sm">
@@ -88,14 +88,13 @@ function EditProfile() {
</Button>
</Group>
<Divider color="rgba(251, 240, 223, 0.1)" />
<Divider style={{ opacity: 0.1 }} />
<Card
withBorder
radius="md"
p="xl"
bg="rgba(26, 26, 26, 0.5)"
style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{ border: "1px solid var(--mantine-color-default-border)" }}
>
<form onSubmit={form.onSubmit(handleUpdateProfile)}>
<Stack gap="md">
@@ -104,10 +103,9 @@ function EditProfile() {
placeholder="Masukkan nama lengkap Anda"
{...form.getInputProps("name")}
styles={{
label: { color: "#fbf0df", marginBottom: 8 },
label: { marginBottom: 8 },
input: {
backgroundColor: "rgba(0,0,0,0.2)",
color: "#fbf0df",
backgroundColor: "var(--mantine-color-default-soft)",
},
}}
/>
@@ -116,10 +114,9 @@ function EditProfile() {
placeholder="https://example.com/photo.jpg"
{...form.getInputProps("image")}
styles={{
label: { color: "#fbf0df", marginBottom: 8 },
label: { marginBottom: 8 },
input: {
backgroundColor: "rgba(0,0,0,0.2)",
color: "#fbf0df",
backgroundColor: "var(--mantine-color-default-soft)",
},
}}
/>

58
src/routes/profile/index.tsx
View File

@@ -34,6 +34,7 @@ import {
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useSnapshot } from "valtio";
import { ColorSchemeToggle } from "@/components/ColorSchemeToggle";
import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
import { authClient } from "@/utils/auth-client";
import { authStore } from "../../store/auth";
@@ -92,25 +93,22 @@ function Profile() {
withBorder
p="md"
radius="md"
bg="rgba(251, 240, 223, 0.03)"
style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{ border: "1px solid var(--mantine-color-default-border)" }}
>
<Group wrap="nowrap" align="flex-start">
<Box mt={3}>
<Icon size={20} stroke={1.5} color="#f3d5a3" />
<Icon
size={20}
stroke={1.5}
color="var(--mantine-color-orange-filled)"
/>
</Box>
<Box style={{ flex: 1 }}>
<Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={0.5}>
{label}
</Text>
<Group gap="xs" mt={4} wrap="nowrap">
<Text
fw={500}
size="sm"
c="#fbf0df"
truncate="end"
style={{ flex: 1 }}
>
<Text fw={500} size="sm" truncate="end" style={{ flex: 1 }}>
{value || "N/A"}
</Text>
{copyable && value && (
@@ -145,7 +143,7 @@ function Profile() {
{/* Header Section */}
<Group justify="space-between" align="center">
<Box>
<Title order={1} c="#f3d5a3">
<Title order={1} c="orange.6">
Profil Saya
</Title>
<Text c="dimmed" size="sm">
@@ -153,6 +151,7 @@ function Profile() {
</Text>
</Box>
<Group>
<ColorSchemeToggle />
{snap.user?.role === "admin" && (
<Button
variant="light"
@@ -182,20 +181,17 @@ function Profile() {
</Group>
</Group>
<Divider color="rgba(251, 240, 223, 0.1)" />
<Divider style={{ opacity: 0.1 }} />
{/* Profile Overview Card */}
<Card
withBorder
radius="lg"
p={0}
bg="rgba(26, 26, 26, 0.5)"
style={{ overflow: "hidden" }}
>
<Card withBorder radius="lg" p={0} style={{ overflow: "hidden" }}>
<Box
h={120}
bg="linear-gradient(45deg, #2c2c2c 0%, #1a1a1a 100%)"
style={{ borderBottom: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{
background:
"linear-gradient(45deg, var(--mantine-color-gray-filled) 0%, var(--mantine-color-dark-filled) 100%)",
borderBottom: "1px solid var(--mantine-color-default-border)",
}}
/>
<Box px="xl" pb="xl" style={{ marginTop: rem(-60) }}>
<Group align="flex-end" gap="xl" mb="md">
@@ -204,16 +200,14 @@ function Profile() {
size={120}
radius={120}
style={{
border: "4px solid #1a1a1a",
boxShadow: "0 4px 10px rgba(0,0,0,0.3)",
border: "4px solid var(--mantine-color-body)",
boxShadow: "var(--mantine-shadow-md)",
}}
>
{snap.user?.name?.charAt(0).toUpperCase()}
</Avatar>
<Stack gap={0} pb="md">
<Title order={2} c="#fbf0df">
{snap.user?.name}
</Title>
<Title order={2}>{snap.user?.name}</Title>
<Group gap="xs">
<Text c="dimmed" size="sm">
{snap.user?.email}
@@ -237,7 +231,7 @@ function Profile() {
<Grid gutter="lg">
<Grid.Col span={{ base: 12, md: 7 }}>
<Stack gap="md">
<Title order={4} c="#f3d5a3">
<Title order={4} c="orange.6">
Informasi Identitas
</Title>
<Grid gutter="sm">
@@ -279,15 +273,16 @@ function Profile() {
<Grid.Col span={{ base: 12, md: 5 }}>
<Stack gap="md">
<Title order={4} c="#f3d5a3">
<Title order={4} c="orange.6">
Keamanan & Sesi
</Title>
<Card
withBorder
radius="md"
p="lg"
bg="rgba(251, 240, 223, 0.03)"
style={{ border: "1px solid rgba(251, 240, 223, 0.1)" }}
style={{
border: "1px solid var(--mantine-color-default-border)",
}}
>
<Stack gap="md">
<Box>
@@ -312,9 +307,6 @@ function Profile() {
<Code
block
style={{
backgroundColor: "rgba(0,0,0,0.3)",
color: "#f3d5a3",
border: "1px solid rgba(251, 240, 223, 0.1)",
fontSize: rem(11),
flex: 1,
}}

41
src/sw.js
View File

@@ -1,25 +1,24 @@
const CACHE_NAME = 'makuro-v1';
const ASSETS = [
'/',
'/index.html',
'/logo.svg'
];
const CACHE_NAME = "makuro-v1";
const ASSETS = ["/", "/index.html", "/logo.svg"];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log('SW: Pre-caching assets');
return cache.addAll(ASSETS).catch(err => {
console.error('SW: Pre-cache failed (likely due to Vary header or missing file):', err);
});
})
);
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log("SW: Pre-caching assets");
return cache.addAll(ASSETS).catch((err) => {
console.error(
"SW: Pre-cache failed (likely due to Vary header or missing file):",
err,
);
});
}),
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
}),
);
});

10
src/vite.ts
View File

@@ -1,7 +1,7 @@
import path from "node:path";
import { inspectorServer } from "@react-dev-inspector/vite-plugin";
import { tanstackRouter } from "@tanstack/router-vite-plugin";
import tailwindcss from "@tailwindcss/vite";
import { tanstackRouter } from "@tanstack/router-vite-plugin";
import react from "@vitejs/plugin-react";
import { createServer as createViteServer } from "vite";
@@ -36,7 +36,13 @@ export async function createVite() {
},
appType: "custom",
optimizeDeps: {
include: ["react", "react-dom", "@mantine/core", "manifest.json", "sw.js"],
include: [
"react",
"react-dom",
"@mantine/core",
"manifest.json",
"sw.js",
],
},
});
}