Merge pull request #18 from bipproduction/katalog/foto

Katalog/foto

prisma/schema.prisma

@@ -44,18 +44,19 @@ model UserSession {
 }
 
 model Profile {
-  id           String   @id @default(cuid())
+  id           String    @id @default(cuid())
   name         String
-  email        String   @unique
+  email        String    @unique
   alamat       String
   jenisKelamin String
-  active       Boolean  @default(true)
-  createdAt    DateTime @default(now())
-  updatedAt    DateTime @default(now()) @updatedAt
-  User         User?    @relation(fields: [userId], references: [id])
-  userId       String?  @unique
-  ImageProfile Images?  @relation(fields: [imagesId], references: [id])
-  imagesId     String?  @unique
+  active       Boolean   @default(true)
+  createdAt    DateTime  @default(now())
+  updatedAt    DateTime  @default(now()) @updatedAt
+  User         User?     @relation(fields: [userId], references: [id])
+  userId       String?   @unique
+  ImageProfile Images?   @relation(fields: [imagesId], references: [id])
+  imagesId     String?   @unique
+  Katalog      Katalog[]
 }
 
 model Images {
@@ -66,3 +67,27 @@ model Images {
   updatedAt DateTime @default(now()) @updatedAt
   Profile   Profile?
 }
+
+model Katalog {
+  id                   String             @id @default(cuid())
+  namaBisnis           String
+  alamatKantor         String
+  tlpn                 String
+  deskripssi           String
+  active               Boolean            @default(true)
+  createdAt            DateTime           @default(now())
+  updatedAt            DateTime           @default(now()) @updatedAt
+  Profile              Profile?           @relation(fields: [profileId], references: [id])
+  profileId            String?            
+  MasterBidangBisnis   MasterBidangBisnis @relation(fields: [masterBidangBisnisId], references: [id])
+  masterBidangBisnisId String
+}
+
+model MasterBidangBisnis {
+  id        String    @id
+  name      String
+  active    Boolean   @default(true)
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @default(now()) @updatedAt
+  Katalog   Katalog[]
+}

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

@@ -0,0 +1,24 @@
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  if (req.method === "POST") {
+    const body = await req.json();
+    // myConsole(body);
+
+    const data = await prisma.katalog.create({
+      data: {
+        profileId: body.profileId,
+        namaBisnis: body.namaBisnis,
+        alamatKantor: body.alamatKantor,
+        tlpn: body.tlpn,
+        deskripssi: body.deskripssi,
+        masterBidangBisnisId: body.masterBidangBisnisId,
+      },
+    });
+
+    return NextResponse.json({ status: 201, success: true });
+  }
+  return NextResponse.json({ success: false });
+}

src/app/api/profile/create/route.ts

@@ -5,7 +5,7 @@ import { NextResponse } from "next/server";
 export async function POST(req: Request) {
   if (req.method === "POST") {
     const body = await req.json();
-    myConsole(body);
+    // myConsole(body);
 
     const data = await prisma.profile.create({
       data: {

src/app/api/profile/foto/[name]/route.ts

@@ -1,11 +1,22 @@
 import { NextRequest, NextResponse } from "next/server";
-import fs from 'fs'
+import fs from "fs";
 
-export async function GET(req: NextRequest, { params }: { params: { name: string } }) {
-    const fl = fs.readFileSync(`./public/img/${params.name}`)
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  if (!fs.existsSync(`./public/img/${params.name}`)) {
+    const fl = fs.readFileSync(`./public/aset/avatar.png`);
     return new NextResponse(fl, {
-        headers: {
-            "Content-Type": "image/png"
-        }
-    })
-}
+      headers: {
+        "Content-Type": "image/png",
+      },
+    });
+  }
+  const fl = fs.readFileSync(`./public/img/${params.name}`);
+  return new NextResponse(fl, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
+}

src/app/api/seeder/route.ts

@@ -1,6 +1,7 @@
 import prisma from "@/app/lib/prisma";
-import userRole from "../../../bin/seeder/user_role.json";
 import { NextResponse } from "next/server";
+import userRole from "../../../bin/seeder/user_role.json";
+import bidangBisnis from "../../../bin/seeder/bidang_bisnis.json";
 
 export async function GET(req: Request) {
   const dev = new URL(req.url).searchParams.get("dev");
@@ -20,8 +21,24 @@ export async function GET(req: Request) {
         },
       });
     }
+
+    for (let i of bidangBisnis) {
+      await prisma.masterBidangBisnis.upsert({
+        where: {
+          id: i.id.toString(),
+        },
+        update: {
+          id: i.id.toString(),
+          name: i.name,
+        },
+        create: {
+          id: i.id.toString(),
+          name: i.name,
+        },
+      });
+    }
     return NextResponse.json({ success: true });
   }
 
   return NextResponse.json({ success: false });
