feat : update revisi

Deskripsi:
- update tambah anggota
- update list anggota
- update tambah kalender
- update kalender name indonesia

No Issue

src/module/calender/ui/create_user_calender.tsx

@@ -5,7 +5,7 @@ import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { Avatar, Box, Button, Divider, Flex, Group, Text } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
 
@@ -16,21 +16,27 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
   const [isData, setData] = useState<IDataMemberDivision[]>([])
   const member = useHookstate(globalCalender)
   const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
 
   async function getData() {
     try {
+      setLoading(true)
       const response = await funGetDivisionById(param.id)
       if (response.success) {
         setData(response.data.member)
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
+        setLoading(false)
       } else {
         toast.error(response.message)
       }
+      
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -88,8 +94,17 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
           Pilih Semua Anggota
         </Text>
         {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-      </Group>
-      <Box mt={15}>
+        </Group>
+        {loading ? 
+          Array(4)
+          .fill(null)
+          .map((_, i) => (
+             <Box key={i}>
+                <SkeletonSingle />
+             </Box>
+          ))
+          :  
+      <Box mt={20}>
         {isData.map((v, i) => {
           const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
           return (
@@ -121,6 +136,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
           );
         })}
       </Box>
+        }
       <Box mt={"xl"}>
         <Button
           c={"white"}

src/module/calender/ui/date_event_division.tsx

@@ -9,6 +9,8 @@ import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
 import _ from 'lodash';
 import toast from 'react-hot-toast';
+import 'dayjs/locale/id'
+import { PiCalendarStarThin } from 'react-icons/pi';
 
 
 export default function DateEventDivision() {
@@ -80,7 +82,7 @@ export default function DateEventDivision() {
     const muncul = isListTgl.includes(coba)
 
     return (
-      <Indicator size={6} color="red" offset={-5} disabled={!muncul}>
+      <Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline processing size={10} >
         <div>{day}</div>
       </Indicator>
     );
@@ -88,6 +90,7 @@ export default function DateEventDivision() {
 
 
 
+
   return (
     <Box>
       <Group
@@ -101,6 +104,7 @@ export default function DateEventDivision() {
           renderDay={dayRenderer}
           onChange={(val: any) => { change(val) }}
           onDateChange={(val) => { changeMonth(val) }}
+          locale='id'
         />
       </Group>
       <Box>

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -62,16 +62,6 @@ export default function NavbarCreateDivisionCalender() {
         if (response.success) {
           setModal(false)
           router.push(`/division/${param.id}/calender`)
-          setData({
-            ...isData,
-            title: "",
-            dateStart: "",
-            timeStart: "",
-            timeEnd: "",
-            linkMeet: "",
-            repeatEventTyper: "1",
-            desc: "",
-          })
           toast.success(response.message)
           memberUser.set([])
         } else {
@@ -136,7 +126,6 @@ export default function NavbarCreateDivisionCalender() {
             }}
             placeholder="Input Tanggal"
             label="Tanggal"
-            minDate={new Date()}
             onBlur={() => setTouched({ ...touched, dateStart: true })}
             error={
               touched.dateStart && (
@@ -250,7 +239,7 @@ export default function NavbarCreateDivisionCalender() {
                 borderRadius: 10,
               }}
             >
-              <Text>Tambah Anggota *</Text>
+              <Text>Tambah Anggota</Text>
               <IoIosArrowDropright size={25} />
             </Group>
           </Box>

src/module/calender/ui/update_list_users.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
 import { Avatar, Box, Button, Center, Divider, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
@@ -51,21 +51,26 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
   const [isData, setData] = useState<IDataMemberDivision[]>([])
   const member = useHookstate(globalCalender)
   const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
 
   async function getData() {
     try {
+      setLoading(true)
       const response = await funGetDivisionById(param.id)
       if (response.success) {
         setData(response.data.member)
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
+        setLoading(false)
       } else {
         toast.error(response.message)
       }
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -112,64 +117,74 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
 
   return (
     <Box>
-    <LayoutNavbarNew
-      // back=""
-      title="Pilih Anggota"
-      menu
-    />
-    <Box p={20}>
-      <Group justify="space-between" mt={20} onClick={handleSelectAll}>
-        <Text c={WARNA.biruTua} fw={"bold"}>
-          Pilih Semua Anggota
-        </Text>
-        {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-      </Group>
-      <Box mt={15}>
-        {isData.map((v, i) => {
-          const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
-          return (
-            <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
-              <Flex justify={"space-between"} align={"center"}>
-                <Group>
-                  <Avatar src={"v.image"} alt="it's me" size="lg" />
-                  <Text style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                  }}>
-                    {v.name}
-                  </Text>
-                </Group>
-                <Text
-                  style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: 20,
-                  }}
-                >
-                  {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                </Text>
-              </Flex>
-              <Divider my={"md"} />
-            </Box>
-          );
-        })}
-      </Box>
-      <Box mt={"xl"}>
-        <Button
-          c={"white"}
-          bg={WARNA.biruTua}
-          size="lg"
-          radius={30}
-          fullWidth
-          onClick={() => {onSubmit()}}
-        >
-          Simpan
-        </Button>
+      <LayoutNavbarNew
+        // back=""
+        title="Pilih Anggota"
+        menu
+      />
+      <Box p={20}>
+        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Text c={WARNA.biruTua} fw={"bold"}>
+            Pilih Semua Anggota
+          </Text>
+          {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+        </Group>
+        {loading ?
+          Array(4)
+          .fill(null)
+          .map((_, i) => (
+             <Box key={i}>
+                <SkeletonSingle />
+             </Box>
+          ))
+          :
+          <Box mt={20}>
+            {isData.map((v, i) => {
+              const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+              return (
+                <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+                  <Flex justify={"space-between"} align={"center"}>
+                    <Group>
+                      <Avatar src={"v.image"} alt="it's me" size="lg" />
+                      <Text style={{
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}>
+                        {v.name}
+                      </Text>
+                    </Group>
+                    <Text
+                      style={{
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        paddingLeft: 20,
+                      }}
+                    >
+                      {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                    </Text>
+                  </Flex>
+                  <Divider my={"md"} />
+                </Box>
+              );
+            })}
+          </Box>
+        }
+        <Box mt={"xl"}>
+          <Button
+            c={"white"}
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => { onSubmit() }}
+          >
+            Simpan
+          </Button>
+        </Box>
       </Box>
     </Box>
-  </Box>
   );
 }
 

src/module/user/member/ui/create_member.tsx

@@ -343,7 +343,7 @@ export default function CreateMember() {
           size="md"
           type="number"
           radius={30}
-          placeholder="87701795778"
+          placeholder="xxx xxxx xxxx"
           leftSection={<Text>+62</Text>}
           withAsterisk
           label="Nomor Telepon"

src/module/user/member/ui/edit_member.tsx

@@ -307,7 +307,7 @@ export default function EditMember({ id }: { id: string }) {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               placeholder="6287701795778"
+               placeholder="62xxx xxxx xxxx"
                onChange={(e) => {
                   setData({ ...data, phone:  e.target.value })
                   setTouched({ ...touched, phone: false })

src/module/user/member/ui/navbar_detail_member.tsx

@@ -98,7 +98,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                         <FaSquarePhone size={28} />
                         <Text fz={18}>No Telepon</Text>
                      </Group>
-                     <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text>
+                     <Text fz={18} fw={'bold'} ta={"right"}>+{dataOne?.phone}</Text>
                   </Group>
                   <Group justify="space-between" grow py={5}>
                      <Group>

src/module/user/member/ui/tab_list_member.tsx

@@ -1,6 +1,6 @@
 
 import { SkeletonSingle, WARNA } from "@/module/_global"
-import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core"
+import { Box, Group, ActionIcon, Text, TextInput, Divider } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
@@ -65,28 +65,30 @@ export default function TabListMember() {
                :
                dataMember.length == 0 ?
                   <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-                      <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                     <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
                   </Box>
                   :
                   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>
-                                 <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
-                              </Box>
-                           </Group>
+                        <Box key={i}>
+                           <Box  onClick={() => {
+                              router.push(`/member/${v.id}`)
+                           }}>
+                              <Group align='center' style={{
+                                 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>
+                                    <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                                 </Box>
+                              </Group>
+                           </Box>
+                           <Divider my={10}/>
                         </Box>
                      )
                   })