fix portofolio

deskripsi:
- edit data portofolio

run.build.dev

@@ -0,0 +1 @@
+nice -n 19 bun --env-file=.env.build run build

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

@@ -1,7 +1,131 @@
 import { prisma } from "@/lib";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
-export { POST };
+export { GET, POST, PUT };
+
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  try {
+    const { id } = params;
+
+    const data = await prisma.portofolio.findUnique({
+      where: {
+        id: id,
+      },
+      include: {
+        MasterBidangBisnis: {
+          select: {
+            id: true,
+            name: true,
+            active: true,
+          },
+        },
+        Portofolio_MediaSosial: true,
+        Profile: {
+          select: {
+            userId: true,
+            User: {
+              select: {
+                id: true,
+              },
+            },
+          },
+        },
+        BusinessMaps: {
+          include: {
+            Author: true,
+          },
+        },
+      },
+    });
+
+    if (!data)
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Data tidak ditemukan",
+        },
+        { status: 404 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("API Error Get Data Portofolio", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "API Error Get Data Potofolio",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function PUT(request: Request, { params }: { params: { id: string } }) {
+  if (request.method !== "PUT") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+    const { data } = await request.json();
+
+    const udpateData = await prisma.portofolio.update({
+      where: {
+        id: id,
+      },
+      data: {
+        namaBisnis: data.namaBisnis,
+        alamatKantor: data.alamatKantor,
+        tlpn: data.tlpn,
+        deskripsi: data.deskripsi,
+        masterBidangBisnisId: data.masterBidangBisnisId,
+      },
+    });
+
+    if (!udpateData)
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal update data",
+        },
+        { status: 400 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: udpateData,
+      },
+
+      { status: 200 }
+    );
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error update data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
 
 async function POST(request: Request, { params }: { params: { id: string } }) {
   if (request.method !== "POST") {

src/app/dev/portofolio/edit/data/[id]/page.tsx

@@ -18,7 +18,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <Portofolio_EditDataBisnis dataPorto={dataPorto as any} listBidang={listBidang as any} />
+      <Portofolio_EditDataBisnis />
     </>
   );
 }

src/app/zCoba/skeleton/page.tsx

@@ -5,6 +5,7 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Button, Grid, Skeleton, Stack } from "@mantine/core";
 import Link from "next/link";
 
@@ -14,100 +15,12 @@ export default function Voting_ComponentSkeletonViewPuh() {
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
       >
-        <Button
-         
-        >
-          <Link
-            color="white"
-            style={{
-              color: "white",
-              textDecoration: "none",
-            }}
-            target="_blank"
-            href={
-              "https://wa.me/+6281339158911?text=Hallo , Apa boleh saya minta informasi tentang DariBaliMice?"
-            }
-          >
-            {" "}
-            Kirim
-          </Link>
-        </Button>
-
-        <Stack>
-          <ComponentGlobal_CardStyles marginBottom={"0"}>
-            <Stack>
-              <Skeleton h={20} w={100} />
-
-              {Array.from(new Array(2)).map((e, i) => (
-                <Grid align="center" gutter={"md"} key={i}>
-                  <Grid.Col span={"content"}>
-                    <Skeleton circle height={40} />
-                  </Grid.Col>
-                  <Grid.Col span={3}>
-                    <Skeleton height={20} w={150} />
-                  </Grid.Col>
-                </Grid>
-              ))}
-            </Stack>
-          </ComponentGlobal_CardStyles>
-
-          {/* <ComponentGlobal_CardStyles marginBottom={"0"}>
-            <Stack spacing={"xl"}>
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton circle height={40} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={20} w={150} />
-                </Grid.Col>
-              </Grid>
-              <Center>
-                <Skeleton height={15} w={200} />
-              </Center>
-
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton h={15} w={70} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={15} w={200} />
-                </Grid.Col>
-              </Grid>
-
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton h={15} w={70} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={15} w={200} />
-                </Grid.Col>
-              </Grid>
-
-              <Skeleton height={15} w={100} />
-              <Skeleton height={15} w={"100%"} />
-              <Skeleton height={15} w={100} />
-              <Skeleton height={15} w={"100%"} />
-            </Stack>
-          </ComponentGlobal_CardStyles> */}
-
-          {/* <ComponentGlobal_CardStyles>
-            <Stack>
-              <Center>
-                <Skeleton h={20} w={"30%"} />
-              </Center>
-
-              <Group position="center" spacing={50}>
-                <Stack align="center">
-                  <Skeleton circle height={70} />
-                  <Skeleton height={20} w={50} />
-                </Stack>
-                <Stack align="center">
-                  <Skeleton circle height={70} />
-                  <Skeleton height={20} w={50} />
-                </Stack>
-              </Group>
-            </Stack>
-          </ComponentGlobal_CardStyles> */}
+        <Stack spacing={"xl"} p={"sm"}>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <CustomSkeleton key={i} height={50} width={"100%"} />
+          ))}
+          <CustomSkeleton height={100} width={"100%"} />
+          <CustomSkeleton radius="xl" height={50} width={"100%"} />
         </Stack>
       </UIGlobal_LayoutTamplate>
     </>

