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

Deskripsi:

Browse Source 
Fix: event beranda dan status > tampilan
Feature: create event dan halaman detail status
Fix: Basebox: Hide safearea kalau ada tabs
Fix: TextCustom: Tambah size xlarge
Fix: ScrollCustom penambhan props value

# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-18 16:30:56 +08:00
parent b8b1efc71e
commit f9e96aa077
12 changed files with 346 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
app/(application)/(user)/event/(tabs)/index.tsx
View File

@@ -1,30 +1,151 @@
import {
AvatarCustom,
BaseBox,
Grid,
StackCustom,
TextCustom,
} from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import FloatingButton from "@/components/Button/FloatingButton";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { GStyles } from "@/styles/global-styles";
import { router } from "expo-router";
import { Text, TouchableHighlight, View } from "react-native";
export default function Event() {
const index = "test-id-event";
return (
<ViewWrapper
hideFooter
floatingButton={
<FloatingButton onPress={() => router.push("/event/create")} />
}
>
<TouchableHighlight onPress={() => router.push("/event/detail/1")}>
<View
style={{
padding: 20,
backgroundColor: MainColor.darkblue,
borderRadius: 10,
borderColor: AccentColor.blue,
borderWidth: 1,
}}
>
<Text style={GStyles.textLabel}>Event</Text>
</View>
</TouchableHighlight>
{/* {Array.from({ length: 10 }).map((_, index) => (
<BaseBox key={index}>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
))} */}
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
obcaecati quia suscipit numquam, voluptates commodi porro impedit
natus quos doloremque!
</TextCustom>
</StackCustom>
</BaseBox>
</ViewWrapper>
);
}

60
app/(application)/(user)/event/(tabs)/status.tsx
View File

@@ -1,11 +1,63 @@
import {
BaseBox,
Grid,
ScrollableCustom,
StackCustom,
TextCustom,
} from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { GStyles } from "@/styles/global-styles";
import { Text } from "react-native";
import { masterStatus } from "@/lib/dummy-data/_master/status";
import { useState } from "react";
export default function Status() {
const id = "test-id-event";
const [activeCategory, setActiveCategory] = useState<string | null>(
"publish"
);
const handlePress = (item: any) => {
setActiveCategory(item.value);
// tambahkan logika lain seperti filter dsb.
};
const scrollComponent = (
<ScrollableCustom
data={masterStatus.map((e, i) => ({
id: i,
label: e.label,
value: e.value,
}))}
onButtonPress={handlePress}
activeId={activeCategory as any}
/>
);
return (
<ViewWrapper>
<Text style={GStyles.textLabel}>Status</Text>
<ViewWrapper headerComponent={scrollComponent}>
<BaseBox href={`/event/${id}/${activeCategory}/detail-event`}>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={8}>
<TextCustom truncate bold>
Lorem ipsum,{" "}
<TextCustom color="green">{activeCategory}</TextCustom> dolor
sit amet consectetur adipisicing elit.
</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom>{new Date().toLocaleDateString()}</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora,
atque. Aperiam minima asperiores dicta perferendis quis adipisci,
dolore optio porro!
</TextCustom>
</StackCustom>
</BaseBox>
</ViewWrapper>
);
}

69
app/(application)/(user)/event/[id]/[detail]/detail-event.tsx Normal file
View File

