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

fix: user

Browse Source 
Deskripsi:
- penambahan modal untuk memberi redirect ke whatsapp
This commit is contained in:
Bagasbanuna02
2025-01-03 14:22:10 +08:00
parent 85463f5a89
commit 215accbcaa
6 changed files with 494 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/zCoba/skeleton/page.tsx
View File

@@ -5,7 +5,8 @@ import {
UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate, UIGlobal_LayoutTamplate,
} from "@/app_modules/_global/ui"; } from "@/app_modules/_global/ui";
import { Grid, Skeleton, Stack } from "@mantine/core"; import { Button, Grid, Skeleton, Stack } from "@mantine/core";
import Link from "next/link";
export default function Voting_ComponentSkeletonViewPuh() { export default function Voting_ComponentSkeletonViewPuh() {
return ( return (
@@ -13,6 +14,25 @@ export default function Voting_ComponentSkeletonViewPuh() {
<UIGlobal_LayoutTamplate <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />} header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
> >
<Button
>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={
"https://wa.me/+6281339158911?text=Hallo , Apa boleh saya minta informasi tentang DariBaliMice?"
}
>
{" "}
Kirim
</Link>
</Button>
<Stack> <Stack>
<ComponentGlobal_CardStyles marginBottom={"0"}> <ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack> <Stack>

15
src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
View File

@@ -22,7 +22,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
profileId: string; profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD; dataPortofolio: MODEL_PORTOFOLIO_OLD;
dataMedsos: any; dataMedsos: any;
imageId: string imageId: string;
}) { }) {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -36,11 +36,18 @@ export function Portofolio_ComponentButtonSelanjutnya({
deskripsi: dataPortofolio.deskripsi, deskripsi: dataPortofolio.deskripsi,
}; };
if (_.values(porto).includes("")) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
return;
}
if (dataPortofolio.tlpn.length < 10) {
ComponentGlobal_NotifikasiPeringatan("Nomor telepon minimal 10 angka");
return;
}
try { try {
setLoading(true); setLoading(true);
if (_.values(porto).includes("")) {
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
}
const res = await funCreatePortofolio({ const res = await funCreatePortofolio({
profileId: profileId, profileId: profileId,
data: dataPortofolio as any, data: dataPortofolio as any,

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

@@ -30,6 +30,8 @@ import {
funGlobal_UploadToStorage, funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun"; } from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib"; import { DIRECTORY_ID } from "@/app/lib";
import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
export default function CreatePortofolio({ export default function CreatePortofolio({
bidangBisnis, bidangBisnis,
@@ -69,12 +71,12 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Nama Bisnis" label="Nama Bisnis"
@@ -88,17 +90,16 @@ export default function CreatePortofolio({
}} }}
/> />
<Select <Select
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Bidang Bisnis" label="Bidang Bisnis"
@@ -114,17 +115,18 @@ export default function CreatePortofolio({
}); });
}} }}
/> />
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Alamat Bisnis" label="Alamat Bisnis"
@@ -137,17 +139,40 @@ export default function CreatePortofolio({
}); });
}} }}
/> />
<TextInput
<Stack spacing={5}>
<Text c={MainColor.white} fz={"sm"}>
Nomor Telepon{" "}
<Text c={"red"} span inherit>
*
</Text>
</Text>
<PhoneInput
placeholder="Nomor telepon"
inputStyle={{ width: "100%" }}
defaultCountry="id"
onChange={(val) => {
const valPhone = val.substring(1);
setDataPortofolio({
...dataPortofolio,
tlpn: valPhone,
});
}}
/>
</Stack>
{/* <TextInput
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Nomor Telepon " label="Nomor Telepon "
@@ -159,19 +184,20 @@ export default function CreatePortofolio({
tlpn: val.target.value, tlpn: val.target.value,
}); });
}} }}
/> /> */}
<Stack spacing={5}> <Stack spacing={5}>
<Textarea <Textarea
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
maxLength={300} maxLength={300}
autosize autosize
@@ -208,7 +234,9 @@ 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 c={MainColor.white} order={3}>Upload Logo Bisnis</Title> <Title c={MainColor.white} order={3}>
Upload Logo Bisnis
</Title>
<Text c={MainColor.white} 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>
@@ -308,9 +336,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Facebook" label="Facebook"
maxLength={100} maxLength={100}
@@ -327,9 +355,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Instagram" label="Instagram"
maxLength={100} maxLength={100}
@@ -346,9 +374,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Tiktok" label="Tiktok"
maxLength={100} maxLength={100}
@@ -365,9 +393,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Twitter" label="Twitter"
maxLength={100} maxLength={100}
@@ -384,9 +412,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Youtube" label="Youtube"
maxLength={100} maxLength={100}

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

