tambahan untuk divisi

src/module/division/lib/BottomMenu.tsx

@@ -0,0 +1,33 @@
+import { ActionIcon, Drawer, Flex, Stack, Text } from "@mantine/core";
+import { MdClose } from "react-icons/md";
+
+export function BottomMenu({size, title, openDrawer, setOpenDrawer, children }: { size?: number | string, title?: string, openDrawer: boolean, setOpenDrawer: any, children: React.ReactNode }) {
+    return <Drawer
+        p={0}
+        opened={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        position="bottom"
+        withCloseButton={false}
+        size={size || "md"}
+        styles={{
+            content: {
+                margin: "0 auto",
+                maxWidth: 550,
+                borderTopRightRadius: 20,
+                borderTopLeftRadius: 20
+            }
+        }}
+    >
+        <Stack gap={"md"}>
+            <Flex justify="space-between">
+                <Flex justify={"end"}>
+                    <Text>{title || 'Menu'}</Text>
+                </Flex>
+                <ActionIcon onClick={() => setOpenDrawer(false)} variant="subtle">
+                    <MdClose />
+                </ActionIcon>
+            </Flex>
+            {children}
+        </Stack>
+    </Drawer>
+}

src/module/division/lib/ButtonConfirm.tsx

@@ -0,0 +1,25 @@
+import { WARNA } from "@/module/_global";
+import { Button, Flex, Stack, Text, UnstyledButton } from "@mantine/core";
+import { BottomMenu } from "./BottomMenu";
+import { useState } from "react";
+
+export function ButtonConfirm({ label, desc, onConfirm }: { label: string, desc: string, onConfirm: () => void }) {
+    const [open, setOpen] = useState(false)
+
+    const onClickConfirm = () => {
+        setOpen(false)
+        onConfirm()
+    }
+    return <Stack>
+        <Button onClick={() => setOpen(true)} radius={50} color={WARNA.biruTua}>{label}</Button>
+        <BottomMenu size={"xs"} title="Konfirmasi" openDrawer={open} setOpenDrawer={setOpen}>
+            <Stack gap={"xl"}>
+                <Text>{desc}</Text>
+                <Flex justify={"end"} gap={"xl"}>
+                    <UnstyledButton onClick={() => setOpen(false)}>Cancel</UnstyledButton>
+                    <Button onClick={onClickConfirm} color={WARNA.biruTua}>Confirm</Button>
+                </Flex>
+            </Stack>
+        </BottomMenu>
+    </Stack>
+}

src/module/division/lib/ButtonNavi.tsx

@@ -0,0 +1,6 @@
+import { WARNA } from "@/module/_global";
+import { Button } from "@mantine/core";
+
+export function ButtonNavi({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) {
+    return <Button radius={50} color={WARNA.biruTua} onClick={onClick}>{children}</Button>
+}

src/module/division/lib/MultiSelectList.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { ActionIcon, Anchor, Button, Card, Divider, Flex, Group, NavLink, Paper, ScrollArea, Select, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useState } from "react";
+import { MdArrowForwardIos, MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
+import { BottomMenu } from "./BottomMenu";
+import { ButtonNavi } from "./ButtonNavi";
+import _ from "lodash";
+import { WARNA } from "@/module/_global";
+
+export function MultiSelectList(
+    { label, placeholder, data = [], listSelected = [], setListSelected }:
+        { label?: string, placeholder?: string, data?: any[], listSelected: any[], setListSelected: any }
+) {
+    const [open, setOpen] = useState(false)
+    // const [listSelected, setListSelected] = useState(defaultValue)
+
+    function selected(value: { label: string, value: any }) {
+        if (listSelected.includes(value.value)) {
+            setListSelected(listSelected.filter((v) => v !== value.value))
+        } else {
+            setListSelected([...listSelected, value.value])
+        }
+    }
+
+    const onClickSimpan = () => {
+        setOpen(false)
+    }
+    return <Stack>
+        <UnstyledButton onClick={() => setOpen(true)}>
+            <Paper p={"sm"} withBorder radius={12}>
+                <Flex justify={"space-between"}>
+                    <Text>{_.isEmpty(listSelected) ? "Pilih Anggota" : "Tambah Anggota"}</Text>
+                    <MdArrowForwardIos size={"1.5rem"} />
+                </Flex>
+            </Paper>
+        </UnstyledButton>
+        <BottomMenu title="Pilih Anggota" openDrawer={open} setOpenDrawer={setOpen}>
+            <Stack>
+                <ScrollArea.Autosize mah={300} >
+                    {data.map((v, k) => <Stack key={k} gap={"lg"}>
+                        <NavLink
+                            onClick={() => selected(v)}
+                            leftSection={listSelected.includes(v.value) ? <MdCheckBox size={"1.5rem"} /> : <MdCheckBoxOutlineBlank size={"1.5rem"} />}
+                            label={v.label} />
+                    </Stack>)}
+                </ScrollArea.Autosize>
+                <Group justify="end">
+                    <ButtonNavi onClick={onClickSimpan}>Simpan</ButtonNavi>
+                </Group>
+            </Stack>
+        </BottomMenu>
+    </Stack>
+}

src/module/division/lib/SingleSelect.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { Flex, Group, NavLink, Paper, ScrollArea, Select, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useState } from "react";
+import { BottomMenu } from "./BottomMenu";
+import { MdArrowForwardIos, MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
+import _ from "lodash";
+
+export function SingleSelect({ desc, icon, placeholder, selected, setSelected, data }: { desc?: string, icon?: any, placeholder: string, selected: any, setSelected: any, data: any[] }) {
+    const [open, setOpen] = useState(false)
+    const completed = desc && !_.isEmpty(data) && !_.isEmpty(selected)
+
+    const onSelected = (value: any) => {
+        setSelected(value)
+        setOpen(false)
+    }
+    return <Stack>
+        <UnstyledButton onClick={() => setOpen(true)} disabled={_.isEmpty(data)}>
+            <Paper p={"sm"} withBorder radius={12} bg={_.isEmpty(data) ? "transparent" : "white"}>
+                <Stack gap={ completed ? "sm" : 0}>
+                    <Flex justify={"space-between"}>
+                        <Flex gap={"md"} align={"center"}>
+                            {icon && icon}
+                            <Text c={_.isEmpty(selected) ? "dimmed" : "black"}>{!_.isEmpty(data) ? data?.filter((v) => v.value === selected)[0]?.label || placeholder : placeholder}</Text>
+                        </Flex>
+                        <MdArrowForwardIos color={_.isEmpty(data) ? "light" : "black"} size={"1.5rem"} />
+                    </Flex>
+                    {completed && <Group justify="end"><Text c="dimmed" size="sm">{desc}</Text></Group>}
+                </Stack>
+            </Paper>
+        </UnstyledButton>
+        <BottomMenu openDrawer={open} setOpenDrawer={setOpen} >
+            <Stack>
+                <ScrollArea.Autosize mah={300} >
+                    {data?.map((v, k) => <NavLink
+                        onClick={() => onSelected(v.value)}
+                        leftSection={selected === v.value ?
+                            <MdCheckBox size={"1.5rem"} /> :
+                            <MdCheckBoxOutlineBlank
+                                size={"1.5rem"} />}
+                        key={k}
+                        label={v.label} />)}
+                </ScrollArea.Autosize>
+            </Stack>
+        </BottomMenu>
+    </Stack>
+}

src/module/division/lib/WebVitals.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals';
+
+export function WebVitals({ searchParams }: { searchParams: any }) {
+    const log = searchParams.log;
+    useReportWebVitals((metric) => {
+        log && console.log(JSON.stringify(metric, null, 4));
+    });
+
+    return null;
+}

src/module/division/lib/devision_state.ts

@@ -0,0 +1,14 @@
+import { State, hookstate, useHookstate } from "@hookstate/core";
+
+const useState = <T>(s: State<T>) => {
+    const state = useHookstate(s);
+    const get = state.value;
+    const set = (v: typeof state.value) => state.set(v);
+    return [get, set] as const;
+};
+
+const title = hookstate("Divisi")
+export const useTitle = () => useState<string>(title);
+
+const filter = hookstate("")
+export const useDivisionfilter = () => useState<string>(filter)

src/module/division/lib/division/get_count_devision.ts

@@ -0,0 +1,5 @@
+import { list_devision } from "@/dummy_data";
+
+export async function getCountDivision() {
+    return list_devision.length
+}

src/module/division/lib/division/get_list_anggota.ts

@@ -0,0 +1,45 @@
+const listAnggota = [
+    {
+        id: "1",
+        name: "Anggota 1",
+    },
+    {
+        id: "2",
+        name: "Anggota 2",
+    },
+    {
+        id: "3",
+        name: "Anggota 3",
+    },
+    {
+        id: "4",
+        name: "Anggota 4",
+    },
+    {
+        id: "5",
+        name: "Anggota 5",
+    },
+    {
+        id: "6",
+        name: "Anggota 6",
+    },
+    {
+        id: "7",
+        name: "Anggota 7",
+    },
+    {
+        id: "8",
+        name: "Anggota 8",
+    },
+    {
+        id: "9",
+        name: "Anggota 9",
+    },
+    {
+        id: "10",
+        name: "Anggota 10",
+    },
+]
+export async function getListAnggota() {
+    return listAnggota
+}

src/module/division/lib/division/get_list_devision.ts

@@ -0,0 +1,5 @@
+import { list_devision } from "@/dummy_data";
+
+export async function getListDevision() {
+    return list_devision
+}

src/module/division/lib/division/get_list_group.ts

@@ -0,0 +1,18 @@
+const listGroup = [
+    {
+        id: "1",
+        name: "Group 1",
+
+    },
+    {
+        id: "2",
+        name: "Group 2",
+    },
+    {
+        id: "3",
+        name: "Group 3",
+    }
+]
+export async function getListGroup() {
+    return listGroup
+}

src/module/division/lib/toast.tsx

@@ -0,0 +1,20 @@
+import { WARNA } from '@/module/_global'
+import t from 'react-simple-toasts'
+
+type Event = "error" | "success" | "info" | "warning"
+export const toast = (message: string, event?: Event) => {
+    t(message, {
+        position: "center",
+        render: (message) => <div style={{
+            padding: 12,
+            paddingLeft: 24,
+            paddingRight: 24,
+            borderRadius: "100px",
+            backgroundColor: event === "error" ? "red" : event === "success" ? "green" : event === "warning" ? "orange" : WARNA.biruTua,
+            color: "white",
+            boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.3)",
+        }}>
+            <div >{message?.toString()}</div>
+        </div>,
+    })
+}