feat : update profile

src/app/(application)/profile/edit/page.tsx

@@ -1,8 +1,8 @@
-import { ViewEditProfile } from "@/module/user"
+import { EditProfile } from "@/module/user"
 
 function Page() {
    return (
-      <ViewEditProfile />
+      <EditProfile />
    )
 }
 

src/app/(application)/profile/page.tsx

@@ -1,8 +1,8 @@
-import { ViewProfile } from "@/module/user";
+import { Profile } from "@/module/user";
 
 function Page() {
    return (
-      <ViewProfile />
+      <Profile />
    )
 }
 

src/app/api/user/profile/[id]/route.ts

@@ -0,0 +1,59 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+
+
+// UPDATE PROFILE BY COOKIES
+export async function PUT(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+        const { id } = context.params;
+        const data = await request.json();
+        const cek = await prisma.user.count({
+            where: {
+                id: id,
+                nik: data.nik,
+                email: data.email,
+                phone: data.phone
+            }
+        })
+        if (cek == 0) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Gagal mendapatkan profile, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const result = await prisma.user.update({
+            where: {
+                id: id,
+            },
+            data: {
+                nik: data.nik,
+                name: data.name,
+                email: data.email,
+                phone: data.phone,
+                gender: data.gender,
+            },
+        });
+
+        return NextResponse.json(
+            {
+                success: true,
+                message: "Berhasil mendapatkan profile",
+                result,
+            },
+            { status: 200 }
+        );
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan anggota, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,82 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+
+// GET PROFILE BY COOKIES
+export async function GET(request: Request) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+        const data = await prisma.user.findUnique({
+            where: {
+                id: user.id
+            },
+            select: {
+                id: true,
+                name: true,
+                email: true,
+                phone: true,
+                nik: true,
+                gender: true,
+                idGroup: true,
+                idPosition: true,
+                Group: {
+                    select: {
+                        name: true
+                    }
+                },
+                Position: {
+                    select: {
+                        name: true
+                    }
+                }
+            }
+        })
+        const { ...userData } = data;
+        const group = data?.Group.name
+        const position = data?.Position.name
+
+        const result = { ...userData, group, position };
+
+        const omitData = _.omit(result, ["Group", "Position",])
+
+        return NextResponse.json({ success: true, data: omitData });
+    } catch (error) {
+        return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+    }
+    
+}
+
+// UPDATE PROFILE BY COOKIES
+export async function PUT(request: Request) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const { name, email, phone, nik, gender } = body;
+        const data = await prisma.user.update({
+            where: {
+                id: user.id
+            },
+            data: {
+                name: name,
+                email: email,
+                phone: phone,
+                nik: nik,
+                gender: gender
+            }
+        })
+
+        return NextResponse.json({ success: true, message: "Berhasil ubah profile", data: data });
+    } catch (error) {
+        return NextResponse.json({ success: false, message: "Gagal ubah profile" }, { status: 401 });
+    }
+}
+

src/module/_global/layout/layout_modal.tsx

@@ -19,7 +19,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
         <BsQuestionCircleFill size={100} color="red" />
         <Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
         <Group mt={30} w={'100%'} justify='center'>
-          <Button w={"47%"} size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
+          <Button w={"47%"} size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
           <Button w={"47%"} size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
         </Group>
       </Flex>

src/module/discussion/ui/detail_discussion.tsx

@@ -93,47 +93,90 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                         </Box>
                      </Box>
                   )) :
