Merge pull request #286 from bipproduction/bagas/7-feb-25

Fix api profile
2025-02-07 17:21:43 +08:00
parent e64b5a8d01 e40b10456f
commit 6fe5daa5e2
15 changed files with 537 additions and 177 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@

 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.

+## [1.2.49](https://github.com/bipproduction/hipmi/compare/v1.2.48...v1.2.49) (2025-02-07)
+
 ## [1.2.48](https://github.com/bipproduction/hipmi/compare/v1.2.47...v1.2.48) (2025-02-07)

 ## [1.2.47](https://github.com/bipproduction/hipmi/compare/v1.2.46...v1.2.47) (2025-02-03)
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hipmi",
-  "version": "1.2.48",
+  "version": "1.2.49",
  "private": true,
  "prisma": {
    "seed": "bun prisma/seed.ts"
--- a/src/app/api/profile/[id]/route.ts
+++ b/src/app/api/profile/[id]/route.ts
@@ -0,0 +1,111 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export { GET, PUT };
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  if (request.method !== "GET") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    let fixData;
+    const { id } = params;
+
+    fixData = await prisma.profile.findFirst({
+      where: {
+        id: id,
+      },
+      include: {
+        User: true,
+      },
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get profile",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get profile", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get profile",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function PUT(request: Request) {
+  if (request.method !== "PUT") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const body = await request.json();
+    const { data } = body;
+
+    const cekEmail = await prisma.profile.findUnique({
+      where: {
+        email: data.email,
+      },
+    });
+
+    if (cekEmail && cekEmail.id != data.id)
+      return NextResponse.json(
+        { success: false, message: "Email sudah digunakan" },
+        { status: 400 }
+      );
+
+    const updateData = await prisma.profile.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        name: data.name,
+        email: data.email,
+        alamat: data.alamat,
+        jenisKelamin: data.jenisKelamin,
+      },
+    });
+
+    if (!updateData) {
+      return NextResponse.json(
+        { success: false, message: "Gagal update" },
+        {
+          status: 400,
+        }
+      );
+    }
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil edit profile" },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error edit profile", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error edit profile",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}
--- a/src/app/api/profile/route.ts
+++ b/src/app/api/profile/route.ts
@@ -0,0 +1,82 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export { POST };
+
+async function POST(request: Request) {
+  if (request.method !== "POST") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { data } = await request.json();
+    const userLoginId = await funGetUserIdByToken();
+
+    if (!userLoginId) {
+      backendLogger.error("User tidak terautentikasi");
+      return NextResponse.json(
+        {
+          success: false,
+          message: "User tidak terautentikasi",
+        },
+        { status: 400 }
+      ); // Validasi user login
+    }
+
+    const existingEmail = await prisma.profile.findUnique({
+      where: {
+        email: data.email,
+      },
+    });
+
+    if (existingEmail) {
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Email telah digunakan",
+        },
+        { status: 409 }
+      );
+    }
+
+    const createProfile = await prisma.profile.create({
+      data: {
+        userId: userLoginId,
+        name: data.name,
+        email: data.email,
+        alamat: data.alamat,
+        jenisKelamin: data.jenisKelamin,
+        imageId: data.imageId,
+        imageBackgroundId: data.imageBackgroundId,
+      },
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil membuat profile",
+        data: createProfile,
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    backendLogger.error("Error create profile", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal membuat profile",
+      },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -30,7 +30,7 @@ export async function GET(request: Request) {
    const { searchParams } = new URL(request.url);
    const search = searchParams.get("search");
    const page = searchParams.get("page");
-    const takeData = 1;
+    const takeData = 15;
    const skipData = Number(page) * takeData - takeData;

    if (!page) {
--- a/src/app/dev/profile/edit/[id]/page.tsx
+++ b/src/app/dev/profile/edit/[id]/page.tsx
@@ -1,13 +1,10 @@
 import EditProfile from "@/app_modules/katalog/profile/edit/view";
-import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";

-export default async function Page({ params }: { params: { id: string } }) {
-  let profileId = params.id;
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
+export default async function Page() {

  return (
    <>
-      <EditProfile data={dataProfile as any} />
+      <EditProfile  />
    </>
  );
 }
--- a/src/app_modules/home/view_home_new.tsx
+++ b/src/app_modules/home/view_home_new.tsx
@@ -85,7 +85,7 @@ export default function HomeViewNew() {
                <ActionIcon radius={"xl"} variant={"transparent"}>
                  <IconUserSearch color={MainColor.white} />
                </ActionIcon>
-              ) : dataUser && dataUser?.profile === undefined ? (
+              ) : dataUser?.profile === undefined ? (
                <ActionIcon
                  radius={"xl"}
                  variant={"transparent"}
@@ -112,7 +112,7 @@ export default function HomeViewNew() {
                <ActionIcon radius={"xl"} variant={"transparent"}>
                  <IconBell color={MainColor.white} />
                </ActionIcon>
-              ) : dataUser && dataUser?.profile === undefined ? (
+              ) : dataUser?.profile === undefined ? (
                <ActionIcon
                  radius={"xl"}
                  variant={"transparent"}
--- a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
+++ b/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
@@ -15,102 +15,218 @@ import { Button } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import funCreateNewProfile from "../../fun/fun_create_profile";
+import { apiCreateProfile } from "../../lib/api_fetch_profile";
 import { MODEL_PROFILE } from "../../model/interface";
+import funCreateNewProfile from "../../fun/fun_create_profile";
+
+interface CreateProfileData {
+  name: string;
+  email: string;
+  alamat: string;
+  jenisKelamin: string;
+  imageId: string;
+  imageBackgroundId: string;
+}
+
+interface ProfileComponentProps {
+  value: MODEL_PROFILE;
+  filePP: File | null;
+  fileBG: File | null;
+}

 export function Profile_ComponentCreateNewProfile({
  value,
  filePP,
  fileBG,
-}: {
-  value: MODEL_PROFILE;
-  filePP: File;
-  fileBG: File;
-}) {
+}: ProfileComponentProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

-  async function onSubmit() {
-    const newData = {
-      name: value.name,
-      email: value.email,
-      alamat: value.alamat,
-      jenisKelamin: value.jenisKelamin,
+  const validateData = (): string | null => {
+    if (_.values(value).some((val) => !val)) {
+      return "Lengkapi Data";
+    }
+    if (!emailRegex.test(value.email)) {
+      return "Format email salah";
+    }
+    if (!filePP) {
+      return "Lengkapi foto profile";
+    }
+    if (!fileBG) {
+      return "Lengkapi background profile";
+    }
+    return null;
+  };
+
+  const uploadImages = async (): Promise<{
+    photoId: string;
+    backgroundId: string;
+  } | null> => {
+    const uploadPhoto = await funGlobal_UploadToStorage({
+      file: filePP!,
+      dirId: DIRECTORY_ID.profile_foto,
+    });
+
+    if (!uploadPhoto.success) {
+      throw new Error("Gagal upload foto profile");
+    }
+
+    const uploadBackground = await funGlobal_UploadToStorage({
+      file: fileBG!,
+      dirId: DIRECTORY_ID.profile_background,
+    });
+
+    if (!uploadBackground.success) {
+      throw new Error("Gagal upload background profile");
+    }
+
+    return {
+      photoId: uploadPhoto.data.id,
+      backgroundId: uploadBackground.data.id,
    };
-    if (_.values(newData).includes(""))
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-    if (!newData.email.match(emailRegex))
-      return ComponentGlobal_NotifikasiPeringatan("Format email salah");
+  };

-    if (filePP == null)
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
-    if (fileBG == null)
-      return ComponentGlobal_NotifikasiPeringatan(
-        "Lengkapi background profile"
-      );

+  const handleSubmit = async () => {
    try {
+      const validationError = validateData();
+      if (validationError) {
+        ComponentGlobal_NotifikasiPeringatan(validationError);
+        return;
+      }
+
      setLoading(true);

-      const uploadPhoto = await funGlobal_UploadToStorage({
-        file: filePP,
-        dirId: DIRECTORY_ID.profile_foto,
-      });
-
-      if (!uploadPhoto.success) {
-        setLoading(false);
-        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+      const uploadedImages = await uploadImages();
+      if (!uploadedImages) {
        return;
      }

-      const uploadBackground = await funGlobal_UploadToStorage({
-        file: fileBG,
-        dirId: DIRECTORY_ID.profile_background,
-      });
+      const profileData: CreateProfileData = {
+        name: value.name,
+        email: value.email,
+        alamat: value.alamat,
+        jenisKelamin: value.jenisKelamin,
+        imageId: uploadedImages.photoId,
+        imageBackgroundId: uploadedImages.backgroundId,
+      };

-      if (!uploadBackground.success) {
-        setLoading(false);
-        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
-        return;
-      }
+      const response = await apiCreateProfile({ data: profileData as any});

-      const create = await funCreateNewProfile({
-        data: newData as any,
-        imageId: uploadPhoto.data.id,
-        imageBackgroundId: uploadBackground.data.id,
-      });
-
-      if (create.status === 201) {
+      if (response.success) {
        ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
        router.replace(RouterHome.main_home, { scroll: false });
-      }
-
-      if (create.status === 400) {
-        setLoading(false);
-        ComponentGlobal_NotifikasiGagal(create.message);
-      }
-
-      if (create.status === 500) {
-        setLoading(false);
-        ComponentGlobal_NotifikasiGagal(create.message);
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(response.message);
      }
    } catch (error) {
-      setLoading(false);
      clientLogger.error("Error create new profile:", error);
+      ComponentGlobal_NotifikasiGagal(
+        error instanceof Error
+          ? error.message
+          : "Terjadi kesalahan saat membuat profile"
+      );
+    } finally {
+      setLoading(false);
    }
-  }
+  };
+
+  // async function onSubmit() {
+  //   if (_.values(value).includes(""))
+  //     return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+  //   if (!value.email.match(emailRegex))
+  //     return ComponentGlobal_NotifikasiPeringatan("Format email salah");
+
+  //   if (filePP == null)
+  //     return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
+  //   if (fileBG == null)
+  //     return ComponentGlobal_NotifikasiPeringatan(
+  //       "Lengkapi background profile"
+  //     );
+
+  //   try {
+  //     setLoading(true);
+
+  //     const uploadPhoto = await funGlobal_UploadToStorage({
+  //       file: filePP,
+  //       dirId: DIRECTORY_ID.profile_foto,
+  //     });
+  //     if (!uploadPhoto.success) {
+  //       setLoading(false);
+  //       ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+  //       return;
+  //     }
+
+  //     const uploadBackground = await funGlobal_UploadToStorage({
+  //       file: fileBG,
+  //       dirId: DIRECTORY_ID.profile_background,
+  //     });
+  //     if (!uploadBackground.success) {
+  //       setLoading(false);
+  //       ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+  //       return;
+  //     }
+
+  //     const newData: CreateProfileData = {
+  //       name: value.name,
+  //       email: value.email,
+  //       alamat: value.alamat,
+  //       jenisKelamin: value.jenisKelamin,
+  //       imageId: uploadPhoto.data.id,
+  //       imageBackgroundId: uploadBackground.data.id,
+  //     };
+
+  //     const respone = await apiCreateProfile({
+  //       data: newData as any,
+  //     });
+
+  //     if (respone && respone.success) {
+  //       console.log(respone.data);
+  //       ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
+  //       router.replace(RouterHome.main_home, { scroll: false });
+  //     } else {
+  //       setLoading(false);
+  //       ComponentGlobal_NotifikasiPeringatan(respone.message);
+  //     }
+
+  //     // const create = await funCreateNewProfile({
+  //     //   data: fixData as any,
+  //     //   imageId: uploadPhoto.data.id,
+  //     //   imageBackgroundId: uploadBackground.data.id,
+  //     // });
+
+  //     // if (create.status === 201) {
+  //     //   ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
+  //     //   router.replace(RouterHome.main_home, { scroll: false });
+  //     // }
+
+  //     // if (create.status === 400) {
+  //     //   setLoading(false);
+  //     //   ComponentGlobal_NotifikasiGagal(create.message);
+  //     // }
+
+  //     // if (create.status === 500) {
+  //     //   setLoading(false);
+  //     //   ComponentGlobal_NotifikasiGagal(create.message);
+  //     // }
+  //   } catch (error) {
+  //     setLoading(false);
+  //     clientLogger.error("Error create new profile:", error);
+  //   }
+  // }

  return (
    <>
      <Button
-        loading={loading ? true : false}
+        loading={loading}
        loaderPosition="center"
        mt={"md"}
        radius={50}
        bg={MainColor.yellow}
        color="yellow"
        onClick={() => {
-          onSubmit();
+          // onSubmit();
+          handleSubmit();
        }}
        style={{
          border: `2px solid ${AccentColor.yellow}`,
--- a/src/app_modules/katalog/profile/_component/skeleton_view.tsx
+++ b/src/app_modules/katalog/profile/_component/skeleton_view.tsx
@@ -0,0 +1,17 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Stack } from "@mantine/core";
+
+export { Profile_SkeletonViewEdit };
+
+function Profile_SkeletonViewEdit() {
+    return (
+      <>
+        <Stack spacing={"xl"}>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <CustomSkeleton key={i} height={50} width={"100%"} />
+          ))}
+          <CustomSkeleton height={50} width={"100%"} radius={"xl"} />
+        </Stack>
+      </>
+    );
+}
--- a/src/app_modules/katalog/profile/edit/view.tsx
+++ b/src/app_modules/katalog/profile/edit/view.tsx
@@ -6,52 +6,69 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { clientLogger } from "@/util/clientLogger";
-import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
+import { Button, Select, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { emailRegex } from "../../component/regular_expressions";
-import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
+import { Profile_SkeletonViewEdit } from "../_component/skeleton_view";
+import {
+  apiGetOneProfileById,
+  apiUpdateProfile,
+} from "../lib/api_fetch_profile";
 import { MODEL_PROFILE } from "../model/interface";

-export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
+export default function EditProfile() {
  const router = useRouter();
+  const params = useParams<{ id: string }>();
+  const profileId = params.id;

  //Get data profile
-  const [dataProfile, setDataProfile] = useState(data);
+  const [data, setData] = useState<MODEL_PROFILE | null>(null);
  const [loading, setLoading] = useState(false);

-  async function onUpdate() {
-    const body = dataProfile;
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);

+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneProfileById({ id: profileId });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data profile", error);
+    }
+  }
+
+  async function onUpdate() {
    // console.log(body)
-    if (_.values(body).includes(""))
+    if (_.values(data).includes(""))
      return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
-    if (!body.email.match(emailRegex))
+    if (!data?.email.match(emailRegex))
      return ComponentGlobal_NotifikasiPeringatan("Format email salah");

    try {
      setLoading(true);
-      const res = await Profile_funEditById(body);
-      if (res.status === 200) {
-        ComponentGlobal_NotifikasiBerhasil(res.message);
+      const respone = await apiUpdateProfile({ data: data });
+
+      if (respone && respone.success == true) {
+        ComponentGlobal_NotifikasiBerhasil(respone.message);
        router.back();
      } else {
        setLoading(false);
-        ComponentGlobal_NotifikasiGagal(res.message);
+        ComponentGlobal_NotifikasiGagal(respone.message);
      }
    } catch (error) {
      setLoading(false);
-      clientLogger.error("Error update foto profile", error);
+      clientLogger.error("Error client update profile", error);
    }
  }

-  if (!dataProfile)
-    return (
-      <>
-        <Loader />
-      </>
-    );
+  if (!data) return <Profile_SkeletonViewEdit />;

  return (
    <>
@@ -108,16 +125,16 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
          placeholder="nama"
          maxLength={50}
          error={
-            dataProfile?.name === "" ? (
+            data?.name === "" ? (
              <ComponentGlobal_ErrorInput text="Masukan nama" />
            ) : (
              ""
            )
          }
-          value={dataProfile?.name}
+          value={data?.name}
          onChange={(val) => {
-            setDataProfile({
-              ...dataProfile,
+            setData({
+              ...data,
              name: val.target.value,
            });
          }}
@@ -136,19 +153,18 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
          label="Email"
          placeholder="email"
          error={
-            dataProfile?.email === "" ? (
+            data?.email === "" ? (
              <ComponentGlobal_ErrorInput text="Masukan email " />
-            ) : dataProfile?.email?.length > 0 &&
-              !dataProfile?.email.match(emailRegex) ? (
+            ) : data?.email?.length > 0 && !data?.email.match(emailRegex) ? (
              <ComponentGlobal_ErrorInput text="Invalid email" />
            ) : (
              ""
            )
          }
-          value={dataProfile?.email}
+          value={data?.email}
          onChange={(val) => {
-            setDataProfile({
-              ...dataProfile,
+            setData({
+              ...data,
              email: val.target.value,
            });
          }}
@@ -166,18 +182,18 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
          withAsterisk
          label="Alamat"
          placeholder="alamat"
-          value={dataProfile.alamat}
+          value={data.alamat}
          maxLength={100}
          error={
-            dataProfile?.alamat === "" ? (
+            data?.alamat === "" ? (
              <ComponentGlobal_ErrorInput text="Masukan alamat " />
            ) : (
              ""
            )
          }
          onChange={(val) => {
-            setDataProfile({
-              ...dataProfile,
+            setData({
+              ...data,
              alamat: val.target.value,
            });
          }}
@@ -194,14 +210,14 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
          }}
          withAsterisk
          label="Jenis Kelamin"
-          value={dataProfile?.jenisKelamin}
+          value={data?.jenisKelamin}
          data={[
            { value: "Laki-laki", label: "Laki-laki" },
            { value: "Perempuan", label: "Perempuan" },
          ]}
          onChange={(val: any) => {
-            setDataProfile({
-              ...dataProfile,
+            setData({
+              ...data,
              jenisKelamin: val,
            });
          }}
@@ -213,14 +229,13 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
          bg={MainColor.yellow}
          color="yellow"
          c={"black"}
-          loading={loading ? true : false}
+          loading={loading}
          loaderPosition="center"
          onClick={() => onUpdate()}
        >
          Update
        </Button>
      </Stack>
-
    </>
  );
 }
--- a/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts
+++ b/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts
@@ -1,16 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-
-export async function Profile_getOneProfileAndUserById(profileId: string) {
-  const data = await prisma.profile.findFirst({
-    where: {
-      id: profileId,
-    },
-    include: {
-      User: true,
-    },
-  });
-  // console.log(data)
-  return data;
-}
--- a/src/app_modules/katalog/profile/lib/api_fetch_profile.ts
+++ b/src/app_modules/katalog/profile/lib/api_fetch_profile.ts
@@ -0,0 +1,57 @@
+import { MODEL_PROFILE } from "../model/interface";
+
+export { apiUpdateProfile, apiGetOneProfileById, apiCreateProfile };
+
+const apiCreateProfile = async ({ data }: { data: MODEL_PROFILE }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const res = await fetch(`/api/profile`, {
+    method: "POST",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await res.json().catch(() => null);
+}
+
+const apiGetOneProfileById = async ({ id }: { id: string }) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const res = await fetch(`/api/profile/${id}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    return await res.json().catch(() => null);
+};
+
+const apiUpdateProfile = async ({ data }: { data: MODEL_PROFILE }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const res = await fetch(`/api/profile/${data.id}`, {
+    method: "PUT",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await res.json().catch(() => null);
+};
+
--- a/src/app_modules/user_search/component/skeleton_view.tsx
+++ b/src/app_modules/user_search/component/skeleton_view.tsx
@@ -0,0 +1,27 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Grid, Group, Stack } from "@mantine/core";
+
+export function UserSearch_SkeletonView() {
+  return (
+    <>
+      <Stack>
+        {Array.from({ length: 2 }).map((e, i) => (
+          <Grid key={i}>
+            <Grid.Col span={2}>
+              <CustomSkeleton height={40} width={40} circle />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Stack>
+                <CustomSkeleton width={"80%"} height={20} />
+                <CustomSkeleton width={"40%"} height={15} />
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <CustomSkeleton height={40} width={40} circle />
+            </Grid.Col>
+          </Grid>
+        ))}
+      </Stack>
+    </>
+  );
+}
--- a/src/app_modules/user_search/component/ui_user_search.tsx
+++ b/src/app_modules/user_search/component/ui_user_search.tsx
@@ -25,6 +25,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { userSearch_getAllUser } from "../fun/get/get_all_user";
 import { apiGetUserSearch } from "./api_fetch_user_search";
+import { UserSearch_SkeletonView } from "./skeleton_view";

 export function UserSearch_UiView() {
  const [data, setData] = useState<MODEL_USER[]>([]);
@@ -107,15 +108,15 @@ export function UserSearch_UiView() {
          onChange={(val) => handleSearch(val.target.value)}
          // disabled={isLoading}
        />
-        {!data && isLoading ? (
-          <CustomSkeleton height={40} width={"100%"} />
+        {!data.length && isLoading ? (
+          <UserSearch_SkeletonView />
        ) : (
-          <Box >
+          <Box>
            {_.isEmpty(data) ? (
              <ComponentGlobal_IsEmptyData text="Pengguna tidak ditemukan" />
            ) : (
              <ScrollOnly
-                height="5vh"
+                height="84vh"
                renderLoading={() => (
                  <Center mt={"lg"}>
                    <Loader color={"yellow"} />
@@ -170,61 +171,12 @@ function CardView({ data }: { data: MODEL_USER }) {
          <Group position="right" align="center" h={"100%"}>
            <Center>
              <ActionIcon variant="transparent">
-                {/* PAKE LOADING */}
-                {/* {loading ? (
-                  <ComponentGlobal_Loader />
-                ) : (
-                  <IconChevronRight color="white" />
-                )} */}
-
-                {/* GA PAKE LOADING */}
                <IconChevronRight color="white" />
              </ActionIcon>
            </Center>
          </Group>
        </Grid.Col>
      </Grid>
-
-      {/* <Stack
-        spacing={"xs"}
-        c="white"
-        py={"xs"}
-        onClick={() => {
-          setLoading(true);
-          router.push(RouterProfile.katalogOLD + `${data?.Profile?.id}`);
-        }}
-      >
-
-        <Group position="apart" grow>
-          <Group position="left" bg={"blue"}>
-            <ComponentGlobal_LoaderAvatar
-              fileId={data.Profile.imageId as any}
-              imageSize="100"
-            />
-
-            <Stack spacing={0}>
-              <Text fw={"bold"} lineClamp={1}>
-                {data?.Profile.name}d sdasd sdas 
-              </Text>
-              <Text fz={"sm"} fs={"italic"}>
-                +{data?.nomor}
-              </Text>
-            </Stack>
-          </Group>
-
-          <Group position="right">
-            <Center>
-              <ActionIcon variant="transparent">
-                {loading ? (
-                  <ComponentGlobal_Loader />
-                ) : (
-                  <IconChevronRight color="white" />
-                )}
-              </ActionIcon>
-            </Center>
-          </Group>
-        </Group>
-      </Stack> */}
    </>
  );
 }
--- a/src/util/frontend-logger.ts
+++ b/src/util/frontend-logger.ts