wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update documents

Browse Source
This commit is contained in:
lukman
2024-07-19 13:59:52 +08:00
parent 466ddeb7e6
commit cf2e56d174
7 changed files with 139 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(application)/(detail-division)/document/page.tsx
View File

@@ -1,7 +1,11 @@
import { ViewDocumentDivision } from '@/module/division_new';
import ListDocumentsDivision from '@/module/division_new/_division_fitur/document/components/list_documents_division';
import React from 'react';
function Page() {
function Page({ searchParams }: { searchParams: any }) {
if (searchParams.page == "list-document")
return <ListDocumentsDivision />;
return (
<ViewDocumentDivision/>
);

3
src/app/(application)/(detail-division)/task/create/page.tsx
View File

@@ -12,4 +12,5 @@ function Page({ searchParams }: { searchParams: any }) {
return <ViewCreateTaskDivision searchParams={searchParams} />
}
export default Page
export default Page
// onClick={() => router.push('/document?page=list-document')}

85
src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
View File

@@ -1,89 +1,80 @@
import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
import React from 'react';
"use client";
import { LayoutNavbarNew } from "@/module/_global";
import {
ActionIcon,
Box,
Checkbox,
Divider,
Flex,
Grid,
Group,
Text,
} from "@mantine/core";
import React from "react";
import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
const dataDocuments = [
{
id: 1,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 2,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
id: 3,
name: "Berkas Kerja",
date: "18/06/2024 14.00 PM",
icon: <FcDocument size={60} />,
},
{
id: 3,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
name: "Berkas Kerja",
date: "18/06/2024 14.00 PM",
icon: <FcDocument size={60} />,
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
name: "Image Kegiatan",
date: "18/06/2024 14.00 PM",
icon: <FcImageFile size={60} />,
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
name: "Image Pelaksanaan",
date: "18/06/2024 14.00 PM",
icon: <FcImageFile size={60} />,
},
{
id: 3,
name: 'Image Kegiatan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
{
id: 3,
name: 'Image Pelaksanaan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
]
];
export default function ListDocumentsDivision() {
return (
<Box>
<LayoutNavbarNew
back=""
title="Divisi kerohanian"
menu
/>
<Box p={20}>
{dataDocuments.map((v, i) => {
return (
<Box key={i}>
<Box mt={10} mb={10}>
<Grid align='center'>
<Grid align="center">
<Grid.Col span={10}>
<Group gap={20}>
<Box>
{v.icon}
</Box>
<Flex direction={'column'}>
<Box>{v.icon}</Box>
<Flex direction={"column"}>
<Text>{v.name}</Text>
<Text fz={10}>{v.date}</Text>
</Flex>
</Group>
</Grid.Col>
<Grid.Col span={2}>
<Group justify='flex-end'>
<Checkbox
color="teal"
radius="lg"
size="md"
/>
<Group justify="flex-end">
<Checkbox color="teal" radius="lg" size="md" />
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box>
)
);
})}
</Box>
</Box>
);
}

6
src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
View File

@@ -14,6 +14,7 @@ import { MdOutlineMoreHoriz } from 'react-icons/md';
import LayoutModal from '@/module/_global/layout/layout_modal';
import toast from 'react-hot-toast';
import DrawerMore from './drawer_more';
import { useRouter } from 'next/navigation';
const dataDocuments = [
{
@@ -68,6 +69,7 @@ const dataDocuments = [
export default function NavbarDocumentDivision() {
const [isChecked, setIsChecked] = useState(false);
const router = useRouter()
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
@@ -147,8 +149,8 @@ export default function NavbarDocumentDivision() {
return (
<Box key={i}>
<Box mt={10} mb={10}>
<Grid align='center'>
<Grid.Col span={10}>
<Grid align='center' >
<Grid.Col span={10} onClick={() => router.push('/document?page=list-document')}>
<Group gap={20}>
<Box>
{v.icon}

156
src/module/division_new/components/detail_division/list_discussion.tsx
View File

@@ -1,76 +1,88 @@
import { WARNA } from "@/module/_global"
import { Box, Group, Text } from "@mantine/core"
import { CiUser, CiClock2 } from "react-icons/ci"
import { GoDiscussionClosed } from "react-icons/go"
"use client"
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { CiUser, CiClock2 } from "react-icons/ci";
import { GoDiscussionClosed } from "react-icons/go";
const dataDiskusi = [
{
id: 1,
judul: 'Mengatasi Limbah Makanan ',
user: 'Fibra Marcell',
date: '21 Juni 2024'
},
{
id: 2,
judul: 'Pentingnya Menjaga Kelestarian Hutan ',
user: 'Bayu Tegar',
date: '15 Juni 2024'
},
{
id: 3,
judul: 'Mengatasi Limbah Industri ',
user: 'Nian Putri',
date: '11 Mei 2024'
},
{
id: 4,
judul: 'Manfaat Sampah Plastik',
user: 'Budi Prasetyo',
date: '10 Mei 2024'
},
]
{
id: 1,
judul: "Mengatasi Limbah Makanan ",
user: "Fibra Marcell",
date: "21 Juni 2024",
},
{
id: 2,
judul: "Pentingnya Menjaga Kelestarian Hutan ",
user: "Bayu Tegar",
date: "15 Juni 2024",
},
{
id: 3,
judul: "Mengatasi Limbah Industri ",
user: "Nian Putri",
date: "11 Mei 2024",
},
{
id: 4,
judul: "Manfaat Sampah Plastik",
user: "Budi Prasetyo",
date: "10 Mei 2024",
},
];
export default function ListDiscussionOnDetailDivision() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi Terbaru</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{
dataDiskusi.map((v, i) => {
return (
<Box key={i} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}} mb={10}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={'bold'} truncate="end">{v.judul}</Text>
</Box>
</Group>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<CiUser size={18} />
<Text fz={13}>{v.user}</Text>
</Group >
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group>
</Group>
</Box>
)
})
}
</Box>
</Box>
</>
)
}
const router = useRouter();
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
Diskusi Terbaru
</Text>
<Box
bg={"white"}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
}}
>
{dataDiskusi.map((v, i) => {
return (
<Box
key={i}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
mb={10}
onClick={() => router.push(`/discussion/${v.id}`)}
>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
{v.judul}
</Text>
</Box>
</Group>
<Group justify="space-between" mt={20} c={"#8C8C8C"}>
<Group gap={5} align="center">
<CiUser size={18} />
<Text fz={13}>{v.user}</Text>
</Group>
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group>
</Group>
</Box>
);
})}
</Box>
</Box>
</>
);
}

4
src/module/division_new/components/detail_division/list_document.tsx
View File

@@ -3,6 +3,7 @@ import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton } from "@mantine/core";
import * as ICON from '../../../division/lib/file_icon'
import { useRouter } from "next/navigation";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
@@ -41,13 +42,14 @@ const listDocument = [
]
export default function ListDocumentOnDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{
listDocument.map((v) => <Carousel.Slide key={v.id}>
<UnstyledButton>
<UnstyledButton onClick={() => router.push(`/document`)}>
<Stack gap={0}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>

4
src/module/division_new/components/detail_division/list_task.tsx
View File

@@ -2,6 +2,7 @@
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { CiClock2 } from "react-icons/ci";
import { MdAccountCircle } from "react-icons/md";
@@ -33,13 +34,14 @@ const dataTask = [
]
export default function ListTaskOnDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{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"}` }}>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
<Group justify="space-between" mt={20} c={'#aeaeae'}>
<Group gap={5} align="center">