src/app_modules/katalog/portofolio/component/api_fetch_portofolio.ts

@@ -1,8 +1,12 @@
-export {
-    apiCreatePortofolio,
-};
+export { apiCreatePortofolio, apiGetPortofolioById, apiUpdatePortofolioById };
 
-const apiCreatePortofolio = async ({ profileId, data }: { profileId: string, data: any }) => {
+const apiCreatePortofolio = async ({
+  profileId,
+  data,
+}: {
+  profileId: string;
+  data: any;
+}) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
 
@@ -19,3 +23,49 @@ const apiCreatePortofolio = async ({ profileId, data }: { profileId: string, dat
 
   return await res.json().catch(() => null);
 };
+
+const apiGetPortofolioById = 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/portofolio/${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 apiUpdatePortofolioById = async ({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const respone = await fetch(`/api/portofolio/${id}`, {
+    method: "PUT",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!respone.ok) {
+    console.error("Failed to send logs:", respone.statusText);
+    return null;
+  }
+
+  return await respone.json();
+};

src/app_modules/katalog/portofolio/component/skeleton_view.tsx

@@ -1,8 +1,18 @@
-export {
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Stack } from "@mantine/core";
 
+export { Portofolio_SkeletonEditDataBisnis };
+
+function Portofolio_SkeletonEditDataBisnis() {
+  return (
+    <>
+      <Stack spacing={"xl"} p={"sm"}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <CustomSkeleton key={i} height={50} width={"100%"} />
+        ))}
+        <CustomSkeleton height={100} width={"100%"} />
+        <CustomSkeleton radius="xl" height={50} width={"100%"} />
+      </Stack>
+    </>
+  );
 }
-
-function  Portofolio_SkeletonListPorto() {
-    
-    
-}

src/app_modules/katalog/portofolio/create/view.tsx

@@ -184,12 +184,13 @@ export default function CreatePortofolio() {
                   backgroundColor: MainColor.login,
                 },
               }}
-              inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.white }}
               defaultCountry="id"
               onChange={(val) => {
                 const valPhone = val.substring(1);
                 setDataPortofolio({
                   ...dataPortofolio,
+                  
                   tlpn: valPhone,
                 });
               }}

src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx

@@ -1,66 +1,179 @@
 "use client";
 
