fix: admin app info

deskripsi:
- penambahan jenis kelamin pada fitur stiker

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

@@ -60,6 +60,7 @@ async function PUT(request: Request, { params }: { params: { id: string } }) {
           MasterEmotions: {
             set: data.emotions.map((value: string) => ({ value })), // ✅ replace relasi
           },
+          jenisKelamin: data.jenisKelamin,
         },
       });
 
@@ -78,6 +79,7 @@ async function PUT(request: Request, { params }: { params: { id: string } }) {
         MasterEmotions: {
           set: data.emotions.map((value: string) => ({ value })), // ✅ replace relasi
         },
+        jenisKelamin: data.jenisKelamin,
       },
     });
 

src/app/api/admin/sticker/route.ts

@@ -1,5 +1,4 @@
 import { prisma } from "@/lib";
-import { data } from "autoprefixer";
 import _ from "lodash";
 import { NextResponse } from "next/server";
 
@@ -8,6 +7,7 @@ export { GET, POST };
 interface IPostSticker {
   fileId: string;
   emotions: string[];
+  gender: "Laki-laki" | "Perempuan" | null;
 }
 
 async function POST(request: Request) {
@@ -20,7 +20,7 @@ async function POST(request: Request) {
   }
 
   try {
-    const { fileId, emotions } = await request.json();
+    const { fileId, emotions, gender } = await request.json();
 
     const newStiker = await prisma.sticker.create({
       data: {
@@ -28,6 +28,7 @@ async function POST(request: Request) {
         MasterEmotions: {
           connect: emotions.map((value: string) => ({ value })), // id = number[]
         },
+        jenisKelamin: gender,
       },
     });
 

src/app/dev/admin/app-information/sticker/create/page.tsx

@@ -1,4 +1,4 @@
-import AdminAppInformation_ViewCreateSticker from "@/app_modules/admin/app_info/view/view_create_sticker";
+import AdminAppInformation_ViewCreateSticker from "@/app_modules/admin/app_info/view/sticker/view_create_sticker";
 
 export default function Page() {
   return (

src/app/dev/admin/app-information/sticker/page.tsx

@@ -1,4 +1,4 @@
-import AdminAppInformation_ViewSticker from "@/app_modules/admin/app_info/view/view_stiker";
+import AdminAppInformation_ViewSticker from "@/app_modules/admin/app_info/view/sticker/view_stiker";
 
 export default function Page() {
   return (

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

@@ -8,55 +8,46 @@ import {
   Chip,
   Group,
   Image,
-  Paper,
   Select,
-  Stack,
+  Stack
-  TextInput,
 } from "@mantine/core";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+
-import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
-import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
-import { DIRECTORY_ID, pathAssetImage } from "@/lib";
-import Admin_ComponentBackButton from "../../_admin_global/back_button";
-import { IconCheck, IconPhoto, IconUpload } from "@tabler/icons-react";
 import {
-  AdminColor,
+  MainColor
-  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
-import { useState } from "react";
-import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
 import {
-  ComponentGlobal_BoxInformation,
   ComponentGlobal_BoxUploadImage,
-  ComponentGlobal_ButtonUploadFileImage,
+  ComponentGlobal_ButtonUploadFileImage
 } from "@/app_modules/_global/component";
-import { useRouter } from "next/navigation";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
-import { apiGetMasterEmotions } from "@/app_modules/_global/lib/api_fetch_master";
-import { useShallowEffect } from "@mantine/hooks";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { apiGetMasterEmotions } from "@/app_modules/_global/lib/api_fetch_master";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
-import { apiAdminCreateSticker } from "../lib/api_fetch_stiker";
+import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
+import { ComponentAdminGlobal_NotifikasiPeringatan } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_peringatan";
+import Admin_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
+import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { DIRECTORY_ID } from "@/lib";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCheck, IconPhoto } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiAdminCreateSticker } from "../../lib/api_fetch_stiker";
+import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
+import { masterJenisKelamin } from "@/app_modules/_global/lib/master_jenis_kelamin";
 
-interface IData {
-  name: string;
-  //   jenis_kelamin: "Laki-laki" | "Perempuan" | null;
-}
 export default function AdminAppInformation_ViewCreateSticker() {
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>(null);
   const [valueEmotion, setValueEmotion] = useState(["senang"]);
-  const [data, setData] = useState<IData>({
+  const [gender, setGender] = useState<string | null>(null);
-    name: "",
-    // jenis_kelamin: null,
-  });
 
   const [listEmotion, setListEmotion] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -88,6 +79,11 @@ export default function AdminAppInformation_ViewCreateSticker() {
       return false;
     }
 
+    if (!gender) {
+      ComponentAdminGlobal_NotifikasiPeringatan("Pilih jenis kelamin");
+      return false;
+    }
+
     return true;
   };
 
@@ -115,6 +111,7 @@ export default function AdminAppInformation_ViewCreateSticker() {
         data: {
           emotions: valueEmotion,
           fileId: fileId,
+          gender: gender as string,
         },
       });
 
@@ -199,23 +196,7 @@ export default function AdminAppInformation_ViewCreateSticker() {
                 </Stack>
 
                 <Stack>
-                  {/* <TextInput
+                  <Select
-                    required
-                    placeholder="Masukkan nama stiker"
-                    label="Nama stiker"
-                    styles={{
-                      ...baseStylesTextInput,
-                      required: { color: MainColor.red },
-                    }}
-                    onChange={(val) => {
-                      setData({
-                        ...data,
-                        name: val.target.value,
-                      });
-                    }}
-                  /> */}
-
-                  {/* <Select
                   required
                   placeholder="Pilih jenis kelamin"
                   label="Jenis kelamin"
@@ -223,17 +204,11 @@ export default function AdminAppInformation_ViewCreateSticker() {
                     ...baseStylesTextInput,
                     required: { color: MainColor.red },
                   }}
-                  data={[
+                  data={masterJenisKelamin}
-                    { value: "Laki-laki", label: "Laki-laki" },
-                    { value: "Perempuan", label: "Perempuan" },
-                  ]}
                   onChange={(val: any) => {
-                    setData({
+                   setGender(val)
-                      ...data,
-                      jenis_kelamin: val,
-                    });
                   }}
-                /> */}
+                />
 
                   <Stack>
                     <Component_V3_Label_TextInput text="Pilih emosi stiker" />

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

@@ -30,6 +30,7 @@ import {
   Chip,
   Group,
   Image,
+  Select,
   Stack,
   Text,
   Title,
@@ -44,6 +45,7 @@ import {
   apiAdminUpdateSticker,
 } from "../../lib/api_fetch_stiker";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { masterJenisKelamin } from "@/app_modules/_global/lib/master_jenis_kelamin";
 
 export default function AdminAppInformation_ViewStickerDetail() {
   const router = useRouter();
@@ -120,6 +122,7 @@ export default function AdminAppInformation_ViewStickerDetail() {
           emotions: valueEmotion,
           fileId: fileId || "",
           id: param.id,
+          jenisKelamin: data?.jenisKelamin,
         },
       });
 
@@ -242,6 +245,19 @@ export default function AdminAppInformation_ViewStickerDetail() {
                 </Stack>
 
                 <Stack>
+                  <Select
+                    required
+                    placeholder="Pilih jenis kelamin"
+                    value={data.jenisKelamin || ""}
+                    onChange={(val) =>
+                      setData({
+                        ...data,
+                        jenisKelamin: val,
+                      })
+                    }
+                    data={masterJenisKelamin}
+                  />
+
                   <Stack>
                     <Component_V3_Label_TextInput text="Pilih emosi stiker" />
                     <Group style={{ display: "flex", flexWrap: "wrap" }}>

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

@@ -5,6 +5,12 @@ import {
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
+import { Admin_ComponentModal } from "@/app_modules/admin/_admin_global/_component/comp_admin_modal";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { APIs, pathAssetImage } from "@/lib";
 import { RouterAdminAppInformation } from "@/lib/router_admin/router_app_information";
@@ -29,16 +35,11 @@ import { IconFilter, IconPencil, IconPlus } from "@tabler/icons-react";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 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 { 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";
+} from "../../lib/api_fetch_stiker";
-import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
+import loading from "@/app/dev/(user)/investasi/dialog_page/create/loading";
 
 export default function AdminAppInformation_ViewSticker() {
   const router = useRouter();
@@ -53,6 +54,7 @@ export default function AdminAppInformation_ViewSticker() {
   const [opened, setOpened] = useState(false);
   const [nPage, setNPage] = useState(1);
   const [activePage, setActivePage] = useState(1);
+  const [loadingImg, setLoadingImg] = useState(false);
 
   useShallowEffect(() => {
     handleLoadData();
@@ -117,24 +119,27 @@ export default function AdminAppInformation_ViewSticker() {
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_TitlePage name="Stiker " />
+        <ComponentAdminGlobal_TitlePage
-
+          name="Stiker "
-        <Group position="right">
+          component={
-          {/* <Button radius={"xl"} leftIcon={<IconFilter size={20} />}> Filter</Button> */}
+            <Group position="right">
-          <Button
+              {/* <Button radius={"xl"} leftIcon={<IconFilter size={20} />}> Filter</Button> */}
-            loading={loadingCreate}
+              <Button
-            loaderPosition="center"
+                loading={loadingCreate}
-            w={120}
+                loaderPosition="center"
-            radius={"xl"}
+                w={120}
-            leftIcon={<IconPlus size={20} />}
+                radius={"xl"}
-            onClick={() => {
+                leftIcon={<IconPlus size={20} />}
-              router.push(RouterAdminAppInformation.createSticker);
+                onClick={() => {
-              setLoadingCreate(true);
+                  router.push(RouterAdminAppInformation.createSticker);
-            }}
+                  setLoadingCreate(true);
-          >
+                }}
-            Tambah
+              >
-          </Button>
+                Tambah
-        </Group>
+              </Button>
+            </Group>
+          }
+        />
 
         {!dataSticker ? (
           <CustomSkeleton height={"65dvh"} />
@@ -176,6 +181,8 @@ export default function AdminAppInformation_ViewSticker() {
                       setOpened,
                       dataUpdate,
                       setDataUpdate,
+                      setLoadingImg,
+                      loadingImg,
                     })}
                   </tbody>
                 </Table>
@@ -239,6 +246,8 @@ type RowTableProps = {
     isActive: boolean;
   };
   setDataUpdate: (val: { id: string; isActive: boolean }) => void;
+  setLoadingImg: (val: boolean) => void;
+  loadingImg: boolean;
 };
 
 const rowTable = ({
@@ -249,6 +258,8 @@ const rowTable = ({
   setOpened,
   dataUpdate,
   setDataUpdate,
+  setLoadingImg,
+  loadingImg,
 }: RowTableProps) => {
   if (!Array.isArray(dataSticker) || dataSticker.length === 0) {
     return (
@@ -302,6 +313,7 @@ const rowTable = ({
       </td>
       <td>
         <Center>
+          {loadingImg && <CustomSkeleton height={100} width={100} />}
           <Paper bg="gray" p={"xs"}>
             <Image
               src={
@@ -312,6 +324,11 @@ const rowTable = ({
               alt="Sticker"
               width={100}
               height={100}
+              imageProps={{
+                onLoad: () => setLoadingImg(false),
+                onError: () => setLoadingImg(false),
+                style: { display: loadingImg ? "none" : "block" },
+              }}
             />
           </Paper>
         </Center>