rev: calender

Deskripsi:
- tampilan list data konflik

No Issues

src/module/_global/index.ts

@@ -28,6 +28,7 @@ import SkeletonList from "./components/skeleton_list";
 import { funViewDir } from "./fun/view_dir";
 import { funSendWebPush } from "./fun/send_web_push";
 import ViewFilterData from "./view/view_filter_kategori_data";
+import LayoutModalNew from "./layout/layout_modal_new";
 
 export { WARNA };
 export { LayoutLogin };
@@ -65,3 +66,4 @@ export { keyWibu }
 export { funViewDir }
 export { funSendWebPush }
 export { ViewFilterData }
+export { LayoutModalNew }

src/module/_global/layout/layout_modal_new.tsx

@@ -0,0 +1,43 @@
+import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { BsQuestionCircleFill } from 'react-icons/bs';
+
+export default function LayoutModalNew({ opened, onClose, description, onYes, loading, onCheck }: { opened: boolean, onClose: () => void, loading?: boolean, description: string, onYes: (val: boolean) => void, onCheck: (val: boolean) => void }) {
+   const isMobile = useMediaQuery('(max-width: 768px)');
+   return (
+      <Modal styles={{
+         body: {
+            margin: 10,
+         },
+         content: {
+            border: `2px solid ${'#828AFC'}`,
+            borderRadius: 10
+         }
+      }} opened={opened} onClose={onClose} withCloseButton={false} centered closeOnClickOutside={false}>
+         <Flex justify={"center"} align={"center"} direction={"column"}>
+            <BsQuestionCircleFill size={100} color="red" />
+            <Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
+         </Flex>
+         <Button mt={30} fullWidth size="lg" radius={'xl'} bg={'blue'} onClick={() => onCheck(true)}>Lihat Data</Button>
+         <SimpleGrid mt={10} cols={{ base: 1, sm: 2, lg: 2 }}>
+            {isMobile ?
+               <>
+                  <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => {
+                     onYes(true)
+                  }}>YA</Button>
+                  <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
+               </>
+               :
+               <>
+                  <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
+                  <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => {
+                     onYes(true)
+                  }}>YA</Button>
+               </>
+
+            }
+         </SimpleGrid>
+      </Modal>
+   );
+}
+

src/module/calender/ui/create_calender_division_caleder.tsx

@@ -1,8 +1,8 @@
 'use client'