-import {
-  MainColor
-} from "@/app_modules/_global/color/color_pallet";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { apiGetMasterBidangBisnis } from "@/app_modules/_global/lib/api_master";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  Button,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-import { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
+import { PhoneInput } from "react-international-phone";
+import {
+  apiGetPortofolioById,
+  apiUpdatePortofolioById,
+} from "../../component/api_fetch_portofolio";
+import { Portofolio_SkeletonEditDataBisnis } from "../../component/skeleton_view";
 import {
   MODEL_PORTOFOLIO,
   MODEL_PORTOFOLIO_BIDANG_BISNIS,
 } from "../../model/interface";
 
-export default function Portofolio_EditDataBisnis({
-  dataPorto,
-  listBidang,
-}: {
-  dataPorto: MODEL_PORTOFOLIO;
-  listBidang: MODEL_PORTOFOLIO_BIDANG_BISNIS[];
-}) {
+interface IUpdatePortofoli {
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  masterBidangBisnisId: string;
+}
+
+export default function Portofolio_EditDataBisnis() {
   const router = useRouter();
-  const [value, setValue] = useState(dataPorto);
   const [loading, setLoading] = useState(false);
 
+  const params = useParams<{ id: string }>();
+  const portofolioId = params.id;
+  const [data, setData] = useState<MODEL_PORTOFOLIO | null>(null);
+  const [listBidang, setListBidang] = useState<
+    MODEL_PORTOFOLIO_BIDANG_BISNIS[]
+  >([]);
+
+  useShallowEffect(() => {
+    onLoadBidang();
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const respone = await apiGetPortofolioById({
+        id: portofolioId,
+      });
+
+      if (respone.success) {
+        setData(respone.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data portofolio", error);
+    }
+  };
+
+  const onLoadBidang = async () => {
+    try {
+      const respone = await apiGetMasterBidangBisnis();
+      if (respone.success) {
+        setListBidang(respone.data);
+      } else {
+        setListBidang([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data master bidang bisnis", error);
+    }
+  };
+
+  const validateData = async (data: any) => {
+    if (_.values(data).includes("")) {
+      // VALIDASI NOMOR TELEPON
+      return "Lengkapi data";
+    }
+
+    if (data?.tlpn.length < 8) {
+      return "Nomor telepon minimal 8 digit";
+    }
+  };
+
+  const hanldeUpadteData = async (data: any) => {
+    try {
+      const newData: IUpdatePortofoli = {
+        namaBisnis: data?.namaBisnis,
+        alamatKantor: data?.alamatKantor,
+        tlpn: data?.tlpn,
+        deskripsi: data?.deskripsi,
+        masterBidangBisnisId: data?.MasterBidangBisnis.id,
+      };
+
+      const respone = await apiUpdatePortofolioById({
+        data: newData,
+        id: portofolioId,
+      });
+
+      return respone;
+    } catch (error) {
+      console.error("Error update data portofolio", error);
+      return null;
+    }
+  };
+
+  const submitUpdate = async () => {
+    const validate = await validateData(data);
+    if (validate) {
+      ComponentGlobal_NotifikasiPeringatan(validate);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const updateData = await hanldeUpadteData(data);
+
+      if (updateData.success) {
+        ComponentGlobal_NotifikasiBerhasil(updateData.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(updateData.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update data portofolio", error);
+    }
+  };
+
+  if (!data) return <Portofolio_SkeletonEditDataBisnis />;
+
   return (
     <>
-      {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
       <Stack spacing={50} p={"sm"}>
         <Stack>
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
-              }
+                color: MainColor.red,
+              },
             }}
             withAsterisk
-            value={value.namaBisnis}
+            value={data?.namaBisnis}
             label="Nama Bisnis"
             placeholder="Nama bisnis"
             maxLength={100}
             error={
-              value.namaBisnis === "" ? (
+              data?.namaBisnis === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nama bisnis" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 namaBisnis: val.target.value,
               });
             }}
@@ -68,17 +181,17 @@ export default function Portofolio_EditDataBisnis({
           <Select
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
-              }
+                color: MainColor.red,
+              },
             }}
             withAsterisk
-            value={value.MasterBidangBisnis.id}
+            value={data?.MasterBidangBisnis.id}
             label="Bidang Bisnis"
             placeholder="Pilih salah satu bidang bisnis"
             data={listBidang.map((e) => ({
@@ -86,8 +199,8 @@ export default function Portofolio_EditDataBisnis({
               label: e.name,
             }))}
             onChange={(val) => {
-              setValue({
-                ...(value as any),
+              setData({
+                ...(data as any),
                 MasterBidangBisnis: {
                   id: val,
                 },
@@ -97,114 +210,145 @@ export default function Portofolio_EditDataBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
-              }
+                color: MainColor.red,
+              },
             }}
             withAsterisk
-            value={value.alamatKantor}
+            value={data?.alamatKantor}
             label="Alamat Kantor"
             placeholder="Alamat kantor"
             maxLength={100}
             error={
-              value.alamatKantor === "" ? (
+              data?.alamatKantor === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan alamat kantor" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 alamatKantor: val.target.value,
               });
             }}
           />
-          <TextInput
+
+          {/* <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
-              }
+                color: MainColor.red,
+              },
             }}
             withAsterisk
-            value={value.tlpn}
+            value={data?.tlpn}
             label="Nomor Telepon Kantor"
             placeholder="Nomor telepon kantor"
             type="number"
             maxLength={15}
             error={
-              value.tlpn === "" ? (
+              data?.tlpn === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nomor telepon kantor" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 tlpn: val.target.value,
               });
             }}
-          />
+          /> */}
+
+          <Stack spacing={5}>
+            <Text c={MainColor.white} fz={"sm"}>
+              Nomor Telepon{" "}
+              <Text c={"red"} span inherit>
+                *
+              </Text>
+            </Text>
+
+            <PhoneInput
+              value={data?.tlpn}
+              placeholder="Nomor telepon"
+              countrySelectorStyleProps={{
+                buttonStyle: {
+                  backgroundColor: MainColor.login,
+                },
+              }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.white }}
+              defaultCountry="id"
+              onChange={(val) => {
+                const valPhone = val.substring(1);
+                setData({
+                  ...data,
+                  tlpn: valPhone,
+                });
+              }}
+            />
+          </Stack>
+
           <Stack spacing={5}>
             <Textarea
               styles={{
                 label: {
-                  color: MainColor.white
+                  color: MainColor.white,
                 },
                 input: {
-                  backgroundColor: MainColor.white
+                  backgroundColor: MainColor.white,
                 },
                 required: {
-                  color: MainColor.red
-                }
+                  color: MainColor.red,
+                },
               }}
               autosize
               minRows={2}
               maxRows={5}
               withAsterisk
-              value={value.deskripsi}
+              value={data?.deskripsi}
               label="Deskripsi"
               placeholder="Deskripsi singkat mengenai usaha"
               maxLength={300}
               error={
-                value.deskripsi === "" ? (
+                data.deskripsi === "" ? (
                   <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
                 ) : (
                   ""
                 )
               }
               onChange={(val) => {
-                setValue({
-                  ...value,
+                setData({
+                  ...data,
                   deskripsi: val.target.value,
                 });
               }}
             />
             <ComponentGlobal_InputCountDown
               maxInput={300}
-              lengthInput={value.deskripsi.length}
+              lengthInput={data?.deskripsi.length as any}
             />
           </Stack>
         </Stack>
+
         <Button
-          disabled={_.values(value).includes("") ? true : false}
+          disabled={_.values(data).includes("")}
           radius={"xl"}
           loading={loading ? true : false}
           loaderPosition="center"
           onClick={() => {
-            onUpdate(router, value as any, setLoading);
+            submitUpdate();
           }}
           bg={MainColor.yellow}
           color={"yellow"}
@@ -219,27 +363,3 @@ export default function Portofolio_EditDataBisnis({
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  data: MODEL_PORTOFOLIO,
-  setLoading: any
-) {
-  if (_.values(data).includes("")) {
-    return null;
-  }
-
-  // if (data.namaBisnis.length > 100) return null;
-  // if (data.alamatKantor.length > 100) return null;
-  // if (data.deskripsi.length > 150) return null;
-
-  await Portofolio_funEditDataBisnis(data).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}