upd: profile dan katalog

Deskripsi:
- mecah dan ganti ke api

No Issues

src/app/api/new/portofolio/route.ts

@@ -0,0 +1,55 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+
+
+// GET  ALL DATA PORTOFOLIO BY PROFILE ID
+export async function GET(request: Request) {
+   try {
+      let fixData
+      const { searchParams } = new URL(request.url)
+      const profile = searchParams.get("profile")
+      const page = searchParams.get("page")
+
+      if (page == "profile") {
+         fixData = await prisma.portofolio.findMany({
+            take: 2,
+            orderBy: {
+               createdAt: "desc",
+            },
+            where: {
+               profileId: profile,
+               active: true,
+            },
+            select: {
+               id: true,
+               id_Portofolio: true,
+               namaBisnis: true,
+               profileId: true,
+            },
+         });
+      } else if (page == "portofolio") {
+         fixData = await prisma.portofolio.findMany({
+            orderBy: {
+               createdAt: "desc",
+            },
+            where: {
+               profileId: profile,
+               active: true,
+            },
+            select: {
+               id: true,
+               id_Portofolio: true,
+               namaBisnis: true,
+               profileId: true,
+            },
+         });
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: fixData }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/user/route.ts

@@ -1,53 +1,50 @@
 import { prisma } from "@/app/lib";
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { NextResponse } from "next/server";
 
 
-// GET DATA USER LOGIN
+// GET ONE DATA USER PROFILE BY PROFILE ID
 export async function GET(request: Request) {
    try {
-      const userLoginId = await funGetUserIdByToken()
+      const { searchParams } = new URL(request.url)
-      if (userLoginId == null) {
+      const profile = searchParams.get("profile")
-         return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
-      }
 
-      const data = await prisma.user.findFirst({
+      const data = await prisma.profile.findUnique({
          where: {
-            id: userLoginId,
+            id: String(profile),
          },
          select: {
             id: true,
-            username: true,
+            name: true,
-            nomor: true,
+            email: true,
-            active: true,
+            alamat: true,
-            masterUserRoleId: true,
+            jenisKelamin: true,
-            Profile: {
+            imageId: true,
+            imageBackgroundId: true,
+            userId: true,
+            User: {
                select: {
-                  id: true,
+                  username: true,
-                  name: true,
+                  nomor: true,
-                  email: true,
+                  active: true,
-                  alamat: true,
+                  masterUserRoleId: true
-                  jenisKelamin: true,
-                  imageId: true,
-                  imageBackgroundId: true
                }
             }
          }
       });
 
       const dataFix = {
-         id: data?.id,
+         id: data?.userId,
-         username: data?.username,
+         username: data?.User?.username,
-         nomor: data?.nomor,
+         nomor: data?.User?.nomor,
-         active: data?.active,
+         active: data?.User?.active,
-         masterUserRoleId: data?.masterUserRoleId,
+         masterUserRoleId: data?.User?.masterUserRoleId,
-         idProfile: data?.Profile?.id,
+         idProfile: data?.id,
-         name: data?.Profile?.name,
+         name: data?.name,
-         email: data?.Profile?.email,
+         email: data?.email,
-         alamat: data?.Profile?.alamat,
+         alamat: data?.alamat,
-         jenisKelamin: data?.Profile?.jenisKelamin,
+         jenisKelamin: data?.jenisKelamin,
-         imageId: data?.Profile?.imageId,
+         imageId: data?.imageId,
-         imageBackgroundId: data?.Profile?.imageBackgroundId
+         imageBackgroundId: data?.imageBackgroundId
 
       }
 

src/app/dev/katalog/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Katalog_MainView } from "@/app_modules/katalog";
+import { Katalog_MainView, ViewKatalogNew } from "@/app_modules/katalog";
 import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
 import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
 
@@ -12,11 +12,13 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <Katalog_MainView
+      {/* <Katalog_MainView
         profile={dataProfile as any}
         listPorto={listPorto as any}
         userLoginId={userLoginId as any}
-      />
+      /> */}
+
+      <ViewKatalogNew />
     </>
   );
 }

src/app_modules/katalog/index.ts

@@ -1,2 +1,4 @@
+import ViewKatalogNew from "./view_katalog_new";
 
 export { Katalog_MainView } from "./view_katalog";
+export { ViewKatalogNew }

src/app_modules/katalog/portofolio/index.ts

@@ -1,3 +1,5 @@
+import { IListPortofolio } from './lib/type_portofolio';
+import { apiGetPortofolioByProfile } from './lib/api_portofolio';
 import CreatePortofolio from "./create/view";
 import CreatePortofolioLayout from "./create/layout";
 import PortofolioLayout from "./ui/ui_layout";
@@ -20,6 +22,8 @@ export {
   LayoutPortofolio_EditDataBisnis,
   LayoutPortofolio_EditLogoBisnis,
   LayoutPortofolio_EditMedsosBisnis,
+  apiGetPortofolioByProfile
 };
+export type { IListPortofolio };
 export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
 

src/app_modules/katalog/portofolio/lib/api_portofolio.ts

@@ -0,0 +1,4 @@
+export const apiGetPortofolioByProfile = async (path?: string) => {
+   const response = await fetch(`/api/new/portofolio${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}

src/app_modules/katalog/portofolio/lib/type_portofolio.ts

@@ -0,0 +1,6 @@
+export interface IListPortofolio {
+   id: string
+   id_Portofolio: string
+   profileId: string
+   namaBisnis: string
+}

src/app_modules/katalog/ui/list_portolio_new.tsx

@@ -0,0 +1,139 @@
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { Box, Center, Group, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { apiGetPortofolioByProfile, IListPortofolio } from "../portofolio";
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { IconCaretRight } from "@tabler/icons-react";
+
+export default function ListPortofolioProfileNew() {
+   const router = useRouter();
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [dataPortofolio, setDataPortofolio] = useState<IListPortofolio[]>([])
+
+   async function getPortofolio() {
+      try {
+         setLoading(true)
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
+         if (response.success) {
+            setDataPortofolio(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getPortofolio()
+   }, []);
+
+
+   return (
+      <>
+         <Box
+            style={{
+               backgroundColor: AccentColor.darkblue,
+               border: `2px solid ${AccentColor.blue}`,
+               borderRadius: "10px ",
+               padding: "15px",
+               color: "white",
+            }}
+         >
+            <Stack spacing={"sm"}>
+               <Group position="center">
+                  <Title order={4}>Portofolio</Title>
+               </Group>
+
+               <Stack
+                  style={{
+                     height: "auto",
+                  }}
+               >
+                  {
+                     loading ?
+                        <>
+                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                        </>
+                        :
+
+                        _.isEmpty(dataPortofolio) ? (
+                           <Center>
+                              <Text fs={"italic"} fz={"xs"} c={"gray"}>
+                                 - Belum Ada Portofolio -
+                              </Text>
+                           </Center>
+                        ) : (
+                           <Stack>
+                              {dataPortofolio.map((e, i) => (
+                                 <Paper
+                                    shadow="sm"
+                                    key={i}
+                                    radius={"md"}
+                                    onClick={() => {
+                                       router.push(RouterPortofolio.main_detail + e?.id);
+                                    }}
+                                    style={{
+                                       backgroundColor: MainColor.darkblue,
+                                       border: `2px solid ${AccentColor.blue}`,
+                                       borderRadius: "10px ",
+                                       padding: "15px",
+                                       color: "white",
+                                    }}
+                                 >
+                                    <Group position="apart">
+                                       <Stack spacing={0} w={"80%"}>
+                                          <Text fw={"bold"} lineClamp={1}>
+                                             {e?.namaBisnis}
+                                          </Text>
+                                          <Text fz={10} c={MainColor.yellow}>
+                                             #{e.id_Portofolio}
+                                          </Text>
+                                       </Stack>
+                                       <Stack>
+                                          <IconCaretRight color="white" size={25} />
+                                       </Stack>
+                                    </Group>
+                                 </Paper>
+                              ))}
+                           </Stack>
+                        )
+                  }
+
+                  {
+                     loading ? <></>
+                        :
+                        _.isEmpty(dataPortofolio) ? (
+                           ""
+                        ) : (
+                           <Group position="right">
+                              <Text
+                                 style={{
+                                    cursor: "pointer",
+                                 }}
+                                 onClick={() =>
+                                    router.push(
+                                       RouterPortofolio.daftar_portofolio + param.id,
+                                       { scroll: false }
+                                    )
+                                 }
+                                 fw={"bold"}
+                                 fz={"sm"}
+                              >
+                                 Lihat semua
+                              </Text>
+                           </Group>
+                        )
+                  }
+               </Stack>
+            </Stack>
+         </Box>
+      </>
+   )
+}

src/app_modules/katalog/ui/profile_detail.tsx

@@ -0,0 +1,131 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
+import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component";
+import SkeletonProfile from "./skeleton_profile";
+
+export default function ProfileDetail() {
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [dataProfile, setDataProfile] = useState<IUserProfile>()
+   const listInformation = [
+      {
+         icon: <IconPhone />,
+         value: "+" + dataProfile?.nomor,
+      },
+      {
+         icon: <IconBrandGmail />,
+         value: dataProfile?.email,
+      },
+      {
+         icon: <IconHome />,
+         value: dataProfile?.alamat,
+      },
+      {
+         icon:
+            dataProfile?.jenisKelamin === "Laki-laki" ? (
+               <IconGenderMale />
+            ) : (
+               <IconGenderFemale />
+            ),
+         value: dataProfile?.jenisKelamin,
+      },
+   ];
+
+
+   async function getProfile() {
+      try {
+         setLoading(true)
+         const response = await apiGetUserProfile(`?profile=${param.id}`)
+         if (response.success) {
+            setDataProfile(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getProfile()
+   }, []);
+
+   return <>
+      <Stack
+         spacing={0}
+         style={{
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px ",
+            padding: "15px",
+            color: "white",
+         }}
+      >
+         {
+            loading ?
+               <SkeletonProfile /> :
+               <>
+                  <Box>
+                     <Profile_ComponentLoadBackgroundImage
+                        fileId={dataProfile?.imageBackgroundId as any}
+                        size={500}
+                     />
+
+                     <Box
+                        sx={{
+                           position: "relative",
+                           bottom: 60,
+                           margin: "auto",
+                           width: "100%",
+                           marginBottom: -30,
+                        }}
+                     >
+                        <Center>
+                           <Profile_ComponentAvatarProfile
+                              fileId={dataProfile?.imageId as any}
+                              style={{
+                                 borderStyle: "solid",
+                                 borderColor: AccentColor.darkblue,
+                                 borderWidth: "2px",
+                              }}
+                           />
+                        </Center>
+                        <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
+                           <Text fw={"bold"} lineClamp={1}>
+                              {dataProfile?.name}
+                           </Text>
+                           <Text fs={"italic"} fz={"sm"} lineClamp={1}>
+                              @{dataProfile?.username}
+                           </Text>
+                        </Stack>
+                     </Box>
+                  </Box>
+                  <Box>
+                     <Stack spacing={"xs"}>
+                        {listInformation.map((e, i) => (
+                           <Group key={i} align="flex-start">
+                              <ThemeIcon
+                                 style={{
+                                    backgroundColor: "transparent",
+                                 }}
+                              >
+                                 {e.icon}
+                              </ThemeIcon>
+                              <Box w={"85%"}>
+                                 <Text fw={"bold"}>{e?.value}</Text>
+                              </Box>
+                           </Group>
+                        ))}
+                     </Stack>
+                  </Box>
+               </>
+         }
+      </Stack>
+   </>;
+}

src/app_modules/katalog/ui/skeleton_profile.tsx

@@ -0,0 +1,42 @@
+import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
+
+export default function SkeletonProfile() {
+   return (
+      <>
+         <Box mb={"lg"}>
+            <Skeleton height={200} radius={"md"} />
+            <Box
+               sx={{
+                  position: "relative",
+                  bottom: 60,
+                  width: "100%",
+                  marginBottom: -30,
+               }}
+            >
+               <Center>
+                  <Avatar radius={"50%"} size={100} bg={"gray"} />
+               </Center>
+            </Box>
+            <Stack align="center" justify="center" spacing={"xs"}>
+               <Skeleton height={15} radius={"md"} width={"50%"} />
+               <Skeleton height={15} radius={"md"} width={"20%"} />
+            </Stack>
+
+            <Box mt={"lg"}>
+               {[...Array(4)].map((_, index) => (
+                  <Box key={index} py={5}>
+                     <Grid align="center">
+                        <Grid.Col span={1}>
+                           <Skeleton w={25} h={25} />
+                        </Grid.Col>
+                        <Grid.Col span={11}>
+                           <Skeleton w={"100%"} h={15} />
+                        </Grid.Col>
+                     </Grid>
+                  </Box>
+               ))}
+            </Box>
+         </Box>
+      </>
+   )
+}

src/app_modules/katalog/view_katalog_new.tsx

@@ -0,0 +1,20 @@
+'use client'
+import { Stack } from "@mantine/core";
+import ProfileDetail from "./ui/profile_detail";
+import ListPortofolioProfileNew from "./ui/list_portolio_new";
+
+export default function ViewKatalogNew() {
+   return (
+      <>
+         <Stack mb={"lg"}>
+            <ProfileDetail />
+            {/* <Portofolio_UiListView
+               listPorto={listPorto as any}
+               profile={profile}
+               userLoginId={userLoginId}
+            /> */}
+            <ListPortofolioProfileNew />
+         </Stack>
+      </>
+   )
+}

src/app_modules/user/index.ts

@@ -1,5 +1,5 @@
-import { IUserLogin } from './lib/type_user';
+import { IUserProfile } from './lib/type_user';
-import { apiGetUserLogin } from "./lib/api_user";
+import { apiGetUserProfile } from "./lib/api_user";
 
-export { apiGetUserLogin };
+export { apiGetUserProfile };
-export type { IUserLogin };
+export type { IUserProfile };

src/app_modules/user/lib/api_user.ts

@@ -1,4 +1,4 @@
-export const apiGetUserLogin = async () => {
+export const apiGetUserProfile = async (path?: string) => {
-   const response = await fetch(`/api/new/user`)
+   const response = await fetch(`/api/new/user${(path) ? path : ''}`)
    return await response.json().catch(() => null)
 }

src/app_modules/user/lib/type_user.ts

@@ -1,4 +1,4 @@
-export interface IUserLogin {
+export interface IUserProfile {
    id: string
    username: string
    nomor: string