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

Add skeleton color validasi and katalog

Browse Source
This commit is contained in:
nico
2024-12-27 12:06:47 +08:00
parent d8f56309b0
commit b467aedece
17 changed files with 274 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app_modules/katalog/portofolio/component/button_delete_new.tsx
View File

@@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiDeletePortofolio, apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentPortofolio_ButtonDeleteNew() {
const param = useParams<{ id: string }>()
@@ -59,7 +60,7 @@ export default function ComponentPortofolio_ButtonDeleteNew() {
{userLoginId === dataPorto?.authorId ? (
<Button
radius={"xl"}
bg={"red"}
bg={MainColor.red}
color="red"
onClick={() => {
setModal(true)

23
src/app_modules/katalog/portofolio/component/button_more_new.tsx
View File

@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentPortofolio_ButtonMoreNew() {
const param = useParams<{ id: string }>()
@@ -20,31 +21,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
{
id: "1",
name: "Edit detail ",
icon: <IconEdit />,
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit />,
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId />,
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 />,
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.edit + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin />,
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
@@ -53,31 +54,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
{
id: "1",
name: "Edit detail ",
icon: <IconEdit />,
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit />,
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId />,
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 />,
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.create + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin />,
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
@@ -107,7 +108,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
<>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color="white" />
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>

40
src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx
View File

@@ -37,8 +37,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.namaBisnis}
@@ -62,8 +68,14 @@ export default function Portofolio_EditDataBisnis({
<Select
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.MasterBidangBisnis.id}
@@ -85,8 +97,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.alamatKantor}
@@ -110,8 +128,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.tlpn}
@@ -137,8 +161,14 @@ export default function Portofolio_EditDataBisnis({
<Textarea
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
autosize
minRows={2}

42
src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
View File

@@ -34,15 +34,21 @@ export default function Portofolio_EditMedsosBisnis({
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Stack px={"sm"}>
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Facebook"
value={medsos.facebook}
@@ -57,8 +63,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Instagram"
value={medsos.instagram}
@@ -73,8 +85,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Tiktok"
value={medsos.tiktok}
@@ -89,8 +107,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Twitter"
value={medsos.twitter}
@@ -105,8 +129,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Youtube"
value={medsos.youtube}

14
src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
View File

@@ -1,12 +1,12 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { Paper, Stack, Group, Title, SimpleGrid, Box, Grid, Divider, Text } from "@mantine/core";
import { IconBuildingSkyscraper, IconListDetails, IconPhoneCall, IconMapPin, IconPinned } from "@tabler/icons-react";
import { useState } from "react";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import { useParams } from "next/navigation";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconPinned } from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis";
export default function Portofolio_UiDetailDataNew() {
@@ -41,7 +41,7 @@ export default function Portofolio_UiDetailDataNew() {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
{

17
src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx
View File

@@ -1,16 +1,17 @@
import { APIs } from "@/app/lib";
import { AccentColor } from "@/app_modules/_global/color";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
import { Paper, Stack, Title, Avatar, Skeleton, Text } from "@mantine/core";
import { Avatar, Paper, Stack, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import "mapbox-gl/dist/mapbox-gl.css";
import { useParams } from "next/navigation";
import { useState } from "react";
import { AttributionControl, Map, Marker, NavigationControl, ScaleControl, } from "react-map-gl";
import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { useShallowEffect } from "@mantine/hooks";
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: string }) {
const [loading, setLoading] = useState(true)
@@ -46,7 +47,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Stack spacing={0}>
@@ -55,7 +56,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
</Title>
{
loading ?
<Skeleton radius={"md"} w={"100%"} h={100} />
<CustomSkeleton radius={"md"} w={"100%"} h={100} />
:
dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />

15
src/app_modules/katalog/portofolio/ui/ui_detail_media_new.tsx
View File

@@ -1,11 +1,12 @@
import { AccentColor } from "@/app_modules/_global/color";
import { Paper, Title, Stack, Grid, Text, Skeleton, Box } from "@mantine/core";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid, Paper, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTiktok, IconBrandTwitter, IconBrandYoutube } from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
export default function Portofolio_UiSosialMediaNew() {
const [loading, setLoading] = useState(true)
@@ -40,7 +41,7 @@ export default function Portofolio_UiSosialMediaNew() {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Title order={6}>Media Sosial Bisnis</Title>
@@ -51,10 +52,10 @@ export default function Portofolio_UiSosialMediaNew() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={1}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25} />
</Grid.Col>
<Grid.Col span={11}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>

23
src/app_modules/katalog/portofolio/ui/ui_skeleton_detail_bisnis.tsx
View File

@@ -1,3 +1,4 @@
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
export default function SkeletonDetailBisnis() {
@@ -5,7 +6,15 @@ export default function SkeletonDetailBisnis() {
<Box>
<Grid>
<Grid.Col span={6}>
<Skeleton w={"100%"} height={200} radius="md" />
<CustomSkeleton w={"60%"} height={15} radius="md" />
</Grid.Col>
<Grid.Col span={6}>
<CustomSkeleton w={"100%"} height={15} radius="md" />
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<CustomSkeleton w={"100%"} height={200} radius="md" />
</Grid.Col>
<Grid.Col span={6}>
<Box>
@@ -13,10 +22,10 @@ export default function SkeletonDetailBisnis() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={2}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25} />
</Grid.Col>
<Grid.Col span={10}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>
@@ -25,10 +34,10 @@ export default function SkeletonDetailBisnis() {
</Grid.Col>
</Grid>
<Box mt={"md"}>
<Skeleton w={"30%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"30%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
</Box>
</Box>
</>;

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

@@ -7,6 +7,7 @@ import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { IconCaretRight } from "@tabler/icons-react";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function ListPortofolioProfileNew() {
const router = useRouter();
@@ -58,8 +59,8 @@ export default function ListPortofolioProfileNew() {
{
loading ?
<>
<Skeleton height={70} radius={"md"} width={"100%"} />
<Skeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
</>
:

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

@@ -1,10 +1,11 @@
import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
export default function SkeletonProfile() {
return (
<>
<Box mb={"lg"}>
<Skeleton height={200} radius={"md"} />
<CustomSkeleton height={200} radius={"md"} />
<Box
sx={{
position: "relative",
@@ -14,12 +15,12 @@ export default function SkeletonProfile() {
}}
>
<Center>
<Avatar radius={"50%"} size={100} />
<CustomSkeleton circle height={100} width={100} />
</Center>
</Box>
<Stack align="center" justify="center" spacing={"xs"}>
<Skeleton height={15} radius={"md"} width={"50%"} />
<Skeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"}/>
</Stack>
<Box mt={"lg"}>
@@ -28,10 +29,10 @@ export default function SkeletonProfile() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={1}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25}/>
</Grid.Col>
<Grid.Col span={11}>
<Skeleton w={"50%"} h={15} />
<CustomSkeleton w={"50%"} h={15}/>
</Grid.Col>
</Grid>
</Box>
@@ -40,5 +41,49 @@ export default function SkeletonProfile() {
</Box>
</Box>
</>
)
}
);
}
// import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
// export default function SkeletonProfile() {
// return (
// <>
// <Box mb={"lg"}>
// <Skeleton height={200} radius={"md"} />
// <Box
// sx={{
// position: "relative",
// bottom: 60,
// width: "100%",
// marginBottom: -30,
// }}
// >
// <Center>
// <Avatar radius={"50%"} size={100} />
// </Center>
// </Box>
// <Stack align="center" justify="center" spacing={"xs"}>
// <Skeleton height={15} radius={"md"} width={"50%"} />
// <Skeleton height={15} radius={"md"} width={"50%"} />
// </Stack>
// <Box mt={"lg"}>
// <Stack spacing={"xs"}>
// {[...Array(4)].map((_, index) => (
// <Box key={index} py={5}>
// <Grid align="center">
// <Grid.Col span={1}>
// <Skeleton w={25} h={25} />
// </Grid.Col>
// <Grid.Col span={11}>
// <Skeleton w={"50%"} h={15} />
// </Grid.Col>
// </Grid>
// </Box>
// ))}
// </Stack>
// </Box>
// </Box>
// </>
// )
// }