-}
+}

src/app/dev/katalog/portofolio/create/layout.tsx

@@ -0,0 +1,8 @@
+import { PortofolioLayout } from "@/app_modules/katalog/portofolio";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <PortofolioLayout>{children}</PortofolioLayout>
+    </>
+}

src/app/dev/katalog/portofolio/create/page.tsx

@@ -0,0 +1,17 @@
+import { myConsole } from "@/app/fun/my_console";
+import { CreatePortofolio } from "@/app_modules/katalog/portofolio";
+import { getBidangBisnis } from "@/app_modules/katalog/portofolio/api/get-bidang-bisnis";
+import { getProfile } from "@/app_modules/katalog/profile";
+
+export default async function Page() {
+  const bidangBisnis = await getBidangBisnis();
+  const id = await getProfile();
+  const profileId = id?.id;
+
+  return (
+    <>
+    {JSON.stringify(profileId)}
+      <CreatePortofolio data={bidangBisnis} profileId={profileId} />
+    </>
+  );
+}

src/app/dev/katalog/view/page.tsx

@@ -1,12 +1,14 @@
+import { loadListPortofolio } from "@/app_modules/katalog/portofolio/fun/fun_get_all_portofolio";
 import { getProfile } from "@/app_modules/katalog/profile";
 import { KatalogView } from "@/app_modules/katalog/view";
 
 export default async function Page() {
   const data = await getProfile();
+  const listPorto = await loadListPortofolio(data?.id as string)
   return (
     <>
       {/* {JSON.stringify(data)} */}
-      <KatalogView />
+      <KatalogView data={data} porto={listPorto} />
     </>
   );
 }

src/app/fun/my_console.ts

