From 9ffcc7dbe3ad3a8b700e187484f7cbf19ebae74b Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 12:22:42 +0800
Subject: [PATCH 01/21] upd : gitignore

Deskripsi:
- update git ignore .env

No Issues
---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index fd3dbb5..f3e886e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,9 @@ yarn-error.log*
 # local env files
 .env*.local
 
+# env
+.env
+
 # vercel
 .vercel
 

From a84ea286be321d1b0003865639e42a8401179be0 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 12:24:13 +0800
Subject: [PATCH 02/21] upd : page loading

Deskripsi:
- membuat page berisikan skeleton loading
- untuk page loading

No Issues
---
 src/app/loading.tsx                           |  5 ++++
 src/module/_global/index.ts                   |  4 ++-
 .../_global/layout/layout_loading_page.tsx    | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/app/loading.tsx
 create mode 100644 src/module/_global/layout/layout_loading_page.tsx

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..1123e45
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,5 @@
+import { LoadingPage } from "@/module/_global";
+
+export default function Loading() {
+   return <LoadingPage />
+}
\ No newline at end of file
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 7c77fb9..20d98f3 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,7 +1,9 @@
 import { WARNA } from "./fun/WARNA";
+import LoadingPage from "./layout/layout_loading_page";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
 
 export { WARNA }
 export { LayoutLogin }
-export {LayoutNavbarHome}
\ No newline at end of file
+export { LayoutNavbarHome }
+export { LoadingPage }
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_loading_page.tsx b/src/module/_global/layout/layout_loading_page.tsx
new file mode 100644
index 0000000..b392422
--- /dev/null
+++ b/src/module/_global/layout/layout_loading_page.tsx
@@ -0,0 +1,29 @@
+import { Box, Group, Skeleton } from "@mantine/core";
+
+export default function LoadingPage() {
+   return (
+      <>
+         <Box p={20}>
+            <Skeleton width={"100%"} height={180} radius={"md"} />
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={50} radius={"md"} />
+               <Skeleton height={50} radius={"md"} />
+               <Skeleton height={50} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+         </Box>
+      </>
+
+   )
+}
\ No newline at end of file

From 04eaed21b7f7ebf21c5eee72995b66697e93671f Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 12:25:01 +0800
Subject: [PATCH 03/21] upd: tampilan profile

Deskripsi:
- update tampilan profile user

No Issues
---
 src/module/user/profile/view/view_profile.tsx | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/module/user/profile/view/view_profile.tsx b/src/module/user/profile/view/view_profile.tsx
index 2c59e62..902e2a1 100644
--- a/src/module/user/profile/view/view_profile.tsx
+++ b/src/module/user/profile/view/view_profile.tsx
@@ -1,7 +1,10 @@
 import { LayoutNavbarHome, WARNA } from "@/module/_global";
