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

style : update tampilan

Browse Source
This commit is contained in:
lukman
2024-09-02 17:32:59 +08:00
parent 5b0c3f54e9
commit a3539f50ef
13 changed files with 121 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/_global/layout/layout_navbar_new.tsx
View File

@@ -22,7 +22,7 @@ export const LayoutNavbarNew = ({ back, title, menu }: { back?: string, title: s
} }
</Grid.Col> </Grid.Col>
<Grid.Col span={8}> <Grid.Col span={8}>
<Title c={WARNA.bgWhite} ta={'center'} order={5}>{_.startCase(title)}</Title> <Title c={WARNA.bgWhite} ta={'center'} order={5} lineClamp={1}>{_.startCase(title)}</Title>
</Grid.Col> </Grid.Col>
<Grid.Col span="auto"> <Grid.Col span="auto">
<Group justify='flex-end'> <Group justify='flex-end'>

5
src/module/project/ui/create_project.tsx
View File

@@ -225,6 +225,8 @@ export default function CreateProject() {
</Group> </Group>
</Box> </Box>
</Stack> </Stack>
<Box pb={100}>
{ {
dataTask.length > 0 && dataTask.length > 0 &&
<Box pt={20}> <Box pt={20}>
@@ -271,7 +273,7 @@ export default function CreateProject() {
{ {
member.length > 0 && member.length > 0 &&
<Box pt={30} mb={100}> <Box pt={30}>
<Group justify="space-between"> <Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text> <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text> <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -313,6 +315,7 @@ export default function CreateProject() {
</Box> </Box>
</Box> </Box>
} }
</Box>
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{

24
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, WARNA } from '@/module/_global'; import { LayoutDrawer, WARNA } from '@/module/_global';
import { Box, Flex, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core'; import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project'; import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
@@ -102,13 +102,21 @@ export default function ListFileDetailProject() {
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
{item.extension == "pdf" && <BsFiletypePdf size={25} />} <Grid.Col span={"auto"}>
{item.extension == "csv" && <BsFiletypeCsv size={25} />} <Center >
{item.extension == "png" && <BsFiletypePng size={25} />} {item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={25} />} {item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={25} />} {item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.name + '.' + item.extension}</Text> <Text>{item.name + '.' + item.extension}</Text>
</Grid.Col>
</Grid>
<Group>
</Group> </Group>
</Box> </Box>
) )
@@ -118,7 +126,7 @@ export default function ListFileDetailProject() {
<LayoutDrawer opened={openDrawer} title={nameData} onClose={() => setOpenDrawer(false)}> <LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid

16
src/module/project/ui/list_tugas_detail_project.tsx
View File

@@ -105,7 +105,7 @@ export default function ListTugasDetailProject() {
isData.length === 0 ? <Text>Tidak ada tugas</Text> : isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index}> <Box key={index} mb={20}>
<Grid <Grid
onClick={() => { onClick={() => {
setIdData(item.id) setIdData(item.id)
@@ -126,9 +126,17 @@ export default function ListTugasDetailProject() {
padding: 10, padding: 10,
}} }}
> >
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<AiOutlineFileSync size={25} /> <Grid.Col span={"auto"}>
<Center>
<AiOutlineFileSync size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.title}</Text> <Text>{item.title}</Text>
</Grid.Col>
</Grid>
<Group>
</Group> </Group>
</Box> </Box>
<Box> <Box>
@@ -148,7 +156,7 @@ export default function ListTugasDetailProject() {
</Group> </Group>
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text> <Text>Tanggal Berakhir</Text>
<Group <Group
justify="center" justify="center"
bg={"white"} bg={"white"}

18
src/module/project/ui/results_date-and_task.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { Box, Group, SimpleGrid, Text } from '@mantine/core'; import { Box, Center, Grid, Group, SimpleGrid, Spoiler, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { AiOutlineFileSync } from "react-icons/ai"; import { AiOutlineFileSync } from "react-icons/ai";
import { IFormDateProject } from '../lib/type_project'; import { IFormDateProject } from '../lib/type_project';
@@ -18,10 +18,16 @@ export default function ResultsDateAndTask(data: IFormDateProject) {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10 padding: 10
}}> }}>
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<AiOutlineFileSync size={25} /> <Grid.Col span={"auto"}>
<Text>{data.title}</Text> <Center >
</Group> <AiOutlineFileSync size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{data.title}</Text>
</Grid.Col>
</Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -37,7 +43,7 @@ export default function ResultsDateAndTask(data: IFormDateProject) {
</Group> </Group>
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text> <Text >Tanggal Berakhir</Text>
<Group <Group
justify="center" justify="center"
bg={"white"} bg={"white"}

22
src/module/project/ui/results_file.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core'; import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs'; import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { IListFileTaskProject } from '../lib/type_project'; import { IListFileTaskProject } from '../lib/type_project';
@@ -11,13 +11,21 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10 padding: 10
}} mb={10}> }} mb={10}>
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
{extension == "pdf" && <BsFiletypePdf size={25} />} <Grid.Col span={"auto"}>
{extension == "csv" && <BsFiletypeCsv size={25} />} <Center >
{extension == "png" && <BsFiletypePng size={25} />} {extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={25} />} {extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "heic" && <BsFiletypeHeic size={25} />} {extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{name}</Text> <Text>{name}</Text>
</Grid.Col>
</Grid>
<Group>
</Group> </Group>
</Box> </Box>
); );

9
src/module/task/ui/create_task.tsx
View File

@@ -74,11 +74,12 @@ export default function CreateTask() {
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
setTitle("") // setTitle("")
member.set([]) member.set([])
setFileForm([]) setFileForm([])
setListFile([]) setListFile([])
setDataTask([]) setDataTask([])
router.push(`/division/${param.id}/task/`)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
@@ -164,6 +165,7 @@ export default function CreateTask() {
</Group> </Group>
</Box> </Box>
</Stack> </Stack>
<Box pb={100}>
{ {
dataTask.length > 0 && dataTask.length > 0 &&
<Box pt={20}> <Box pt={20}>
@@ -211,7 +213,7 @@ export default function CreateTask() {
{ {
member.length > 0 && member.length > 0 &&
<Box pt={30} mb={100}> <Box pt={30}>
<Group justify="space-between"> <Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text> <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text> <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -253,8 +255,7 @@ export default function CreateTask() {
</Box> </Box>
</Box> </Box>
} }
</Box>
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),

24
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global"; import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Flex, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core"; import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -99,13 +99,21 @@ export default function ListFileDetailTask() {
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
{item.extension == "pdf" && <BsFiletypePdf size={25} />}
{item.extension == "csv" && <BsFiletypeCsv size={25} />}
{item.extension == "png" && <BsFiletypePng size={25} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
{item.extension == "heic" && <BsFiletypeHeic size={25} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.name + '.' + item.extension}</Text>
</Grid.Col>
</Grid>
<Group> <Group>
{item.extension == "pdf" && <BsFiletypePdf size={25} />}
{item.extension == "csv" && <BsFiletypeCsv size={25} />}
{item.extension == "png" && <BsFiletypePng size={25} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
{item.extension == "heic" && <BsFiletypeHeic size={25} />}
<Text>{item.name + '.' + item.extension}</Text>
</Group> </Group>
</Box> </Box>
) )
@@ -115,7 +123,7 @@ export default function ListFileDetailTask() {
<LayoutDrawer opened={openDrawer} title={nameData} onClose={() => setOpenDrawer(false)}> <LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid

14
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -128,10 +128,16 @@ export default function ListTugasDetailTask() {
padding: 10, padding: 10,
}} }}
> >
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<AiOutlineFileSync size={25} /> <Grid.Col span={"auto"}>
<Text>{item.title}</Text> <Center >
</Group> <AiOutlineFileSync size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.title}</Text>
</Grid.Col>
</Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>

2
src/module/task/ui/list_division_task.tsx
View File

@@ -146,7 +146,7 @@ export default function ListDivisionTask() {
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title> <Title order={3} c={"white"} lineClamp={1}>{v.title}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>

19
src/module/task/ui/results_date-and_task.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { Box, Group, SimpleGrid, Text } from '@mantine/core'; import { Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { AiOutlineFileSync } from "react-icons/ai"; import { AiOutlineFileSync } from "react-icons/ai";
import { IFormDateTask } from '../lib/type_task'; import { IFormDateTask } from '../lib/type_task';
@@ -18,10 +19,16 @@ export default function ResultsDateAndTask(data: IFormDateTask) {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10 padding: 10
}}> }}>
<Group> <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<AiOutlineFileSync size={25} /> <Grid.Col span={"auto"}>
<Text>{data.title}</Text> <Center >
</Group> <AiOutlineFileSync size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{data.title}</Text>
</Grid.Col>
</Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -37,7 +44,7 @@ export default function ResultsDateAndTask(data: IFormDateTask) {
</Group> </Group>
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text> <Text >Tanggal Berakhir</Text>
<Group <Group
justify="center" justify="center"
bg={"white"} bg={"white"}

22
src/module/task/ui/results_file.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core'; import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs'; import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { IListFileTask } from '../lib/type_task'; import { IListFileTask } from '../lib/type_task';
@@ -11,13 +11,21 @@ export default function ResultsFile({ name, extension }: IListFileTask) {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10 padding: 10
}} mb={10}> }} mb={10}>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center>
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{name}</Text>
</Grid.Col>
</Grid>
<Group> <Group>
{extension == "pdf" && <BsFiletypePdf size={25} />}
{extension == "csv" && <BsFiletypeCsv size={25} />}
{extension == "png" && <BsFiletypePng size={25} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={25} />}
{extension == "heic" && <BsFiletypeHeic size={25} />}
<Text>{name}</Text>
</Group> </Group>
</Box> </Box>
); );

2
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -111,7 +111,7 @@ export default function TabListMember() {
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" /> <Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" />
</Box> </Box>
<Box> <Box>
<Text fw={'bold'} c={WARNA.biruTua}>{_.startCase(v.name)}</Text> <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text> <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box> </Box>
</Group> </Group>