Tambahan Feature Banner

src/app/(application)/banner/edit/[id]/page.tsx

@@ -1,3 +1,10 @@
-export default function Page({ params }: { params: { id: string } }) {
+import { EditBanner } from "@/module/banner";
-   return <div>Edit Banner</div>;
+import { Box } from "@mantine/core";
+
+export default function Page() {
+   return (
+      <Box>
+         <EditBanner />
+      </Box>
+   );
 }

src/app/(application)/banner/viewfile/page.tsx

@@ -0,0 +1,10 @@
+import { ViewfileBanner } from '@/module/banner';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewfileBanner/>
+  );
+}
+
+export default Page;

src/module/banner/index.ts

@@ -1,4 +1,6 @@
 import NavbarBanner from "./ui/navbar_banner";
 import ListBanner from "./ui/list_banner";
 import CreateBanner from "./ui/create_banner";
-export {NavbarBanner, ListBanner, CreateBanner}
+import EditBanner from "./ui/edit_banner";
+import ViewfileBanner from "./ui/viewfile_banner";
+export {NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner}

src/module/banner/lib/api_banner.ts

@@ -0,0 +1,9 @@
+export const funDeleteBanner = async (path: string) => {
+    const response = await fetch(`/api/banner/${path}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return await response.json().catch(() => null);
+};

src/module/banner/ui/edit_banner.tsx

@@ -0,0 +1,73 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, FileInput, Group, Paper, rem, Text, TextInput } from '@mantine/core';
+import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import React from 'react';
+
+function EditBanner(props: Partial<DropzoneProps>) {
+  return (
+    <Box>
+      <LayoutNavbarNew back='/banner' title='Edit Banner' menu={<></>} />
+      <Box p={20}>
+        <Box>
+          <Paper withBorder radius={20}>
+            <Dropzone
+              onDrop={(files) => console.log('accepted files', files)}
+              onReject={(files) => console.log('rejected files', files)}
+              maxSize={5 * 1024 ** 2}
+              accept={IMAGE_MIME_TYPE}
+              {...props}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Idle>
+
+                <Box>
+                  <Text size="xl" inline>
+                    Upload File 
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                 File Tidak Boleh Melebihi 500mb
+                  </Text>
+                </Box>
+              </Group>
+            </Dropzone>
+          </Paper>
+          <Box>
+            <TextInput
+              mt={10}
+              label={ <Text>Judul Banner</Text>}
+              placeholder='Judul Banner'
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+            />
+          </Box>
+          <Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default EditBanner;

src/module/banner/ui/list_banner.tsx

@@ -1,35 +1,69 @@
 'use client'
-import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { Anchor, Box, Flex, Group, Image, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import _ from 'lodash';
+import { useParams, useRouter } from 'next/navigation';
-import { useRouter } from 'next/navigation';
+import { useState } from 'react';
-import React, { useState } from 'react';
 import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
-import { IoAddCircle } from 'react-icons/io5';
 
-function ListBanner() {
+function ListBanner({ onDeleted }: { onDeleted: (val: boolean) => void }) {
   const tema = useHookstate(TEMA)
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
   const [isData, setData] = useState([]);
   const [valChoose, setValChoose] = useState("");
   const router = useRouter();
-
+  const param = useParams<{ id: string }>()
-
+  const [isOpenModalView, setOpenModalView] = useState(false)
+  const [isOpen, setOpen] = useState(false)
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [idDataStorage, setIdDataStorage] = useState('')
+  const [isExtension, setExtension] = useState('')
 
+
+  // async function onTrue(val: boolean) {
+  //   if (val) {
+  //     const response = await funDeleteBanner(param.id)
+  //     if (response.success) {
+  //       toast.success(response.message)
+  //       onDeleted(true)
+  //     } else {
+  //       toast.error(response.message)
+  //       onDeleted(false)
+  //     }
+  //   } else {
+  //     onDeleted(false)
+  //   }
+
+  //   setOpen(false)
+  // }
   return (
     <Box pt={20}>
-      <Box>
+      <Box p={20}>
         <Anchor underline='never'>
           <Stack align='center' justify='center'>
             {[...Array(5)].map((_, index) => (
-              <div key={index} onClick={() => { setOpenDrawer(true) }}>
+              <Paper radius={'lg'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
-                <Text c={"dark"} ta={"center"}>Banner {index + 1}</Text>
+              }
-                <Image radius={"lg"} src={`/assets/img/banner/Banner-${index + 1}.png`} alt='' w={380} h={194.5} />
+                style={{
-              </div>
+                  width: '100%',
+                  maxWidth: 500,
+                  height: 80,
+                  backgroundColor: 'transparent',
+                  border: `1px solid ${tema.get().bgTotalKegiatan}`
+                
+                }}>
+                <Group mt={"15"}>
+                <ActionIcon variant='transparent' w={"100"}>
+                <Image radius={"xs"} src={"/assets/img/banner/Banner-1.png"} alt='' w={76} h={38.9} />
+                  </ActionIcon>
+                  <Flex direction={"column"}>
+                  <Text c={"dark"} >Banner {index + 1}</Text>
+                  <Text fz={"h6"} fw={"inherit"} c={"dark"}>Banner</Text>
+                  </Flex>
+                </Group>
+              </Paper>
             ))}
 
           </Stack>
@@ -42,34 +76,41 @@ function ListBanner() {
         title={<Text lineClamp={1}>{"Menu"}</Text>}
       >
         <SimpleGrid
+          m={20}
           cols={{ base: 3, sm: 3, lg: 3 }}
         >
           <Box>
-            <Anchor underline='never'>
+            <Anchor underline='never' onClick={() => router.push("/banner/edit/[id]")}>
-            <Flex direction={"column"}>
+              <Flex direction="column" align="center" justify="center">
-              <FaPencil size={30} color={WARNA.biruTua} />
+                <FaPencil size={30} color={WARNA.biruTua} />
-              <Text c={"dark"} mt={10}>Edit</Text>
+                <Text c={"dark"} mt={10} ta="center">Edit</Text>
-            </Flex>
+              </Flex>
             </Anchor>
           </Box>
           <Box>
-            <Anchor underline='never'>
+            <Anchor underline='never' onClick={() => {setOpenModalView(true)}}>
-            <Flex direction={"column"}>
+              <Flex direction="column" align="center" justify="center">
-              <FaFile size={30} color={WARNA.biruTua} />
+                <FaFile size={30} color={WARNA.biruTua} />
-              <Text c={"dark"} mt={10}>View File</Text>
+                <Text c={"dark"} mt={10} ta="center">Lihat File</Text>
-            </Flex>
+              </Flex>
             </Anchor>
           </Box>
-          <Box >
+          <Box>
-            <Anchor underline='never'>
+            <Anchor underline='never' onClick={() => {setOpen(true)}}>
-            <Flex direction={"column"}>
+              <Flex direction="column" align="center" justify="center">
-              <FaTrash size={30} color={WARNA.biruTua} />
+                <FaTrash size={30} color={WARNA.biruTua} />
-              <Text ta="center" c={"dark"} mt={10}>Hapus</Text>
+                <Text c={"dark"} mt={10} ta="center">Hapus</Text>
-            </Flex>
+              </Flex>
             </Anchor>
           </Box>
         </SimpleGrid>
       </LayoutDrawer>
+
+      <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+        description='Apakah Anda yakin ingin menghapus banner?'
+        onYes={(val) => { setOpen(false) }} />
+      
+      <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
     </Box>
   );
 }

src/module/banner/ui/viewfile_banner.tsx

@@ -0,0 +1,13 @@
+import { LayoutNavbarNew } from '@/module/_global';
+import { Box } from '@mantine/core';
+import React from 'react';
+
+function ViewfileBanner() {
+  return (
+    <Box>
+      <LayoutNavbarNew back='/banner' title='View File Banner' menu={<></>}/>
+    </Box>
+  );
+}
+
+export default ViewfileBanner;