-import { ActionIcon, Group, Stack, Text } from "@mantine/core";
+import { ActionIcon, Anchor, Box, Flex, Group, 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";
 
 export default function ViewProfile() {
    return (
@@ -18,12 +21,41 @@ export default function ViewProfile() {
                justify="center"
                gap="xs"
             >
-
-               <HiUser size={150} color='white' />
+               <HiUser size={100} color='white' />
                <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
                <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
             </Stack>
          </LayoutNavbarHome>
+         <Box p={20}>
+            <Group justify="space-between" grow py={5}>
+               <Text fw={'bold'} fz={20}>Informasi</Text>
+               <Anchor href="profile/edit" ta={"right"}>
+                  Edit
+               </Anchor>
+            </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"}>513177782899</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <FaSquarePhone size={28}/>
+                  <Text fz={18}>NoTelepon</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</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"}>marcel@gmail.com</Text>
+            </Group>
+
+         </Box>
       </>
    )
 }
\ No newline at end of file

From 42da0818744470fac021a389b62725503f27d93a Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 12:31:44 +0800
Subject: [PATCH 04/21] upd: edit profile

Deskripsi:
- routing edit profile
- view awal edit profile

No Issues
---
 src/app/(application)/profile/edit/page.tsx        | 9 +++++++++
 src/module/user/index.ts                           | 4 +++-
 src/module/user/profile/view/view_edit_profile.tsx | 9 +++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(application)/profile/edit/page.tsx
 create mode 100644 src/module/user/profile/view/view_edit_profile.tsx

diff --git a/src/app/(application)/profile/edit/page.tsx b/src/app/(application)/profile/edit/page.tsx
new file mode 100644
index 0000000..6ca9661
--- /dev/null
+++ b/src/app/(application)/profile/edit/page.tsx
@@ -0,0 +1,9 @@
+import { ViewEditProfile } from "@/module/user"
+
+function Page() {
+   return (
+      <ViewEditProfile />
+   )
+}
+
+export default Page
\ No newline at end of file
diff --git a/src/module/user/index.ts b/src/module/user/index.ts
index 0cd1556..5e7ed69 100644
--- a/src/module/user/index.ts
+++ b/src/module/user/index.ts
@@ -1,3 +1,5 @@
+import ViewEditProfile from "./profile/view/view_edit_profile";
 import ViewProfile from "./profile/view/view_profile";
 
-export { ViewProfile }
\ No newline at end of file
+export { ViewProfile }
+export { ViewEditProfile }
\ No newline at end of file
diff --git a/src/module/user/profile/view/view_edit_profile.tsx b/src/module/user/profile/view/view_edit_profile.tsx
new file mode 100644
index 0000000..83fcede
--- /dev/null
+++ b/src/module/user/profile/view/view_edit_profile.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@mantine/core";
+
+export default function ViewEditProfile() {
+   return (
+      <Box>
+         Edit profile
+      </Box>
+   )
+}
\ No newline at end of file

From 78aeb3d374b482b06070ec576190725fb7afe026 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 12:35:55 +0800
Subject: [PATCH 05/21] style : update home

Deskrips :
l- add view detail feature
- add view home

No issue
---
 src/module/home/components/features.tsx       |  2 +-
 src/module/home/components/ui/icon_navbar.tsx | 26 +++++++++++++++++++
 src/module/home/view/view_detail_feature.tsx  | 13 +++++-----
 src/module/home/view/view_home.tsx            | 18 +++----------
 4 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/module/home/components/ui/icon_navbar.tsx

diff --git a/src/module/home/components/features.tsx b/src/module/home/components/features.tsx
index d6b584e..bdfd62e 100644
--- a/src/module/home/components/features.tsx
+++ b/src/module/home/components/features.tsx
@@ -28,7 +28,7 @@ export default function Features() {
               <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
             </Center>
           </Box>
-          <Box>
+          <Box onClick={() => router.push('/project')}>
             <Center>
               <ActionIcon variant="gradient"
                 size={68}
diff --git a/src/module/home/components/ui/icon_navbar.tsx b/src/module/home/components/ui/icon_navbar.tsx
new file mode 100644
index 0000000..241c90a
--- /dev/null
+++ b/src/module/home/components/ui/icon_navbar.tsx
@@ -0,0 +1,26 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2';
+
+export default function IconNavbar() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Group>
+        <ActionIcon onClick={()=> router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>
+        <ActionIcon onClick={()=> router.push('/notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiOutlineBell size={20} color='white' />
+        </ActionIcon>
+        <ActionIcon onClick={()=> router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiOutlineUser size={20} color='white' />
+        </ActionIcon>
+      </Group>
+    </Box>
+  );
+}
+
diff --git a/src/module/home/view/view_detail_feature.tsx b/src/module/home/view/view_detail_feature.tsx
index 939a0b5..e8848be 100644
--- a/src/module/home/view/view_detail_feature.tsx
+++ b/src/module/home/view/view_detail_feature.tsx
@@ -6,6 +6,7 @@ import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2,
 import { PiUsersFourFill } from "react-icons/pi";
 import { FaUsersRays, FaUserTie } from "react-icons/fa6";
 import { useRouter } from 'next/navigation';
+import LayoutIconBack from '@/module/_global/layout/layout_icon_back';
 
 export default function ViewDetailFeature() {
   const router = useRouter()
@@ -13,10 +14,8 @@ export default function ViewDetailFeature() {
     <>
       <LayoutNavbarHome>
         <Grid justify='center' align='center'>
-        <Grid.Col span="auto">
-            <ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiChevronLeft size={20} color='white' />
-            </ActionIcon>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
           </Grid.Col>
           <Grid.Col span={6}>
             <Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text>
@@ -43,7 +42,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/project')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
@@ -85,7 +84,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/group')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
@@ -99,7 +98,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Group</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/position')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
diff --git a/src/module/home/view/view_home.tsx b/src/module/home/view/view_home.tsx
index 0137552..28fe7ff 100644
--- a/src/module/home/view/view_home.tsx
+++ b/src/module/home/view/view_home.tsx
@@ -1,30 +1,20 @@
 import { LayoutNavbarHome, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, rem, Stack, Text } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Group, rem, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
 import Carosole from '../components/carosole';
 import Features from '../components/features';
-// import { useRouter } from 'next/navigation';
+import IconNavbar from '../components/ui/icon_navbar';
+
 
 
 export default function ViewHome() {
-  // const router = useRouter()
   return (
     <>
       <LayoutNavbarHome>
         <Group justify='space-between'>
           <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
-          <Group>
-            {/* <ActionIcon onClick={() => router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiMagnifyingGlass size={20} color='white' />
-            </ActionIcon> */}
-            <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiOutlineBell size={20} color='white' />
-            </ActionIcon>
-            <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiOutlineUser size={20} color='white' />
-            </ActionIcon>
-          </Group>
+          <IconNavbar/>
         </Group>
       </LayoutNavbarHome>
       <Box p={20}>

From 615e21e89266729e4dbef6906ea191a33425ee1d Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 12:36:37 +0800
Subject: [PATCH 06/21] add module

Deskripsi:
- add notification
- add search
- project

No issue
---
 src/module/_global/fun/WARNA.ts               |  3 +-
 src/module/_global/index.ts                   |  4 +-
 .../_global/layout/layout_icon_back.tsx       | 19 ++++
 .../components/list_notification.tsx          | 94 +++++++++++++++++++
 .../components/ui/navbar_notification.tsx     | 25 +++++
 src/module/notification/index.ts              |  3 +
 .../notification/view/view_notification.tsx   | 18 ++++
 src/module/project/index.ts                   |  3 +
 src/module/project/view/view_project.tsx      | 10 ++
 .../search/components/ui/navbar_search.tsx    | 25 +++++
 src/module/search/view/view_search.tsx        | 22 +----
 11 files changed, 207 insertions(+), 19 deletions(-)
 create mode 100644 src/module/_global/layout/layout_icon_back.tsx
 create mode 100644 src/module/notification/components/list_notification.tsx
 create mode 100644 src/module/notification/components/ui/navbar_notification.tsx
 create mode 100644 src/module/notification/index.ts
 create mode 100644 src/module/notification/view/view_notification.tsx
 create mode 100644 src/module/project/view/view_project.tsx
 create mode 100644 src/module/search/components/ui/navbar_search.tsx

diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts
index a8d2c6c..38580ae 100644
--- a/src/module/_global/fun/WARNA.ts
+++ b/src/module/_global/fun/WARNA.ts
@@ -1,5 +1,6 @@
 export const WARNA = {
     bgWhite: "#F4F9FD",
     biruTua: "#19345E",
-    bgIcon: "#384288"
+    bgIcon: "#384288",
+    borderOrange: "#FCAA4B"
 }
\ No newline at end of file
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 7c77fb9..c7efd33 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,7 +1,9 @@
 import { WARNA } from "./fun/WARNA";
+import LayoutIconBack from "./layout/layout_icon_back";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
 
 export { WARNA }
 export { LayoutLogin }
-export {LayoutNavbarHome}
\ No newline at end of file
+export { LayoutNavbarHome }
+export {LayoutIconBack}
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_icon_back.tsx b/src/module/_global/layout/layout_icon_back.tsx
new file mode 100644
index 0000000..356012a
--- /dev/null
+++ b/src/module/_global/layout/layout_icon_back.tsx
@@ -0,0 +1,19 @@
+'use client'
+import { ActionIcon, Box } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { WARNA } from '../fun/WARNA';
+
+function LayoutIconBack({ back }: { back: string }) {
+  const router = useRouter()
+  return (
+    <Box>
+      <ActionIcon variant="light" onClick={() => router.push(back)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <HiChevronLeft size={20} color='white' />
+      </ActionIcon>
+    </Box>
+  );
+}
+
+export default LayoutIconBack;
diff --git a/src/module/notification/components/list_notification.tsx b/src/module/notification/components/list_notification.tsx
new file mode 100644
index 0000000..f62834f
--- /dev/null
+++ b/src/module/notification/components/list_notification.tsx
@@ -0,0 +1,94 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, Group, ScrollArea, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiUser } from 'react-icons/hi2';
+
+const dataNotification = [
+  {
+    id: 1,
+    title: 'Rapat Kamis',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 2,
+    title: 'Rapat Jumat',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 3,
+    title: 'Rapat Senin',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 4,
+    title: 'Rapat Selasa',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+]
+
+export default function ListNotification() {
+  const router = useRouter()
+  return (
+    <Box>
+      {dataNotification.map((v, i) => {
+        return (
+          <Grid style={{
+            border: `1px solid ${WARNA.borderOrange}`,
+            padding: 15,
+            borderRadius: 15
+          }} gutter={1} key={i} mb={"sm"}>
+            <Grid.Col span={3} pl={'xs'}>
+              <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                <HiUser size={30} color='white' />
+              </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={9}>
+              <Box>
+                <Text fw={'bold'} fz={18}>{v.title}</Text>
+                <Text fz={15}>{v.description}</Text>
+              </Box>
+            </Grid.Col>
+          </Grid>
+        )
+      })}
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/components/ui/navbar_notification.tsx b/src/module/notification/components/ui/navbar_notification.tsx
new file mode 100644
index 0000000..55e6a4b
--- /dev/null
+++ b/src/module/notification/components/ui/navbar_notification.tsx
@@ -0,0 +1,25 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarNotification() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >NOTIFIKASI</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/index.ts b/src/module/notification/index.ts
new file mode 100644
index 0000000..46ca4d0
--- /dev/null
+++ b/src/module/notification/index.ts
@@ -0,0 +1,3 @@
+import ViewNotification from "./view/view_notification";
+
+export {ViewNotification}
\ No newline at end of file
diff --git a/src/module/notification/view/view_notification.tsx b/src/module/notification/view/view_notification.tsx
new file mode 100644
index 0000000..11b4d27
--- /dev/null
+++ b/src/module/notification/view/view_notification.tsx
@@ -0,0 +1,18 @@
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
+import { Box, Grid, ScrollArea, Text } from '@mantine/core'
+import React from 'react'
+import NavbarNotification from '../components/ui/navbar_notification'
+import ListNotification from '../components/list_notification'
+
+export default function ViewNotification() {
+    return (
+        <Box>
+            <NavbarNotification />
+            <ScrollArea h={'87vh'}>
+                <Box p={20}>
+                    <ListNotification />
+                </Box>
+            </ScrollArea>
+        </Box>
+    )
+}
diff --git a/src/module/project/index.ts b/src/module/project/index.ts
index e69de29..8d44769 100644
--- a/src/module/project/index.ts
+++ b/src/module/project/index.ts
@@ -0,0 +1,3 @@
+import ViewProject from "./view/view_project";
+
+export {ViewProject}
\ No newline at end of file
diff --git a/src/module/project/view/view_project.tsx b/src/module/project/view/view_project.tsx
new file mode 100644
index 0000000..aa17b79
--- /dev/null
+++ b/src/module/project/view/view_project.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ViewProject() {
+  return (
+    <div>
+      ViewProject
+    </div>
+  );
+}
+
diff --git a/src/module/search/components/ui/navbar_search.tsx b/src/module/search/components/ui/navbar_search.tsx
new file mode 100644
index 0000000..e8e8640
--- /dev/null
+++ b/src/module/search/components/ui/navbar_search.tsx
@@ -0,0 +1,25 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarSearch() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+    </Box>
+  );
+}
+
diff --git a/src/module/search/view/view_search.tsx b/src/module/search/view/view_search.tsx
index 7ad2edf..bf88855 100644
--- a/src/module/search/view/view_search.tsx
+++ b/src/module/search/view/view_search.tsx
@@ -1,27 +1,15 @@
-'use client'
-import { LayoutNavbarHome, WARNA } from '@/module/_global';
+
+import { LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Grid, Text, TextInput } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
+import NavbarSearch from '../components/ui/navbar_search';
 
 export default function ViewSearch() {
-  const router = useRouter()
   return (
     <>
-      <LayoutNavbarHome>
-        <Grid justify='center' align='center'>
-          <Grid.Col span="auto">
-            <ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiChevronLeft size={20} color='white' />
-            </ActionIcon>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
-          </Grid.Col>
-          <Grid.Col span="auto"></Grid.Col>
-        </Grid>
-      </LayoutNavbarHome>
+      <NavbarSearch />
       <Box p={20}>
         <TextInput
           styles={{
@@ -33,7 +21,7 @@ export default function ViewSearch() {
           }}
           size="md"
           radius={30}
-          leftSection={<HiMagnifyingGlass size={20}/>}
+          leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
         />
       </Box>

From 497911d032839e950aff2841b5542108b1339848 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 12:36:57 +0800
Subject: [PATCH 07/21] style : add app

---
 src/app/(application)/group/page.tsx        | 11 +++++++++++
 src/app/(application)/notification/page.tsx | 10 ++++++++++
 src/app/(application)/position/page.tsx     | 11 +++++++++++
 src/app/(application)/project/page.tsx      | 10 ++++++++++
 4 files changed, 42 insertions(+)
 create mode 100644 src/app/(application)/group/page.tsx
 create mode 100644 src/app/(application)/notification/page.tsx
 create mode 100644 src/app/(application)/position/page.tsx
 create mode 100644 src/app/(application)/project/page.tsx

diff --git a/src/app/(application)/group/page.tsx b/src/app/(application)/group/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/group/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/notification/page.tsx b/src/app/(application)/notification/page.tsx
new file mode 100644
index 0000000..67c880a
--- /dev/null
+++ b/src/app/(application)/notification/page.tsx
@@ -0,0 +1,10 @@
+import { ViewNotification } from '@/module/notification';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewNotification />
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/position/page.tsx b/src/app/(application)/position/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/position/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/project/page.tsx b/src/app/(application)/project/page.tsx
new file mode 100644
index 0000000..af04bfb
--- /dev/null
+++ b/src/app/(application)/project/page.tsx
@@ -0,0 +1,10 @@
+import { ViewProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewProject />
+  );
+}
+
+export default Page;

From 16d338772f55d216cdad97b1af5559f3e5380804 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 15:00:39 +0800
Subject: [PATCH 08/21] install package

Deskripsi:
- intall lodash

No Issues
---
 package.json | 4 +++-
 yarn.lock    | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d3ae8ba..fd45ec7 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/react": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
+    "@types/lodash": "^4.17.6",
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
+    "lodash": "^4.17.21",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
@@ -58,4 +60,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index b407bb7..3040952 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -638,6 +638,11 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543"
+  integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==
+
 "@types/node@^20.14.9":
   version "20.14.9"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz"
@@ -2370,7 +2375,7 @@ lodash.merge@^4.6.2:
 
 lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:

From be5433694e04c2cb7797c1df2a2eb4fe1d8a22ca Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 15:02:00 +0800
Subject: [PATCH 09/21] update component global

Deskripsi:
- update link button back

- update layout loading page

No Issues
---
 src/module/_global/layout/layout_icon_back.tsx    | 12 ++++++++++--
 src/module/_global/layout/layout_loading_page.tsx |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/module/_global/layout/layout_icon_back.tsx b/src/module/_global/layout/layout_icon_back.tsx
index 356012a..f3a6dc3 100644
--- a/src/module/_global/layout/layout_icon_back.tsx
+++ b/src/module/_global/layout/layout_icon_back.tsx
@@ -4,12 +4,20 @@ import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiChevronLeft } from 'react-icons/hi2';
 import { WARNA } from '../fun/WARNA';
+import _ from 'lodash';
 
-function LayoutIconBack({ back }: { back: string }) {
+function LayoutIconBack({ back }: { back?: string }) {
   const router = useRouter()
   return (
     <Box>
-      <ActionIcon variant="light" onClick={() => router.push(back)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+      <ActionIcon variant="light" onClick={() => {
+        if (!_.isUndefined(back) && !_.isNull(back)) {
+          return router.push(back)
+        } else {
+          return router.back()
+        }
+
+      }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
         <HiChevronLeft size={20} color='white' />
       </ActionIcon>
     </Box>
diff --git a/src/module/_global/layout/layout_loading_page.tsx b/src/module/_global/layout/layout_loading_page.tsx
index b392422..2f30c25 100644
--- a/src/module/_global/layout/layout_loading_page.tsx
+++ b/src/module/_global/layout/layout_loading_page.tsx
@@ -1,8 +1,12 @@
-import { Box, Group, Skeleton } from "@mantine/core";
+import { Box, Group, Skeleton, Text } from "@mantine/core";
+import LayoutNavbarHome from "./layout_navbar_home";
 
 export default function LoadingPage() {
    return (
       <>
+         <LayoutNavbarHome>
+            <Text></Text>
+         </LayoutNavbarHome>
          <Box p={20}>
             <Skeleton width={"100%"} height={180} radius={"md"} />
             <Group my={20} justify="space-between" grow>

From bf1be96b4f7669c6353b9521bf66d80d80bfbd20 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 15:02:39 +0800
Subject: [PATCH 10/21] upd: edit profile

Deskripsi:
- view edit profile
- component ui profile

No Issues
---
 .../component/ui/header_edit_profile.tsx      | 23 ++++++
 .../user/profile/component/ui/ui_profile.tsx  | 14 ++++
 .../user/profile/view/view_edit_profile.tsx   | 72 ++++++++++++++++++-
 src/module/user/profile/view/view_profile.tsx | 20 +++---
 4 files changed, 115 insertions(+), 14 deletions(-)
 create mode 100644 src/module/user/profile/component/ui/header_edit_profile.tsx
 create mode 100644 src/module/user/profile/component/ui/ui_profile.tsx

diff --git a/src/module/user/profile/component/ui/header_edit_profile.tsx b/src/module/user/profile/component/ui/header_edit_profile.tsx
new file mode 100644
index 0000000..5e8f78e
--- /dev/null
+++ b/src/module/user/profile/component/ui/header_edit_profile.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import React from 'react';
+
+export default function HeaderEditProfile() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>EDIT PROFIL</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   );
+}
+
diff --git a/src/module/user/profile/component/ui/ui_profile.tsx b/src/module/user/profile/component/ui/ui_profile.tsx
new file mode 100644
index 0000000..839487a
--- /dev/null
+++ b/src/module/user/profile/component/ui/ui_profile.tsx
@@ -0,0 +1,14 @@
+'use client'
+import { Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+
+export function InfoTitleProfile() {
+   const router = useRouter()
+   return (
+      <Group justify="space-between" grow py={5}>
+         <Text fw={'bold'} fz={20}>Informasi</Text>
+         <Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
+      </Group>
+   )
+}
\ No newline at end of file
diff --git a/src/module/user/profile/view/view_edit_profile.tsx b/src/module/user/profile/view/view_edit_profile.tsx
index 83fcede..a79e792 100644
--- a/src/module/user/profile/view/view_edit_profile.tsx
+++ b/src/module/user/profile/view/view_edit_profile.tsx
@@ -1,9 +1,77 @@
-import { Box } from "@mantine/core";
+import { WARNA } from "@/module/_global";
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import HeaderEditProfile from "../component/ui/header_edit_profile";
+import { HiUser } from "react-icons/hi2";
 
 export default function ViewEditProfile() {
    return (
       <Box>
-         Edit profile
+         <HeaderEditProfile />
+         <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,
+                  },
+               }}
+            />
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
       </Box>
    )
 }
\ No newline at end of file
diff --git a/src/module/user/profile/view/view_profile.tsx b/src/module/user/profile/view/view_profile.tsx
index 902e2a1..437959b 100644
--- a/src/module/user/profile/view/view_profile.tsx
+++ b/src/module/user/profile/view/view_profile.tsx
@@ -1,17 +1,18 @@
-import { LayoutNavbarHome, WARNA } from "@/module/_global";
-import { ActionIcon, Anchor, Box, Flex, Group, Stack, Text } from "@mantine/core";
+import { LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { ActionIcon, Anchor, Box, Button, Flex, Group, 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";
 
 export default function ViewProfile() {
    return (
       <>
          <LayoutNavbarHome>
             <Group justify="space-between">
-               <Text fw={'bold'} c={'white'}>Profile</Text>
+               <LayoutIconBack />
                <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
                   <BsInfo size={20} color='white' />
                </ActionIcon>
@@ -27,29 +28,24 @@ export default function ViewProfile() {
             </Stack>
          </LayoutNavbarHome>
          <Box p={20}>
-            <Group justify="space-between" grow py={5}>
-               <Text fw={'bold'} fz={20}>Informasi</Text>
-               <Anchor href="profile/edit" ta={"right"}>
-                  Edit
-               </Anchor>
-            </Group>
+            <InfoTitleProfile />
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <RiIdCardFill size={28}/>
+                  <RiIdCardFill size={28} />
                   <Text fz={18}>NIK</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
             </Group>
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <FaSquarePhone size={28}/>
+                  <FaSquarePhone size={28} />
                   <Text fz={18}>NoTelepon</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
             </Group>
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <MdEmail size={28}/>
+                  <MdEmail size={28} />
                   <Text fz={18}>Email</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>

From e62243b887094c6a635f4a497838270a75586aab Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 16:42:58 +0800
Subject: [PATCH 11/21] style : update module

Deskripsi:
- add group
- add notification

No issue
---
 src/module/_global/index.ts                   |  6 +-
 src/module/_global/layout/layout_drawer.tsx   | 20 +++++
 .../_global/layout/layout_navbar_home.tsx     |  5 +-
 src/module/_global/val/idDrawer.ts            |  5 ++
 src/module/group/components/list_group.tsx    | 80 +++++++++++++++++++
 .../group/components/ui/drawer_group.tsx      | 62 ++++++++++++++
 .../group/components/ui/navbar_group.tsx      | 38 +++++++++
 src/module/group/index.ts                     |  3 +
 src/module/group/view/view_group.tsx          | 14 ++++
 .../components/list_notification.tsx          |  2 +-
 .../components/ui/navbar_notification.tsx     |  2 -
 .../notification/view/view_notification.tsx   | 10 +--
 12 files changed, 234 insertions(+), 13 deletions(-)
 create mode 100644 src/module/_global/layout/layout_drawer.tsx
 create mode 100644 src/module/_global/val/idDrawer.ts
 create mode 100644 src/module/group/components/list_group.tsx
 create mode 100644 src/module/group/components/ui/drawer_group.tsx
 create mode 100644 src/module/group/components/ui/navbar_group.tsx
 create mode 100644 src/module/group/view/view_group.tsx

diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 23e3719..debe245 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,11 +1,15 @@
 import { WARNA } from "./fun/WARNA";
+import LayoutDrawer from "./layout/layout_drawer";
 import LayoutIconBack from "./layout/layout_icon_back";
 import LoadingPage from "./layout/layout_loading_page";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
+import { isDrawer } from "./val/idDrawer";
 
 export { WARNA }
 export { LayoutLogin }
 export { LayoutNavbarHome }
-export {LayoutIconBack}
+export { LayoutIconBack }
 export { LoadingPage }
+export { LayoutDrawer }
+export { isDrawer }
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_drawer.tsx b/src/module/_global/layout/layout_drawer.tsx
new file mode 100644
index 0000000..62a997d
--- /dev/null
+++ b/src/module/_global/layout/layout_drawer.tsx
@@ -0,0 +1,20 @@
+import { Box, Drawer, Text } from '@mantine/core';
+import React from 'react';
+import { WARNA } from '../fun/WARNA';
+
+export default function LayoutDrawer({ opened, onClose, title, children }: { children: React.ReactNode, opened: boolean, onClose: () => void, title: React.ReactNode }) {
+  return (
+    <Box>
+      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={"35%"}
+        styles={{
+          content: {
+            backgroundColor: "white",
+            borderRadius: "20px 20px 0px 0px",
+          },
+        }}
+      >
+        {children}
+      </Drawer>
+    </Box>
+  );
+}
diff --git a/src/module/_global/layout/layout_navbar_home.tsx b/src/module/_global/layout/layout_navbar_home.tsx
index 66d22c5..fa35cd1 100644
--- a/src/module/_global/layout/layout_navbar_home.tsx
+++ b/src/module/_global/layout/layout_navbar_home.tsx
@@ -4,16 +4,15 @@ import { WARNA } from '../fun/WARNA';
 
 export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <Box pt={25} pl={20} pr={20} m={0} pb={25} bg={WARNA.biruTua}
+      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
         style={{
           borderBottomLeftRadius: 20,
           borderBottomRightRadius: 20,
+          zIndex: 100
         }}
       >
         {children}
       </Box>
-    </>
   );
 }
 export default LayoutNavbarHome
\ No newline at end of file
diff --git a/src/module/_global/val/idDrawer.ts b/src/module/_global/val/idDrawer.ts
new file mode 100644
index 0000000..eee0f26
--- /dev/null
+++ b/src/module/_global/val/idDrawer.ts
@@ -0,0 +1,5 @@
+'use client'
+
+import { atom } from "jotai"
+
+export const isDrawer = atom(false)
diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group.tsx
new file mode 100644
index 0000000..a91983c
--- /dev/null
+++ b/src/module/group/components/list_group.tsx
@@ -0,0 +1,80 @@
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 2,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 3,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 4,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 5,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 6,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 7,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 8,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+]
+
+export default function ListGroup() {
+  return (
+    <Box p={20}>
+      <TextInput
+        styles={{
+          input: {
+            color: WARNA.biruTua,
+            borderRadius: WARNA.biruTua,
+            borderColor: WARNA.biruTua,
+          },
+        }}
+        size="md"
+        radius={30}
+        leftSection={<HiMagnifyingGlass size={20} />}
+        placeholder="Pencarian"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }}>
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+    </Box>
+  );
+}
diff --git a/src/module/group/components/ui/drawer_group.tsx b/src/module/group/components/ui/drawer_group.tsx
new file mode 100644
index 0000000..02c708c
--- /dev/null
+++ b/src/module/group/components/ui/drawer_group.tsx
@@ -0,0 +1,62 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerGroup() {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+
+  function onCLose() {
+    setOpenDrawerGroup(false)
+    setOpenDrawer(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tambah Group</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Tambah Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              MASUK
+            </Button>
+          </Box>
+          </Box>
+      </LayoutDrawer>
+    </Box>
+  );
+}
diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx
new file mode 100644
index 0000000..06f28f9
--- /dev/null
+++ b/src/module/group/components/ui/navbar_group.tsx
@@ -0,0 +1,38 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMenu } from "react-icons/hi";
+import DrawerGroup from './drawer_group';
+
+export default function NavbarGroup() {
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  const router = useRouter()
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
+        <DrawerGroup />
+      </LayoutDrawer>
+    </>
+  );
+}
+
diff --git a/src/module/group/index.ts b/src/module/group/index.ts
index e69de29..0fac4e6 100644
--- a/src/module/group/index.ts
+++ b/src/module/group/index.ts
@@ -0,0 +1,3 @@
+import ViewGroup from "./view/view_group";
+
+export {ViewGroup}
\ No newline at end of file
diff --git a/src/module/group/view/view_group.tsx b/src/module/group/view/view_group.tsx
new file mode 100644
index 0000000..718ffac
--- /dev/null
+++ b/src/module/group/view/view_group.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import NavbarGroup from '../components/ui/navbar_group';
+import { Box } from '@mantine/core';
+import ListGroup from '../components/list_group';
+
+export default function ViewGroup() {
+  return (
+    <Box>
+      <NavbarGroup />
+      <ListGroup />
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/components/list_notification.tsx b/src/module/notification/components/list_notification.tsx
index f62834f..fec0182 100644
--- a/src/module/notification/components/list_notification.tsx
+++ b/src/module/notification/components/list_notification.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Grid, Group, ScrollArea, Text } from '@mantine/core';
+import { ActionIcon, Box, Center, Grid, Group, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiUser } from 'react-icons/hi2';
diff --git a/src/module/notification/components/ui/navbar_notification.tsx b/src/module/notification/components/ui/navbar_notification.tsx
index 55e6a4b..04dde38 100644
--- a/src/module/notification/components/ui/navbar_notification.tsx
+++ b/src/module/notification/components/ui/navbar_notification.tsx
@@ -7,7 +7,6 @@ import React from 'react';
 export default function NavbarNotification() {
   const router = useRouter()
   return (
-    <Box>
       <LayoutNavbarHome>
         <Grid justify='center' align='center'>
           <Grid.Col span="auto">
@@ -19,7 +18,6 @@ export default function NavbarNotification() {
           <Grid.Col span="auto"></Grid.Col>
         </Grid>
       </LayoutNavbarHome>
-    </Box>
   );
 }
 
diff --git a/src/module/notification/view/view_notification.tsx b/src/module/notification/view/view_notification.tsx
index 11b4d27..8716ba6 100644
--- a/src/module/notification/view/view_notification.tsx
+++ b/src/module/notification/view/view_notification.tsx
@@ -1,5 +1,5 @@
 import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
-import { Box, Grid, ScrollArea, Text } from '@mantine/core'
+import { Box, Grid, Text } from '@mantine/core'
 import React from 'react'
 import NavbarNotification from '../components/ui/navbar_notification'
 import ListNotification from '../components/list_notification'
@@ -8,11 +8,9 @@ export default function ViewNotification() {
     return (
         <Box>
             <NavbarNotification />
-            <ScrollArea h={'87vh'}>
-                <Box p={20}>
-                    <ListNotification />
-                </Box>
-            </ScrollArea>
+            <Box p={20}>
+                <ListNotification />
+            </Box>
         </Box>
     )
 }

From 62c2f69228f595eb987f60da0b07874520b3ab0c Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 16:43:26 +0800
Subject: [PATCH 12/21] style : update app

---
 package.json                         | 3 ++-
 src/app/(application)/group/page.tsx | 5 ++---
 src/app/layout.tsx                   | 6 ++++--
 yarn.lock                            | 5 +++++
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d3ae8ba..e0e5a42 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
+    "jotai": "^2.8.4",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
@@ -58,4 +59,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
\ No newline at end of file
+}
diff --git a/src/app/(application)/group/page.tsx b/src/app/(application)/group/page.tsx
index 69da2f2..ec46c75 100644
--- a/src/app/(application)/group/page.tsx
+++ b/src/app/(application)/group/page.tsx
@@ -1,10 +1,9 @@
+import { ViewGroup } from '@/module/group';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
-      Page
-    </div>
+    <ViewGroup />
   );
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ad01478..5b9582c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -32,8 +32,10 @@ export default function RootLayout({
       </head>
       <body className={`${LatoFont.className}`} suppressHydrationWarning>
         <MantineProvider>
-          <Box bg={'#252A2F'}>
-            <Container h={"100vh"} p={0} size={rem(550)} bg={WARNA.bgWhite}>
+          <Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
+            overflowY: "auto"
+          }}>
+            <Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
               {children}
             </Container>
           </Box>
diff --git a/yarn.lock b/yarn.lock
index b407bb7..e1c4150 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2260,6 +2260,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
+jotai@^2.8.4:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.8.4.tgz#ea82b013d640016100e360d19d565862816c96d0"
+  integrity sha512-f6jwjhBJcDtpeauT2xH01gnqadKEySwwt1qNBLvAXcnojkmb76EdqRt05Ym8IamfHGAQz2qMKAwftnyjeSoHAA==
+
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"

From 8cce47a5358ebba801ec1004c134502e0cab5005 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 16:49:40 +0800
Subject: [PATCH 13/21] install package

Deskripsi:
- install hookstate

No Issues
---
 package.json | 1 +
 yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/package.json b/package.json
index fd45ec7..dc3936d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "seed": "tsx prisma/seed.ts"
   },
   "dependencies": {
+    "@hookstate/core": "^4.0.1",
     "@mantine/carousel": "^7.11.1",
     "@mantine/charts": "^7.11.0",
     "@mantine/code-highlight": "^7.11.0",
diff --git a/yarn.lock b/yarn.lock
index 3040952..9ef412b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -89,6 +89,11 @@
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz"
   integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==
 
+"@hookstate/core@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-4.0.1.tgz#6744380e96ce13fe3488c926c1cbae93bbea0ff6"
+  integrity sha512-Uh2D8Z0z/pqOJ7t+SfC+2sj13JQcB4yFhtL+T1choCaBxTSlgOS/CKRBohgJ4cjTKoxOmTT8uSQysu3gUjX+Gw==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"

From cf67619e7698015f1d4f737e2a0ed7d6181090be Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 17:19:47 +0800
Subject: [PATCH 14/21] upd: val isdrawer

Deskripsi:
- update isdrawer jotai ke hookstate

- aplikasiin ke page grup

No Issues
---
 src/module/_global/index.ts                     |  2 +-
 src/module/_global/val/idDrawer.ts              |  5 -----
 src/module/_global/val/isDrawer.ts              |  4 ++++
 src/module/group/components/ui/drawer_group.tsx |  7 ++++---
 src/module/group/components/ui/navbar_group.tsx | 10 +++++-----
 5 files changed, 14 insertions(+), 14 deletions(-)
 delete mode 100644 src/module/_global/val/idDrawer.ts
 create mode 100644 src/module/_global/val/isDrawer.ts

diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index debe245..0265e54 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -4,7 +4,7 @@ import LayoutIconBack from "./layout/layout_icon_back";
 import LoadingPage from "./layout/layout_loading_page";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
-import { isDrawer } from "./val/idDrawer";
+import { isDrawer } from "./val/isDrawer";
 
 export { WARNA }
 export { LayoutLogin }
diff --git a/src/module/_global/val/idDrawer.ts b/src/module/_global/val/idDrawer.ts
deleted file mode 100644
index eee0f26..0000000
--- a/src/module/_global/val/idDrawer.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-'use client'
-
-import { atom } from "jotai"
-
-export const isDrawer = atom(false)
diff --git a/src/module/_global/val/isDrawer.ts b/src/module/_global/val/isDrawer.ts
new file mode 100644
index 0000000..e8d4ad7
--- /dev/null
+++ b/src/module/_global/val/isDrawer.ts
@@ -0,0 +1,4 @@
+'use client'
+import { hookstate } from '@hookstate/core';
+
+export const isDrawer = hookstate(false)
diff --git a/src/module/group/components/ui/drawer_group.tsx b/src/module/group/components/ui/drawer_group.tsx
index 02c708c..4b309b1 100644
--- a/src/module/group/components/ui/drawer_group.tsx
+++ b/src/module/group/components/ui/drawer_group.tsx
@@ -1,4 +1,5 @@
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useAtom } from 'jotai';
 import React, { useState } from 'react';
@@ -6,11 +7,11 @@ import { IoAddCircle } from "react-icons/io5";
 
 export default function DrawerGroup() {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  const openDrawer = useHookstate(isDrawer)
 
   function onCLose() {
     setOpenDrawerGroup(false)
-    setOpenDrawer(false)
+    openDrawer.set(false)
   }
   return (
     <Box>
@@ -55,7 +56,7 @@ export default function DrawerGroup() {
               MASUK
             </Button>
           </Box>
-          </Box>
+        </Box>
       </LayoutDrawer>
     </Box>
   );
diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx
index 06f28f9..c96edb8 100644
--- a/src/module/group/components/ui/navbar_group.tsx
+++ b/src/module/group/components/ui/navbar_group.tsx
@@ -1,14 +1,14 @@
 "use client"
 import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
-import { useAtom } from 'jotai';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import React from 'react';
 import { HiMenu } from "react-icons/hi";
 import DrawerGroup from './drawer_group';
+import { useHookstate } from '@hookstate/core';
 
 export default function NavbarGroup() {
-  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  const openDrawer = useHookstate(isDrawer)
   const router = useRouter()
   return (
     <>
@@ -22,14 +22,14 @@ export default function NavbarGroup() {
           </Grid.Col>
           <Grid.Col span="auto">
             <Group justify='flex-end'>
-              <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+              <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                 <HiMenu size={20} color='white' />
               </ActionIcon>
             </Group>
           </Grid.Col>
         </Grid>
       </LayoutNavbarHome>
-      <LayoutDrawer opened={openDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
+      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
         <DrawerGroup />
       </LayoutDrawer>
     </>

From 1d0253c15b5f19bb1c181036988f6a8ec17ed5c1 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 17:23:40 +0800
Subject: [PATCH 15/21] upd: remove package

Deskripsi:
- remove jotai

No Issues
---
 package.json                                    | 1 -
 src/module/group/components/ui/drawer_group.tsx | 1 -
 yarn.lock                                       | 5 -----
 3 files changed, 7 deletions(-)

diff --git a/package.json b/package.json
index 38fab13..dc3936d 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
-    "jotai": "^2.8.4",
     "lodash": "^4.17.21",
     "next": "14.2.4",
     "react": "^18",
diff --git a/src/module/group/components/ui/drawer_group.tsx b/src/module/group/components/ui/drawer_group.tsx
index 4b309b1..b279696 100644
--- a/src/module/group/components/ui/drawer_group.tsx
+++ b/src/module/group/components/ui/drawer_group.tsx
@@ -1,7 +1,6 @@
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { useAtom } from 'jotai';
 import React, { useState } from 'react';
 import { IoAddCircle } from "react-icons/io5";
 
diff --git a/yarn.lock b/yarn.lock
index 973bc16..9ef412b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2270,11 +2270,6 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
-jotai@^2.8.4:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.8.4.tgz#ea82b013d640016100e360d19d565862816c96d0"
-  integrity sha512-f6jwjhBJcDtpeauT2xH01gnqadKEySwwt1qNBLvAXcnojkmb76EdqRt05Ym8IamfHGAQz2qMKAwftnyjeSoHAA==
-
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"

From 1f6982874ce02748d766e2276184708a28d1523c Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 17:27:18 +0800
Subject: [PATCH 16/21] style ; update edit drawer

---
 src/module/group/components/list_group.tsx    |  9 ++-
 .../group/components/ui/edit_drawer_group.tsx | 72 +++++++++++++++++++
 2 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 src/module/group/components/ui/edit_drawer_group.tsx

diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group.tsx
index a91983c..b757893 100644
--- a/src/module/group/components/list_group.tsx
+++ b/src/module/group/components/list_group.tsx
@@ -1,8 +1,10 @@
-import { WARNA } from '@/module/_global';
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
 import React from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
+import EditDrawerGroup from './ui/edit_drawer_group';
 
 const dataGroup = [
   {
@@ -62,7 +64,7 @@ export default function ListGroup() {
               border: `1px solid ${"#DCEED8"}`,
               padding: 10,
               borderRadius: 10
-            }}>
+            }} >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -75,6 +77,9 @@ export default function ListGroup() {
           </Box>
         )
       })}
+      {/* <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <EditDrawerGroup />
+      </LayoutDrawer> */}
     </Box>
   );
 }
diff --git a/src/module/group/components/ui/edit_drawer_group.tsx b/src/module/group/components/ui/edit_drawer_group.tsx
new file mode 100644
index 0000000..93b6328
--- /dev/null
+++ b/src/module/group/components/ui/edit_drawer_group.tsx
@@ -0,0 +1,72 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function EditDrawerGroup() {
+  // const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  // const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+
+  // function onCLose() {
+  //   setOpenDrawerGroup(false)
+  //   setOpenDrawer(false)
+  // }
+  return (
+    <Box>
+      {/* <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tidak Aktif</Text>
+            </Box>
+          </Flex>
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Edit</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Edit Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              EDIT
+            </Button>
+          </Box>
+        </Box>
+      </LayoutDrawer> */}
+    </Box>
+  );
+}
+

From 80d1e830cf33834711b40b98b5b013c7b25632ef Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 4 Jul 2024 17:35:10 +0800
Subject: [PATCH 17/21] upd: remove package

---
 src/module/group/components/list_group.tsx           | 1 -
 src/module/group/components/ui/edit_drawer_group.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group.tsx
index b757893..aaaf14a 100644
--- a/src/module/group/components/list_group.tsx
+++ b/src/module/group/components/list_group.tsx
@@ -1,6 +1,5 @@
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
-import { useAtom } from 'jotai';
 import React from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
diff --git a/src/module/group/components/ui/edit_drawer_group.tsx b/src/module/group/components/ui/edit_drawer_group.tsx
index 93b6328..2af274f 100644
--- a/src/module/group/components/ui/edit_drawer_group.tsx
+++ b/src/module/group/components/ui/edit_drawer_group.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { useAtom } from 'jotai';
 import React, { useState } from 'react';
 import { IoAddCircle } from "react-icons/io5";
 

From ea9f0be5ea8fd2d01dea45af4ffd9be89f958ea5 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 11:42:50 +0800
Subject: [PATCH 18/21] upd: pengumuman

Deskripsi :
- list pengumuman
- tambah pengumuman
- routing list dan tambah pengumuman
- drawer list pengumuman

No Issues
---
 .../announcement/create/page.tsx              |  9 ++
 src/app/(application)/announcement/page.tsx   |  9 ++
 .../component/list_announcement.tsx           | 87 +++++++++++++++++++
 .../component/ui/drawer_announcement.tsx      | 48 ++++++++++
 .../component/ui/navbar_announcement.tsx      | 37 ++++++++
 .../ui/navbar_create_announcement.tsx         | 21 +++++
 src/module/announcement/index.ts              |  5 ++
 .../view/view_create_announcement.tsx         | 60 +++++++++++++
 .../view/view_list_announcement.tsx           | 12 +++
 src/module/home/components/features.tsx       |  2 +-
 10 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(application)/announcement/create/page.tsx
 create mode 100644 src/app/(application)/announcement/page.tsx
 create mode 100644 src/module/announcement/component/list_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/drawer_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_create_announcement.tsx
 create mode 100644 src/module/announcement/view/view_create_announcement.tsx
 create mode 100644 src/module/announcement/view/view_list_announcement.tsx

diff --git a/src/app/(application)/announcement/create/page.tsx b/src/app/(application)/announcement/create/page.tsx
new file mode 100644
index 0000000..c4f77f1
--- /dev/null
+++ b/src/app/(application)/announcement/create/page.tsx
@@ -0,0 +1,9 @@
+import { ViewCreateAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewCreateAnnouncement />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/app/(application)/announcement/page.tsx b/src/app/(application)/announcement/page.tsx
new file mode 100644
index 0000000..4551abb
--- /dev/null
+++ b/src/app/(application)/announcement/page.tsx
@@ -0,0 +1,9 @@
+import { ViewListAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewListAnnouncement/>
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
new file mode 100644
index 0000000..89a3dc6
--- /dev/null
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -0,0 +1,87 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataPengumuman = [
+   {
+      id: 1,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 2,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 3,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 4,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 5,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 6,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 7,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 8,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+]
+
+export default function ListAnnouncement() {
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataPengumuman.map((v, i) => {
+            return (
+               <Box pt={20} key={i}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                           <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/drawer_announcement.tsx b/src/module/announcement/component/ui/drawer_announcement.tsx
new file mode 100644
index 0000000..7eccd40
--- /dev/null
+++ b/src/module/announcement/component/ui/drawer_announcement.tsx
@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from "react-icons/ri";
+
+export default function DrawerAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/announcement/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/navbar_announcement.tsx b/src/module/announcement/component/ui/navbar_announcement.tsx
new file mode 100644
index 0000000..782be67
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_announcement.tsx
@@ -0,0 +1,37 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMenu } from "react-icons/hi";
+import { useHookstate } from '@hookstate/core';
+import DrawerAnnouncement from './drawer_announcement';
+
+export default function NavbarAnnouncement() {
+  const openDrawer = useHookstate(isDrawer)
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+        <DrawerAnnouncement />
+      </LayoutDrawer>
+    </>
+  );
+}
+
diff --git a/src/module/announcement/component/ui/navbar_create_announcement.tsx b/src/module/announcement/component/ui/navbar_create_announcement.tsx
new file mode 100644
index 0000000..cb25c3e
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_create_announcement.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarCreateAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Tambah Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index e69de29..632be5b 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -0,0 +1,5 @@
+import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewListAnnouncement from "./view/view_list_announcement";
+
+export { ViewListAnnouncement }
+export { ViewCreateAnnouncement }
\ No newline at end of file
diff --git a/src/module/announcement/view/view_create_announcement.tsx b/src/module/announcement/view/view_create_announcement.tsx
new file mode 100644
index 0000000..4774ad5
--- /dev/null
+++ b/src/module/announcement/view/view_create_announcement.tsx
@@ -0,0 +1,60 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
+import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
+import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
+
+export default function ViewCreateAnnouncement() {
+   return (
+      <Box>
+         <NavbarCreateAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight  size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/view/view_list_announcement.tsx b/src/module/announcement/view/view_list_announcement.tsx
new file mode 100644
index 0000000..4af77e6
--- /dev/null
+++ b/src/module/announcement/view/view_list_announcement.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarAnnouncement from "../component/ui/navbar_announcement";
+import ListAnnouncement from "../component/list_announcement";
+
+export default function ViewListAnnouncement() {
+   return (
+      <Box>
+         <NavbarAnnouncement />
+         <ListAnnouncement />
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/home/components/features.tsx b/src/module/home/components/features.tsx
index bdfd62e..5a842d5 100644
--- a/src/module/home/components/features.tsx
+++ b/src/module/home/components/features.tsx
@@ -42,7 +42,7 @@ export default function Features() {
               <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
             </Center>
           </Box>
-          <Box>
+          <Box onClick={() => router.push('/announcement')}>
             <Center>
               <ActionIcon variant="gradient"
                 size={68}

From 0e36aca193b03a7ac134a385b29cee7eae6fbfe8 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 14:59:58 +0800
Subject: [PATCH 19/21] upd: pengumuman

Deskripsi:
- tambah pengumuman
- detail pengumuman
- edit pengumuman

No Issues
---
 .../(application)/announcement/[id]/page.tsx  |  9 +++
 .../announcement/edit/[id]/page.tsx           |  9 +++
 .../component/detail_announcement.tsx         | 37 ++++++++++++
 .../component/list_announcement.tsx           |  9 ++-
 .../ui/drawer_detail_announcement.tsx         | 45 ++++++++++++++
 .../ui/navbar_detail_announcement.tsx         | 34 +++++++++++
 .../component/ui/navbar_edit_announcement.tsx | 21 +++++++
 src/module/announcement/index.ts              |  6 +-
 .../view/view_detail_anouncement.tsx          | 12 ++++
 .../view/view_edit_announcement.tsx           | 60 +++++++++++++++++++
 10 files changed, 239 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(application)/announcement/[id]/page.tsx
 create mode 100644 src/app/(application)/announcement/edit/[id]/page.tsx
 create mode 100644 src/module/announcement/component/detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/drawer_detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_edit_announcement.tsx
 create mode 100644 src/module/announcement/view/view_detail_anouncement.tsx
 create mode 100644 src/module/announcement/view/view_edit_announcement.tsx

diff --git a/src/app/(application)/announcement/[id]/page.tsx b/src/app/(application)/announcement/[id]/page.tsx
new file mode 100644
index 0000000..872826e
--- /dev/null
+++ b/src/app/(application)/announcement/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { ViewDetailAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailAnnouncement data={params.id} />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/app/(application)/announcement/edit/[id]/page.tsx b/src/app/(application)/announcement/edit/[id]/page.tsx
new file mode 100644
index 0000000..b9f348b
--- /dev/null
+++ b/src/app/(application)/announcement/edit/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { ViewEditAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: any } }) {
+   return (
+      <ViewEditAnnouncement data={params.id} />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/announcement/component/detail_announcement.tsx b/src/module/announcement/component/detail_announcement.tsx
new file mode 100644
index 0000000..47b74ea
--- /dev/null
+++ b/src/module/announcement/component/detail_announcement.tsx
@@ -0,0 +1,37 @@
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { BsCardText } from "react-icons/bs";
+import { TfiAnnouncement } from "react-icons/tfi";
+
+export default function DetailAnnouncement() {
+   return (
+      <Box py={30} px={20}>
+         <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Group>
+                  <TfiAnnouncement size={25} />
+                  <Text fw={'bold'}>Pengumuman Dinas</Text>
+               </Group>
+               <Group>
+                  <BsCardText size={25} />
+                  <Text>Pengumuman agar menggunakan</Text>
+               </Group>
+            </Stack>
+         </Box>
+         <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Text fw={'bold'}>Anggota</Text>
+               <Group>
+                  <Text>LPD</Text>
+               </Group>
+               <Group>
+                  <Text>PKK</Text>
+               </Group>
+               <Group>
+                  <Text>Karang Taruna</Text>
+               </Group>
+            </Stack>
+         </Box>
+      </Box>
+
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
index 89a3dc6..c1317a6 100644
--- a/src/module/announcement/component/list_announcement.tsx
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -1,8 +1,10 @@
+'use client'
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
 
 const dataPengumuman = [
    {
@@ -48,6 +50,7 @@ const dataPengumuman = [
 ]
 
 export default function ListAnnouncement() {
+   const router = useRouter()
    return (
       <Box p={20}>
          <TextInput
@@ -65,7 +68,9 @@ export default function ListAnnouncement() {
          />
          {dataPengumuman.map((v, i) => {
             return (
-               <Box pt={20} key={i}>
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/announcement/${v.id}`)
+               }}>
                   <Group align='center' style={{
                      borderBottom: `1px solid #D9D9D9`,
                      padding: 10,
diff --git a/src/module/announcement/component/ui/drawer_detail_announcement.tsx b/src/module/announcement/component/ui/drawer_detail_announcement.tsx
new file mode 100644
index 0000000..71824e5
--- /dev/null
+++ b/src/module/announcement/component/ui/drawer_detail_announcement.tsx
@@ -0,0 +1,45 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+
+export default function DrawerDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <FaTrash size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Hapus</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
+                  router.push('edit/123')
+                  onCLose()
+               }}>
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/navbar_detail_announcement.tsx b/src/module/announcement/component/ui/navbar_detail_announcement.tsx
new file mode 100644
index 0000000..a2584ae
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_detail_announcement.tsx
@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+
+export default function NavbarDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerDetailAnnouncement />
+         </LayoutDrawer>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/component/ui/navbar_edit_announcement.tsx b/src/module/announcement/component/ui/navbar_edit_announcement.tsx
new file mode 100644
index 0000000..3add416
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_edit_announcement.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarEditAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Edit Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index 632be5b..297f4d5 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -1,5 +1,9 @@
 import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewDetailAnnouncement from "./view/view_detail_anouncement";
+import ViewEditAnnouncement from "./view/view_edit_announcement";
 import ViewListAnnouncement from "./view/view_list_announcement";
 
 export { ViewListAnnouncement }
-export { ViewCreateAnnouncement }
\ No newline at end of file
+export { ViewCreateAnnouncement }
+export { ViewDetailAnnouncement }
+export { ViewEditAnnouncement }
\ No newline at end of file
diff --git a/src/module/announcement/view/view_detail_anouncement.tsx b/src/module/announcement/view/view_detail_anouncement.tsx
new file mode 100644
index 0000000..885049b
--- /dev/null
+++ b/src/module/announcement/view/view_detail_anouncement.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import DetailAnnouncement from "../component/detail_announcement";
+import NavbarDetailAnnouncement from "../component/ui/navbar_detail_announcement";
+
+export default function ViewDetailAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarDetailAnnouncement />
+         <DetailAnnouncement />
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/view/view_edit_announcement.tsx b/src/module/announcement/view/view_edit_announcement.tsx
new file mode 100644
index 0000000..4b2bb39
--- /dev/null
+++ b/src/module/announcement/view/view_edit_announcement.tsx
@@ -0,0 +1,60 @@
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
+import { WARNA } from "@/module/_global";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function ViewEditAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarEditAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file

From d5460d47e4b68cdb45ba37839b7ff4e44e674ce0 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 16:58:16 +0800
Subject: [PATCH 20/21] upd: member

Deskripsi:
- list member
- routing
- update link kategori

No Issues
---
 src/app/(application)/member/create/page.tsx  |  0
 src/app/(application)/member/page.tsx         |  9 ++
 src/module/home/view/view_detail_feature.tsx  |  4 +-
 .../user/member/component/list_member.tsx     | 91 +++++++++++++++++++
 .../component/ui/drawer_list_member.tsx       | 48 ++++++++++
 .../component/ui/navbar_list_member.tsx       | 34 +++++++
 src/module/user/member/index.ts               |  3 +
 .../user/member/view/view_list_member.tsx     | 12 +++
 8 files changed, 199 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(application)/member/create/page.tsx
 create mode 100644 src/app/(application)/member/page.tsx
 create mode 100644 src/module/user/member/component/list_member.tsx
 create mode 100644 src/module/user/member/component/ui/drawer_list_member.tsx
 create mode 100644 src/module/user/member/component/ui/navbar_list_member.tsx
 create mode 100644 src/module/user/member/view/view_list_member.tsx

diff --git a/src/app/(application)/member/create/page.tsx b/src/app/(application)/member/create/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/(application)/member/page.tsx b/src/app/(application)/member/page.tsx
new file mode 100644
index 0000000..8b49914
--- /dev/null
+++ b/src/app/(application)/member/page.tsx
@@ -0,0 +1,9 @@
+import { ViewListMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewListMember />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/home/view/view_detail_feature.tsx b/src/module/home/view/view_detail_feature.tsx
index e8848be..71e4880 100644
--- a/src/module/home/view/view_detail_feature.tsx
+++ b/src/module/home/view/view_detail_feature.tsx
@@ -56,7 +56,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/announcement')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
@@ -70,7 +70,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/member')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
diff --git a/src/module/user/member/component/list_member.tsx b/src/module/user/member/component/list_member.tsx
new file mode 100644
index 0000000..5a74c26
--- /dev/null
+++ b/src/module/user/member/component/list_member.tsx
@@ -0,0 +1,91 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
+
+const dataMember = [
+   {
+      id: 1,
+      name: 'Ali akbar',
+      desc: 'Perbekel'
+   },
+   {
+      id: 2,
+      name: 'Fibra Marcell',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 3,
+      name: 'Burhan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 4,
+      name: 'Chandra',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 5,
+      name: 'Ayu',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 6,
+      name: 'Heriawan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 7,
+      name: 'Jinan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 8,
+      name: 'Rizal',
+      desc: 'Kasi Kesejahteraan'
+   },
+]
+
+export default function ListMember() {
+   const router = useRouter()
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataMember.map((v, i) => {
+            return (
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/member/${v.id}`)
+               }}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                           <HiMiniUser color={'white'} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}
diff --git a/src/module/user/member/component/ui/drawer_list_member.tsx b/src/module/user/member/component/ui/drawer_list_member.tsx
new file mode 100644
index 0000000..97948f9
--- /dev/null
+++ b/src/module/user/member/component/ui/drawer_list_member.tsx
@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from 'react-icons/ri';
+
+export default function DrawerListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/member/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
diff --git a/src/module/user/member/component/ui/navbar_list_member.tsx b/src/module/user/member/component/ui/navbar_list_member.tsx
new file mode 100644
index 0000000..a4955a9
--- /dev/null
+++ b/src/module/user/member/component/ui/navbar_list_member.tsx
@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerListMember from "./drawer_list_member";
+
+export default function NavbarListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack back='/home' />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>ANGGOTA</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerListMember />
+         </LayoutDrawer>
+      </>
+   )
+}
\ No newline at end of file
diff --git a/src/module/user/member/index.ts b/src/module/user/member/index.ts
index e69de29..470c664 100644
--- a/src/module/user/member/index.ts
+++ b/src/module/user/member/index.ts
@@ -0,0 +1,3 @@
+import ViewListMember from "./view/view_list_member";
+
+export { ViewListMember }
\ No newline at end of file
diff --git a/src/module/user/member/view/view_list_member.tsx b/src/module/user/member/view/view_list_member.tsx
new file mode 100644
index 0000000..4b1bb6b
--- /dev/null
+++ b/src/module/user/member/view/view_list_member.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarListMember from "../component/ui/navbar_list_member";
+import ListMember from "../component/list_member";
+
+export default function ViewListMember() {
+   return (
+      <Box>
+         <NavbarListMember />
+         <ListMember />
+      </Box>
+   )
+}
\ No newline at end of file

From cf01f36f6ceaf0e70e87a6099030b8c99fe37dde Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 17:12:32 +0800
Subject: [PATCH 21/21] upd: member

Deskripsi:
- create member
- list member
- detail member

No Issues
---
 src/app/(application)/member/[id]/page.tsx    | 10 +++
 src/app/(application)/member/create/page.tsx  |  9 +++
 .../component/ui/navbar_create_member.tsx     | 23 ++++++
 src/module/user/member/index.ts               |  6 +-
 .../user/member/view/view_create_member.tsx   | 77 +++++++++++++++++++
 .../user/member/view/view_detail_member.tsx   | 55 +++++++++++++
 6 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(application)/member/[id]/page.tsx
 create mode 100644 src/module/user/member/component/ui/navbar_create_member.tsx
 create mode 100644 src/module/user/member/view/view_create_member.tsx
 create mode 100644 src/module/user/member/view/view_detail_member.tsx

diff --git a/src/app/(application)/member/[id]/page.tsx b/src/app/(application)/member/[id]/page.tsx
new file mode 100644
index 0000000..c05ea29
--- /dev/null
+++ b/src/app/(application)/member/[id]/page.tsx
@@ -0,0 +1,10 @@
+import { ViewDetailMember } from "@/module/user/member";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailMember data={params.id} />
+   )
+}
+
+export default Page;
+
diff --git a/src/app/(application)/member/create/page.tsx b/src/app/(application)/member/create/page.tsx
index e69de29..1afa674 100644
--- a/src/app/(application)/member/create/page.tsx
+++ b/src/app/(application)/member/create/page.tsx
@@ -0,0 +1,9 @@
+import { ViewCreateMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewCreateMember />
+   );
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/user/member/component/ui/navbar_create_member.tsx b/src/module/user/member/component/ui/navbar_create_member.tsx
new file mode 100644
index 0000000..cfff722
--- /dev/null
+++ b/src/module/user/member/component/ui/navbar_create_member.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import React from 'react';
+
+export default function NavbarCreateMember() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Tambah Anggota</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   );
+}
+
diff --git a/src/module/user/member/index.ts b/src/module/user/member/index.ts
index 470c664..64962ea 100644
--- a/src/module/user/member/index.ts
+++ b/src/module/user/member/index.ts
@@ -1,3 +1,7 @@
+import ViewCreateMember from "./view/view_create_member";
+import ViewDetailMember from "./view/view_detail_member";
 import ViewListMember from "./view/view_list_member";
 
-export { ViewListMember }
\ No newline at end of file
+export { ViewListMember }
+export { ViewCreateMember }
+export { ViewDetailMember }
\ No newline at end of file
diff --git a/src/module/user/member/view/view_create_member.tsx b/src/module/user/member/view/view_create_member.tsx
new file mode 100644
index 0000000..efa9ccc
--- /dev/null
+++ b/src/module/user/member/view/view_create_member.tsx
@@ -0,0 +1,77 @@
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import NavbarCreateMember from "../component/ui/navbar_create_member";
+import { WARNA } from "@/module/_global";
+import { HiUser } from "react-icons/hi2";
+
+export default function ViewCreateMember() {
+   return (
+      <Box>
+         <NavbarCreateMember />
+         <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,
+                  },
+               }}
+            />
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/user/member/view/view_detail_member.tsx b/src/module/user/member/view/view_detail_member.tsx
new file mode 100644
index 0000000..a282569
--- /dev/null
+++ b/src/module/user/member/view/view_detail_member.tsx
@@ -0,0 +1,55 @@
+import { LayoutNavbarHome, LayoutIconBack, WARNA } from "@/module/_global";
+import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core";
+import { BsInfo } from "react-icons/bs";
+import { FaSquarePhone } from "react-icons/fa6";
+import { HiUser } from "react-icons/hi2";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
+
+export default function ViewDetailMember({ data }: { data: string }) {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Group justify="space-between">
+               <LayoutIconBack />
+               <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+                  <BsInfo size={20} color='white' />
+               </ActionIcon>
+            </Group>
+            <Stack
+               align="center"
+               justify="center"
+               gap="xs"
+            >
+               <HiUser size={100} color='white' />
+               <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
+               <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
+            </Stack>
+         </LayoutNavbarHome>
+         <Box p={20}>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <RiIdCardFill size={28} />
+                  <Text fz={18}>NIK</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <FaSquarePhone size={28} />
+                  <Text fz={18}>NoTelepon</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</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"}>marcel@gmail.com</Text>
+            </Group>
+
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file