@@ -0,0 +1,69 @@
import {
BaseBox,
Grid,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import LeftButtonCustom from "@/components/Button/BackButton";
import { Stack, useLocalSearchParams } from "expo-router";
export default function EventDetail() {
const { id, detail } = useLocalSearchParams();
const listData = [
{
title: "Lokasi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
},
{
title: "Tipe Acara",
value: "Workshop",
},
{
title: "Tanggal Mulai",
value: "Senin, 18 Juli 2025, 10:00 WIB",
},
{
title: "Tanggal Berakhir",
value: "Selasa, 19 Juli 2025, 12:00 WIB",
},
{
title: "Deskripsi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
},
];
return (
<>
<Stack.Screen
options={{
title: `Detail ${detail}`,
headerLeft: () => <LeftButtonCustom />,
}}
/>
<ViewWrapper>
<BaseBox>
<StackCustom>
<TextCustom bold align="center" size="xlarge">
Judul event {id}
</TextCustom>
{listData.map((item, index) => (
<Grid key={index}>
<Grid.Col span={4}>
<TextCustom bold>{item.title}</TextCustom>
</Grid.Col>
<Grid.Col span={8}>
<TextCustom>{item.value}</TextCustom>
</Grid.Col>
</Grid>
))}
</StackCustom>
</BaseBox>
</ViewWrapper>
</>
);
}

9
app/(application)/(user)/event/create.tsx
View File

@@ -41,14 +41,14 @@ export default function EventCreate() {
};
const buttonSubmit = (
<BoxButtonOnFooter>
<ButtonCustom title="Simpan" onPress={handlerSubmit} />
</BoxButtonOnFooter>
// <BoxButtonOnFooter>
// </BoxButtonOnFooter>
);
return (
<>
<ViewWrapper footerComponent={buttonSubmit}>
<ViewWrapper>
<StackCustom gap={"xs"}>
<TextInputCustom
placeholder="Masukkan nama event"
@@ -93,7 +93,10 @@ export default function EventCreate() {
showCount
maxLength={100}
/>
{buttonSubmit}
</StackCustom>
</ViewWrapper>
</>
);

51
app/(application)/(user)/notifications/index.tsx
View File

@@ -11,18 +11,18 @@ import { useState } from "react";
import { View } from "react-native";
const categories = [
{ id: 1, label: "Semua" },
{ id: 2, label: "Event" },
{ id: 3, label: "Job" },
{ id: 4, label: "Voting" },
{ id: 5, label: "Donasi" },
{ id: 6, label: "Investasi" },
{ id: 7, label: "Forum" },
{ id: 8, label: "Collaboration" },
{ value: "all", label: "Semua" },
{ value: "event", label: "Event" },
{ value: "job", label: "Job" },
{ value: "voting", label: "Voting" },
{ value: "donasi", label: "Donasi" },
{ value: "investasi", label: "Investasi" },
{ value: "forum", label: "Forum" },
{ value: "collaboration", label: "Collaboration" },
];
const selectedCategory = (id: number) => {
const category = categories.find((c) => c.id === id);
const selectedCategory = (value: string) => {
const category = categories.find((c) => c.value === value);
return category?.label;
};
@@ -31,7 +31,7 @@ const BoxNotification = ({
activeCategory,
}: {
index: number;
activeCategory: number | null;
activeCategory: string | null;
}) => {
return (
<>
@@ -39,13 +39,13 @@ const BoxNotification = ({
onPress={() =>
console.log(
"Notification >",
selectedCategory(activeCategory as number)
selectedCategory(activeCategory as string)
)
}
>
<StackCustom>
<TextCustom bold>
# {selectedCategory(activeCategory as number)}
# {selectedCategory(activeCategory as string)}
</TextCustom>
<View
@@ -81,38 +81,31 @@ const BoxNotification = ({
};
export default function Notifications() {
const [activeCategory, setActiveCategory] = useState<number | null>(1);
const [activeCategory, setActiveCategory] = useState<string | null>("all");
const handlePress = (item: any) => {
setActiveCategory(item.id);
setActiveCategory(item.value);
// tambahkan logika lain seperti filter dsb.
};
return (
<ViewWrapper
headerComponent={
<ScrollableCustom
data={categories}
data={categories.map((e, i) => ({
id: i,
label: e.label,
value: e.value,
}))}
onButtonPress={handlePress}
activeId={activeCategory as any}
activeId={activeCategory as string}
/>
}
>
{Array.from({ length: 20 }).map((e, i) => (
<View key={i}>
<BoxNotification index={i} activeCategory={activeCategory} />
<BoxNotification index={i} activeCategory={activeCategory as any} />
</View>
))}
{/* Konten utama di sini */}
{/* <View style={{ flex: 1 }}>
<Text style={{ color: "white" }}>
{activeCategory
? `Kategori Aktif: ${
categories.find((c) => c.id === activeCategory)?.label
}`
: "Pilih kategori"}
</Text>
</View> */}
</ViewWrapper>
);
}

30
components/Box/BaseBox.tsx
View File

@@ -1,10 +1,22 @@
import { AccentColor } from "@/constants/color-palet";
import { PADDING_EXTRA_SMALL, PADDING_MEDIUM, PADDING_SMALL } from "@/constants/constans-value";
import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
import {
PADDING_EXTRA_SMALL,
PADDING_MEDIUM,
PADDING_SMALL,
} from "@/constants/constans-value";
import { Href, router } from "expo-router";
import {
StyleProp,
TouchableHighlight,
TouchableOpacity,
View,
ViewStyle,
} from "react-native";
interface BaseBoxProps {
children: React.ReactNode;
style?: StyleProp<ViewStyle>;
href?: Href;
onPress?: () => void;
marginBottom?: number;
padding?: number;
@@ -15,16 +27,19 @@ interface BaseBoxProps {
export default function BaseBox({
children,
style,
href,
onPress,
marginBottom = PADDING_MEDIUM,
paddingBlock = PADDING_EXTRA_SMALL,
paddingBlock = PADDING_MEDIUM,
paddingInline = PADDING_SMALL,
}: BaseBoxProps) {
return (
<>
{onPress ? (
<TouchableHighlight
onPress={onPress}
{onPress || href ? (
<TouchableOpacity
activeOpacity={0.7}
onPress={href ? () => router.navigate(href) : onPress}
style={[
{
backgroundColor: AccentColor.darkblue,
@@ -37,10 +52,9 @@ export default function BaseBox({
},
style,
]}
// activeOpacity={0.7}
>
<View>{children}</View>
</TouchableHighlight>
</TouchableOpacity>
) : (
<View
style={[

3
components/Scroll/ScrollCustom.tsx
View File

@@ -6,6 +6,7 @@ import ButtonCustom from "../Button/ButtonCustom";
interface ButtonData {
id: string | number;
label: string;
value: string;
}
interface ScrollableCustomProps {
@@ -27,7 +28,7 @@ const ScrollableCustom = ({
style={styles.scrollView}
>
{data.map((item) => {
const isActive = activeId === item.id;
const isActive = activeId === item.value;
return (
<ButtonCustom

11
components/Text/TextCustom.tsx
View File

@@ -3,6 +3,7 @@ import {
TEXT_SIZE_LARGE,
TEXT_SIZE_MEDIUM,
TEXT_SIZE_SMALL,
TEXT_SIZE_XLARGE,
} from "@/constants/constans-value";
import React from "react";
import {
@@ -21,7 +22,7 @@ interface TextCustomProps {
style?: StyleProp<TextStyle>;
bold?: boolean;
semiBold?: boolean;
size?: "default" | "large" | "small";
size?: "default" | "large" | "small" | "xlarge";
color?: "default" | "yellow" | "red" | "gray" | "green" | "black"
align?: TextAlign; // Prop untuk alignment
truncate?: boolean | number;
@@ -51,6 +52,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
// Size
if (size === "large") selectedStyles.push(styles.large);
else if (size === "xlarge") selectedStyles.push(styles.xlarge);
else if (size === "small") selectedStyles.push(styles.small);
// Color
@@ -113,11 +115,14 @@ export const styles = StyleSheet.create({
fontFamily: "Poppins-SemiBold",
fontWeight: "500",
},
small: {
fontSize: TEXT_SIZE_SMALL,
},
large: {
fontSize: TEXT_SIZE_LARGE,
},
small: {
fontSize: TEXT_SIZE_SMALL,
xlarge: {
fontSize: TEXT_SIZE_XLARGE,
},
yellow: {
color: MainColor.yellow,

18
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -20,15 +20,23 @@ interface ViewWrapperProps {
headerComponent?: React.ReactNode;
footerComponent?: React.ReactNode;
floatingButton?: React.ReactNode;
hideFooter?: boolean;
style?: StyleProp<ViewStyle>;
}
/**
*
* @param hideFooter
* @returns meneyembunyikan footer ketika menggunakan tabs (misal: bottom tab)
*/
const ViewWrapper = ({
children,
withBackground = false,
headerComponent,
footerComponent,
floatingButton,
hideFooter = false,
style,
}: ViewWrapperProps) => {
const assetBackground = require("../../assets/images/main-background.png");
@@ -78,10 +86,12 @@ const ViewWrapper = ({
{footerComponent}
</SafeAreaView>
) : (
<SafeAreaView
edges={["bottom"]}
style={{ backgroundColor: MainColor.darkblue }}
/>
hideFooter ? null : (
<SafeAreaView
edges={["bottom"]}
style={{ backgroundColor: MainColor.darkblue }}
/>
)
)}
{/* Floating Component (misal: FAB) */}

2
constants/constans-value.ts
View File

@@ -7,6 +7,7 @@ export {
TEXT_SIZE_SMALL,
TEXT_SIZE_MEDIUM,
TEXT_SIZE_LARGE,
TEXT_SIZE_XLARGE,
ICON_SIZE_SMALL,
ICON_SIZE_MEDIUM,
DRAWER_HEIGHT,
@@ -27,6 +28,7 @@ const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
const TEXT_SIZE_SMALL = 12;
const TEXT_SIZE_MEDIUM = 14;
const TEXT_SIZE_LARGE = 16;
const TEXT_SIZE_XLARGE = 18;
// Icon Size
const ICON_SIZE_BUTTON = 18

6
lib/dummy-data/_master/status.tsx Normal file
View File

@@ -0,0 +1,6 @@
export const masterStatus = [
{ value: "publish", label: "Publish" },
{ value: "review", label: "Review" },
{ value: "draft", label: "Draft" },
{ value: "reject", label: "Reject" },
];

4
screens/Authentication/LoginView.tsx
View File

@@ -32,11 +32,11 @@ export default function LoginView() {
// router.navigate("/verification");
// router.navigate(`/(application)/(user)/profile/${id}`);
// router.navigate("/(application)/(user)/home");
router.navigate("/(application)/(user)/home");
// router.navigate(`/(application)/profile/${id}/edit`);
// router.navigate(`/(application)/(user)/portofolio/${id}`)
// router.navigate(`/(application)/(image)/preview-image/${id}`);
router.replace("/(application)/(user)/event/(tabs)");
// router.replace("/(application)/(user)/event/(tabs)");
}
return (