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

Merge pull request #360 from bipproduction/amalia/26-des-24

Browse Source 
Amalia/26 des 24
This commit is contained in:
Amalia
2024-12-26 17:42:30 +08:00
committed by GitHub
parent 784631b232 27e79ada04
commit a6a1c55141
14 changed files with 264 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/api/project/[id]/member/route.ts
View File

@@ -133,13 +133,13 @@ export async function GET(request: Request, context: { params: { id: string } })
const member = await prisma.user.findMany({
where: {
idGroup: String(groupId),
id: {
not: String(userId)
},
OR: [
{ idUserRole: 'coadmin', },
{ idUserRole: 'user', }
],
// id: {
// not: String(userId)
// },
// OR: [
// { idUserRole: 'coadmin', },
// { idUserRole: 'user', }
// ],
isActive: true,
name: {
contains: (name == undefined || name == "null") ? "" : name,
@@ -149,6 +149,7 @@ export async function GET(request: Request, context: { params: { id: string } })
},
select: {
id: true,
idUserRole: true,
name: true,
email: true,
img: true,
@@ -172,7 +173,8 @@ export async function GET(request: Request, context: { params: { id: string } })
idUser: v.id,
name: v.name,
email: v.email,
img: v.img
img: v.img,
idUserRole: v.idUserRole
}))
const dataFix = {

5
src/app/api/user/profile/route.ts
View File

@@ -66,7 +66,7 @@ export async function PUT(request: Request) {
const file = body.get("file") as File;
const data = body.get("data");
const { name, email, phone, nik, gender } = JSON.parse(data as string)
const { name, email, phone, nik, gender, idPosition } = JSON.parse(data as string)
const cekNIK = await prisma.user.count({
where: {
@@ -108,7 +108,8 @@ export async function PUT(request: Request) {
email: email,
phone: "62" + phone,
nik: nik,
gender: gender
gender: gender,
idPosition: idPosition
},
select: {
img: true

2
src/app/api/version-app/route.ts
View File

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
export async function GET(request: Request) {
try {
return NextResponse.json({ success: true, version: "0.2.8", tahap: "beta" }, { status: 200 });
return NextResponse.json({ success: true, version: "0.2.9", tahap: "beta" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });

5
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -51,8 +51,9 @@ export default function CreateAnggotaDivision() {
const user = await funGetUserByCookies();
if (res.success) {
const dariUserLogin = res.data.filter((i: any) => i.id != user.id)
const fixListUser = dariUserLogin.filter((i: any) => i.idUserRole == 'coadmin' || i.idUserRole == 'user')
// const dariUserLogin = res.data.filter((i: any) => i.id != user.id)
// const fixListUser = dariUserLogin.filter((i: any) => i.idUserRole == 'coadmin' || i.idUserRole == 'user')
const fixListUser = res.data.filter((i: any) => i.idUserRole != 'supadmin')
setDataMember(fixListUser)
} else {
toast.error(res.message)

28
src/module/division_new/ui/navbar_create_users.tsx
View File

@@ -1,22 +1,19 @@
"use client"
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { funGetAllmember, TypeUser } from '@/module/user';
import { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast';
import { globalMemberDivision } from '../lib/val_division';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { globalMemberDivision } from '../lib/val_division';
export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
const router = useRouter()
const member = useHookstate(globalMemberDivision)
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([])
@@ -37,10 +34,11 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
async function loadData(search: string) {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies();
// const user = await funGetUserByCookies();
if (res.success) {
setDataMember(res.data.filter((i: any) => i.id != user.id))
// setDataMember(res.data.filter((i: any) => i.id != user.id))
setDataMember(res.data.filter((i: any) => i.idUserRole != "supadmin"))
// cek data member sebelumnya
if (member.length > 0) {
@@ -212,7 +210,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>

2
src/module/home/ui/view_search.tsx
View File

@@ -139,7 +139,7 @@ export default function ViewSearch() {
c={tema.get().utama}
truncate="end"
>
{_.startCase(v.name)}
{_.upperFirst(v.name)}
</Text>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group + " - " + v.position}

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

@@ -40,7 +40,8 @@ export default function AddMemberDetailProject() {
setLoading(true)
const response = await funGetAllMemberById('?search=' + searchQuery, param.id)
if (response.success) {
setData(response.data.member)
// setData(response.data.member)
setData(response.data.member.filter((i: any) => i.idUserRole != 'supadmin'))
} else {
toast.error(response.message)
}
@@ -243,7 +244,7 @@ export default function AddMemberDetailProject() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
<Box mt={15} mb={100}>
<Box mt={100} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)

6
src/module/project/ui/create_users_project.tsx
View File

@@ -1,6 +1,5 @@
"use client"
import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user';
import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
@@ -36,9 +35,10 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
try {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies();
// const user = await funGetUserByCookies();
if (res.success) {
setDataMember(res.data.filter((i: any) => i.id != user.id && i.idUserRole != 'supadmin' && i.idUserRole != 'cosupadmin'))
// setDataMember(res.data.filter((i: any) => i.id != user.id && i.idUserRole != 'supadmin' && i.idUserRole != 'cosupadmin'))
setDataMember(res.data.filter((i: any) => i.idUserRole != 'supadmin'))
// cek data member sebelumnya
if (member.length > 0) {
setSelectedFiles(JSON.parse(JSON.stringify(member.get())))

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

@@ -15,17 +15,19 @@ export default function MenuDrawerProject() {
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 3 }}
>
<Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Tambah Kegiatan</Text>
</Box>
</Flex>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
{
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Tambah Kegiatan</Text>
</Box>
</Flex>
}
{
roleLogin.get() == "supadmin" &&
<Flex onClick={() => window.location.href = "/project?page=filter&group=" + group} justify={'center'} align={'center'} direction={'column'} >

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

@@ -167,7 +167,7 @@ export default function CreateMember() {
nilai = false
}
if (listData.phone == "" || !(listData.phone.length >= 10 && listData.phone.length <= 15)) {
if (listData.phone == "" || !(listData.phone.length >= 9 && listData.phone.length <= 15)) {
setTouched(touched => ({ ...touched, phone: true }))
nilai = false
}

21
src/module/user/member/ui/edit_member.tsx
View File

@@ -30,6 +30,7 @@ export default function EditMember({ id }: { id: string }) {
const [loading, setLoading] = useState(true)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -83,6 +84,7 @@ export default function EditMember({ id }: { id: string }) {
async function getAllPosition(val: any) {
try {
setLoadingPosition(true)
const res = await funGetAllPosition(
"?active=true" + "&group=" + `${val}`
);
@@ -90,6 +92,8 @@ export default function EditMember({ id }: { id: string }) {
} catch (error) {
console.error(error)
} finally {
setLoadingPosition(false)
}
}
@@ -155,7 +159,7 @@ export default function EditMember({ id }: { id: string }) {
}
} else if (kategori == 'phone') {
setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
if (val == "" || !(val.length >= 9 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
@@ -233,19 +237,14 @@ export default function EditMember({ id }: { id: string }) {
</Indicator>
}
{loading ?
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
</>
[...Array(6)].map((_, index) => (
<Skeleton key={index} height={40} mt={20} radius={30} />
))
:
<>
<Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: tema.get().utama,

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

@@ -10,6 +10,7 @@ import { HiMagnifyingGlass } from "react-icons/hi2"
import { useWibuRealtime } from "wibu-realtime"
import { funGetAllmember } from "../lib/api_member"
import { IListMember } from "../lib/type_member"
import { funGetUserByCookies } from "@/module/auth"
export default function TabListMember() {
@@ -32,16 +33,18 @@ export default function TabListMember() {
project: "sdm"
})
const [isRefresh, setRefresh] = useState(false)
const [userLogin, setUserLogin] = useState<any>('')
async function getAllUser(loading: boolean) {
try {
if (loading)
setLoading(true)
setLoading(loading)
const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
const user = await funGetUserByCookies()
if (res.success) {
setNameGroup(res.filter.name)
setIdGroup(res.filter.id)
setUserLogin(user.id)
if (isPage == 1) {
setDataMember(res.data)
} else {
@@ -148,9 +151,7 @@ export default function TabListMember() {
dataMember.map((v, i) => {
return (
<Box my={10} key={i}>
<Box onClick={() => {
router.push(`/member/${v.id}`)
}}>
<Box onClick={() => { userLogin == v.id ? router.push(`/profile`) : router.push(`/member/${v.id}`) }}>
<Grid p={5} align="center">
<Grid.Col
span={{
@@ -174,7 +175,7 @@ export default function TabListMember() {
xl: 11,
}}
>
<Text fw={'bold'} pl={isMobile2 ? 40 : 30} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'bold'} pl={isMobile2 ? 40 : 30} c={tema.get().utama} lineClamp={1}>{_.upperFirst(v.name)}</Text>
<Text fw={'lighter'} pl={isMobile2 ? 40 : 30} fz={12}>{v.group + ' - ' + v.position}</Text>
</Grid.Col>
</Grid>

1
src/module/user/profile/lib/type_profile.ts
View File

@@ -18,5 +18,6 @@ export interface IEditDataProfile {
phone: string;
email: string;
gender: string;
idPosition: string;
img: string;
}

339
src/module/user/profile/ui/edit_profile.tsx
View File

@@ -12,10 +12,13 @@ import toast from "react-hot-toast";
import { FaCamera } from "react-icons/fa6";
import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import { IDataPositionMember } from "../../member/lib/type_member";
import { funGetAllPosition } from "@/module/position/lib/api_position";
export default function EditProfile() {
const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const openRef = useRef<() => void>(null);
const [img, setIMG] = useState<any | null>();
const [imgForm, setImgForm] = useState<any>();
@@ -23,6 +26,7 @@ export default function EditProfile() {
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA);
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({
nik: false,
@@ -30,6 +34,7 @@ export default function EditProfile() {
phone: false,
email: false,
gender: false,
idPosition: false
});
const [data, setData] = useState<IEditDataProfile>({
@@ -40,13 +45,30 @@ export default function EditProfile() {
email: "",
gender: "",
img: "",
idPosition: ""
});
async function getAllPosition(val: any) {
try {
setLoadingPosition(true)
const res = await funGetAllPosition(
"?active=true" + "&group=" + `${val}`
);
setListPosition(res.data);
} catch (error) {
console.error(error)
} finally {
setLoadingPosition(false)
}
}
async function getAllProfile() {
try {
setLoading(true);
const res = await funGetProfileByCookies();
setData(res.data);
getAllPosition(res.data.idGroup);
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
setLoading(false);
} catch (error) {
@@ -111,7 +133,7 @@ export default function EditProfile() {
}
} else if (kategori == 'phone') {
setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
if (val == "" || !(val.length >= 9 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
@@ -130,6 +152,13 @@ export default function EditProfile() {
} else {
setTouched({ ...touched, gender: false })
}
} else if (kategori == 'idPosition') {
setData({ ...data, idPosition: val })
if (val == "" || String(val) == "null") {
setTouched({ ...touched, idPosition: true })
} else {
setTouched({ ...touched, idPosition: false })
}
}
}
@@ -181,150 +210,172 @@ export default function EditProfile() {
/>
</Indicator>
)}
{loading ? (
<>
<Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={10} />
</>
) : (
<>
<TextInput
size="md"
type="number"
radius={10}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('nik', e.target.value) }}
value={data.nik}
error={
touched.nik &&
(data.nik === ""
? "NIK Tidak Boleh Kosong"
: data.nik.length !== 16
? "NIK Harus 16 Karakter"
: null)
}
/>
<TextInput
size="md"
type="text"
radius={10}
placeholder="Nama"
withAsterisk
label="Nama"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('name', e.target.value) }}
value={data.name}
error={
touched.name &&
(data.name == "" ? "Nama Tidak Boleh Kosong" : null)
}
/>
<TextInput
size="md"
type="email"
radius={10}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('email', e.target.value) }}
value={data.email}
error={
touched.email &&
(data.email == ""
? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email
{loading ?
[...Array(6)].map((_, index) => (
<Skeleton key={index} height={40} mt={20} radius={10} />
))
: (
<>
<Select
placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
label="Jabatan" w={"100%"} size="md" required withAsterisk radius={10}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => { onValidation('idPosition', val) }}
value={(data?.idPosition == "") ? null : data.idPosition}
error={
touched.idPosition && (
data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
)
? "Email tidak valid"
: null)
}
/>
<TextInput
size="md"
type="number"
radius={10}
placeholder="8xx xxxx xxxx"
withAsterisk
label="Nomor Telepon"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => { onValidation('phone', e.target.value); }}
value={data.phone}
error={
touched.phone &&
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
: !(data.phone.length >= 10 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
}
/>
<Select
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={10}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={[
{
value: "M",
label: "Laki-laki",
},
{
value: "F",
label: "Perempuan",
},
]}
onChange={(val: any) => { onValidation('gender', val) }}
value={data.gender}
error={
touched.gender &&
(data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
}
/>
</>
)}
}
/>
<TextInput
size="md"
type="number"
radius={10}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('nik', e.target.value) }}
value={data.nik}
error={
touched.nik &&
(data.nik === ""
? "NIK Tidak Boleh Kosong"
: data.nik.length !== 16
? "NIK Harus 16 Karakter"
: null)
}
/>
<TextInput
size="md"
type="text"
radius={10}
placeholder="Nama"
withAsterisk
label="Nama"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('name', e.target.value) }}
value={data.name}
error={
touched.name &&
(data.name == "" ? "Nama Tidak Boleh Kosong" : null)
}
/>
<TextInput
size="md"
type="email"
radius={10}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('email', e.target.value) }}
value={data.email}
error={
touched.email &&
(data.email == ""
? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email
)
? "Email tidak valid"
: null)
}
/>
<TextInput
size="md"
type="number"
radius={10}
placeholder="8xx xxxx xxxx"
withAsterisk
label="Nomor Telepon"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => { onValidation('phone', e.target.value); }}
value={data.phone}
error={
touched.phone &&
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
: !(data.phone.length >= 9 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
}
/>
<Select
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={10}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={[
{
value: "M",
label: "Laki-laki",
},
{
value: "F",
label: "Perempuan",
},
]}
onChange={(val: any) => { onValidation('gender', val) }}
value={data.gender}
error={
touched.gender &&
(data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
}
/>
</>
)}
</Stack>
<Box
pos={"fixed"}