-               <Box>
+               <>
-                  <Flex
+                  {isData?.totalComments == 0 ?
-                     justify={"space-between"}
+                     <Box mb={60}>
-                     align={"center"}
+                        <Flex
-                     mt={20}
+                           justify={"space-between"}
-                  >
+                           align={"center"}
-                     {isData?.username ?
+                           mt={20}
-                        <Group>
-                           <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
-                           <Box>
-                              <Text c={WARNA.biruTua} fw={"bold"}>
-                                 {isData?.username}
-                              </Text>
-                              <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
-                           </Box>
-                        </Group> : ""
-                     }
-                     <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
-                  </Flex>
-                  <Box mt={10}>
-                     <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                        <Text
-                           style={{
-                              overflowWrap: "break-word"
-                           }}
-                           fw={"bold"}
                         >
-                           {isData?.desc}
+                           {isData?.username ?
-                        </Text>
+                              <Group>
-                     </Spoiler>
+                                 <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
-                  </Box>
+                                 <Box>
-                  <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                                    <Text c={WARNA.biruTua} fw={"bold"}>
-                     {isData?.totalComments ? <Group gap={5} align="center">
+                                       {isData?.username}
-                        <GrChatOption size={18} />
+                                    </Text>
-                        <Text fz={13}>{isData?.totalComments} Komentar</Text>
+                                    <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
-                     </Group > : ""}
+                                 </Box>
+                              </Group> : ""
+                           }
+                           <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
+                        </Flex>
+                        <Box mt={10}>
+                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text
+                                 style={{
+                                    overflowWrap: "break-word"
+                                 }}
+                                 fw={"bold"}
+                              >
+                                 {isData?.desc}
+                              </Text>
+                           </Spoiler>
+                        </Box>
+                        <Group justify="space-between" mt={30} c={'#8C8C8C'}>
+                           {isData?.totalComments ? <Group gap={5} align="center">
+                              <GrChatOption size={18} />
+                              <Text fz={13}>{isData?.totalComments} Komentar</Text>
+                           </Group > : ""}
 
-                  </Group>
+                        </Group>
-               </Box>
+                     </Box> :
+                     <Box mb={20}>
+                        <Flex
+                           justify={"space-between"}
+                           align={"center"}
+                           mt={20}
+                        >
+                           {isData?.username ?
+                              <Group>
+                                 <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
+                                 <Box>
+                                    <Text c={WARNA.biruTua} fw={"bold"}>
+                                       {isData?.username}
+                                    </Text>
+                                    <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
+                                 </Box>
+                              </Group> : ""
+                           }
+                           <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
+                        </Flex>
+                        <Box mt={10}>
+                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text
+                                 style={{
+                                    overflowWrap: "break-word"
+                                 }}
+                                 fw={"bold"}
+                              >
+                                 {isData?.desc}
+                              </Text>
+                           </Spoiler>
+                        </Box>
+                        <Group justify="space-between" mt={30} c={'#8C8C8C'}>
+                           {isData?.totalComments ? <Group gap={5} align="center">
+                              <GrChatOption size={18} />
+                              <Text fz={13}>{isData?.totalComments} Komentar</Text>
+                           </Group > : ""}
+
+                        </Group>
+                     </Box>
+                  }
+               </>
             }
