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

feature & fix

Browse Source 
deskripsi:
- new component : Center
- fix component : Button > disable props
- feture : fix portofolio > edit, edit logo, edit sosmed
- fix feature : maps > edit map, custom-pin
- fix featue : profile > update photo
# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-10 15:03:52 +08:00
parent e68a18bb89
commit b8ed577fea
10 changed files with 373 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/(application)/(user)/maps/[id]/custom-pin.tsx
View File

@@ -1,10 +1,54 @@
import { TextCustom, ViewWrapper } from "@/components";
import {
AvatarCustom,
BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly,
ButtonCustom,
InformationBox,
MapCustom,
Spacing,
StackCustom,
ViewWrapper,
} from "@/components";
import CenterCustom from "@/components/Center/CenterCustom";
import { router, useLocalSearchParams } from "expo-router";
export default function MapsCustomPin() {
const { id } = useLocalSearchParams();
const buttonFooter = (
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => {
console.log(`Simpan maps ${id}`);
router.replace(`/portofolio/${id}`);
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper>
<TextCustom>Maps Custom Pin</TextCustom>
<ViewWrapper footerComponent={buttonFooter}>
<StackCustom>
<InformationBox text="Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda." />
<CenterCustom>
<AvatarCustom size="xl" />
</CenterCustom>
<ButtonCenteredOnly
onPress={() => console.log("Upload")}
icon="upload"
>
Upload
</ButtonCenteredOnly>
<Spacing />
<BaseBox>
<MapCustom />
</BaseBox>
<Spacing />
</StackCustom>
</ViewWrapper>
</>
);

60
app/(application)/(user)/maps/[id]/edit.tsx
View File

@@ -1,11 +1,59 @@
import { TextCustom, ViewWrapper } from "@/components";
import {
BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly,
ButtonCustom,
InformationBox,
LandscapeFrameUploaded,
MapCustom,
Spacing,
TextInputCustom,
ViewWrapper
} from "@/components";
import { router, useLocalSearchParams } from "expo-router";
export default function MapsEdit() {
const { id } = useLocalSearchParams();
const buttonFooter = (
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => {
console.log(`Simpan maps ${id}`);
router.replace(`/portofolio/${id}`);
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper>
<TextCustom>Maps Edit</TextCustom>
</ViewWrapper>
</>
<ViewWrapper footerComponent={buttonFooter}>
<InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
<BaseBox>
<MapCustom />
</BaseBox>
<TextInputCustom
required
label="Nama Pin"
placeholder="Masukkan nama pin maps"
/>
<Spacing />
<InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
<LandscapeFrameUploaded />
<ButtonCenteredOnly
icon="upload"
onPress={() => {
console.log("Upload foto ");
router.navigate(`/take-picture/${id}`);
}}
>
Upload
</ButtonCenteredOnly>
<Spacing height={50} />
</ViewWrapper>
);
}

2
app/(application)/(user)/maps/create.tsx
View File

@@ -18,7 +18,7 @@ export default function MapsCreate() {
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => {
console.log("Simpan");
console.log(`Simpan maps ${id}`);
router.replace(`/portofolio/${id}`);
}}
>

43
app/(application)/(user)/portofolio/[id]/edit-logo.tsx
View File

@@ -1,10 +1,47 @@
import { TextCustom, ViewWrapper } from "@/components";
import {
AvatarCustom,
BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly,
ButtonCustom,
ViewWrapper,
} from "@/components";
import { router, useLocalSearchParams } from "expo-router";
export default function PortofolioEditLogo() {
const { id } = useLocalSearchParams();
const buttonFooter = (
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => {
console.log("Simpan logo ");
router.back();
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper>
<TextCustom>Portofolio Edit Logo</TextCustom>
<ViewWrapper footerComponent={buttonFooter}>
<BaseBox
style={{
alignItems: "center",
justifyContent: "center",
height: 250,
}}
>
<AvatarCustom size="xl" />
</BaseBox>
<ButtonCenteredOnly
icon="upload"
onPress={() => router.navigate(`/take-picture/${id}`)}
>
Update
</ButtonCenteredOnly>
</ViewWrapper>
</>
);

31
app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
View File

@@ -1,10 +1,35 @@
import { TextCustom, ViewWrapper } from "@/components";
import {
BoxButtonOnFooter,
ButtonCustom,
TextInputCustom,
ViewWrapper,
} from "@/components";
import { useLocalSearchParams, router } from "expo-router";
export default function PortofolioEditSocialMedia() {
const { id } = useLocalSearchParams();
const buttonFooter = (
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => {
console.log(`Simpan sosmed ${id}`);
router.back();
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper>
<TextCustom>Portofolio Edit Social Media</TextCustom>
<ViewWrapper footerComponent={buttonFooter}>
<TextInputCustom label="Tiktok" placeholder="Masukkan tiktok" />
<TextInputCustom label="Instagram" placeholder="Masukkan instagram" />
<TextInputCustom label="Facebook" placeholder="Masukkan facebook" />
<TextInputCustom label="Twitter" placeholder="Masukkan twitter" />
<TextInputCustom label="Youtube" placeholder="Masukkan youtube" />
</ViewWrapper>
</>
);

146
app/(application)/(user)/portofolio/[id]/edit.tsx
View File

@@ -1,10 +1,150 @@
import { TextCustom, ViewWrapper } from "@/components";
import {
BoxButtonOnFooter,
ButtonCenteredOnly,
ButtonCustom,
Grid,
SelectCustom,
Spacing,
StackCustom,
TextAreaCustom,
TextCustom,
TextInputCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
import { Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number";
export default function PortofolioEdit() {
const { id } = useLocalSearchParams();
const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
const [inputValue, setInputValue] = useState<string>("");
const [data, setData] = useState({
name: "",
bidang_usaha: "",
sub_bidang_usaha: "",
alamat: "",
nomor_telepon: "",
deskripsi: "",
});
function handleInputValue(phoneNumber: string) {
setInputValue(phoneNumber);
}
function handleSelectedCountry(country: ICountry) {
setSelectedCountry(country);
}
function handleSave() {
console.log(`Update portofolio berhasil ${id}`);
router.back();
}
const buttonUpdate = (
<BoxButtonOnFooter>
<ButtonCustom onPress={handleSave}>Simpan</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper>
<TextCustom>Portofolio Edit</TextCustom>
<ViewWrapper footerComponent={buttonUpdate}>
<StackCustom gap={"xs"}>
<TextInputCustom
required
label="Nama Bisnis"
placeholder="Masukkan nama bisnis"
/>
<SelectCustom
label="Bidang Usaha"
required
data={dummyMasterBidangBisnis.map((item) => ({
label: item.name,
value: item.id,
}))}
value={data.bidang_usaha}
onChange={(value) => {
setData({ ...(data as any), bidang_usaha: value });
}}
/>
<Grid>
<Grid.Col span={10}>
<SelectCustom
// disabled
label="Sub Bidang Usaha"
required
data={dummyMasterSubBidangBisnis.map((item) => ({
label: item.name,
value: item.id,
}))}
value={data.sub_bidang_usaha}
onChange={(value) => {
setData({ ...(data as any), sub_bidang_usaha: value });
}}
/>
</Grid.Col>
<Grid.Col
span={2}
style={{ alignItems: "center", justifyContent: "center" }}
>
<TouchableOpacity onPress={() => console.log("delete")}>
<Ionicons name="trash" size={24} color={MainColor.red} />
</TouchableOpacity>
</Grid.Col>
</Grid>
<ButtonCenteredOnly onPress={() => console.log("add")}>
Tambah Pilihan
</ButtonCenteredOnly>
<Spacing />
<View>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<TextCustom semiBold style={{ color: MainColor.white_gray }}>
Nomor Telepon
</TextCustom>
<Text style={{ color: "red" }}> *</Text>
</View>
<Spacing height={5} />
<PhoneInput
value={inputValue}
onChangePhoneNumber={handleInputValue}
selectedCountry={selectedCountry}
onChangeSelectedCountry={handleSelectedCountry}
defaultCountry="ID"
placeholder="xxx-xxx-xxx"
/>
</View>
<Spacing />
<TextInputCustom
required
label="Alamat Bisnis"
placeholder="Masukkan alamat bisnis"
/>
<TextAreaCustom
label="Deskripsi Bisnis"
placeholder="Masukkan deskripsi bisnis"
value={data.deskripsi}
onChangeText={(value: any) =>
setData({ ...data, deskripsi: value })
}
autosize
minRows={2}
maxRows={5}
required
showCount
maxLength={100}
/>
<Spacing />
</StackCustom>
</ViewWrapper>
</>
);

9
app/(application)/(user)/profile/[id]/update-photo.tsx
View File

@@ -1,13 +1,12 @@
import {
AvatarCustom,
BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly,
ButtonCustom,
} from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import DUMMY_IMAGE from "@/constants/dummy-image-value";
import { router, useLocalSearchParams } from "expo-router";
import { Image } from "react-native";
export default function UpdatePhotoProfile() {
const { id } = useLocalSearchParams();
@@ -28,11 +27,7 @@ export default function UpdatePhotoProfile() {
<BaseBox
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
>
<Image
source={DUMMY_IMAGE.avatar}
resizeMode="cover"
style={{ width: 200, height: 200 }}
/>
<AvatarCustom size="xl" />
</BaseBox>
<ButtonCenteredOnly

7
components/Button/ButtonCustom.tsx
View File

@@ -38,10 +38,11 @@ const ButtonCustom: React.FC<ButtonProps> = ({
<TouchableOpacity
style={[
stylesButton.button,
disabled && stylesButton.disabled,
style,
{ borderRadius: radius },
{ backgroundColor },
disabled
? [stylesButton.disabled, { backgroundColor: MainColor.disabled }]
: { backgroundColor },
style,
]}
onPress={onPress}
disabled={disabled}

51
components/Center/CenterCustom.tsx Normal file
View File

@@ -0,0 +1,51 @@
// Center.tsx
import React from "react";
import { View, StyleSheet, ViewStyle } from "react-native";
type JustifyContent =
| "flex-start"
| "flex-end"
| "center"
| "space-between"
| "space-around"
| "space-evenly";
type AlignItems = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
interface CenterProps {
children: React.ReactNode;
style?: ViewStyle;
direction?: "row" | "column";
justifyContent?: JustifyContent;
alignItems?: AlignItems;
}
const CenterCustom: React.FC<CenterProps> = ({
children,
style,
direction = "column",
justifyContent = "center",
alignItems = "center",
}) => {
return (
<View
style={[
styles.container,
{ flexDirection: direction },
{ justifyContent },
{ alignItems },
style,
]}
>
{children}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default CenterCustom;

5
screens/Authentication/LoginView.tsx
View File

@@ -31,9 +31,10 @@ export default function LoginView() {
console.log("login user id :", id);
// router.navigate("/verification");
// router.navigate(`/(application)/(user)/profile/${id}`);
router.navigate("/(application)/(user)/home");
router.navigate(`/(application)/(user)/profile/${id}`);
// router.navigate("/(application)/(user)/home");
// router.navigate(`/(application)/profile/${id}/edit`);
// router.navigate(`/(application)/(user)/portofolio/${id}`)
}
return (