Merge pull request #12 from bipproduction/lukman/4-juli-2024

Lukman/4 juli 2024

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

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;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

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;

src/module/_global/fun/WARNA.ts

@@ -1,5 +1,6 @@
 export const WARNA = {
     bgWhite: "#F4F9FD",
     biruTua: "#19345E",
-    bgIcon: "#384288"
+    bgIcon: "#384288",
+    borderOrange: "#FCAA4B"
 }

src/module/_global/index.ts

@@ -1,4 +1,5 @@
 import { WARNA } from "./fun/WARNA";
+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";
@@ -6,4 +7,5 @@ import LayoutNavbarHome from "./layout/layout_navbar_home";
 export { WARNA }
 export { LayoutLogin }
 export { LayoutNavbarHome }
-export { LoadingPage }
+export {LayoutIconBack}
+export { LoadingPage }

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;

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}

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>
+  );
+}
+

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}

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}>

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>
+  );
+}
+

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>
+  );
+}
+

src/module/notification/index.ts

@@ -0,0 +1,3 @@
+import ViewNotification from "./view/view_notification";
+
+export {ViewNotification}

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>
+    )
+}

src/module/project/index.ts

@@ -0,0 +1,3 @@
+import ViewProject from "./view/view_project";
+
+export {ViewProject}

src/module/project/view/view_project.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ViewProject() {
+  return (
+    <div>
+      ViewProject
+    </div>
+  );
+}
+

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>
+  );
+}
+

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>