fix: theme

Deskripsi:
- realtime saat ada perubahan theme

No Issues

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} theme={user.theme} user={user.id}>
+         <WrapLayout role={user.idUserRole} theme={user.theme} user={user.id} village={user.idVillage}>
             {children}
          </WrapLayout>
       </>

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

@@ -170,7 +170,7 @@ export async function POST(request: Request, context: { params: { id: string } }
       // 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 });
+      return NextResponse.json({ success: true, message: "Tema berhasil diganti", data: { village: user.idVillage, user: user.id }, theme: dataTheme }, { status: 200 });
 
    } catch (error) {
       console.error(error);

src/module/_global/components/wrap_layout.tsx

@@ -1,15 +1,14 @@
 'use client'
+import { globalParamJumlahNotif } from "@/module/home";
 import { useHookstate } from "@hookstate/core";
-import { globalNotifPage, globalRole, keyWibu, TEMA } from "../bin/val_global";
 import { useShallowEffect } from "@mantine/hooks";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useWibuRealtime } from "wibu-realtime";
+import { globalNotifPage, globalRole, keyWibu, TEMA } from "../bin/val_global";
 import NotificationCustome from "./notification_custome";
-import { usePathname, useRouter } from "next/navigation";
-import { globalParamJumlahNotif } from "@/module/home";
-import ReloadButtonTop from "./reload_button_top";
 
-export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
+export default function WrapLayout({ children, role, theme, user, village }: { children: React.ReactNode, role: any, theme: any, user: any, village: any }) {
    const router = useRouter()
    const roleLogin = useHookstate(globalRole)
    const tema = useHookstate(TEMA)
@@ -44,6 +43,10 @@ export default function WrapLayout({ children, role, theme, user }: { children:
             }, 4000);
          }
       }
+
+      if (data && data.some((v: any) => v.category == "applied-theme" && v.user != user && v.village == village)) {
+         tema.set(data[0]?.theme)
+      }
    }, [data])
 
 

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -1,4 +1,4 @@
-import { TEMA } from '@/module/_global';
+import { keyWibu, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
@@ -9,6 +9,7 @@ import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { IoColorPalette } from 'react-icons/io5';
 import { funChangeTheme, funDeleteTheme } from '../lib/api_theme';
 import { globalRefreshTheme } from '../lib/val_theme';
+import { useWibuRealtime } from 'wibu-realtime';
 
 export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
   const router = useRouter()
@@ -18,13 +19,23 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
   const refresh = useHookstate(globalRefreshTheme)
   const [loadingApply, setLoadingApply] = useState(false)
   const [loadingDelete, setLoadingDelete] = useState(false)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
   async function onChangeTheme() {
     try {
       setLoadingApply(true)
       const res = await funChangeTheme(id)
       if (res.success) {
-        tema.set(res.data)
+        setDataRealtime([{
+          category: "applied-theme",
+          village: res.data.village,
+          user: res.data.user,
+          theme: res.theme
+        }])
+        tema.set(res.theme)
         refresh.set(!refresh.get())
       } else {
         toast.error(res.message);
@@ -101,7 +112,7 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
         onYes={(val) => {
           if (val) {
             onChangeTheme()
-          }else{
+          } else {
             setModal(false)
           }
         }} />
@@ -112,7 +123,7 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
         onYes={(val) => {
           if (val) {
             onDelete()
-          }else{
+          } else {
             setModalDel(false)
           }
         }} />

src/module/color_palette/ui/list_color_palette.tsx

@@ -1,21 +1,19 @@
 "use client"
 import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
-import { ActionIcon, Box, Checkbox, Flex, Group, Skeleton, Text } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
-import { useRouter } from 'next/navigation';
+import { ActionIcon, Box, Flex, Group, Skeleton, Text } from '@mantine/core';
-import React, { useState } from 'react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { FaCircleCheck } from 'react-icons/fa6';
 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';
 import { IDataTheme } from '../lib/type_theme';
-import toast from 'react-hot-toast';
-import { useShallowEffect } from '@mantine/hooks';
 import { globalRefreshTheme } from '../lib/val_theme';
+import DrawerCreatePalette from './drawer_create_palette';
+import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
 
 export default function ListColorPalette() {
-  const router = useRouter()
   const [isOpen, setOpen] = useState(false)
   const [isOpenTambahan, setOpenTambahan] = useState(false)
   const tema = useHookstate(TEMA)
@@ -36,7 +34,6 @@ export default function ListColorPalette() {
       } else {
         toast.error(res.message)
       }
-      setLoading(false)
     } catch (error) {
       console.error(error)
       toast.error("Gagal mendapatkan data tema, coba lagi nanti")