From 23ff7ce5d1946065866de4375b00014cb43720fd Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Wed, 10 Jul 2024 17:21:37 +0800
Subject: [PATCH] upd: beranda

Deskripsi:
- pengaplikasian caraousel pada list proyek dan divisi

No Issues
---
 src/module/home/components/list_divisi.tsx  | 57 ++++++++-----
 src/module/home/components/list_project.tsx | 89 +++++++++++----------
 2 files changed, 82 insertions(+), 64 deletions(-)

diff --git a/src/module/home/components/list_divisi.tsx b/src/module/home/components/list_divisi.tsx
index c455c80..66e1bb4 100644
--- a/src/module/home/components/list_divisi.tsx
+++ b/src/module/home/components/list_divisi.tsx
@@ -1,25 +1,21 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Box, Card, Flex, Title, Text } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
-import { MdAccountCircle } from "react-icons/md";
 
 const dataProject = [
-   // {
-   //    id: 4,
-   //    title: 'Project 4',
-   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-   //    status: 'PROSES',
-   //    color: '#C5771A'
-   // },
-   // {
-   //    id: 5,
-   //    title: 'Project5',
-   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-   //    status: 'PROSES',
-   //    color: '#C5771A'
-   // },
+   {
+      id: 4,
+      title: 'Divisi Keuangan',
+      total: 24
+   },
+   {
+      id: 5,
+      title: 'Divisi Kesekretariatan',
+      total: 18
+   },
    {
       id: 6,
       title: 'Divisi Kemasyarakatan',
@@ -33,7 +29,28 @@ export default function ListDivisi() {
       <>
          <Box pt={10}>
             <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Terbaru</Text>
-            {dataProject.map((v, i) => {
+            <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+               {dataProject.map((v) =>
+                  <Carousel.Slide key={v.id}>
+                     <Box w={{ base: 300, md: 400 }}>
+                        <Card shadow="sm" padding="md" component="a" radius={10}>
+                           <Card.Section>
+                              <Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
+                                 <Flex justify={'center'} align={'center'} h={"100%"}>
+                                    <Title order={3} c={WARNA.biruTua}>{_.toUpper(v.title)}</Title>
+                                 </Flex>
+                              </Box>
+                           </Card.Section>
+                           <Box pt={10} mih={150}>
+                              <Text fw={'bold'} fz={18}>PROYEK</Text>
+                              <Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
+                           </Box>
+                        </Card>
+                     </Box>
+                  </Carousel.Slide>
+               )}
+            </Carousel>
+            {/* {dataProject.map((v, i) => {
                return (
                   <Box key={i} mb={20} >
                      <Card shadow="sm" padding="md" component="a" radius={10}>
@@ -44,14 +61,14 @@ export default function ListDivisi() {
                               </Flex>
                            </Box>
                         </Card.Section>
-                        <Box pt={10}>
-                           <Text fw={'bold'} fz={20}>PROYEK</Text>
+                        <Box pt={10} mih={150}>
+                           <Text fw={'bold'} fz={18}>PROYEK</Text>
                            <Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
                         </Box>
                      </Card>
                   </Box>
                );
-            })}
+            })} */}
          </Box>
       </>
    )
diff --git a/src/module/home/components/list_project.tsx b/src/module/home/components/list_project.tsx
index 5ce4640..be03d22 100644
--- a/src/module/home/components/list_project.tsx
+++ b/src/module/home/components/list_project.tsx
@@ -1,30 +1,33 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Box, Card, Flex, Title, Text, Progress, Stack } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { MdAccountCircle } from "react-icons/md";
 
 const dataProject = [
-   // {
-   //    id: 4,
-   //    title: 'Project 4',
-   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-   //    status: 'PROSES',
-   //    color: '#C5771A'
-   // },
-   // {
-   //    id: 5,
-   //    title: 'Project5',
-   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-   //    status: 'PROSES',
-   //    color: '#C5771A'
-   // },
+   {
+      id: 4,
+      title: 'Project 4',
+      description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+      status: 'PROSES',
+      progress: 60,
+      date: '05 Mei 2024'
+   },
+   {
+      id: 5,
+      title: 'Project5',
+      description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+      status: 'PROSES',
+      progress: 80,
+      date: '08 Juni 2024'
+   },
    {
       id: 6,
       title: 'Project 6',
       description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
       status: 'PROSES',
-      color: '#C5771A'
+      progress: 47,
+      date: '10 Mei 2024'
    },
 ]
 export default function ListProjects() {
@@ -34,33 +37,31 @@ export default function ListProjects() {
       <>
          <Box pt={10}>
             <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Proyek Terbaru</Text>
-            {dataProject.map((v, i) => {
-               return (
-                  <Box key={i} mb={20}>
-                     <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
-                        <Card.Section>
-                           <Box h={120} bg={WARNA.biruTua}>
-                              <Flex justify={'center'} align={'center'} h={"100%"}>
-                                 <Title order={3} c={"white"}>{v.title}</Title>
-                              </Flex>
-                           </Box>
-                        </Card.Section>
-                        <Box pt={10}>
-                           <Text>{v.description}</Text>
-                           <Group align='center' pt={10} justify='space-between'>
-                              <Badge color={v.color}>{v.status}</Badge>
-                              <Avatar.Group>
-                                 <Avatar>
-                                    <MdAccountCircle size={32} color={WARNA.biruTua} />
-                                 </Avatar>
-                                 <Avatar>+5</Avatar>
-                              </Avatar.Group>
-                           </Group>
-                        </Box>
-                     </Card>
-                  </Box>
-               );
-            })}
+            <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+               {dataProject.map((v) =>
+                  <Carousel.Slide key={v.id}>
+                     <Box w={{ base: 300, md: 400 }}>
+                        <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
+                           <Card.Section>
+                              <Box h={120} bg={WARNA.biruTua}>
+                                 <Flex justify={'center'} align={'center'} h={"100%"}>
+                                    <Title order={3} c={"white"}>{v.title}</Title>
+                                 </Flex>
+                              </Box>
+                           </Card.Section>
+                           <Stack h={150} align="stretch" justify="center">
+                              <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
+                                 <Progress.Section value={v.progress} color="yellow" striped >
+                                    <Progress.Label>{v.progress}%</Progress.Label>
+                                 </Progress.Section>
+                              </Progress.Root>
+                              <Text c={WARNA.biruTua}>Progres {v.date}</Text>
+                           </Stack>
+                        </Card>
+                     </Box>
+                  </Carousel.Slide>
+               )}
+            </Carousel>
          </Box>
       </>
    )