-            <Box p={10}>
+            <Box pl={10} pr={10} mb={30}>
                {isLoad ?
                   Array(2)
                      .fill(0)
@@ -167,7 +210,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                      )) :
                   isData?.DivisionDisscussionComment.map((v, i) => {
                      return (
-                        <Box key={i} p={10}>
+                        <Box key={i} p={10} >
                            <Flex
                               justify={"space-between"}
                               align={"center"}

src/module/division_new/ui/feature_detail_division.tsx

@@ -12,7 +12,7 @@ import { LuFileSignature } from "react-icons/lu";
 import { useParams, useRouter } from 'next/navigation';
 import { funGetDetailDivisionById } from '../lib/api_division';
 import toast from 'react-hot-toast';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataJumlahDetailDivision } from '../lib/type_division';
 
 export default function FeatureDetailDivision() {
@@ -37,7 +37,7 @@ export default function FeatureDetailDivision() {
   useShallowEffect(() => {
     fetchData()
   }, [param.id])
-
+  const isMobile = useMediaQuery('(max-width: 399px)');
 
   return (
     <Box pt={10}>
@@ -69,7 +69,7 @@ export default function FeatureDetailDivision() {
               <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
-                <IoIosArrowRoundForward size={20} color='gray' />
+                {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
               </Group>
             </Grid.Col>
           </Grid>
@@ -94,7 +94,7 @@ export default function FeatureDetailDivision() {
               <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
-                <IoIosArrowRoundForward size={20} color='gray' />
+                {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
               </Group>
             </Grid.Col>
           </Grid>
@@ -119,7 +119,7 @@ export default function FeatureDetailDivision() {
               <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
-                <IoIosArrowRoundForward size={20} color='gray' />
+                {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
               </Group>
             </Grid.Col>
           </Grid>
@@ -144,7 +144,7 @@ export default function FeatureDetailDivision() {
               <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>
-                <IoIosArrowRoundForward size={20} color='gray' />
+                {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
               </Group>
             </Grid.Col>
           </Grid>

src/module/document/ui/navbar_document_division.tsx

@@ -238,14 +238,14 @@ export default function NavbarDocumentDivision() {
             zIndex: 999,
           }}>
             <Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>
-              <SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }}>
+              <SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }} spacing="xs">
                 <Flex justify={'center'} align={'center'} direction={'column'}>
                   <BsDownload size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
-                  <Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
+                  <Text fz={12} ta={"center"} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
                 </Flex>
                 <Flex onClick={() => setIsDelete(true)} justify={'center'} align={'center'} direction={'column'}>
                   <AiOutlineDelete size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
-                  <Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Hapus</Text>
+                  <Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Hapus</Text>
                 </Flex>
                 <Flex onClick={() => {
                   if (selectedFiles.length == 1) {
@@ -253,15 +253,15 @@ export default function NavbarDocumentDivision() {
                   }
                 }} justify={'center'} align={'center'} direction={'column'}>
                   <CgRename size={20} color={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'} />
-                  <Text fz={12} c={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'}>Ganti Nama</Text>
+                  <Text fz={12} ta={"center"} c={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'}>Ganti Nama</Text>
                 </Flex>
                 <Flex onClick={() => setShare(true)} justify={'center'} align={'center'} direction={'column'}>
                   <LuShare2 size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
-                  <Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Bagikan</Text>
+                  <Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Bagikan</Text>
                 </Flex>
                 <Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
                   <MdOutlineMoreHoriz size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
-                  <Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Lainnya</Text>
+                  <Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Lainnya</Text>
                 </Flex>
               </SimpleGrid>
             </Flex>
@@ -269,15 +269,13 @@ export default function NavbarDocumentDivision() {
         </>
       )}
 
-      <LayoutNavbarNew back='' title={name}
+      <LayoutNavbarNew back={`/division/${param.id}/`} title={name}
         menu={
           <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         }
       />
-
-
       <Box>
         <Box p={20} pb={60}>
           <Box>

src/module/user/index.ts

@@ -1,11 +1,13 @@
 import { TypeUser } from './lib/type_user';
 import createLogUser from "./log/fun/createLogUser";
-import ViewEditProfile from "./profile/view/view_edit_profile";
 import ViewProfile from "./profile/view/view_profile";
 import { funGetAllmember } from './member/lib/api_member';
+import Profile from './profile/ui/profile';
+import EditProfile from './profile/ui/edit_profile';
 
 export { ViewProfile };
-export { ViewEditProfile };
 export { createLogUser };
 export type { TypeUser }
 export { funGetAllmember }
+export { Profile }
+export { EditProfile }

src/module/user/member/ui/create_member.tsx

@@ -273,8 +273,8 @@ export default function CreateMember() {
           onBlur={() => setTouched({ ...touched, nik: true })}
           error={
             touched.nik && (
-              listData.nik == "" ? "NIK Tidak Boleh Kosong" :
+              listData.nik === "" ? "NIK Tidak Boleh Kosong" :
-                listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+              listData.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
             )
           }
         />

src/module/user/member/ui/edit_member.tsx

@@ -250,10 +250,10 @@ export default function EditMember({ id }: { id: string }) {
                onBlur={() => setTouched({ ...touched, nik: true })}
                error={
                   touched.nik && (
-                     data.nik == "" ? "NIK Tidak Boleh Kosong" :
+                    data.nik === "" ? "NIK Tidak Boleh Kosong" :
-                        data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+                    data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
                   )
-               }
+                }
             />
             <TextInput
                size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}

src/module/user/profile/component/edit_profile.tsx

@@ -1,106 +0,0 @@
-"use client"
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Box, Button, Flex, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
-import { HiUser } from "react-icons/hi2";
-import toast from "react-hot-toast";
-import LayoutModal from "@/module/_global/layout/layout_modal";
-import { useState } from "react";
-
-export default function EditProfile() {
-  const [isValModal, setValModal] = useState(false)
-
-  function onTrue(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Data tersimpan");
-    }
-    setValModal(false)
-  }
-
-  return (
-    <Box>
-      <LayoutNavbarNew back='' title='Edit Profil' menu='' />
-      <Stack
-        align="center"
-        justify="center"
-        gap="xs"
-        pt={30}
-        px={20}
-      >
-        <Box bg={WARNA.biruTua} py={30} px={50}
-          style={{
-            borderRadius: 10,
-          }}>
-          <HiUser size={100} color={WARNA.bgWhite} />
-        </Box>
-        <TextInput
-          size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-        />
-        <TextInput
-          size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-        />
-        <TextInput
-          size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-        />
-        <TextInput
-          size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-        />
-        <Select
-          placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-          data={['Laki-laki', 'Perempuan']}
-        />
-      </Stack>
-      <Box mt={30} mx={20} pb={20}>
-        <Button
-          c={"white"}
-          bg={WARNA.biruTua}
-          size="md"
-          radius={30}
-          fullWidth
-          onClick={() => setValModal(true)}
-        >
-          Simpan
-        </Button>
-      </Box>
-      <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
-        description="Apakah Anda yakin ingin
-        melakukan perubahan data?"
-        onYes={(val) => { onTrue(val) }} />
-    </Box>
-  )
-}
-

src/module/user/profile/lib/api_profile.ts

@@ -0,0 +1,17 @@
+import { IEditDataProfile } from "./type_profile";
+
+export const funGetProfileByCookies = async (path?: string) => {
+    const response = await fetch(`/api/user/profile${(path) ? path : ''}`, { next: { tags: ['profile'] } });
+    return await response.json().catch(() => null);
+}
+
+export const funEditProfileByCookies = async ( data: IEditDataProfile) => {
+    const response = await fetch(`/api/user/profile/`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}

src/module/user/profile/lib/type_profile.ts

@@ -0,0 +1,21 @@
+export interface IProfileById {
+    id: string
+    name: string
+    email: string
+    phone: string
+    nik: string
+    gender: string
+    idGroup: string
+    idPosition: string
+    group: string
+    position: string
+  }
+  
+  export interface IEditDataProfile  {
+    id: string;
+    nik: string;
+    name: string;
+    phone: string;
+    email: string;
+    gender: string;
+ }

src/module/user/profile/ui/edit_profile.tsx

@@ -0,0 +1,237 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { Box, Button, Flex, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
+import { HiUser } from "react-icons/hi2";
+import toast from "react-hot-toast";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useState } from "react";
+import { IEditDataProfile, IProfileById } from "../lib/type_profile";
+import { funEditProfileByCookies, funGetProfileByCookies } from "../lib/api_profile";
+import { useShallowEffect } from "@mantine/hooks";
+import { funGetUserByCookies } from "@/module/auth";
+
+export default function EditProfile() {
+  const [isValModal, setValModal] = useState(false)
+  const [isDataEdit, setDataEdit] = useState<IProfileById[]>([])
+  const [touched, setTouched] = useState({
+    nik: false,
+    name: false,
+    phone: false,
+    email: false,
+    gender: false,
+  });
+  const [data, setData] = useState<IEditDataProfile>({
+    id: "",
+    nik: "",
+    name: "",
+    phone: "",
+    email: "",
+    gender: "",
+  })
+
+  async function getAllProfile() {
+    try {
+      const res = await funGetProfileByCookies()
+      setData(res.data)
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useShallowEffect(() => {
+    getAllProfile()
+  }, [])
+
+  async function onEditProfile(val: boolean) {
+    try {
+      if (val) {
+        const res = await funEditProfileByCookies({
+          id: data.id,
+          nik: data.nik,
+          name: data.name,
+          phone: data.phone,
+          email: data.email,
+          gender: data.gender,
+        })
+        if (res.success) {
+          setValModal(false)
+          toast.success(res.message)
+        } else {
+          toast.error(res.message)
+        }
+      }
+      setValModal(false)
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal edit profil, coba lagi nanti");
+    }
+  }
+
+  return (
+    <Box>
+      <LayoutNavbarNew back='' title='Edit Profil' menu='' />
+      <Stack
+        align="center"
+        justify="center"
+        gap="xs"
+        pt={30}
+        px={20}
+      >
+        <Box bg={WARNA.biruTua} py={30} px={50}
+          style={{
+            borderRadius: 10,
+          }}>
+          <HiUser size={100} color={WARNA.bgWhite} />
+        </Box>
+        <TextInput
+          size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          onChange={(e) => {
+            setData({ ...data, nik: e.target.value })
+            setTouched({ ...touched, nik: false })
+          }}
+          value={data.nik}
+          onBlur={() => setTouched({ ...touched, nik: true })}
+          error={
+            touched.nik && (
+              data.nik === "" ? "NIK Tidak Boleh Kosong" :
+                data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
+            )
+          }
+        />
+        <TextInput
+          size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          onChange={(e) => {
+            setData({ ...data, name: e.target.value })
+            setTouched({ ...touched, name: false })
+          }}
+          value={data.name}
+          onBlur={() => setTouched({ ...touched, name: true })}
+          error={
+            touched.name && (
+              data.name == "" ? "Nama Tidak Boleh Kosong" : null
+            )
+          }
+        />
+        <TextInput
+          size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          onChange={(e) => {
+            setData({ ...data, email: e.target.value })
+            setTouched({ ...touched, email: false })
+          }}
+          value={data.email}
+          onBlur={() => setTouched({ ...touched, email: true })}
+          error={
+            touched.email && (
+              data.email == "" ? "Email Tidak Boleh Kosong" :
+                !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
+            )
+          }
+        />
+        <TextInput
+          size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          onChange={(e) => {
+            setData({ ...data, phone: e.target.value })
+            setTouched({ ...touched, phone: false })
+          }}
+          value={data.phone}
+          onBlur={() => setTouched({ ...touched, phone: true })}
+          error={
+            touched.phone && (
+              data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
+            )
+          }
+        />
+        <Select
+          placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          data={
+            [
+              {
+                value: "M",
+                label: "Laki-laki"
+              },
+              {
+                value: "F",
+                label: "Perempuan"
+              }
+            ]
+          }
+          onChange={(val: any) => {
+            setData({ ...data, gender: val })
+            setTouched({ ...touched, gender: false })
+          }}
+          value={data.gender}
+          onBlur={() => setTouched({ ...touched, gender: true })}
+          error={
+            touched.gender && (
+              data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+            )
+          }
+        />
+      </Stack>
+      <Box mt={30} mx={20} pb={20}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="md"
+          radius={30}
+          fullWidth
+          onClick={() => {
+            if (
+              data.nik !== "" &&
+              data.name !== "" &&
+              data.email !== "" &&
+              data.phone !== "" &&
+              data.gender !== ""
+            ) {
+              setValModal(true)
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
+        >
+          Simpan
+        </Button>
+      </Box>
+      <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
+        description="Apakah Anda yakin ingin
+        melakukan perubahan data?"
+        onYes={(val) => { onEditProfile(val) }} />
+    </Box>
+  )
+}
+

src/module/user/profile/ui/profile.tsx

@@ -0,0 +1,135 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, WARNA } from "@/module/_global";
+import { ActionIcon, Anchor, Box, Button, Flex, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { BsInfo } from "react-icons/bs";
+import { HiUser } from "react-icons/hi2";
+import { RiIdCardFill } from "react-icons/ri";
+import { FaSquarePhone } from "react-icons/fa6";
+import { MdEmail } from "react-icons/md";
+import { InfoTitleProfile } from "../component/ui/ui_profile";
+import { IoMaleFemale } from "react-icons/io5";
+import toast from "react-hot-toast";
+import { LuLogOut } from "react-icons/lu";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useState } from "react";
+import { funGetProfileByCookies } from "../lib/api_profile";
+import { useShallowEffect } from "@mantine/hooks";
+import { IProfileById } from "../lib/type_profile";
+import { useRouter } from "next/navigation";
+
+export default function Profile() {
+  const [openModal, setOpenModal] = useState(false);
+  const [isData, setData] = useState<IProfileById>()
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+
+  async function getData() {
+    try {
+      setLoading(true)
+      const res = await funGetProfileByCookies()
+      setData(res.data)
+      setLoading(false)
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
+  async function onLogout(val: boolean) {
+    try {
+      if (val) {
+        await fetch('/api/auth/logout', {
+          method: 'DELETE',
+        });
+        toast.success('Logout Success')
+        window.location.href = '/';
+      }
+
+      setOpenModal(false)
+
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  return (
+    <>
+      <Box >
+        <LayoutNavbarHome>
+          <Group justify="space-between">
+            <LayoutIconBack />
+
+            <ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+              <LuLogOut size={20} color='white' />
+            </ActionIcon>
+          </Group>
+          <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+          >
+            <HiUser size={100} color='white' />
+            {loading ?
+              <Skeleton height={62} mt={10} width={"40%"} />
+              :
+              <>
+                <Text c={'white'} fw={'bold'} fz={25}>{isData?.name}</Text>
+                <Text c={'white'} fw={'lighter'} fz={15}>{isData?.group} - {isData?.position}</Text>
+              </>
+            }
+          </Stack>
+        </LayoutNavbarHome>
+        {loading
+          ?
+          <SkeletonDetailProfile />
+          :
+          <Box p={20}>
+            <Group justify="space-between" grow py={5}>
+              <Text fw={'bold'} fz={20}>Informasi</Text>
+              <Text style={{ cursor: 'pointer' }} ta={"right"} c={"blue"} onClick={() => router.push(`/profile/edit/`)}>Edit</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+              <Group>
+                <RiIdCardFill size={28} />
+                <Text fz={18}>NIK</Text>
+              </Group>
+              <Text fz={18} fw={'bold'} ta={"right"}>{isData?.nik}</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+              <Group>
+                <FaSquarePhone size={28} />
+                <Text fz={18}>No Telepon</Text>
+              </Group>
+              <Text fz={18} fw={'bold'} ta={"right"}>{isData?.phone}</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+              <Group>
+                <MdEmail size={28} />
+                <Text fz={18}>Email</Text>
+              </Group>
+              <Text fz={18} fw={'bold'} ta={"right"}>{isData?.email}</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+              <Group>
+                <IoMaleFemale size={28} />
+                <Text fz={18}>Gender</Text>
+              </Group>
+              <Text fz={18} fw={'bold'} ta={"right"}>
+                {isData?.gender === 'M' ? 'Laki-laki' : isData?.gender === 'F' ? 'Perempuan' : ''}
+              </Text>
+            </Group>
+
+          </Box>
+        }
+      </Box>
+      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+        description="Apakah Anda yakin ingin Keluar?"
+        onYes={(val) => onLogout(val)} />
+    </>
+  )
+}
+

src/module/user/profile/view/view_edit_profile.tsx

@@ -1,7 +0,0 @@
-import EditProfile from "../component/edit_profile";
-
-export default function ViewEditProfile() {
-   return (
-      <EditProfile />
-   )
-}