style : update division

Deskripsi:
- form edit discussion
- list discussion
- navbar detail

No Issue

src/module/division_new/_division_fitur/discussion/component/form_edit_discussion.tsx

@@ -28,6 +28,12 @@ export default function FormEditDiscussion() {
                   <Textarea
                      placeholder="Tuliskan apa yang ingin anda diskusikan"
                      w={"100%"}
+                     styles={{
+                        input: {
+                           border: 'none',
+                           backgroundColor: 'transparent',
+                        }
+                     }}
                   />
                </Box>
             </Group>

src/module/division_new/_division_fitur/discussion/component/list_discussion.tsx

@@ -1,8 +1,9 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
+import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { GrChatOption } from "react-icons/gr";
+import { HiMagnifyingGlass } from "react-icons/hi2";
 
 const dataAnggota = [
    {
@@ -51,17 +52,30 @@ export default function ListDiscussion() {
    const router = useRouter()
    return (
       <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
          {dataAnggota.map((v, i) => {
             return (
-               <>
+               <Box key={i} pl={10} pr={10}
+                  onClick={() => {
+                     router.push(`/discussion/${v.id}`)
+                  }}
+               >
                   <Flex
                      justify={"space-between"}
                      align={"center"}
                      mt={20}
-                     key={i}
-                     onClick={() => {
-                        router.push(`/discussion/${v.id}`)
-                     }}
                   >
                      <Group>
                         <Avatar src={v.image} alt="it's me" size="lg" />
@@ -74,7 +88,7 @@ export default function ListDiscussion() {
                      </Group>
                      <Text c={"grey"}>1 Jam</Text>
                   </Flex>
-                  <Box>{v.desc}</Box>
+                  <Box mt={10}>{v.desc}</Box>
                   <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                      <Group gap={5} align="center">
                         <GrChatOption size={18} />
@@ -84,7 +98,10 @@ export default function ListDiscussion() {
                         <Text fz={13}>{v.jumlah} Komentar</Text>
                      </Group>
                   </Group>
-               </>
+                  <Box mt={20}>
+                     <Divider size={"xs"} />
+                  </Box>
+               </Box>
             );
          })}
       </Box>

src/module/division_new/_division_fitur/discussion/component/navbar_detail_discussion.tsx

@@ -9,7 +9,7 @@ export default function NavbarDetailDiscussion() {
    const [openDrawer, setOpenDrawer] = useState(false)
    return (
       <>
-         <LayoutNavbarNew back="" title="Diskusi Divisi Keuangan"
+         <LayoutNavbarNew back="" title="Diskusi "
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />

src/module/division_new/_division_fitur/discussion/view/view_detail_discussion.tsx

@@ -1,7 +1,9 @@
-import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
+"use client"
+import { Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
 import NavbarDetailDiscussion from "../component/navbar_detail_discussion";
 import { WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
+import { LuSendHorizonal } from "react-icons/lu";
 
 const dataAnggota = [
    {
@@ -38,7 +40,7 @@ const dataAnggota = [
    },
    {
       id: 5,
-      name: "Imam Baroni",
+      name: "Imam Baronis",
       image: "https://i.pravatar.cc/1000?img=22",
       status: false,
       jumlah: 29,
@@ -68,7 +70,7 @@ export default function ViewDetailDiscussion() {
                </Group>
                <Text c={"grey"}>1 Jam</Text>
             </Flex>
-            <Box>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
+            <Box mt={10}>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
             <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                <Group gap={5} align="center">
                   <GrChatOption size={18} />
@@ -79,27 +81,56 @@ export default function ViewDetailDiscussion() {
             <Box p={10}>
                {dataAnggota.map((v, i) => {
                   return (
-                     <Box key={i} style={{ borderBottom: "1px solid #8C8C8C" }} p={5}>
+                     <Box key={i} p={10}>
                         <Flex
                            justify={"space-between"}
                            align={"center"}
                         >
                            <Group>
-                              <Avatar src={v.image} alt="it's me" size="lg" />
+                              <Avatar src={v.image} alt="it's me" size="md" />
                               <Box>
-                                 <Text c={WARNA.biruTua} fw={"bold"}>
+                                 <Text c={WARNA.biruTua} fw={"bold"} fz={15}>
                                     {v.name}
                                  </Text>
                               </Box>
                            </Group>
                            <Text c={"grey"}>1 Jam</Text>
                         </Flex>
-                        <Box>{v.desc}</Box>
+                        <Box mt={10}>{v.desc}</Box>
+                        <Box mt={20}>
+                           <Divider size={"xs"} />
+                        </Box>
                      </Box>
                   );
                })}
             </Box>
-
+            <Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
+               zIndex: 999
+            }}>
+               <Grid bg={"white"} style={{
+                  border: '1px solid gray',
+                  borderRadius: 40
+               }} justify="center" align="center">
+                  <Grid.Col span={10}>
+                     <TextInput
+                        styles={{
+                           input: {
+                              color: WARNA.biruTua,
+                              border: "none",
+                              backgroundColor: "transparent"
+                           },
+                        }}
+                        size="md"
+                        placeholder="Kirim Komentar"
+                     />
+                  </Grid.Col>
+                  <Grid.Col span={2}>
+                     <Center>
+                        <LuSendHorizonal size={30} />
+                     </Center>
+                  </Grid.Col>
+               </Grid>
+            </Box>
          </Box>
       </>
    )

src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx

@@ -17,16 +17,16 @@ export default function TabsDivisionTask() {
                padding: 5,
                borderRadius: 100
             }}>
-               <Tabs.Tab value="segera" leftSection={<TbClockPause style={iconStyle} />}>
+               <Tabs.Tab value="segera" w={"23%"} leftSection={<TbClockPause style={iconStyle} />}>
                   Segera
                </Tabs.Tab>
-               <Tabs.Tab value="dikerjakan" leftSection={<RiProgress3Line style={iconStyle} />}>
+               <Tabs.Tab value="dikerjakan"  w={"28%"} leftSection={<RiProgress3Line style={iconStyle} />}>
                   Dikerjakan
                </Tabs.Tab>
-               <Tabs.Tab value="selesai" leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
+               <Tabs.Tab value="selesai"  w={"23%"} leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
                   Selesai
                </Tabs.Tab>
-               <Tabs.Tab value="batal" leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+               <Tabs.Tab value="batal"  w={"20%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
                   Batal
                </Tabs.Tab>
             </Tabs.List>

src/module/division_new/components/detail_division/list_discussion.tsx

@@ -52,7 +52,7 @@ export default function ListDiscussionOnDetailDivision() {
                            <Group>
                               <GoDiscussionClosed size={25} />
                               <Box w={{ base: 230, md: 400 }}>
-                                 <Text fw={'bold'}>{v.judul}</Text>
+                                 <Text fw={'bold'} truncate="end">{v.judul}</Text>
                               </Box>
                            </Group>
                            <Group justify="space-between" mt={20} c={'#8C8C8C'}>

src/module/division_new/components/detail_division/list_task.tsx

@@ -40,7 +40,7 @@ export default function ListTaskOnDetailDivision() {
             {dataTask.map((v, i) =>
                <Carousel.Slide key={v.id}>
                   <Box p={20} w={{ base: 300, md: 400 }} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
-                     <Text fw={'bold'} c={WARNA.bgWhite}>{v.title}</Text>
+                     <Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
                      <Group justify="space-between" mt={20} c={'#aeaeae'}>
                         <Group gap={5} align="center">
                            <CiClock2 size={18} />