-import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
+import { keyWibu, LayoutModalNew, LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Grid, Group, Modal, rem, Select, SimpleGrid, Stack, Table, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import { useMediaQuery } from '@mantine/hooks';
 import moment from 'moment';
@@ -15,16 +15,19 @@ import { funCheckCalender, funCreateCalender } from '../lib/api_calender';
 import { IFormMemberCalender } from '../lib/type_calender';
 import { globalCalender } from '../lib/val_calender';
 import CreateUserCalender from './create_user_calender';
+import ViewDataConflict from './create_view_event_conflict';
 
 export default function CreateCalenderDivisionCaleder() {
     const [value, setValue] = useState<Date | null>(null);
     const router = useRouter()
     const [isModal, setModal] = useState(false)
     const [isModalKonfirmasiTglSama, setModalKonfirmasiTglSama] = useState(false)
+    const [isModalViewData, setModalViewData] = useState(false)
     const [loadingModal, setLoadingModal] = useState(false)
     const [loadingModalKonfirmasiTglSama, setLoadingModalKonfirmasiTglSama] = useState(false)
     const member = useHookstate(globalCalender)
     const memberValue = member.get() as IFormMemberCalender[]
+    const [dataAcaraKonflik, setDataAcaraKonflik] = useState<any[]>([])
     const [openMember, setOpenMember] = useState(false)
     const param = useParams<{ id: string, detail: string }>()
     const tema = useHookstate(TEMA)
@@ -75,6 +78,7 @@ export default function CreateCalenderDivisionCaleder() {
                 onSubmit()
             } else {
                 setModalKonfirmasiTglSama(true)
+                setDataAcaraKonflik(response.data)
             }
         } catch (error) {
             console.error(error)
@@ -217,6 +221,7 @@ export default function CreateCalenderDivisionCaleder() {
     }
 
     if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
+    if (isModalViewData) return <ViewDataConflict onClose={() => setModalViewData(false)} data={dataAcaraKonflik} />
 
     return (
         <Box>
@@ -468,7 +473,7 @@ export default function CreateCalenderDivisionCaleder() {
                 }} />
 
 
-            <LayoutModal loading={loadingModalKonfirmasiTglSama} opened={isModalKonfirmasiTglSama}
+            <LayoutModalNew loading={loadingModalKonfirmasiTglSama} opened={isModalKonfirmasiTglSama} onCheck={(val) => { val ? setModalViewData(true) : setModalViewData(false) }}
                 onClose={() => {
                     setModalKonfirmasiTglSama(false)
                     setModal(false)

src/module/calender/ui/create_view_event_conflict.tsx

@@ -0,0 +1,101 @@
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, rem, Stack, Table, Text } from '@mantine/core';
+import moment from 'moment';
+import { HiChevronLeft } from 'react-icons/hi2';
+import "moment/locale/id";
+import { FaCheck } from 'react-icons/fa6';
+import { useMediaQuery } from '@mantine/hooks';
+import { MdOutlineEventNote } from 'react-icons/md';
+
+export default function ViewDataConflict({ onClose, data }: { onClose: (val: any) => void, data: any[] }) {
+   const tema = useHookstate(TEMA)
+   const isMobile2 = useMediaQuery("(max-width: 438px)");
+
+   return (
+      <Box>
+         <LayoutNavbarNew
+            // back=""
+            title="Data Acara"
+            state={
+               <Box>
+                  <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                     <HiChevronLeft size={20} color='white' />
+                  </ActionIcon>
+               </Box>
+            }
+            menu={<></>}
+         />
+         <Box p={20}>
+            {
+               (data.length === 0) ?
+                  <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+                     <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada data</Text>
+                  </Stack>
+                  :
+                  <Box mt={20} mb={100}>
+                     {data.map((v, i) => {
+                        return (
+                           <Box my={10} key={i}>
+                              <Grid align='center' >
+                                 <Grid.Col
+                                    span={{
+                                       base: 1,
+                                       xs: 1,
+                                       sm: 1,
+                                       md: 1,
+                                       lg: 1,
+                                       xl: 1,
+                                    }}
+                                 >
+                                    <ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon" >
+                                       <MdOutlineEventNote color={"white"} size={25} />
+                                    </ActionIcon>
+                                 </Grid.Col>
+                                 <Grid.Col
+                                    span={{
+                                       base: 11,
+                                       xs: 11,
+                                       sm: 11,
+                                       md: 11,
+                                       lg: 11,
+                                       xl: 11,
+                                    }}
+                                 >
+                                    <Flex justify='space-between' align={"center"}>
+                                       <Flex direction={'column'} align="flex-start" justify="flex-start">
+                                          <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.title}</Text>
+                                          <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{moment.utc(v.timeStart).format("HH:mm")} - {moment.utc(v.timeEnd).format("HH:mm")}</Text>
+                                       </Flex>
+                                       {/* {isSelected ? <FaCheck /> : null} */}
+                                    </Flex>
+                                 </Grid.Col>
+                              </Grid>
+                              <Box mt={10}>
+                                 <Divider size={"xs"} />
+                              </Box>
+                           </Box>
+                        );
+                     })}
+                  </Box>
+            }
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`,
+         }}>
+            <Button
+               c={"white"}
+               bg={tema.get().utama}
+               size="lg"
+               radius={30}
+               fullWidth
+               onClick={() => { onClose(true) }}
+            >
+               Tutup
+            </Button>
+         </Box>
+      </Box>
+   );
+}