wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dibagian auth dan profile

Browse Source
This commit is contained in:
nico
2024-12-26 17:19:57 +08:00
parent 5448c3a001
commit d8f56309b0
15 changed files with 142 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app_modules/_global/color/color_pallet.ts
View File

@@ -2,7 +2,8 @@ export const MainColor = {
black: "#202020", black: "#202020",
darkblue: "#001D3D", darkblue: "#001D3D",
yellow: "#E1B525", yellow: "#E1B525",
white: "#D4D0D0" white: "#D4D0D0",
red: "#C74E4E"
}; };
export const AccentColor = { export const AccentColor = {

4
src/app_modules/_global/component/box_information.tsx
View File

@@ -31,7 +31,7 @@ export default function ComponentGlobal_BoxInformation({
> >
* Report * Report
</Text> </Text>
<Text fz={fonsize ? fonsize : 12} c={"white"}> <Text fz={fonsize ? fonsize : 12} c={MainColor.white}>
{informasi} {informasi}
</Text> </Text>
</Stack> </Stack>
@@ -39,7 +39,7 @@ export default function ComponentGlobal_BoxInformation({
<Group> <Group>
<Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}> <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
*{" "} *{" "}
<Text span inherit c={"white"} fw={"normal"}> <Text span inherit c={MainColor.white} fw={"normal"}>
{informasi} {informasi}
</Text> </Text>
</Text> </Text>

2
src/app_modules/_global/component/comp_box_upload_image.tsx
View File

@@ -1,5 +1,6 @@
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component"; import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Box } from "@mantine/core"; import { Box } from "@mantine/core";
import { MainColor } from "../color";
/** /**
* *
@@ -28,6 +29,7 @@ export function ComponentGlobal_BoxUploadImage({
height: "100%", height: "100%",
borderStyle: "dashed", borderStyle: "dashed",
borderRadius: "5px", borderRadius: "5px",
borderColor: MainColor.white,
}} }}
> >
{children} {children}

2
src/app_modules/_global/ui/ui_header_tamplate.tsx
View File

@@ -67,7 +67,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
customButtonLeft customButtonLeft
) : ( ) : (
<ActionIcon <ActionIcon
c={"white"} c={MainColor.white}
variant="transparent" variant="transparent"
radius={"xl"} radius={"xl"}
onClick={() => { onClick={() => {

2
src/app_modules/auth/login/view.tsx
View File

@@ -99,7 +99,7 @@ export default function Login({ version }: { version: string }) {
</Stack> </Stack>
<Box pos={"fixed"} bottom={10}> <Box pos={"fixed"} bottom={10}>
<Text fw={"bold"} c={"white"} fs={"italic"} fz={"xs"}> <Text fw={"bold"} c={MainColor.white} fs={"italic"} fz={"xs"}>
v {version} v {version}
</Text> </Text>
</Box> </Box>

5
src/app_modules/auth/logout/view.tsx
View File

@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { auth_Logout } from "../fun/fun_logout"; import { auth_Logout } from "../fun/fun_logout";
import { RouterAuth } from "@/app/lib/router_hipmi/router_auth"; import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
import { MainColor } from "@/app_modules/_global/color";
export default function Component_ButtonLogout({userId}: {userId: string}) { export default function Component_ButtonLogout({userId}: {userId: string}) {
const router = useRouter(); const router = useRouter();
@@ -70,9 +71,9 @@ export default function Component_ButtonLogout({userId}: {userId: string}) {
setOpened(true); setOpened(true);
}} }}
> >
<IconLogout color="red" /> <IconLogout color={MainColor.red} />
</ActionIcon> </ActionIcon>
<Text fw={"bold"} align="center" color="red"> <Text fw={"bold"} align="center" color={MainColor.red}>
Keluar Keluar
</Text> </Text>
</Stack> </Stack>

4
src/app_modules/auth/register/view.tsx
View File

@@ -96,10 +96,10 @@ export default function Register() {
REGISTRASI REGISTRASI
</Title> </Title>
<IconUserCircle size={100} color="white" /> <IconUserCircle size={100} color={MainColor.white} />
<Stack spacing={"sm"} w={300}> <Stack spacing={"sm"} w={300}>
<Text align="center" c={"white"}> <Text align="center" c={MainColor.white}>
Anda akan terdaftar dengan nomor berikut{" "} Anda akan terdaftar dengan nomor berikut{" "}
<Text inherit span fw={"bold"}> <Text inherit span fw={"bold"}>
+{nomor} +{nomor}

20
src/app_modules/katalog/component/drawer_katalog_new.tsx
View File

@@ -3,7 +3,7 @@ import {
RouterPortofolio, RouterPortofolio,
RouterProfile, RouterProfile,
} from "@/app/lib/router_hipmi/router_katalog"; } from "@/app/lib/router_hipmi/router_katalog";
import { AccentColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { import {
gs_admin_navbar_menu, gs_admin_navbar_menu,
gs_admin_navbar_subMenu, gs_admin_navbar_subMenu,
@@ -48,25 +48,25 @@ export default function DrawerKatalogNew({
{ {
id: "1", id: "1",
name: "Edit profile", name: "Edit profile",
icon: <IconEdit />, icon: <IconEdit color={MainColor.white} />,
path: RouterProfile.edit + param.id, path: RouterProfile.edit + param.id,
}, },
{ {
id: "2", id: "2",
name: "Ubah foto profile", name: "Ubah foto profile",
icon: <IconPhotoEdit />, icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterProfile.update_foto_profile + param.id, path: RouterProfile.update_foto_profile + param.id,
}, },
{ {
id: "3", id: "3",
name: "Ubah latar belakang", name: "Ubah latar belakang",
icon: <IconPolaroid />, icon: <IconPolaroid color={MainColor.white} />,
path: RouterProfile.update_foto_background + param.id, path: RouterProfile.update_foto_background + param.id,
}, },
{ {
id: "4", id: "4",
name: "Tambah portofolio", name: "Tambah portofolio",
icon: <IconPencilPlus />, icon: <IconPencilPlus color={MainColor.white} />,
path: RouterPortofolio.create + param.id, path: RouterPortofolio.create + param.id,
}, },
]; ];
@@ -95,7 +95,7 @@ export default function DrawerKatalogNew({
borderRight: `1px solid ${AccentColor.blue}`, borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`, borderLeft: `1px solid ${AccentColor.blue}`,
borderRadius: "20px 20px 0px 0px", borderRadius: "20px 20px 0px 0px",
color: "white", color: MainColor.white,
paddingBottom: "5%", paddingBottom: "5%",
}, },
}} }}
@@ -103,7 +103,7 @@ export default function DrawerKatalogNew({
<Stack spacing={"xs"}> <Stack spacing={"xs"}>
<Group position="right"> <Group position="right">
<ActionIcon onClick={close} variant="transparent"> <ActionIcon onClick={close} variant="transparent">
<IconX color="white" /> <IconX color={MainColor.white} />
</ActionIcon> </ActionIcon>
</Group> </Group>
<SimpleGrid cols={4}> <SimpleGrid cols={4}>
@@ -113,10 +113,10 @@ export default function DrawerKatalogNew({
router.push(e.path, { scroll: false }); router.push(e.path, { scroll: false });
}} }}
> >
<ActionIcon variant="transparent" c="white" > <ActionIcon variant="transparent" c={MainColor.white} >
{e.icon} {e.icon}
</ActionIcon> </ActionIcon>
<Text align="center" color="white"> <Text align="center" color={MainColor.white}>
{e.name} {e.name}
</Text> </Text>
</Stack> </Stack>
@@ -136,7 +136,7 @@ export default function DrawerKatalogNew({
}); });
}} }}
> >
<IconDashboard /> <IconDashboard color={MainColor.white} />
</ActionIcon> </ActionIcon>
<Text align="center" color="white"> <Text align="center" color="white">
Dashboard Admin Dashboard Admin

72
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -67,8 +67,14 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
}} }}
withAsterisk withAsterisk
label="Nama Bisnis" label="Nama Bisnis"
@@ -82,10 +88,17 @@ export default function CreatePortofolio({
}} }}
/> />
<Select <Select
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
}} }}
withAsterisk withAsterisk
label="Bidang Bisnis" label="Bidang Bisnis"
@@ -104,8 +117,14 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
}} }}
withAsterisk withAsterisk
label="Alamat Bisnis" label="Alamat Bisnis"
@@ -121,8 +140,14 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
}} }}
withAsterisk withAsterisk
label="Nomor Telepon " label="Nomor Telepon "
@@ -139,8 +164,14 @@ export default function CreatePortofolio({
<Textarea <Textarea
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
}} }}
maxLength={300} maxLength={300}
autosize autosize
@@ -164,7 +195,7 @@ export default function CreatePortofolio({
</Stack> </Stack>
<Stack> <Stack>
<ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" /> <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda" />
<ComponentGlobal_BoxUploadImage> <ComponentGlobal_BoxUploadImage>
{img ? ( {img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}> <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -177,8 +208,8 @@ export default function CreatePortofolio({
</AspectRatio> </AspectRatio>
) : ( ) : (
<Stack spacing={5} justify="center" align="center" h={"100%"}> <Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title order={3}>Upload Logo Bisnis</Title> <Title c={MainColor.white} order={3}>Upload Logo Bisnis</Title>
<Text fs={"italic"} fz={10} align="center"> <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
Masukan logo bisnis anda untuk ditampilkan dalam portofolio Masukan logo bisnis anda untuk ditampilkan dalam portofolio
</Text> </Text>
</Stack> </Stack>
@@ -275,8 +306,11 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
}
}} }}
label="Facebook" label="Facebook"
maxLength={100} maxLength={100}
@@ -291,8 +325,11 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
}
}} }}
label="Instagram" label="Instagram"
maxLength={100} maxLength={100}
@@ -307,8 +344,11 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
}
}} }}
label="Tiktok" label="Tiktok"
maxLength={100} maxLength={100}
@@ -323,8 +363,11 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
}
}} }}
label="Twitter" label="Twitter"
maxLength={100} maxLength={100}
@@ -339,8 +382,11 @@ export default function CreatePortofolio({
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white
}
}} }}
label="Youtube" label="Youtube"
maxLength={100} maxLength={100}

5
src/app_modules/katalog/profile/_component/comp_load_background.tsx
View File

@@ -7,6 +7,7 @@ import { Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { MainColor } from "@/app_modules/_global/color";
export function Profile_ComponentLoadBackgroundImage({ export function Profile_ComponentLoadBackgroundImage({
fileId, fileId,
@@ -41,7 +42,7 @@ export function Profile_ComponentLoadBackgroundImage({
if (!isImage) if (!isImage)
return ( return (
<> <>
<Center h={200} bg={"white"} style={{ borderRadius: "10px" }}> <Center h={200} bg={MainColor.white} style={{ borderRadius: "10px" }}>
<Image <Image
alt="No Image" alt="No Image"
maw={150} maw={150}
@@ -64,7 +65,7 @@ export function Profile_ComponentLoadBackgroundImage({
}); });
}} }}
style={{ style={{
borderColor: "white", borderColor: MainColor.white,
borderStyle: "solid", borderStyle: "solid",
borderWidth: "1px", borderWidth: "1px",
borderRadius: "5px", borderRadius: "5px",

24
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -54,7 +54,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
}} }}
withAsterisk withAsterisk
@@ -66,7 +66,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
}} }}
withAsterisk withAsterisk
@@ -92,8 +92,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white,
}
}} }}
withAsterisk withAsterisk
label="Nama" label="Nama"
@@ -118,8 +121,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white,
}
}} }}
withAsterisk withAsterisk
label="Email" label="Email"
@@ -146,8 +152,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white,
}
}} }}
withAsterisk withAsterisk
label="Alamat" label="Alamat"
@@ -172,8 +181,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<Select <Select
styles={{ styles={{
label: { label: {
color: "white", color: MainColor.white,
}, },
input: {
backgroundColor: MainColor.white,
}
}} }}
withAsterisk withAsterisk
label="Jenis Kelamin" label="Jenis Kelamin"

6
src/app_modules/katalog/ui/list_portolio_new.tsx
View File

@@ -42,7 +42,7 @@ export default function ListPortofolioProfileNew() {
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: "white", color: MainColor.white,
}} }}
> >
<Stack spacing={"sm"}> <Stack spacing={"sm"}>
@@ -84,7 +84,7 @@ export default function ListPortofolioProfileNew() {
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: "white", color: MainColor.white,
}} }}
> >
<Group position="apart"> <Group position="apart">
@@ -97,7 +97,7 @@ export default function ListPortofolioProfileNew() {
</Text> </Text>
</Stack> </Stack>
<Stack> <Stack>
<IconCaretRight color="white" size={25} /> <IconCaretRight color={MainColor.white} size={25} />
</Stack> </Stack>
</Group> </Group>
</Paper> </Paper>

22
src/app_modules/katalog/ui/profile_detail.tsx
View File

@@ -1,4 +1,4 @@
import { AccentColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { apiGetUserProfile, IUserProfile } from "@/app_modules/user"; import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core"; import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
@@ -14,23 +14,23 @@ export default function ProfileDetail() {
const [dataProfile, setDataProfile] = useState<IUserProfile>() const [dataProfile, setDataProfile] = useState<IUserProfile>()
const listInformation = [ const listInformation = [
{ {
icon: <IconPhone />, icon: <IconPhone color={MainColor.white} />,
value: "+" + dataProfile?.nomor, value: "+" + dataProfile?.nomor,
}, },
{ {
icon: <IconBrandGmail />, icon: <IconBrandGmail color={MainColor.white} />,
value: dataProfile?.email, value: dataProfile?.email,
}, },
{ {
icon: <IconHome />, icon: <IconHome color={MainColor.white} />,
value: dataProfile?.alamat, value: dataProfile?.alamat,
}, },
{ {
icon: icon:
dataProfile?.jenisKelamin === "Laki-laki" ? ( dataProfile?.jenisKelamin === "Laki-laki" ? (
<IconGenderMale /> <IconGenderMale color={MainColor.white} />
) : ( ) : (
<IconGenderFemale /> <IconGenderFemale color={MainColor.white}/>
), ),
value: dataProfile?.jenisKelamin, value: dataProfile?.jenisKelamin,
}, },
@@ -64,7 +64,7 @@ export default function ProfileDetail() {
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: "white", color: MainColor.white
}} }}
> >
{ {
@@ -96,11 +96,11 @@ export default function ProfileDetail() {
}} }}
/> />
</Center> </Center>
<Stack align="center" c={"white"} mt={"xs"} spacing={0}> <Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1}> <Text fw={"bold"} lineClamp={1} c={MainColor.white}>
{dataProfile?.name} {dataProfile?.name}
</Text> </Text>
<Text fs={"italic"} fz={"sm"} lineClamp={1}> <Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}>
@{dataProfile?.username} @{dataProfile?.username}
</Text> </Text>
</Stack> </Stack>
@@ -118,7 +118,7 @@ export default function ProfileDetail() {
{e.icon} {e.icon}
</ThemeIcon> </ThemeIcon>
<Box w={"85%"}> <Box w={"85%"}>
<Text fw={"bold"}>{e?.value}</Text> <Text c={MainColor.white} fw={"bold"}>{e?.value}</Text>
</Box> </Box>
</Group> </Group>
))} ))}

30
src/app_modules/katalog/ui/skeleton_profile.tsx
View File

@@ -14,27 +14,29 @@ export default function SkeletonProfile() {
}} }}
> >
<Center> <Center>
<Avatar radius={"50%"} size={100} bg={"gray"} /> <Avatar radius={"50%"} size={100} />
</Center> </Center>
</Box> </Box>
<Stack align="center" justify="center" spacing={"xs"}> <Stack align="center" justify="center" spacing={"xs"}>
<Skeleton height={15} radius={"md"} width={"50%"} /> <Skeleton height={15} radius={"md"} width={"50%"} />
<Skeleton height={15} radius={"md"} width={"20%"} /> <Skeleton height={15} radius={"md"} width={"50%"} />
</Stack> </Stack>
<Box mt={"lg"}> <Box mt={"lg"}>
{[...Array(4)].map((_, index) => ( <Stack spacing={"xs"}>
<Box key={index} py={5}> {[...Array(4)].map((_, index) => (
<Grid align="center"> <Box key={index} py={5}>
<Grid.Col span={1}> <Grid align="center">
<Skeleton w={25} h={25} /> <Grid.Col span={1}>
</Grid.Col> <Skeleton w={25} h={25} />
<Grid.Col span={11}> </Grid.Col>
<Skeleton w={"100%"} h={15} /> <Grid.Col span={11}>
</Grid.Col> <Skeleton w={"50%"} h={15} />
</Grid> </Grid.Col>
</Box> </Grid>
))} </Box>
))}
</Stack>
</Box> </Box>
</Box> </Box>
</> </>

12
src/app_modules/map/ui/ui_create_pin.tsx
View File

@@ -109,7 +109,13 @@ export function UiMap_CreatePin({
<TextInput <TextInput
disabled={isPin ? false : true} disabled={isPin ? false : true}
style={{ transition: "0.5s" }} style={{ transition: "0.5s" }}
styles={{ label: { color: isPin ? "white" : "gray" } }} styles={{ label: { color: isPin ? MainColor.white : "gray" },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
} }}
label="Nama Pin" label="Nama Pin"
placeholder="Masukan nama pin map" placeholder="Masukan nama pin map"
withAsterisk withAsterisk
@@ -132,8 +138,8 @@ export function UiMap_CreatePin({
</AspectRatio> </AspectRatio>
) : ( ) : (
<Stack spacing={5} justify="center" align="center" h={"100%"}> <Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title order={3}>Foto Lokasi Bisnis</Title> <Title c={MainColor.white} order={3}>Foto Lokasi Bisnis</Title>
<Text fs={"italic"} fz={10} align="center"> <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
Upload foto lokasi bisnis anda untuk ditampilkan dalam detail Upload foto lokasi bisnis anda untuk ditampilkan dalam detail
map map
</Text> </Text>