Merge pull request #230 from bipproduction/amalia/13-september-24

Amalia/13 september 24

src/app/(application)/layout.tsx

@@ -10,7 +10,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
    const user = await funGetUserByCookies()
    return (
       <>
-         <WrapLayout role={user.idUserRole}>
+         <WrapLayout role={user.idUserRole} theme={user.theme}>
             {children}
          </WrapLayout>
       </>

src/app/api/theme/[id]/route.ts

@@ -0,0 +1,180 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { createLogUser } from "@/module/user";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+// GET ONE THEME
+export async function GET(request: Request, context: { params: { id: string } }) {
+   try {
+      const { id } = context.params;
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const data = await prisma.colorTheme.findUnique({
+         where: {
+            id: String(id),
+            isActive: true
+         }
+      });
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan anggota", data }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan member, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// HAPUS THEME
+export async function DELETE(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+      const { id } = context.params;
+      const data = await prisma.colorTheme.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Hapus tema gagal, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const update = await prisma.colorTheme.update({
+         where: {
+            id: id,
+         },
+         data: {
+            isActive: false,
+         },
+      });
+
+      // create log user
+      const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus tema', table: 'colorTheme', data: id })
+
+      return NextResponse.json({ success: true, message: "Tema berhasil dihapus", data, }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menghapus tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// EDIT THEME
+export async function PUT(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { id } = context.params;
+      const { name, utama, bgUtama, bgIcon, bgFiturHome, bgFiturDivision, bgTotalKegiatan } = (await request.json());
+      const data = await prisma.colorTheme.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Edit tema gagal, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const update = await prisma.colorTheme.update({
+         where: {
+            id: id,
+         },
+         data: {
+            name: name,
+            utama: utama,
+            bgUtama: bgUtama,
+            bgIcon: bgIcon,
+            bgFiturHome: bgFiturHome,
+            bgFiturDivision: bgFiturDivision,
+            bgTotalKegiatan: bgTotalKegiatan
+         },
+      });
+
+      // create log user
+      const log = await createLogUser({ act: 'UPDATE', desc: 'User mengedit data tema', table: 'colorTheme', data: id })
+
+      return NextResponse.json({ success: true, message: "Tema berhasil diedit", data, }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mengedit tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+
+// CHANGE THEME
+export async function POST(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+      const { id } = context.params;
+      const data = await prisma.colorTheme.count({
+         where: {
+            id: id,
+            isActive: true
+         },
+      });
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Ganti tema gagal, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const update = await prisma.village.update({
+         where: {
+            id: user.idVillage,
+         },
+         data: {
+            idTheme: id,
+         },
+      });
+
+      const dataTheme = await prisma.colorTheme.findUnique({
+         where: {
+            id: id
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'DELETE', desc: 'User mengganti tema', table: 'colorTheme', data: id })
+
+      return NextResponse.json({ success: true, message: "Tema berhasil diganti", data: dataTheme }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mengganti tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/theme/route.ts

@@ -0,0 +1,88 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { createLogUser } from "@/module/user";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+// GET ALL THEME
+export async function GET(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+
+      const data = await prisma.colorTheme.findMany({
+         where: {
+            OR: [
+               {
+                  isActive: true,
+                  idVillage: null
+               },
+               {
+                  isActive: true,
+                  idVillage: user.idVillage
+               },
+            ]
+         },
+         orderBy: {
+            createdAt: 'asc'
+         }
+      })
+
+      const desa = await prisma.village.findUnique({
+         where: {
+            id: user.idVillage
+         }
+      })
+
+      const result = data.map((v: any) => ({
+         ..._.omit(v, ["isUse"]),
+         isUse: (v.id == desa?.idTheme)
+      }))
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan tema", data: result }, { status: 200 });
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// CREATE THEME
+export async function POST(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { name, utama, bgUtama, bgIcon, bgFiturHome, bgFiturDivision, bgTotalKegiatan } = (await request.json());
+      const idVillage = user.idVillage
+      const data = await prisma.colorTheme.create({
+         data: {
+            name,
+            idVillage,
+            utama,
+            bgUtama,
+            bgIcon,
+            bgFiturHome,
+            bgFiturDivision,
+            bgTotalKegiatan
+         },
+         select: {
+            id: true
+         }
+      });
+
+      // create log user
+      const log = await createLogUser({ act: 'CREATE', desc: 'User membuat tema baru', table: 'colorTheme', data: data.id })
+
+
+      return NextResponse.json({ success: true, message: "Berhasil menambahkan tema" }, { status: 200 });
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menambahkan tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+};

src/module/_global/components/wrap_layout.tsx

@@ -1,16 +1,18 @@
 'use client'
 import { useHookstate } from "@hookstate/core";
-import { globalRole } from "../bin/val_global";
+import { globalRole, TEMA } from "../bin/val_global";
 import { useShallowEffect } from "@mantine/hooks";
 import { useEffect } from "react";
 
-export default function WrapLayout({ children, role }: { children: React.ReactNode, role: any }) {
+export default function WrapLayout({ children, role, theme }: { children: React.ReactNode, role: any, theme:any }) {
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
 
    useEffect(() => {
       roleLogin.set(role)
+      tema.set(theme)
    // eslint-disable-next-line react-hooks/exhaustive-deps
-   }, [role])
+   }, [role, theme])
    return (
       <>
          {children}

src/module/auth/api/funGetUserByCookies.ts

@@ -16,5 +16,25 @@ export default async function funGetUserByCookies() {
       },
    });
 
-   return  { id: user?.id, idUserRole: user?.idUserRole, name: user?.name, idVillage: user?.idVillage, idGroup: user?.idGroup, idPosition: user?.idPosition };
+   const village = await prisma.village.findUnique({
+      where: {
+         id: user?.idVillage
+      }
+   })
+
+   const warna = await prisma.colorTheme.findUnique({
+      where: {
+         id: String(village?.idTheme)
+      }
+   })
+
+   return {
+      id: user?.id,
+      idUserRole: user?.idUserRole,
+      name: user?.name,
+      idVillage: user?.idVillage,
+      idGroup: user?.idGroup,
+      idPosition: user?.idPosition,
+      theme: warna
+   };
 }

src/module/color_palette/lib/api_theme.ts

@@ -0,0 +1,54 @@
+import { IFormTheme } from "./type_theme";
+
+export const funGetAllTheme = async (path?: string) => {
+   const response = await fetch(`/api/theme${(path) ? path : ''}`, { next: { tags: ['theme'] } });
+   return await response.json().catch(() => null);
+};
+
+export const funGetThemeById = async (path: string) => {
+   const response = await fetch(`/api/theme/${path}`);
+   return await response.json().catch(() => null);
+};
+
+export const funCreateTheme = async (data: IFormTheme) => {
+   const response = await fetch("/api/theme", {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
+
+export const funDeleteTheme = async (path: string) => {
+   const response = await fetch(`/api/theme/${path}`, {
+      method: "DELETE",
+      headers: {
+         "Content-Type": "application/json",
+      }
+   });
+   return await response.json().catch(() => null);
+};
+
+export const funEditTheme = async (path: string, data: IFormTheme) => {
+   const response = await fetch(`/api/theme/${path}`, {
+      method: "PUT",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
+export const funChangeTheme = async (path: string) => {
+   const response = await fetch(`/api/theme/${path}`, {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      }
+   });
+   return await response.json().catch(() => null);
+};

src/module/color_palette/lib/type_theme.ts

@@ -0,0 +1,33 @@
+export interface IFormTheme {
+   name: string
+   utama: string
+   bgUtama: string
+   bgIcon: string
+   bgFiturHome: string
+   bgFiturDivision: string
+   bgTotalKegiatan: string
+}
+
+export interface IDataTheme{
+   id: string
+   idVillage:string
+   name: string
+   utama: string
+   bgUtama: string
+   bgIcon: string
+   bgFiturHome: string
+   bgFiturDivision: string
+   bgTotalKegiatan: string
+   isUse : boolean
+}
+
+export interface IEditTheme{
+   id: string
+   name: string
+   utama: string
+   bgUtama: string
+   bgIcon: string
+   bgFiturHome: string
+   bgFiturDivision: string
+   bgTotalKegiatan: string
+}

src/module/color_palette/lib/val_theme.ts

@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const globalRefreshTheme = hookstate<boolean>(false);

src/module/color_palette/ui/create_palette_color.tsx

@@ -3,18 +3,47 @@ import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
+import { funCreateTheme } from '../lib/api_theme';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
 
 export default function CreatePaletteColor() {
   const tema = useHookstate(TEMA)
+  const router = useRouter()
+  const [touched, setTouched] = useState({
+    name: false,
+    utama: false,
+    bgUtama: false,
+    bgIcon: false,
+    bgFiturHome: false,
+    bgFiturDivision: false,
+    bgTotalKegiatan: false,
+  });
+
   const [isWarna, setWarna] = useState({
-    judulTema: '',
+    name: '',
-    warnaUtama: '',
+    utama: '',
-    backgroundUtama: '',
+    bgUtama: '',
-    backgroundIcon: '',
+    bgIcon: '',
-    backgroundFiturHome: '',
+    bgFiturHome: '',
-    backgroundFiturDivisi: '',
+    bgFiturDivision: '',
-    backgroundTotalKegiatan: '',
+    bgTotalKegiatan: '',
   })
+
+  async function onSubmit() {
+    try {
+      const res = await funCreateTheme(isWarna)
+      if (res.success) {
+        toast.success(res.message);
+        router.push('/color-palette')
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      toast.error("Gagal menambahkan tema, coba lagi nanti");
+    }
+  }
   return (
     <Box>
       <LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
@@ -27,7 +56,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChange={
-              (e) => setWarna({ ...isWarna, judulTema: e.target.value })
+              (e) => {
+                setWarna({ ...isWarna, name: e.target.value })
+                setTouched({ ...touched, name: true })
+              }
+            }
+            error={
+              touched.name && (
+                isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -37,7 +74,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaUtama: color })
+              (color) => {
+                setWarna({ ...isWarna, utama: color })
+                setTouched({ ...touched, utama: true })
+              }
+            }
+            error={
+              touched.utama && (
+                isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -47,7 +92,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundUtama: color })
+              (color) => {
+                setWarna({ ...isWarna, bgUtama: color })
+                setTouched({ ...touched, bgUtama: true })
+              }
+            }
+            error={
+              touched.bgUtama && (
+                isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -57,7 +110,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundIcon: color })
+              (color) => {
+                setWarna({ ...isWarna, bgIcon: color })
+                setTouched({ ...touched, bgIcon: true })
+              }
+            }
+            error={
+              touched.bgIcon && (
+                isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -67,7 +128,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundFiturHome: color })
+              (color) => {
+                setWarna({ ...isWarna, bgFiturHome: color })
+                setTouched({ ...touched, bgFiturHome: true })
+              }
+            }
+            error={
+              touched.bgFiturHome && (
+                isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -77,7 +146,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
+              (color) => {
+                setWarna({ ...isWarna, bgFiturDivision: color })
+                setTouched({ ...touched, bgFiturDivision: true })
+              }
+            }
+            error={
+              touched.bgFiturDivision && (
+                isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -87,7 +164,15 @@ export default function CreatePaletteColor() {
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
+              (color) => {
+                setWarna({ ...isWarna, bgTotalKegiatan: color })
+                setTouched({ ...touched, bgTotalKegiatan: true })
+              }
+            }
+            error={
+              touched.bgTotalKegiatan && (
+                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
+              )
             }
           />
         </Stack>
@@ -99,62 +184,62 @@ export default function CreatePaletteColor() {
           >
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.warnaUtama} w={35} h={35} style={{
+                <Box bg={isWarna.utama} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.warnaUtama.length == 0 ? "" :
+              {isWarna.utama.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.utama}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
+                <Box bg={isWarna.bgUtama} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundUtama.length == 0 ? "" :
+              {isWarna.bgUtama.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgUtama}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
+                <Box bg={isWarna.bgIcon} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundIcon.length == 0 ? "" :
+              {isWarna.bgIcon.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgIcon}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
+                <Box bg={isWarna.bgFiturHome} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundFiturHome.length == 0 ? "" :
+              {isWarna.bgFiturHome.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgFiturHome}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
+                <Box bg={isWarna.bgFiturDivision} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundFiturDivisi.length == 0 ? "" :
+              {isWarna.bgFiturDivision.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgFiturDivision}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
+                <Box bg={isWarna.bgTotalKegiatan} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundTotalKegiatan.length == 0 ? "" :
+              {isWarna.bgTotalKegiatan.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgTotalKegiatan}</Pill>
               }
             </Flex>
           </SimpleGrid>
@@ -172,7 +257,7 @@ export default function CreatePaletteColor() {
           size="lg"
           radius={30}
           fullWidth
-        // onClick={() => { onSubmit() }}
+          onClick={() => { onSubmit() }}
         >
           Simpan
         </Button>

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -4,27 +4,52 @@ import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
-import { FaPencil } from 'react-icons/fa6';
+import toast from 'react-hot-toast';
-import { IoAddCircle, IoColorPalette } from 'react-icons/io5';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+import { IoColorPalette } from 'react-icons/io5';
+import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
+import { globalRefreshTheme } from '../lib/val_theme';
 
-export default function DrawerPaletEditEndDefault() {
+export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: string, idVillage: string }) {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
+  const [isModalDel, setModalDel] = useState(false)
   const tema = useHookstate(TEMA)
+  const refresh = useHookstate(globalRefreshTheme)
 
-  function onCLose(val: boolean) {
+  async function onChangeTheme() {
-    setModal(false)
+    try {
-    // tema.set({
+      const res = await funChangeTheme(id)
-    //   ...tema.get(),
+      if (res.success) {
-    //   utama:'#000'
+        tema.set(res.data)
-    // })
+        refresh.set(!refresh.get())
-    // router.refresh()
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mengubah tema, coba lagi nanti");
+    }
   }
+
+  async function onDelete() {
+    try {
+      const res = await funDeleteTheme(id)
+      if (res.success) {
+        toast.success(res.message);
+        refresh.set(!refresh.get())
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal menghapus tema, coba lagi nanti");
+    }
+  }
+
   return (
     <Box>
-      <SimpleGrid
+      <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-        cols={{ base: 2, sm: 3, lg: 3 }}
-      >
         <Flex justify={'center'} align={'center'} direction={'column'}
           onClick={() => setModal(true)}
         >
@@ -35,21 +60,49 @@ export default function DrawerPaletEditEndDefault() {
             <Text ta={'center'} c={tema.get().utama}>Gunakan Tema</Text>
           </Box>
         </Flex>
-        <Flex justify={'center'} align={'center'} direction={'column'}
+        {
-          onClick={() => router.push('/color-palette/update/1')}
+          (idVillage != '' && idVillage != null) &&
-        >
+          <>
-          <Box>
+            <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push(`/color-palette/edit/${id}`)} >
-            <FaPencil size={30} color={tema.get().utama} />
+              <Box>
-          </Box>
+                <FaPencil size={30} color={tema.get().utama} />
-          <Box>
+              </Box>
-            <Text ta={'center'} c={tema.get().utama}>Edit Tema</Text>
+              <Box>
-          </Box>
+                <Text ta={'center'} c={tema.get().utama}>Edit</Text>
-        </Flex>
+              </Box>
+            </Flex>
+
+            <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => { setModalDel(true) }} >
+              <Box>
+                <FaTrash size={30} color={tema.get().utama} />
+              </Box>
+              <Box>
+                <Text ta={'center'} c={tema.get().utama}>Hapus</Text>
+              </Box>
+            </Flex>
+          </>
+
+        }
       </SimpleGrid>
 
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
-        onYes={(val) => { onCLose(val) }} />
+        onYes={(val) => {
+          if (val) {
+            onChangeTheme()
+          }
+          setModal(false)
+        }} />
+
+
+      <LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
+        description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
+        onYes={(val) => {
+          if (val) {
+            onDelete()
+          }
+          setModalDel(false)
+        }} />
     </Box>
   );
 }

src/module/color_palette/ui/edit_palette_color.tsx

@@ -3,31 +3,96 @@ import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
+import { IEditTheme } from '../lib/type_theme';
+import toast from 'react-hot-toast';
+import { funEditTheme, funGetThemeById } from '../lib/api_theme';
+import { useParams, useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import LayoutModal from "@/module/_global/layout/layout_modal";
 
 export default function EditPaletteColor() {
   const tema = useHookstate(TEMA)
-  const [isWarna, setWarna] = useState({
+  const router = useRouter()
-    judulTema: '',
+  const [isModal, setModal] = useState(false)
-    warnaUtama: '',
+  const param = useParams<{ id: string }>()
-    backgroundUtama: '',
+  const [touched, setTouched] = useState({
-    backgroundIcon: '',
+    name: false,
-    backgroundFiturHome: '',
+    utama: false,
-    backgroundFiturDivisi: '',
+    bgUtama: false,
-    backgroundTotalKegiatan: '',
+    bgIcon: false,
+    bgFiturHome: false,
+    bgFiturDivision: false,
+    bgTotalKegiatan: false,
+  });
+
+  const [isWarna, setWarna] = useState<IEditTheme>({
+    id: '',
+    name: '',
+    utama: '',
+    bgUtama: '',
+    bgIcon: '',
+    bgFiturHome: '',
+    bgFiturDivision: '',
+    bgTotalKegiatan: '',
   })
+
+  async function getOneData() {
+    try {
+      const res = await funGetThemeById(param.id)
+      if (res.success) {
+        setWarna(res.data)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal menambahkan tema, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData()
+  }, [])
+
+
+  async function onSubmit() {
+    try {
+      const res = await funEditTheme(param.id, isWarna)
+      if (res.success) {
+        toast.success(res.message);
+        router.push('/color-palette')
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mengedit tema, coba lagi nanti");
+    }
+  }
+
+
   return (
     <Box>
       <LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
       <Box p={20}>
         <Stack>
-        <TextInput
+          <TextInput
             label={'Judul Tema'}
             placeholder='Judul Tema'
             required
             size="md"
             radius="md"
+            value={isWarna.name}
             onChange={
-              (e) => setWarna({ ...isWarna, judulTema: e.target.value })
+              (e) => {
+                setWarna({ ...isWarna, name: e.target.value })
+                setTouched({ ...touched, name: true })
+              }
+            }
+            error={
+              touched.name && (
+                isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -36,8 +101,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.utama}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaUtama: color })
+              (color) => {
+                setWarna({ ...isWarna, utama: color })
+                setTouched({ ...touched, utama: true })
+              }
+            }
+            error={
+              touched.utama && (
+                isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -46,8 +120,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.bgUtama}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundUtama: color })
+              (color) => {
+                setWarna({ ...isWarna, bgUtama: color })
+                setTouched({ ...touched, bgUtama: true })
+              }
+            }
+            error={
+              touched.bgUtama && (
+                isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -56,8 +139,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.bgIcon}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundIcon: color })
+              (color) => {
+                setWarna({ ...isWarna, bgIcon: color })
+                setTouched({ ...touched, bgIcon: true })
+              }
+            }
+            error={
+              touched.bgIcon && (
+                isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -66,8 +158,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.bgFiturHome}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundFiturHome: color })
+              (color) => {
+                setWarna({ ...isWarna, bgFiturHome: color })
+                setTouched({ ...touched, bgFiturHome: true })
+              }
+            }
+            error={
+              touched.bgFiturHome && (
+                isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -76,8 +177,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.bgFiturDivision}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
+              (color) => {
+                setWarna({ ...isWarna, bgFiturDivision: color })
+                setTouched({ ...touched, bgFiturDivision: true })
+              }
+            }
+            error={
+              touched.bgFiturDivision && (
+                isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
+              )
             }
           />
           <ColorInput
@@ -86,8 +196,17 @@ export default function EditPaletteColor() {
             required
             size="md"
             radius="md"
+            value={isWarna.bgTotalKegiatan}
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
+              (color) => {
+                setWarna({ ...isWarna, bgTotalKegiatan: color })
+                setTouched({ ...touched, bgTotalKegiatan: true })
+              }
+            }
+            error={
+              touched.bgTotalKegiatan && (
+                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
+              )
             }
           />
         </Stack>
@@ -99,66 +218,67 @@ export default function EditPaletteColor() {
           >
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.warnaUtama} w={35} h={35} style={{
+                <Box bg={isWarna.utama} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.warnaUtama.length == 0 ? "" :
+              {isWarna.utama.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.utama}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
+                <Box bg={isWarna.bgUtama} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundUtama.length == 0 ? "" :
+              {isWarna.bgUtama.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgUtama}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
+                <Box bg={isWarna.bgIcon} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundIcon.length == 0 ? "" :
+              {isWarna.bgIcon.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgIcon}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
+                <Box bg={isWarna.bgFiturHome} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundFiturHome.length == 0 ? "" :
+              {isWarna.bgFiturHome.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgFiturHome}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
+                <Box bg={isWarna.bgFiturDivision} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundFiturDivisi.length == 0 ? "" :
+              {isWarna.bgFiturDivision.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgFiturDivision}</Pill>
               }
             </Flex>
             <Flex justify={"center"} direction={"column"}>
               <Center>
-                <Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
+                <Box bg={isWarna.bgTotalKegiatan} w={35} h={35} style={{
                   borderRadius: 10
                 }} />
               </Center>
-              {isWarna.backgroundTotalKegiatan.length == 0 ? "" :
+              {isWarna.bgTotalKegiatan.length == 0 ? "" :
-                <Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
+                <Pill size="xs" ta={"center"}>{isWarna.bgTotalKegiatan}</Pill>
               }
             </Flex>
           </SimpleGrid>
 
+
         </Flex>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -172,11 +292,22 @@ export default function EditPaletteColor() {
           size="lg"
           radius={30}
           fullWidth
-        // onClick={() => { onSubmit() }}
+          onClick={() => {
+            setModal(true)
+          }}
         >
           Simpan
         </Button>
       </Box>
+
+
+      <LayoutModal opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
+        onYes={(val) => {
+          if (val)
+            onSubmit()
+          setModal(false)
+        }
+        } />
     </Box>
   );
 }

src/module/color_palette/ui/list_color_palette.tsx

@@ -8,38 +8,43 @@ import { HiMenu } from 'react-icons/hi';
 import DrawerCreatePalette from './drawer_create_palette';
 import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
 import { useHookstate } from '@hookstate/core';
-
+import { funGetAllTheme } from '../lib/api_theme';
-const palettema = [
+import { IDataTheme } from '../lib/type_theme';
-  {
+import toast from 'react-hot-toast';
-    id: 1,
+import { useShallowEffect } from '@mantine/hooks';
-    name: 'Tema Bawaan 1',
+import { globalRefreshTheme } from '../lib/val_theme';
-    color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF', '#16ACE3FF', '#532CC1FF']
-  },
-  {
-    id: 2,
-    name: 'Tema Bawaan 2',
-    color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF', '#F67280FF', '#C06C84FF']
-  },
-  {
-    id: 3,
-    name: 'Tema Bawaan 3',
-    color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF', '#7D8A7DFF', '#0B730BFF']
-  },
-]
-
-const paletTambahan = [
-  {
-    id: 1,
-    name: 'Tema Tambah 1',
-    color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF', '#F67280FF', '#C06C84FF']
-  }
-]
 
 export default function ListColorPalette() {
   const router = useRouter()
   const [isOpen, setOpen] = useState(false)
   const [isOpenTambahan, setOpenTambahan] = useState(false)
   const tema = useHookstate(TEMA)
+  const [isData, setData] = useState<IDataTheme[]>([])
+  const [isChooseId, setChooseId] = useState('')
+  const [isChooseName, setChooseName] = useState('')
+  const [isChooseVillage, setChooseVillage] = useState('')
+  const refresh = useHookstate(globalRefreshTheme)
+
+  async function loadData() {
+    try {
+      const res = await funGetAllTheme()
+      if (res.success) {
+        setData(res.data)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mendapatkan data tema, coba lagi nanti")
+    }
+  }
+
+  useShallowEffect(() => {
+    loadData()
+    setOpen(false)
+    setOpenTambahan(false)
+  }, [refresh.get()])
+
   return (
     <Box>
       <LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
@@ -48,98 +53,61 @@ export default function ListColorPalette() {
         </ActionIcon>
       } />
       <Box p={20}>
-        {palettema.map((v, i) => (
+        {isData.map((v, i) => (
           <Box mb={20} key={i}>
             <Box style={{
-              borderWidth: "3px",
+              borderRadius: 10,
-              borderStyle: "solid",
+              border: `1px solid ${"#D6D8F6"}`,
-              borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
             }} pt={10} pb={10} pl={20} pr={20}
-            onClick={() => { setOpenTambahan(true) }}
+              onClick={() => {
+                setChooseId(v.id)
+                setChooseName(v.name)
+                setChooseVillage(v.idVillage)
+                setOpenTambahan(true)
+              }}
             >
               <Group justify='space-between' align='center'>
                 <Text>{v.name}</Text>
-                <Checkbox
+                {v.isUse ? <FaCircleCheck size={20} /> : <></>}
-                  radius="xl"
-                  color="teal"
-                />
               </Group>
               <Box pt={10}>
                 <Flex gap={10}>
-                  <Box bg={v.color[0]} w={30} h={30} style={{
+                  <Box bg={v.utama} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
-                  <Box bg={v.color[1]} w={30} h={30} style={{
+                  <Box bg={v.bgUtama} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
-                  <Box bg={v.color[2]} w={30} h={30} style={{
+                  <Box bg={v.bgIcon} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
-                  <Box bg={v.color[3]} w={30} h={30} style={{
+                  <Box bg={v.bgFiturHome} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
-                  <Box bg={v.color[4]} w={30} h={30} style={{
+                  <Box bg={v.bgFiturDivision} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
-                  <Box bg={v.color[5]} w={30} h={30} style={{
+                  <Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
-                    borderRadius: "100%"
+                    borderRadius: "100%",
+                    border: "1px solid grey"
                   }} />
                 </Flex>
               </Box>
             </Box>
           </Box>
         ))}
-        <Box>
-          <Text fw={"bold"}>Tema Tambahan</Text>
-          {paletTambahan.map((v, i) => (
-            <Box mb={20} key={i}>
-              <Box style={{
-                borderWidth: "3px",
-                borderStyle: "solid",
-                borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
-              }} pt={10} pb={10} pl={20} pr={20}
-              onClick={() => { setOpenTambahan(true) }}
-              >
-                <Group justify='space-between' align='center'>
-                  <Text>{v.name}</Text>
-                  <Checkbox
-                    radius="xl"
-                    color="teal"
-                  />
-                </Group>
-                <Box pt={10}>
-                  <Flex gap={10}>
-                    <Box bg={v.color[0]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                    <Box bg={v.color[1]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                    <Box bg={v.color[2]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                    <Box bg={v.color[3]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                    <Box bg={v.color[4]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                    <Box bg={v.color[5]} w={30} h={30} style={{
-                      borderRadius: "100%"
-                    }} />
-                  </Flex>
-                </Box>
-              </Box>
-            </Box>
-          ))}
-        </Box>
       </Box>
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <DrawerCreatePalette />
       </LayoutDrawer>
 
-      <LayoutDrawer opened={isOpenTambahan} title={'Menu'} onClose={() => setOpenTambahan(false)}>
+      <LayoutDrawer opened={isOpenTambahan} title={isChooseName} onClose={() => setOpenTambahan(false)}>
-        <DrawerPaletEditEndDefault />
+        <DrawerPaletEditEndDefault id={isChooseId} idVillage={isChooseVillage} />
       </LayoutDrawer>
     </Box>
   );

src/module/home/ui/view_detail_feature.tsx

@@ -31,7 +31,7 @@ export default function ViewDetailFeature() {
                   radius={100}
                   // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
                   bg={tema.get().bgFiturHome}
-                  >
+                >
                   <HiMiniUserGroup size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
@@ -47,7 +47,7 @@ export default function ViewDetailFeature() {
                   radius={100}
                   // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
                   bg={tema.get().bgFiturHome}
-                  >
+                >
                   <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
@@ -63,7 +63,7 @@ export default function ViewDetailFeature() {
                   radius={100}
                   // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
                   bg={tema.get().bgFiturHome}
-                  >
+                >
                   <HiMegaphone size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
@@ -79,7 +79,7 @@ export default function ViewDetailFeature() {
                   radius={100}
                   // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
                   bg={tema.get().bgFiturHome}
-                  >
+                >
                   <PiUsersFourFill size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
@@ -95,7 +95,7 @@ export default function ViewDetailFeature() {
                   radius={100}
                   // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
                   bg={tema.get().bgFiturHome}
-                  >
+                >
                   <FaUserTie size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
@@ -105,41 +105,40 @@ export default function ViewDetailFeature() {
             </Box>
             {
               roleLogin.get() == "supadmin" &&
-              <Box onClick={() => router.push('/group')}>
+              <>
-                <Center>
+                <Box onClick={() => router.push('/group')}>
-                  <ActionIcon variant="gradient"
+                  <Center>
-                    size={isMobile ? 50 : 68}
+                    <ActionIcon variant="gradient"
-                    aria-label="Gradient action icon"
+                      size={isMobile ? 50 : 68}
-                    radius={100}
+                      aria-label="Gradient action icon"
-                    // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                      radius={100}
-                    bg={tema.get().bgFiturHome}
+                      // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                      bg={tema.get().bgFiturHome}
                     >
-                    <FaUserTag size={isMobile ? 25 : 35} color={tema.get().utama} />
+                      <FaUserTag size={isMobile ? 25 : 35} color={tema.get().utama} />
-                  </ActionIcon>
+                    </ActionIcon>
-                </Center>
+                  </Center>
-                <Center>
+                  <Center>
-                  <Text fz={15} c={tema.get().utama}>Grup</Text>
+                    <Text fz={15} c={tema.get().utama}>Grup</Text>
-                </Center>
+                  </Center>
-              </Box>
+                </Box>
-            }
+                <Box onClick={() => router.push('/color-palette')}>
-            {
+                  <Center>
-              roleLogin.get() == "supadmin" &&
+                    <ActionIcon variant="gradient"
-              <Box onClick={() => router.push('/color-palette')}>
+                      size={isMobile ? 50 : 68}
-                <Center>
+                      aria-label="Gradient action icon"
-                  <ActionIcon variant="gradient"
+                      radius={100}
-                    size={isMobile ? 50 : 68}
+                      // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
-                    aria-label="Gradient action icon"
+                      bg={tema.get().bgFiturHome}
-                    radius={100}
-                    // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
-                    bg={tema.get().bgFiturHome}
                     >
-                    <IoColorPalette size={isMobile ? 25 : 35} color={tema.get().utama} />
+                      <IoColorPalette size={isMobile ? 25 : 35} color={tema.get().utama} />
-                  </ActionIcon>
+                    </ActionIcon>
-                </Center>
+                  </Center>
-                <Center>
+                  <Center>
-                  <Text fz={15} c={tema.get().utama}>Tema</Text>
+                    <Text fz={15} c={tema.get().utama}>Tema</Text>
-                </Center>
+                  </Center>
-              </Box>
+                </Box>
+              </>
             }
 
           </SimpleGrid>