src/app/api/sticker/[id]/activation/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server"; 
+import { prisma } from "@/lib";
+
+export { PUT };
+
+async function PUT(request: Request, { params }: { params: { id: string } }) {
+  const method = request.method;
+  if (method !== "PUT") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+    const data = await request.json();
+
+    const sticker = await prisma.sticker.update({
+      where: {
+        id: id,
+      },
+      data: {
+        isActive: data.isActive,
+      },
+    });
+
+    return NextResponse.json(
+      { success: true, message: "Success update data sticker", data: sticker },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Error update data sticker", error);
+    return NextResponse.json(
+      { success: false, message: "Error update data sticker" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/sticker/route.ts

@@ -62,7 +62,7 @@ async function GET(request: Request) {
   try {
     const sticker = await prisma.sticker.findMany({
       orderBy: {
-        updatedAt: "desc",
+        createdAt: "desc",
       },
       include: {
         MasterEmotions: true,

src/app_modules/admin/_admin_global/_component/comp_admin_modal.tsx

@@ -32,7 +32,7 @@ export function Admin_ComponentModal({
         centered
         title={title}
         withCloseButton={withCloseButton ? withCloseButton : false}
-        closeOnClickOutside={closeOnClickOutside}
+        closeOnClickOutside={closeOnClickOutside ? closeOnClickOutside : false}
       >
         {children}
       </Modal>

src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx

@@ -164,4 +164,38 @@ export const apiAdminDeleteSticker = async ({ id }: { id: string }) => {
         console.error("Error delete sticker", error);
         throw error; // Re-throw the error to handle it in the calling function
     }
+};
+
+export const apiAdminUpdateStatusStickerById = async ({ data }: { data: any }) => {
+    try {
+        // Fetch token from cookie
+        const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+        if (!token) {
+            console.error("No token found");
+            return null;
+        }
+
+        const response = await fetch(`/api/sticker/${data.id}/activation`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify(data),
+        });
+
+        // Check if the response is OK
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => null);
+            console.error("Failed to update status sticker", response.statusText, errorData);
+            throw new Error(errorData?.message || "Failed to update status sticker");
+        }
+
+        // Return the JSON response
+        return await response.json();
+    } catch (error) {
+        console.error("Error update status sticker", error);
+        throw error; // Re-throw the error to handle it in the calling function
+    }
 };

src/app_modules/admin/app_info/view/sticker/view_detail_sticker.tsx

@@ -168,11 +168,6 @@ export default function AdminAppInformation_ViewStickerDetail() {
           fileId: data?.fileId as string,
         });
 
-        if (!deleteFile.success) {
-          ComponentGlobal_NotifikasiPeringatan("Gagal delete gambar");
-          return;
-        }
-
         setLoadingDelete(false);
         ComponentAdminGlobal_NotifikasiBerhasil("Berhasil dihapus");
         router.back();

src/app_modules/admin/app_info/view/view_stiker.tsx

@@ -19,8 +19,9 @@ import {
   ScrollArea,
   Spoiler,
   Stack,
+  Switch,
   Table,
-  Text
+  Text,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconPencil, IconPlus } from "@tabler/icons-react";
@@ -29,18 +30,25 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
-import { apiAdminGetSticker } from "../lib/api_fetch_stiker";
+import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
+import {
+  apiAdminGetSticker,
+  apiAdminUpdateStatusStickerById,
+} from "../lib/api_fetch_stiker";
 
 export default function AdminAppInformation_ViewSticker() {
   const router = useRouter();
   const [loadingCreate, setLoadingCreate] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState<string | null>(null);
   const [dataSticker, setDataSticker] = useState<ISticker[] | null>(null);
-  const [isActivation, setIsActivation] = useState(false);
-  const [updateStatus, setUpdateStatus] = useState({
+  const [dataUpdate, setDataUpdate] = useState({
     id: "",
-    active: false,
+    isActive: false,
   });
+  const [loadingUpdate, setLoadingUpdate] = useState(false);
+  const [opened, setOpened] = useState(false);
 
   useShallowEffect(() => {
     const fetchData = async () => {
@@ -57,6 +65,44 @@ export default function AdminAppInformation_ViewSticker() {
     fetchData();
   }, []);
 
+  const handleUpdateActivation = async ({
+    id,
+    value,
+  }: {
+    id: string;
+    value: boolean;
+  }) => {
+    const data = {
+      id: id,
+      isActive: value,
+    };
+
+
+    try {
+      setLoadingUpdate(true);
+      const updt = await apiAdminUpdateStatusStickerById({
+        data: data as any,
+      });
+
+      if (updt.success) {
+        const cloneData = [...(dataSticker || [])];
+        const index = cloneData.findIndex((e) => e.id === id);
+        if (index !== -1) {
+          cloneData[index].isActive = value;
+          setDataSticker([...cloneData]);
+        }
+
+        ComponentAdminGlobal_NotifikasiBerhasil(updt.message);
+      } else {
+        ComponentAdminGlobal_NotifikasiGagal(updt.message);
+      }
+    } catch (error) {
+      console.log("Error update status sticker", error);
+    } finally {
+      setLoadingUpdate(false);
+    }
+  };
+
   return (
     <>
       <Stack>
@@ -94,9 +140,9 @@ export default function AdminAppInformation_ViewSticker() {
                     <th>
                       <Center c={AdminColor.white}>Aksi</Center>
                     </th>
-                    {/* <th>
+                    <th>
                       <Center c={AdminColor.white}>Status</Center>
-                    </th> */}
+                    </th>
 
                     <th>
                       <Center c={AdminColor.white}>Stiker</Center>
@@ -112,10 +158,9 @@ export default function AdminAppInformation_ViewSticker() {
                     router,
                     loadingDetail,
                     setLoadingDetail,
-                    isActivation,
-                    setIsActivation,
-                    updateStatus,
-                    setUpdateStatus,
+                    setOpened,
+                    dataUpdate,
+                    setDataUpdate,
                   })}
                 </tbody>
               </Table>
@@ -123,6 +168,41 @@ export default function AdminAppInformation_ViewSticker() {
           </Admin_ComponentBoxStyle>
         )}
       </Stack>
+
+      <Admin_ComponentModal opened={opened} onClose={() => setOpened(false)}>
+        <Stack>
+          <Text fw={500} c={AdminColor.white}>
+            Apakah anda yakin ingin mengubah status stiker ini ?
+          </Text>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                setOpened(false);
+                setLoadingUpdate(false);
+              }}
+            >
+              Tidak
+            </Button>
+            <Button
+              loading={loadingUpdate}
+              loaderPosition="center"
+              radius={"xl"}
+              bg={MainColor.green}
+              color="green"
+              onClick={() => {
+                handleUpdateActivation({
+                  id: dataUpdate.id,
+                  value: dataUpdate.isActive,
+                });
+                setOpened(false);
+              }}
+            >
+              Ya
+            </Button>
+          </Group>
+        </Stack>
+      </Admin_ComponentModal>
     </>
   );
 }
@@ -132,10 +212,12 @@ type RowTableProps = {
   router: AppRouterInstance;
   loadingDetail: string | null;
   setLoadingDetail: (val: string | null) => void;
-  isActivation: boolean;
-  setIsActivation: (val: boolean) => void;
-  updateStatus: { id: string; active: boolean };
-  setUpdateStatus: (val: { id: string; active: boolean }) => void;
+  setOpened: (val: boolean) => void;
+  dataUpdate: {
+    id: string;
+    isActive: boolean;
+  };
+  setDataUpdate: (val: { id: string; isActive: boolean }) => void;
 };
 
 const rowTable = ({
@@ -143,10 +225,9 @@ const rowTable = ({
   router,
   loadingDetail,
   setLoadingDetail,
-  isActivation,
-  setIsActivation,
-  updateStatus,
-  setUpdateStatus,
+  setOpened,
+  dataUpdate,
+  setDataUpdate,
 }: RowTableProps) => {
   if (!Array.isArray(dataSticker) || dataSticker.length === 0) {
     return (
@@ -184,23 +265,20 @@ const rowTable = ({
           </Button>
         </Center>
       </td>
-      {/* <td>
+      <td>
         <Center>
           <Switch
             checked={e.isActive}
-            color="green"
+            color="yellow"
             onLabel="ON"
             offLabel="OFF"
             onChange={(val) => {
-              setIsActivation(true);
-              setUpdateStatus({
-                id: e?.id,
-                active: val.currentTarget.checked as any,
-              });
+              setDataUpdate({ id: e.id, isActive: val.currentTarget.checked });
+              setOpened(true);
             }}
           />
         </Center>
-      </td> */}
+      </td>
       <td>
         <Center>
           <Paper bg="gray" p={"xs"}>