fix: user

Deskripsi:
- penambahan modal untuk memberi redirect ke whatsapp
This commit is contained in:
2025-01-03 14:22:10 +08:00
parent 85463f5a89
commit 215accbcaa
6 changed files with 494 additions and 285 deletions

View File

@@ -5,7 +5,8 @@ import {
UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate,
} 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() {
return (
@@ -13,6 +14,25 @@ export default function Voting_ComponentSkeletonViewPuh() {
<UIGlobal_LayoutTamplate
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>
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack>

View File

@@ -22,7 +22,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD;
dataMedsos: any;
imageId: string
imageId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
@@ -36,11 +36,18 @@ export function Portofolio_ComponentButtonSelanjutnya({
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 {
setLoading(true);
if (_.values(porto).includes("")) {
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
}
const res = await funCreatePortofolio({
profileId: profileId,
data: dataPortofolio as any,

View File

@@ -30,6 +30,8 @@ import {
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
export default function CreatePortofolio({
bidangBisnis,
@@ -69,12 +71,12 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
// input: {
// backgroundColor: MainColor.white,
// },
// required: {
// color: MainColor.red,
// },
}}
withAsterisk
label="Nama Bisnis"
@@ -88,17 +90,16 @@ export default function CreatePortofolio({
}}
/>
<Select
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
// input: {
// backgroundColor: MainColor.white,
// },
// required: {
// color: MainColor.red,
// },
}}
withAsterisk
label="Bidang Bisnis"
@@ -114,17 +115,18 @@ export default function CreatePortofolio({
});
}}
/>
<TextInput
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
// input: {
// backgroundColor: MainColor.white,
// },
// required: {
// color: MainColor.red,
// },
}}
withAsterisk
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={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
// input: {
// backgroundColor: MainColor.white,
// },
// required: {
// color: MainColor.red,
// },
}}
withAsterisk
label="Nomor Telepon "
@@ -159,19 +184,20 @@ export default function CreatePortofolio({
tlpn: val.target.value,
});
}}
/>
/> */}
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
}
// input: {
// backgroundColor: MainColor.white,
// },
// required: {
// color: MainColor.red,
// },
}}
maxLength={300}
autosize
@@ -208,7 +234,9 @@ export default function CreatePortofolio({
</AspectRatio>
) : (
<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">
Masukan logo bisnis anda untuk ditampilkan dalam portofolio
</Text>
@@ -308,9 +336,9 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
}
// input: {
// backgroundColor: MainColor.white,
// },
}}
label="Facebook"
maxLength={100}
@@ -327,9 +355,9 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
}
// input: {
// backgroundColor: MainColor.white,
// },
}}
label="Instagram"
maxLength={100}
@@ -346,9 +374,9 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
}
// input: {
// backgroundColor: MainColor.white,
// },
}}
label="Tiktok"
maxLength={100}
@@ -365,9 +393,9 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
}
// input: {
// backgroundColor: MainColor.white,
// },
}}
label="Twitter"
maxLength={100}
@@ -384,9 +412,9 @@ export default function CreatePortofolio({
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white
}
// input: {
// backgroundColor: MainColor.white,
// },
}}
label="Youtube"
maxLength={100}

View File

