Refactor New Ui Pengaturan Umum

src/components/pengaturan/umum.tsx

@@ -1,5 +1,6 @@
 import {
 	Alert,
+	Box,
 	Button,
 	Card,
 	Group,
@@ -11,34 +12,19 @@ import {
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import { IconInfoCircle } from "@tabler/icons-react";
 
 const UmumSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 	return (
-		<Card
+		<Box
-			withBorder
+			pr={"50%"}
-			radius="md"
-			p="xl"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "white" }}
 		>
 			<Title order={2} mb="lg">
-				Pengaturan Umum
+				Preferensi Tampilan
 			</Title>
-			<Text color="dimmed" mb="xl">
-				Kelola pengaturan umum aplikasi Anda
-			</Text>
-
-			<Space h="lg" />
-
-			<TextInput
-				label="Nama Aplikasi"
-				placeholder="Masukkan nama aplikasi"
-				defaultValue="Dashboard Desa Plus"
-				mb="md"
-			/>
 
 			<Select
 				label="Bahasa Aplikasi"
@@ -61,25 +47,48 @@ const UmumSettings = () => {
 				mb="md"
 			/>
 
-			<Group mb="md">
+			<DateInput
-				<Switch label="Notifikasi Email" defaultChecked />
+				label="Format Tanggal"
+				mb={"xl"}
+			/>
+
+			<Title order={2} mb="lg">
+				Dashboard
+			</Title>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>Refresh Otomatis</Text>
+				<Switch defaultChecked />
 			</Group>
 
-			<Alert
+			<Group mb="md" justify="space-between">
-				icon={<IconInfoCircle size={16} />}
+				<Text fw={"bold"} fz={"sm"}>Interval Refresh</Text>
-				title="Informasi"
+				<Select
-				color="blue"
+					data={[
-				mb="md"
+						{ value: "1", label: "30d" },
-			>
+						{ value: "2", label: "60d" },
-				Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan
+						{ value: "3", label: "90d" },
-				sepenuhnya.
+					]}
-			</Alert>
+					defaultValue="1"
+					w={90}
+				/>
+			</Group>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>Tampilkan Grid</Text>
+				<Switch defaultChecked />
+			</Group>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>Animasi Transisi</Text>
+				<Switch defaultChecked />
+			</Group>
 
 			<Group justify="flex-end" mt="xl">
 				<Button variant="outline">Batal</Button>
 				<Button>Simpan Perubahan</Button>
 			</Group>
-		</Card>
+		</Box>
 	);
 };
 

src/routes/pengaturan/akses-dan-tim.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
 
 export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
+	return <AksesDanTimSettings />;
 }

src/routes/pengaturan/keamanan.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import KeamananSettings from "@/components/pengaturan/keamanan";
 
 export const Route = createFileRoute("/pengaturan/keamanan")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/pengaturan/keamanan"!</div>;
+	return <KeamananSettings />;
 }

src/routes/pengaturan/notifikasi.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import NotifikasiSettings from "@/components/pengaturan/notifikasi";
 
 export const Route = createFileRoute("/pengaturan/notifikasi")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/pengaturan/notifikasi"!</div>;
+	return <NotifikasiSettings />;
 }