@@ -1,5 +1,5 @@
 export function myConsole(value: any) {
-  const onData = false
+  const onData = true
   if (onData) {
     console.log(value);
   }

src/app/lib/api.ts

@@ -11,4 +11,7 @@ export const ApiHipmi = {
   create_profile: "/api/profile/create",
   edit_profile: "/api/profile/edit",
   get_foto: "/api/profile/foto/",
+
+  //Portofolio
+  create_portofolio: "/api/portofolio/create",
 };

src/app_modules/home/view.tsx

@@ -34,8 +34,12 @@ import { getProfile } from "../katalog/profile";
 import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { gs_token } from "./state/global_state";
-import { g_getProfile } from "../katalog/profile/fun/fun_get_profile";
-import { gs_profile } from "../katalog/profile/state/global_state";
+import { loadDataProfile } from "../katalog/profile/fun/fun_get_profile";
+import { gs_fotoProfile, gs_profile } from "../katalog/profile/state/global_state";
+import { loadListPortofolio } from "../katalog/portofolio/fun/fun_get_all_portofolio";
+import { gs_ListPortofolio } from "../katalog/portofolio/state/global_state";
+import { myConsole } from "@/app/fun/my_console";
+import { getFotoProfile } from "../katalog/profile/api/get-foto-profile";
 
 const listHalaman = [
   {
@@ -95,9 +99,23 @@ export default function HomeView() {
 
   const [profile, setProfile] = useAtom(gs_profile);
   useShallowEffect(() => {
-    g_getProfile(setProfile);
+    loadDataProfile(setProfile);
   }, []);
 
+  const [foto, setFoto] = useAtom(gs_fotoProfile);
+  useShallowEffect(() => {
+    if (profile?.imagesId === undefined) {
+      return myConsole("Waiting data");
+    } else {
+      getFotoProfile(profile?.imagesId).then((v) => setFoto(v?.url));
+    }
+  }, [profile?.imagesId]);
+
+  const [listPorto, setListPorto] = useAtom(gs_ListPortofolio)
+  useShallowEffect(() => {
+    loadListPortofolio(profile?.id).then((res) => setListPorto(res));
+  }, [profile?.id]);
+
   return (
     <>
       {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}

src/app_modules/katalog/portofolio/api/get-bidang-bisnis.ts

@@ -0,0 +1,9 @@
+"use server"
+
+import { myConsole } from "@/app/fun/my_console"
+import prisma from "@/app/lib/prisma"
+
+export async function getBidangBisnis() {
+    const data = await prisma.masterBidangBisnis.findMany()
+    return data
+}

src/app_modules/katalog/portofolio/api/get-portofolio.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+
+/**
+ *
+ * @param id - profileId
+ * @returns list portofolio by Id
+ */
+export default async function getListPortofolio(id: string) {
+  // myConsole(id);
+
+  const data = await prisma.katalog.findMany({
+    where: {
+      profileId: id,
+    },
+    select: {
+      id: true,
+      namaBisnis: true,
+      alamatKantor: true,
+      tlpn: true,
+      deskripssi: true,
+      active: true,
+      masterBidangBisnisId: true,
+    },
+  });
+
+  if (!data) {
+    throw new Error("Failed to fetch data");
+  }
+
+  return data;
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function PortofolioLayout({ children }: { children: any }) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} px={"sm"}>
+            <Group position="apart" h={50}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => router.push("/dev/katalog/view")}
+              >
+                <IconArrowLeft />
+              </ActionIcon>
+              <Text>Buat Portofolio</Text>
+              <ActionIcon variant="transparent"></ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { Warna } from "@/app/lib/warna";
+import { Button, Select, Stack, TextInput, Title } from "@mantine/core";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function CreatePortofolio({
+  data,
+  profileId,
+}: {
+  data: any;
+  profileId: any;
+}) {
+  const router = useRouter();
+  const [value, setValue] = useState({
+    namaBisnis: "",
+    bidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
+    deskripssi: "",
+  });
+
+  async function onSubmit() {
+    const body = {
+      profileId: profileId,
+      namaBisnis: value.namaBisnis,
+      masterBidangBisnisId: value.bidangBisnisId,
+      alamatKantor: value.alamatKantor,
+      tlpn: value.tlpn,
+      deskripssi: value.deskripssi,
+    };
+
+    if (_.values(body).includes("")) return toast("Lengkapi Data");
+
+    await fetch(ApiHipmi.create_portofolio, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        myConsole(val)
+        if (val.status == 201) {
+          toast("Berhasil disimpan");
+          return router.push("/dev/katalog/view");
+        } else {
+          return toast("Gagal disimpa");
+        }
+      });
+  }
+
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      <Stack px={"sm"}>
+        <TextInput
+          label="Nama Bisnis"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              namaBisnis: val.target.value,
+            });
+          }}
+        />
+        <Select
+          label="Bidang Bisnis"
+          data={_.map(data).map((e: any) => ({ label: e.name, value: e.id }))}
+          onChange={(val) => {
+            setValue({
+              ...value,
+              bidangBisnisId: val as any,
+            });
+          }}
+        />
+        <TextInput
+          label="Alamat Kantor"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              alamatKantor: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Nomor Telepon"
+          type="number"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              tlpn: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Deskripsi"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              deskripssi: val.target.value,
+            });
+          }}
+        />
+
+        <Button
+          mt={"md"}
+          radius={50}
+          bg={Warna.hijau_muda}
+          color="green"
+          onClick={() => {
+            onSubmit();
+          }}
+        >
+          Simpan
+        </Button>
+      </Stack>
+
+      {/* <pre> {JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}

src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts

@@ -0,0 +1,16 @@
+import toast from "react-simple-toasts";
+import getListPortofolio from "../api/get-portofolio";
+
+/**
+ * 
+ * @param id - profileId
+ * @returns load list portofolio by Id
+ */
+export async function loadListPortofolio(id: string) {
+  if (id === null) {
+    return toast("Id null");
+  } else {
+    const data = await getListPortofolio(id).then((res) => res);
+    return data
+  }
+}

src/app_modules/katalog/portofolio/index.ts

@@ -0,0 +1,5 @@
+import CreatePortofolio from "./create/view";
+import PortofolioLayout from "./create/layout";
+import PortofolioView from "./list_view/view";
+
+export {CreatePortofolio, PortofolioLayout, PortofolioView}

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

@@ -0,0 +1,66 @@
+"use client";
+import { Box, Center, Grid, Paper, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { loadListPortofolio } from "../fun/fun_get_all_portofolio";
+import _ from "lodash";
+import { IconCaretRightFilled } from "@tabler/icons-react";
+import { loadDataProfile } from "../../profile/fun/fun_get_profile";
+import { useAtom } from "jotai";
+import { gs_profile } from "../../profile/state/global_state";
+import getListPortofolio from "../api/get-portofolio";
+import { gs_ListPortofolio } from "../state/global_state";
+
+export default function PortofolioView({
+  profileId,
+  porto,
+}: {
+  profileId: any;
+  porto: any;
+}) {
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    loadDataProfile(setProfile);
+  }, []);
+
+  const [listPorto, setListPorto] = useAtom(gs_ListPortofolio)
+  useShallowEffect(() => {
+    loadListPortofolio(profile?.id).then((res) => setListPorto(res));
+  }, [profile?.id]);
+
+
+  return (
+    <>
+      {/* {JSON.stringify(profile.id)}
+      <br />
+      {JSON.stringify(listPorto)} */}
+      <Center>
+        <Title order={4}>Portofolio</Title>
+      </Center>
+      <Box mt={"md"} >
+        {(() => {
+          if (listPorto) {
+            return (
+              <>
+                {_.map(listPorto).map((e: any) => (
+                  <Paper key={e.id} h={50} bg={"gray"} my={"md"} >
+                    <Grid h={50} align="center" px={"md"}>
+                      <Grid.Col span={10}>
+                        <Text fw={"bold"}>{e.namaBisnis}</Text>
+                      </Grid.Col>
+                      <Grid.Col span={"auto"} h={50}>
+                        <IconCaretRightFilled size={35} />
+                      </Grid.Col>
+                    </Grid>
+                  </Paper>
+                ))}
+              </>
+            );
+          } else {
+            return <></>;
+          }
+        })()}
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/state/global_state.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_ListPortofolio = atomWithStorage<any | null>("gs_ListPortofolio", null)

src/app_modules/katalog/profile/edit/view.tsx

@@ -12,20 +12,17 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
 import { gs_profile } from "../state/global_state";
-import { g_getProfile } from "../fun/fun_get_profile";
+import { loadDataProfile } from "../fun/fun_get_profile";
 
-export default function EditProfile() {
+export default function EditProfile({ data }: { data: any }) {
   const router = useRouter();
 
   //Get data profile
-  const [profile, setProfile] = useAtom(gs_profile);
+  const [profile, setProfile] = useAtom(gs_profile)
   useShallowEffect(() => {
-    g_getProfile(setProfile);
+    loadDataProfile(setProfile);
   }, []);
 
-
-
-
   async function onUpdate() {
     const body = profile;
     if (_.values(body).includes("")) return toast("Lengkapi data");
@@ -42,24 +39,27 @@ export default function EditProfile() {
         myConsole(val);
         if (val.status == 200) {
           toast("Data tersimpan");
-          return router.push("/dev/katalog/view");
+          loadDataProfile(setProfile)
+          return setTimeout(() => router.push("/dev/katalog/view"), 1000);
         } else {
           return toast("Gagal update !!!");
         }
       });
   }
 
+  if(!profile) return <></>
+
   return (
     <>
       {/* {JSON.stringify(profile)} */}
       <Stack px={"sm"}>
-        <TextInput label="Username" disabled value={profile.User.username} />
-        <TextInput label="Nomor" disabled value={profile.User.nomor} />
+        <TextInput label="Username" disabled value={profile?.User.username} />
+        <TextInput label="Nomor" disabled value={profile?.User.nomor} />
 
         <TextInput
           label="Nama"
           placeholder="username"
-          value={profile.name}
+          value={profile?.name}
           onChange={(val) => {
             setProfile({
               ...profile,
@@ -71,7 +71,7 @@ export default function EditProfile() {
         <TextInput
           label="Email"
           placeholder="email"
-          value={profile.email}
+          value={profile?.email}
           onChange={(val) => {
             myConsole(val.target.value);
             setProfile({
@@ -84,7 +84,7 @@ export default function EditProfile() {
         <TextInput
           label="Alamat"
           placeholder="alamat"
-          value={profile.alamat}
+          value={profile?.alamat}
           onChange={(val) => {
             myConsole(val.target.value);
             setProfile({
@@ -96,7 +96,7 @@ export default function EditProfile() {
 
         <Select
           label="Jenis Kelamin"
-          value={profile.jenisKelamin}
+          value={profile?.jenisKelamin}
           data={[
             { value: "Laki-laki", label: "Laki-laki" },
             { value: "Perempuan", label: "Perempuan" },

src/app_modules/katalog/profile/fun/fun_get_profile.ts

@@ -6,7 +6,7 @@ import { getProfile } from "..";
  * @param setProfile
  * @returns data profile
  */
-export async function g_getProfile(setProfile: any) {
+export async function loadDataProfile(setProfile: any) {
   await getProfile()
     .then((res) => res)
     .then((val) => {

src/app_modules/katalog/profile/index.ts

@@ -1,10 +1,11 @@
 import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
-import { getProfile } from "./fun/api-get-profile";
+import { getProfile } from "./api/get-profile";
 import EditProfileLayout from "./edit/layout";
 import EditProfileView from "./edit/view";
 import UploadFotoProfile from "./upload/view";
-import UploadFotoProfileLayout from "./upload/layout";
+import UploadFotoProfileLayout from "./upload/layout"
+import ProfileView from "./view/view";
 
 export {
   ProfileLayout,
@@ -14,4 +15,5 @@ export {
   EditProfileLayout,
   UploadFotoProfile,
   UploadFotoProfileLayout,
+  ProfileView
 };

src/app_modules/katalog/profile/state/global_state.ts

@@ -2,5 +2,6 @@ import { atomWithStorage } from "jotai/utils";
 import { getProfile } from "..";
 
 export const gs_profile = atomWithStorage<any | null>("gs_profile", null);
+export const gs_fotoProfile = atomWithStorage<any | null>("gs_fotoProfile" , null)
 
 

src/app_modules/katalog/profile/upload/layout.tsx

@@ -15,7 +15,7 @@ import { useAtom } from "jotai";
 import toast from "react-simple-toasts";
 import { gs_profile } from "../state/global_state";
 import { useShallowEffect } from "@mantine/hooks";
-import { g_getProfile } from "../fun/fun_get_profile";
+import { loadDataProfile } from "../fun/fun_get_profile";
 import { funUploadFoto } from "../fun/upload_foto";
 import { useRouter } from "next/navigation";
 
@@ -27,7 +27,7 @@ export default function UploadFotoProfileLayout({
   const router = useRouter()
   const [profile, setProfile] = useAtom(gs_profile);
   useShallowEffect(() => {
-    g_getProfile(setProfile);
+    loadDataProfile(setProfile);
   }, []);
 
   return (

src/app_modules/katalog/profile/upload/view.tsx

@@ -3,9 +3,9 @@
 import { AspectRatio, FileButton, Image, Paper, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
-import { g_getProfile } from "../fun/fun_get_profile";
-import { gs_profile } from "../state/global_state";
-import { getFotoProfile } from "../fun/get_foto_profile";
+import { loadDataProfile } from "../fun/fun_get_profile";
+import { gs_fotoProfile, gs_profile } from "../state/global_state";
+import { getFotoProfile } from "../api/get-foto-profile";
 import { useState } from "react";
 import { ApiHipmi } from "@/app/lib/api";
 import { myConsole } from "@/app/fun/my_console";
@@ -13,10 +13,10 @@ import { myConsole } from "@/app/fun/my_console";
 export default function UploadFotoProfile() {
   const [profile, setProfile] = useAtom(gs_profile);
   useShallowEffect(() => {
-    g_getProfile(setProfile);
+    loadDataProfile(setProfile);
   }, []);
 
-  const [foto, setFoto] = useState<any | null>(null);
+  const [foto, setFoto] = useAtom(gs_fotoProfile)
   useShallowEffect(() => {
     if (profile?.imagesId === undefined || profile?.imagesId === null) {
       myConsole("Waiting data");
@@ -29,7 +29,7 @@ export default function UploadFotoProfile() {
     <>
     {/* {JSON.stringify(foto)} */}
       <AspectRatio ratio={1 / 1} >
-       <Paper  p={"lg"}>
+       <Paper  p={"lg"} shadow="xl">
        {foto ? <Image alt="" src={ApiHipmi.get_foto + `${foto}`} /> : <Image alt="" src={"/aset/avatar.png"} />}
        </Paper>
       </AspectRatio>

src/app_modules/katalog/profile/view/view.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  BackgroundImage,
+  Box,
+  Center,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+  IconAddressBook,
+  IconCamera,
+  IconEditCircle,
+  IconGenderFemale,
+  IconGenderMale,
+  IconHome,
+  IconMail,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { myConsole } from "@/app/fun/my_console";
+import { useAtom } from "jotai";
+import { ApiHipmi } from "@/app/lib/api";
+import { loadDataProfile } from "../fun/fun_get_profile";
+import { getFotoProfile } from "../api/get-foto-profile";
+import { gs_fotoProfile, gs_profile } from "../state/global_state";
+
+export default function ProfileView({ data }: { data: any }) {
+  const router = useRouter();
+
+  //Get data profile
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    loadDataProfile(setProfile);
+  }, []);
+
+  const [foto, setFoto] = useAtom(gs_fotoProfile);
+  useShallowEffect(() => {
+    if (profile?.imagesId === undefined) {
+      return myConsole("Waiting data");
+    } else {
+      getFotoProfile(profile?.imagesId).then((v) => setFoto(v?.url));
+    }
+  }, [profile?.imagesId]);
+
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      {/* Background dan foto */}
+      <Box>
+        <Paper bg={"gray"} p={"md"}>
+          <Image alt="" src={"/aset/logo.png"} />
+        </Paper>
+        <Center>
+          <Paper
+            radius={100}
+            h={105}
+            w={105}
+            sx={{
+              borderStyle: "solid",
+              borderRadius: "100%",
+              borderWidth: 2,
+              marginBottom: 10,
+              paddingBottom: 10,
+              position: "absolute",
+              zIndex: 0,
+            }}
+          >
+            <Center h={101}>
+              <Image
+                src={ApiHipmi.get_foto + foto ?? ""}
+                alt=""
+                radius={100}
+                width={100}
+                height={100}
+                sx={
+                  {
+                    // position: "fixed",
+                  }
+                }
+              />
+            </Center>
+          </Paper>
+        </Center>
+
+        <Center>
+          <ActionIcon
+            mr={-70}
+            mt={15}
+            variant="transparent"
+            bg={"gray"}
+            radius={50}
+            onClick={() => router.push("/dev/katalog/profile/upload")}
+            sx={{ position: "relative" }}
+          >
+            <IconCamera color="black" size={20} />
+          </ActionIcon>
+        </Center>
+      </Box>
+
+      {/* Username dan Nama */}
+      <Group position="apart">
+        <Flex direction={"column"} mt={"lg"}>
+          <Text fz={"lg"} fw={"bold"}>
+            {profile?.name}
+          </Text>
+          <Text fz={"xs"}>@{profile?.User?.username}</Text>
+        </Flex>
+        <ActionIcon
+          variant="transparent"
+          onClick={() => {
+            router.push("/dev/katalog/profile/edit");
+          }}
+        >
+          <IconEditCircle color={Warna.hijau_muda} size={20} />
+        </ActionIcon>
+      </Group>
+
+      {/* Info user: nomor, email dll */}
+      <Flex direction={"column"} pt={"lg"}>
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconAddressBook />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text>
+              {" "}
+              <Text>+{profile?.User.nomor}</Text>
+            </Text>
+          </Grid.Col>
+        </Grid>
+
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconMail />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text>
+              {" "}
+              <Text> {profile?.email}</Text>
+            </Text>
+          </Grid.Col>
+        </Grid>
+
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconHome />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text> {profile?.alamat}</Text>
+          </Grid.Col>
+        </Grid>
+
+        {(() => {
+          if (profile?.jenisKelamin === "Laki - laki") {
+            return (
+              <>
+                <Grid>
+                  <Grid.Col span={"content"}>
+                    <IconGenderMale />
+                  </Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text> {profile?.jenisKelamin}</Text>
+                  </Grid.Col>
+                </Grid>
+              </>
+            );
+          } else {
+            return (
+              <>
+                <Grid>
+                  <Grid.Col span={"content"}>
+                    <IconGenderFemale />
+                  </Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text> {profile?.jenisKelamin}</Text>
+                  </Grid.Col>
+                </Grid>
+              </>
+            );
+          }
+        })()}
+      </Flex>
+
+      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
+    </>
+  );
+}

src/app_modules/katalog/view/layout.tsx

@@ -25,7 +25,7 @@ export default function KatalogLayout({ children }: { children: any }) {
                Katalog
               </Text>
               <Group spacing={"sm"}>
-                <ActionIcon>
+                <ActionIcon variant="transparent" onClick={() => router.push("/dev/katalog/portofolio/create")}>
                   <IconPencilPlus />
                 </ActionIcon>
                 {/* <Logout /> */}

src/app_modules/katalog/view/view.tsx

@@ -25,169 +25,21 @@ import {
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { getProfile } from "../profile";
+import { ProfileView, getProfile } from "../profile";
 import { gs_profile } from "../profile/state/global_state";
 import { myConsole } from "@/app/fun/my_console";
 import { useAtom } from "jotai";
-import { g_getProfile } from "../profile/fun/fun_get_profile";
-import { getFotoProfile } from "../profile/fun/get_foto_profile";
+import { loadDataProfile } from "../profile/fun/fun_get_profile";
+import { getFotoProfile } from "../profile/api/get-foto-profile";
 import { ApiHipmi } from "@/app/lib/api";
+import { PortofolioView } from "../portofolio";
 
-export default function KatalogView() {
-  const router = useRouter();
-
-  //Get data profile
-  const [profile, setProfile] = useAtom(gs_profile);
-  useShallowEffect(() => {
-    g_getProfile(setProfile);
-  }, []);
-
-  const [foto, setFoto] = useState<any | null>(null);
-  useShallowEffect(() => {
-    if (profile?.imagesId === undefined || profile?.imagesId === null) {
-      myConsole("Waiting data");
-    } else {
-      getFotoProfile(profile?.imagesId).then((res) => setFoto(res?.url));
-    }
-    myConsole(profile?.imagesId);
-  }, [profile?.imagesId]);
-
+export default function KatalogView({ data, porto }: { data: any, porto: any }) {
   return (
     <>
-      {/* Background dan foto */}
-      <Box>
-        <Paper bg={"gray"} p={"md"}>
-          <Image alt="" src={"/aset/logo.png"} />
-        </Paper>
-        <Center>
-          {foto ? (
-            <Image
-              radius={50}
-              alt=""
-              src={ApiHipmi.get_foto + `${foto}`}
-              height={100}
-              width={100}
-              sx={{
-                position: "absolute",
-                marginBottom: 10,
-                paddingBottom: 10,
-              }}
-            />
-          ) : (
-            <Image
-              radius={50}
-              alt=""
-              src={"/aset/avatar.png"}
-              height={100}
-              width={100}
-              sx={{
-                position: "absolute",
-                marginBottom: 10,
-                paddingBottom: 10,
-              }}
-            />
-          )}
-        </Center>
-        <Center>
-          <ActionIcon
-            mr={-70}
-            mt={10}
-            variant="transparent"
-            bg={"gray"}
-            radius={50}
-            onClick={() => router.push("/dev/katalog/profile/upload")}
-            sx={{ position: "relative" }}
-          >
-            <IconCamera color="black" size={20} />
-          </ActionIcon>
-        </Center>
-      </Box>
-
-      {/* Username dan Nama */}
-      <Group position="apart">
-        <Flex direction={"column"} mt={"lg"}>
-          <Text fz={"lg"} fw={"bold"}>
-            {profile?.name}
-          </Text>
-          <Text fz={"xs"}>@{profile?.User?.username}</Text>
-        </Flex>
-        <ActionIcon
-          variant="transparent"
-          onClick={() => {
-            router.push("/dev/katalog/profile/edit");
-          }}
-        >
-          <IconEditCircle color={Warna.hijau_muda} size={20} />
-        </ActionIcon>
-      </Group>
-
-      {/* Info user: nomor, email dll */}
-      <Flex direction={"column"} pt={"lg"}>
-        <Grid>
-          <Grid.Col span={"content"}>
-            <IconAddressBook />
-          </Grid.Col>
-          <Grid.Col span={"auto"}>
-            <Text>
-              {" "}
-              <Text>+{profile?.User.nomor}</Text>
-            </Text>
-          </Grid.Col>
-        </Grid>
-
-        <Grid>
-          <Grid.Col span={"content"}>
-            <IconMail />
-          </Grid.Col>
-          <Grid.Col span={"auto"}>
-            <Text>
-              {" "}
-              <Text> {profile?.email}</Text>
-            </Text>
-          </Grid.Col>
-        </Grid>
-
-        <Grid>
-          <Grid.Col span={"content"}>
-            <IconHome />
-          </Grid.Col>
-          <Grid.Col span={"auto"}>
-            <Text> {profile?.alamat}</Text>
-          </Grid.Col>
-        </Grid>
-
-        {(() => {
-          if (profile?.jenisKelamin === "Laki - laki") {
-            return (
-              <>
-                <Grid>
-                  <Grid.Col span={"content"}>
-                    <IconGenderMale />
-                  </Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text> {profile?.jenisKelamin}</Text>
-                  </Grid.Col>
-                </Grid>
-              </>
-            );
-          } else {
-            return (
-              <>
-                <Grid>
-                  <Grid.Col span={"content"}>
-                    <IconGenderFemale />
-                  </Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text> {profile?.jenisKelamin}</Text>
-                  </Grid.Col>
-                </Grid>
-              </>
-            );
-          }
-        })()}
-      </Flex>
-
-      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
+    
+      <ProfileView data={data} />
+      <PortofolioView profileId={data.id} porto={porto}/>
     </>
   );
 }

src/bin/seeder/bidang_bisnis.json

@@ -0,0 +1,18 @@
+[
+  {
+    "id": 1,
+    "name": "Software Developer"
+  },
+  {
+    "id": 2,
+    "name": "Makanan & Minuman"
+  },
+  {
+    "id": 3,
+    "name": "Kosmetik"
+  },
+  {
+    "id": 4,
+    "name": "Mesin Mobil"
+  }
+]