@@ -1,131 +1,186 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color";
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 { 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 { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
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() {
const [loading, setLoading] = useState(true)
const param = useParams<{ id: string }>()
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
const [loading, setLoading] = useState(true);
const param = useParams<{ id: string }>();
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
const [openModal, setOpenModal] = useState(false);
async function funGetPortofolio() {
try {
setLoading(true)
const response = await apiGetOnePortofolioById(param.id, "bisnis");
if (response.success) {
setDataPorto(response.data);
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
async function funGetPortofolio() {
try {
setLoading(true);
const response = await apiGetOnePortofolioById(param.id, "bisnis");
if (response.success) {
setDataPorto(response.data);
}
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
funGetPortofolio()
}, []);
useShallowEffect(() => {
funGetPortofolio();
}, []);
return (
<>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: MainColor.white,
}}
>
{
loading ?
<SkeletonDetailBisnis />
:
<Stack>
<Group position="apart">
<Title order={6}>Data Bisnis</Title>
<Text color={MainColor.yellow} fw={"bold"}>
id: {" "}
<Text span inherit>
#{dataPorto?.id_Portofolio}
</Text>
</Text>
</Group>
<Stack>
<SimpleGrid
cols={2}
spacing={"md"}
breakpoints={[
{ maxWidth: "62rem", cols: 2, spacing: "md" },
{ maxWidth: "48rem", cols: 1, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Box>
<Paper>
<ComponentGlobal_LoadImage fileId={String(dataPorto?.logoId)} />
</Paper>
</Box>
return (
<>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: MainColor.white,
}}
>
{loading ? (
<SkeletonDetailBisnis />
) : (
<Stack>
<Group position="apart">
<Title order={6}>Data Bisnis</Title>
<Text color={MainColor.yellow} fw={"bold"}>
id: {" "}
<Text span inherit>
#{dataPorto?.id_Portofolio}
</Text>
</Text>
</Group>
<Stack>
<SimpleGrid
cols={2}
spacing={"md"}
breakpoints={[
{ maxWidth: "62rem", cols: 2, spacing: "md" },
{ maxWidth: "48rem", cols: 1, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Box>
<Paper>
<ComponentGlobal_LoadImage
fileId={String(dataPorto?.logoId)}
/>
</Paper>
</Box>
<Box>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.bidangBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.tlpn}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.alamatKantor}</Text>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
</Stack>
<Box>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.bidangBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text
onClick={() => {
setOpenModal(true);
}}
>
+ {dataPorto?.tlpn}
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.alamatKantor}</Text>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
</Stack>
<Divider color={AccentColor.softblue} />
<Divider color={AccentColor.softblue} />
<Stack spacing={5}>
<Group spacing={"xs"}>
<IconPinned />
<Text fz={"sm"} fw={"bold"}>
Tentang Kami
</Text>
</Group>
<Text px={"sm"}>{dataPorto?.deskripsi}</Text>
</Stack>
</Stack>
}
<Stack spacing={5}>
<Group spacing={"xs"}>
<IconPinned />
<Text fz={"sm"} fw={"bold"}>
Tentang Kami
</Text>
</Group>
<Text px={"sm"}>{dataPorto?.deskripsi}</Text>
</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>
}
/>
</>
);
}

View File

@@ -1,131 +1,193 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color";
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 { 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 { 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 { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export default function ProfileDetail() {
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [dataProfile, setDataProfile] = useState<IUserProfile>()
const listInformation = [
{
icon: <IconPhone color={MainColor.white} />,
value: "+" + dataProfile?.nomor,
},
{
icon: <IconBrandGmail color={MainColor.white} />,
value: dataProfile?.email,
},
{
icon: <IconHome color={MainColor.white} />,
value: dataProfile?.alamat,
},
{
icon:
dataProfile?.jenisKelamin === "Laki-laki" ? (
<IconGenderMale color={MainColor.white} />
) : (
<IconGenderFemale color={MainColor.white}/>
),
value: dataProfile?.jenisKelamin,
},
];
const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [dataProfile, setDataProfile] = useState<IUserProfile>();
const [openModal, setOpenModal] = useState(false);
const listInformation = [
{
icon: <IconPhone color={MainColor.white} />,
value: (
<Text span inherit onClick={() => setOpenModal(true)}>
{"+" + dataProfile?.nomor}
</Text>
),
},
{
icon: <IconBrandGmail color={MainColor.white} />,
value: dataProfile?.email,
},
{
icon: <IconHome color={MainColor.white} />,
value: dataProfile?.alamat,
},
{
icon:
dataProfile?.jenisKelamin === "Laki-laki" ? (
<IconGenderMale color={MainColor.white} />
) : (
<IconGenderFemale color={MainColor.white} />
),
value: dataProfile?.jenisKelamin,
},
];
async function getProfile() {
try {
setLoading(true)
const response = await apiGetUserProfile(`?profile=${param.id}`)
if (response.success) {
setDataProfile(response.data);
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
async function getProfile() {
try {
setLoading(true);
const response = await apiGetUserProfile(`?profile=${param.id}`);
if (response.success) {
setDataProfile(response.data);
}
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
getProfile();
}, []);
useShallowEffect(() => {
getProfile()
}, []);
return <>
return (
<>
<Stack
spacing={0}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: MainColor.white
}}
spacing={0}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: MainColor.white,
}}
>
{
loading ?
<SkeletonProfile /> :
<>
<Box>
<Profile_ComponentLoadBackgroundImage
fileId={dataProfile?.imageBackgroundId as any}
size={500}
/>
{loading ? (
<SkeletonProfile />
) : (
<>
<Box>
<Profile_ComponentLoadBackgroundImage
fileId={dataProfile?.imageBackgroundId as any}
size={500}
/>
<Box
sx={{
position: "relative",
bottom: 60,
margin: "auto",
width: "100%",
marginBottom: -30,
}}
>
<Center>
<Profile_ComponentAvatarProfile
fileId={dataProfile?.imageId as any}
style={{
borderStyle: "solid",
borderColor: AccentColor.darkblue,
borderWidth: "2px",
}}
/>
</Center>
<Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1} c={MainColor.white}>
{dataProfile?.name}
</Text>
<Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}>
@{dataProfile?.username}
</Text>
</Stack>
</Box>
</Box>
<Box>
<Stack spacing={"xs"}>
{listInformation.map((e, i) => (
<Group key={i} align="flex-start">
<ThemeIcon
style={{
backgroundColor: "transparent",
}}
>
{e.icon}
</ThemeIcon>
<Box w={"85%"}>
<Text c={MainColor.white} fw={"bold"}>{e?.value}</Text>
</Box>
</Group>
))}
</Stack>
</Box>
</>
}
<Box
sx={{
position: "relative",
bottom: 60,
margin: "auto",
width: "100%",
marginBottom: -30,
}}
>
<Center>
<Profile_ComponentAvatarProfile
fileId={dataProfile?.imageId as any}
style={{
borderStyle: "solid",
borderColor: AccentColor.darkblue,
borderWidth: "2px",
}}
/>
</Center>
<Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1} c={MainColor.white}>
{dataProfile?.name}
</Text>
<Text
fs={"italic"}
fz={"sm"}
c={MainColor.white}
lineClamp={1}
>
@{dataProfile?.username}
</Text>
</Stack>
</Box>
</Box>
<Box>
<Stack spacing={"xs"}>
{listInformation.map((e, i) => (
<Group key={i} align="flex-start">
<ThemeIcon
style={{
backgroundColor: "transparent",
}}
>
{e.icon}
</ThemeIcon>
<Box w={"85%"}>
<Text c={MainColor.white} fw={"bold"}>
{e?.value}
</Text>
</Box>
</Group>
))}
</Stack>
</Box>
</>
)}
</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>
}
/>
</>
);
}

View File

@@ -18,6 +18,8 @@ import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface";
import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export function ComponentMap_DetailData({
mapId,
@@ -30,6 +32,7 @@ export function ComponentMap_DetailData({
const [data, setData] = useState<MODEL_MAP>();
const [dataUser, setDataUser] = useState<MODEL_USER>();
const [isLoading, setIsLoading] = useState(false);
const [openModal, setOpenModal] = useState(false);
useShallowEffect(() => {
onLoadData(setData, setDataUser);
@@ -46,9 +49,7 @@ export function ComponentMap_DetailData({
return (
<>
<Stack mt={"lg"} spacing={"xl"} px={"md"}>
<ComponentGlobal_AvatarAndUsername
profile={dataUser?.Profile as any}
/>
<ComponentGlobal_AvatarAndUsername profile={dataUser?.Profile as any} />
<ComponentMap_LoadImageMap fileId={data.imageId} />
@@ -74,7 +75,13 @@ export function ComponentMap_DetailData({
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.tlpn}</Text>
<Text
onClick={() => {
setOpenModal(true);
}}
>
+ {data?.Portofolio.tlpn}
</Text>
</Grid.Col>
</Grid>
<Grid>
@@ -127,6 +134,36 @@ export function ComponentMap_DetailData({
</Button>
</Group>
</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>
}
/>
</>
);
}