upd: jabatan

Deskripsi:
- icon group pada list fitur
- filter pada list jabatan
- nambah info group pada list jabatan

No
Issues

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

@@ -1,7 +1,11 @@
+import { ViewFilter } from '@/module/_global';
 import { ViewListPosition } from '@/module/position';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: { page: string } }) {
+  if (searchParams.page == "filter")
+    return <ViewFilter />
+
   return (
     <ViewListPosition />
   );

src/module/home/view/view_detail_feature.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
 import { PiUsersFourFill } from "react-icons/pi";
 import { useRouter } from 'next/navigation';
-import { FaUserTie } from 'react-icons/fa6';
+import { FaUserTag, FaUserTie } from 'react-icons/fa6';
 
 export default function ViewDetailFeature() {
   const router = useRouter()
@@ -73,20 +73,6 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
               </Center>
             </Box>
-            <Box onClick={() => router.push('/group')}>
-              <Center>
-                <ActionIcon variant="gradient"
-                  size={68}
-                  aria-label="Gradient action icon"
-                  radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiUsers size={35} color={WARNA.biruTua} />
-                </ActionIcon>
-              </Center>
-              <Center>
-                <Text fz={15} c={WARNA.biruTua}>Group</Text>
-              </Center>
-            </Box>
             <Box onClick={() => router.push('/position')}>
               <Center>
                 <ActionIcon variant="gradient"
@@ -101,6 +87,20 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Jabatan</Text>
               </Center>
             </Box>
+            <Box onClick={() => router.push('/group')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <FaUserTag size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Group</Text>
+              </Center>
+            </Box>
           </SimpleGrid>
         </Box>
       </Box>

src/module/position/component/ui/drawer_detail_position.tsx

@@ -2,8 +2,7 @@ import { LayoutDrawer, WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
 import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
 import { useState } from "react"
-import { FaPencil } from "react-icons/fa6"
-import { ImUserCheck } from "react-icons/im"
+import { FaPencil, FaToggleOff } from "react-icons/fa6"
 
 export default function DrawerDetailPosition({ onUpdated }: { onUpdated: (val: boolean) => void }) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
@@ -32,10 +31,10 @@ export default function DrawerDetailPosition({ onUpdated }: { onUpdated: (val: b
                   onClick={() => setModal(true)}
                >
                   <Box>
-                     <ImUserCheck size={30} color={WARNA.biruTua} />
+                     <FaToggleOff size={30} color={WARNA.biruTua} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Status</Text>
+                     <Text c={WARNA.biruTua}>Non Aktifkan</Text>
                   </Box>
                </Flex>
 

src/module/position/component/ui/drawer_list_position.tsx

@@ -1,10 +1,13 @@
 import { WARNA, LayoutDrawer } from "@/module/_global";
 import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from "react-icons/ri";
 
 export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const router = useRouter()
 
    function onCLose() {
       setOpenDrawerGroup(false)
@@ -25,6 +28,14 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      <Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
                   </Box>
                </Flex>
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?page=filter')}>
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text ta={'center'} c={WARNA.biruTua}>Filter</Text>
+                  </Box>
+               </Flex>
             </SimpleGrid>
          </Stack>
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">

src/module/position/component/ui/list_position_active.tsx

@@ -9,35 +9,43 @@ import toast from 'react-hot-toast';
 const dataGroup = [
   {
     id: 1,
-    name: 'Kepala'
+    name: 'Kepala',
+    grup: 'Dinas'
   },
   {
     id: 2,
-    name: 'Sekretaris'
+    name: 'Sekretaris',
+    grup: 'LPD'
   },
   {
     id: 3,
-    name: 'Bendahara'
+    name: 'Bendahara',
+    grup: 'Dinas'
   },
   {
     id: 4,
-    name: 'Anggota'
+    name: 'Anggota',
+    grup: 'Karang Taruna'
   },
   {
     id: 5,
-    name: 'Kepala Urusan Kemasyarakatan'
+    name: 'Kepala Urusan Kemasyarakatan',
+    grup: 'Dinas'
   },
   {
     id: 6,
-    name: 'Kepala Urusan Pemerintahan'
+    name: 'Kepala Urusan Pemerintahan',
+    grup: 'Dinas'
   },
   {
     id: 7,
-    name: 'Kepala Urusan Kependudukan'
+    name: 'Kepala Urusan Kependudukan',
+    grup: 'Dinas'
   },
   {
     id: 8,
-    name: 'Anggota'
+    name: 'Anggota',
+    grup: 'Dinas'
   },
 ]
 
@@ -78,6 +86,7 @@ export default function ListPositionActive() {
               </Box>
               <Box>
                 <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                <Text fw={'lighter'} fz={12}>{v.grup}</Text>
               </Box>
             </Group>
           </Box>

src/module/position/component/ui/list_position_nonactive.tsx

@@ -9,35 +9,43 @@ import toast from 'react-hot-toast';
 const dataGroup = [
    {
       id: 1,
-      name: 'Anggota'
+      name: 'Kepala',
+      grup: 'Dinas'
    },
    {
       id: 2,
-      name: 'Anggota'
+      name: 'Sekretaris',
+      grup: 'LPD'
    },
    {
       id: 3,
-      name: 'Anggota'
+      name: 'Bendahara',
+      grup: 'Dinas'
    },
    {
       id: 4,
-      name: 'Anggota'
+      name: 'Anggota',
+      grup: 'Karang Taruna'
    },
    {
       id: 5,
-      name: 'Anggota'
+      name: 'Kepala Urusan Kemasyarakatan',
+      grup: 'Dinas'
    },
    {
       id: 6,
-      name: 'Anggota'
+      name: 'Kepala Urusan Pemerintahan',
+      grup: 'Dinas'
    },
    {
       id: 7,
-      name: 'Anggota'
+      name: 'Kepala Urusan Kependudukan',
+      grup: 'Dinas'
    },
    {
       id: 8,
-      name: 'Anggota'
+      name: 'Anggota',
+      grup: 'Dinas'
    },
 ]
 
@@ -78,6 +86,7 @@ export default function ListPositionNonActive() {
                      </Box>
                      <Box>
                         <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                        <Text fw={'lighter'} fz={12}>{v.grup}</Text>
                      </Box>
                   </Group>
                </Box>