@@ -1,22 +1,42 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component"; import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core"; import {
Box,
Button,
Divider,
Grid,
Group,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconPinned } from "@tabler/icons-react"; import {
IconBuildingSkyscraper,
IconListDetails,
IconMapPin,
IconPhoneCall,
IconPinned,
} from "@tabler/icons-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio"; import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio"; import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis"; import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export default function Portofolio_UiDetailDataNew() { export default function Portofolio_UiDetailDataNew() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>();
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>(); const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
const [openModal, setOpenModal] = useState(false);
async function funGetPortofolio() { async function funGetPortofolio() {
try { try {
setLoading(true) setLoading(true);
const response = await apiGetOnePortofolioById(param.id, "bisnis"); const response = await apiGetOnePortofolioById(param.id, "bisnis");
if (response.success) { if (response.success) {
setDataPorto(response.data); setDataPorto(response.data);
@@ -24,12 +44,12 @@ export default function Portofolio_UiDetailDataNew() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
funGetPortofolio() funGetPortofolio();
}, []); }, []);
return ( return (
@@ -44,10 +64,9 @@ export default function Portofolio_UiDetailDataNew() {
color: MainColor.white, color: MainColor.white,
}} }}
> >
{ {loading ? (
loading ?
<SkeletonDetailBisnis /> <SkeletonDetailBisnis />
: ) : (
<Stack> <Stack>
<Group position="apart"> <Group position="apart">
<Title order={6}>Data Bisnis</Title> <Title order={6}>Data Bisnis</Title>
@@ -70,7 +89,9 @@ export default function Portofolio_UiDetailDataNew() {
> >
<Box> <Box>
<Paper> <Paper>
<ComponentGlobal_LoadImage fileId={String(dataPorto?.logoId)} /> <ComponentGlobal_LoadImage
fileId={String(dataPorto?.logoId)}
/>
</Paper> </Paper>
</Box> </Box>
@@ -96,7 +117,13 @@ export default function Portofolio_UiDetailDataNew() {
<IconPhoneCall /> <IconPhoneCall />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{dataPorto?.tlpn}</Text> <Text
onClick={() => {
setOpenModal(true);
}}
>
+ {dataPorto?.tlpn}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> <Grid>
@@ -123,9 +150,37 @@ export default function Portofolio_UiDetailDataNew() {
<Text px={"sm"}>{dataPorto?.deskripsi}</Text> <Text px={"sm"}>{dataPorto?.deskripsi}</Text>
</Stack> </Stack>
</Stack> </Stack>
} )}
</Paper> </Paper>
</>
) <UIGlobal_Modal
title={
"Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${dataPorto?.tlpn}?text=Hallo , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${dataPorto?.namaBisnis}.`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</>
);
} }

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

@@ -1,21 +1,46 @@
import { AccentColor, MainColor } 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,
Button,
Center,
Group,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react"; import {
IconBrandGmail,
IconGenderFemale,
IconGenderMale,
IconHome,
IconPhone,
} from "@tabler/icons-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component"; import {
Profile_ComponentAvatarProfile,
Profile_ComponentLoadBackgroundImage,
} from "../profile/_component";
import SkeletonProfile from "./skeleton_profile"; import SkeletonProfile from "./skeleton_profile";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export default function ProfileDetail() { export default function ProfileDetail() {
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const [dataProfile, setDataProfile] = useState<IUserProfile>() const [dataProfile, setDataProfile] = useState<IUserProfile>();
const [openModal, setOpenModal] = useState(false);
const listInformation = [ const listInformation = [
{ {
icon: <IconPhone color={MainColor.white} />, icon: <IconPhone color={MainColor.white} />,
value: "+" + dataProfile?.nomor, value: (
<Text span inherit onClick={() => setOpenModal(true)}>
{"+" + dataProfile?.nomor}
</Text>
),
}, },
{ {
icon: <IconBrandGmail color={MainColor.white} />, icon: <IconBrandGmail color={MainColor.white} />,
@@ -36,27 +61,26 @@ export default function ProfileDetail() {
}, },
]; ];
async function getProfile() { async function getProfile() {
try { try {
setLoading(true) setLoading(true);
const response = await apiGetUserProfile(`?profile=${param.id}`) const response = await apiGetUserProfile(`?profile=${param.id}`);
if (response.success) { if (response.success) {
setDataProfile(response.data); setDataProfile(response.data);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
getProfile() getProfile();
}, []); }, []);
return <> return (
<>
<Stack <Stack
spacing={0} spacing={0}
style={{ style={{
@@ -64,12 +88,12 @@ export default function ProfileDetail() {
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: MainColor.white color: MainColor.white,
}} }}
> >
{ {loading ? (
loading ? <SkeletonProfile />
<SkeletonProfile /> : ) : (
<> <>
<Box> <Box>
<Profile_ComponentLoadBackgroundImage <Profile_ComponentLoadBackgroundImage
@@ -100,7 +124,12 @@ export default function ProfileDetail() {
<Text fw={"bold"} lineClamp={1} c={MainColor.white}> <Text fw={"bold"} lineClamp={1} c={MainColor.white}>
{dataProfile?.name} {dataProfile?.name}
</Text> </Text>
<Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}> <Text
fs={"italic"}
fz={"sm"}
c={MainColor.white}
lineClamp={1}
>
@{dataProfile?.username} @{dataProfile?.username}
</Text> </Text>
</Stack> </Stack>
@@ -118,14 +147,47 @@ export default function ProfileDetail() {
{e.icon} {e.icon}
</ThemeIcon> </ThemeIcon>
<Box w={"85%"}> <Box w={"85%"}>
<Text c={MainColor.white} fw={"bold"}>{e?.value}</Text> <Text c={MainColor.white} fw={"bold"}>
{e?.value}
</Text>
</Box> </Box>
</Group> </Group>
))} ))}
</Stack> </Stack>
</Box> </Box>
</> </>
} )}
</Stack> </Stack>
</>;
<UIGlobal_Modal
title={
"Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${dataProfile?.nomor}?text=Hallo , saya tertarik dengan profile anda sebagai rekan HIPMI. Apakah saya bisa melanjutkan percakapan?`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</>
);
} }

45
src/app_modules/map/_component/detail_data.tsx
View File

@@ -18,6 +18,8 @@ import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface"; import { MODEL_MAP } from "../lib/interface";
import { ComponentMap_LoadImageMap } from "./comp_load_image_map"; import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data"; import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export function ComponentMap_DetailData({ export function ComponentMap_DetailData({
mapId, mapId,
@@ -30,6 +32,7 @@ export function ComponentMap_DetailData({
const [data, setData] = useState<MODEL_MAP>(); const [data, setData] = useState<MODEL_MAP>();
const [dataUser, setDataUser] = useState<MODEL_USER>(); const [dataUser, setDataUser] = useState<MODEL_USER>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [openModal, setOpenModal] = useState(false);
useShallowEffect(() => { useShallowEffect(() => {
onLoadData(setData, setDataUser); onLoadData(setData, setDataUser);
@@ -46,9 +49,7 @@ export function ComponentMap_DetailData({
return ( return (
<> <>
<Stack mt={"lg"} spacing={"xl"} px={"md"}> <Stack mt={"lg"} spacing={"xl"} px={"md"}>
<ComponentGlobal_AvatarAndUsername <ComponentGlobal_AvatarAndUsername profile={dataUser?.Profile as any} />
profile={dataUser?.Profile as any}
/>
<ComponentMap_LoadImageMap fileId={data.imageId} /> <ComponentMap_LoadImageMap fileId={data.imageId} />
@@ -74,7 +75,13 @@ export function ComponentMap_DetailData({
<IconPhoneCall /> <IconPhoneCall />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{data?.Portofolio.tlpn}</Text> <Text
onClick={() => {
setOpenModal(true);
}}
>
+ {data?.Portofolio.tlpn}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> <Grid>
@@ -127,6 +134,36 @@ export function ComponentMap_DetailData({
</Button> </Button>
</Group> </Group>
</Stack> </Stack>
<UIGlobal_Modal
title={
"Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${data?.Portofolio.tlpn}?text=Hallo , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${data?.Portofolio.namaBisnis} ?`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</> </>
); );
} }