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

style : update tema

Browse Source 
Deskripsi:
- update calender
- update color palette
- update discussion
- update division
- update task

No Issue
This commit is contained in:
lukman
2024-09-13 11:58:55 +08:00
parent a6d66dd823
commit e803452a00
63 changed files with 502 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,10 +1,10 @@
"use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Input, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
import { useState } from "react";
import { funCreateComent, funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailDiscussion } from "../lib/type_discussion";
import moment from "moment";
@@ -27,6 +27,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const roleLogin = useHookstate(globalRole)
const [isCreator, setCreator] = useState(false)
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
const getData = async () => {
try {
@@ -83,7 +84,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
menu={
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>
@@ -133,7 +134,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
<Text c={tema.get().utama} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -175,7 +176,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -249,7 +250,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Grid.Col>
<Grid.Col span={6}>
<Box>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={15}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={15}>
{v.username}
</Text>
</Box>
@@ -283,12 +284,12 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
:
<Box pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550)
}} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}>
<Box bg={WARNA.bgWhite} >
}} pl={rem(15)} pr={rem(15)} bg={tema.get().bgUtama}>
<Box bg={tema.get().bgUtama} >
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Box mb={20} bg={WARNA.bgWhite}>
<Box mb={20} bg={tema.get().bgUtama}>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
@@ -297,7 +298,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
border: "none",
backgroundColor: "transparent"
},

19
src/module/discussion/ui/drawer_detail_discussion.tsx
View File

@@ -1,4 +1,4 @@
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useState } from "react";
@@ -17,6 +17,7 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshDiscussion)
const tema = useHookstate(TEMA)
async function fetchStatusDiscussion(val: boolean) {
@@ -77,19 +78,19 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
>
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsTrash3 size={30} color={WARNA.biruTua} />
<BsTrash3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus</Text>
<Text c={tema.get().utama}>Hapus</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Edit</Text>
<Text c={tema.get().utama}>Edit</Text>
</Box>
</Flex>
@@ -99,9 +100,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<MdClose size={30} color={WARNA.biruTua} />
<MdClose size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Tutup Diskusi</Text>
<Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
</Flex>
</>
) : (
@@ -109,9 +110,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaCheck size={30} color={WARNA.biruTua} />
<FaCheck size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Buka Diskusi</Text>
<Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
</Flex>
</>
)}

8
src/module/discussion/ui/drawer_list_discussion.tsx
View File

@@ -1,10 +1,12 @@
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useParams } from "next/navigation";
import { IoAddCircle } from "react-icons/io5";
export default function DrawerListDiscussion() {
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<Box>
@@ -14,10 +16,10 @@ export default function DrawerListDiscussion() {
>
<Flex onClick={() => window.location.href = "/division/" + param.id + "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Diskusi</Text>
<Text c={tema.get().utama}>Tambah Diskusi</Text>
</Box>
</Flex>
</SimpleGrid>

8
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
import { useState } from "react";
@@ -8,6 +8,7 @@ import { funCreateDiscussion, funGetDiscussionById } from "../lib/api_discussion
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile";
import { useHookstate } from "@hookstate/core";
export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
desc: false,
});
@@ -99,11 +101,11 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

8
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global"
import { TEMA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
@@ -8,6 +8,7 @@ import toast from "react-hot-toast"
import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks"
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
import { useHookstate } from "@hookstate/core"
export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormEditDiscussion() {
const [isDataOne, setDataOne] = useState("")
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
desc: false,
});
@@ -125,14 +127,14 @@ export default function FormEditDiscussion() {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

12
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA} from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
@@ -10,12 +10,14 @@ import { useShallowEffect } from "@mantine/hooks";
import { IDataDiscussion } from "../lib/type_discussion";
import toast from "react-hot-toast";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([])
const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const getData = async () => {
try {
@@ -46,9 +48,9 @@ export default function ListDiscussion({ id }: { id: string }) {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
size="md"
@@ -115,7 +117,7 @@ export default function ListDiscussion({ id }: { id: string }) {
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>

5
src/module/discussion/ui/navbar_detail_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { ActionIcon } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
@@ -11,11 +11,12 @@ export default function NavbarDetailDiscussion({id, status, idDivision}: {id: st
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>}
/>

6
src/module/discussion/ui/navbar_list_discussion.tsx
View File

@@ -1,19 +1,21 @@
'use client'
import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
import { LayoutNavbarNew, LayoutDrawer, TEMA } from "@/module/_global";
import { ActionIcon } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import { useState } from "react";
import DrawerListDiscussion from "./drawer_list_discussion";
import { useParams } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function NavbarListDiscussion() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back={`/division/${param.id}`} title="Diskusi"
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}