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

Invesment

Browse Source 
Add:
- screens/Invesment/ComponentBoxOnBottomDetail.tsx
- screens/Invesment/ButtonInvestasiSection.tsx
- app/(application)/(user)/investment/[id]/investor.tsx
- app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx

Fix:
- screens/Invesment/BoxDetailDataSection.tsx
- app/(application)/(user)/investment/[id]/[status]/detail.tsx
- app/(application)/(user)/_layout.tsx

## No Issue
This commit is contained in:
Bagasbanuna02
2025-07-31 14:47:40 +08:00
parent 54fc2a3d02
commit 7205cb0736
8 changed files with 259 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(application)/(user)/_layout.tsx
View File

@@ -258,6 +258,14 @@ export default function UserLayout() {
}}
/>
<Stack.Screen
name="investment/[id]/investor"
options={{
title: "Investor",
headerLeft: () => <BackButton />,
}}
/>
{/* ========== End Investment Section ========= */}
{/* ========== Donation Section ========= */}

58
app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx Normal file
View File

@@ -0,0 +1,58 @@
import {
BackButton,
BaseBox,
DrawerCustom,
MenuDrawerDynamicGrid,
TextCustom,
ViewWrapper
} from "@/components";
import { IconPlus } from "@/components/_Icon";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useState } from "react";
export default function InvestmentListOfNews() {
const { id } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false);
return (
<>
<Stack.Screen
options={{
title: "Daftar Berita",
headerLeft: () => <BackButton />,
// headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
}}
/>
<ViewWrapper>
{Array.from({ length: 15 }).map((_, index) => (
<BaseBox
key={index}
paddingBlock={5}
href={`/investment/${id}/(news)/${index + 1}`}
>
<TextCustom bold>Berita Terbaru {index + 1}</TextCustom>
</BaseBox>
))}
</ViewWrapper>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
label: "Tambah Berita",
path: `/investment/${id}/add-news`,
icon: <IconPlus />,
},
]}
onPressItem={(item) => {
router.push(item.path as any);
setOpenDrawer(false);
}}
/>
</DrawerCustom>
</>
);
}

81
app/(application)/(user)/investment/[id]/[status]/detail.tsx
View File

@@ -1,33 +1,27 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import {
BackButton,
BaseBox,
CenterCustom,
DotButton,
DrawerCustom,
Grid,
MenuDrawerDynamicGrid,
ProgressCustom,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
BackButton,
BaseBox,
DotButton,
DrawerCustom,
MenuDrawerDynamicGrid,
ProgressCustom,
Spacing,
StackCustom,
TextCustom,
ViewWrapper
} from "@/components";
import {
IconDocument,
IconEdit,
IconNews,
IconProspectus,
} from "@/components/_Icon";
import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
import { IMenuDrawerItem } from "@/components/_Interface/types";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import {
listDataNotPublishInvesment,
listDataPublishInvesment,
listDataNotPublishInvesment,
listDataPublishInvesment,
} from "@/lib/dummy-data/investment/dummy-data-not-publish";
import BoxDetailDataSection from "@/screens/Invesment/BoxDetailDataSection";
import Invesment_BoxDetailDataSection from "@/screens/Invesment/BoxDetailDataSection";
import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import _ from "lodash";
@@ -51,37 +45,10 @@ export default function InvestmentDetailStatus() {
};
const bottomSection = (
<Grid>
<Grid.Col span={6} style={{ paddingRight: 10 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/prospektus/file`}
>
<StackCustom>
<TextCustom align="center">Prospektus</TextCustom>
<CenterCustom>
<IconProspectus size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
<Grid.Col span={6} style={{ paddingLeft: 10 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/list-of-document`}
>
<StackCustom>
<TextCustom align="center">Dokumen</TextCustom>
<CenterCustom>
<IconDocument size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
</Grid>
<Invesment_ComponentBoxOnBottomDetail
id={id as string}
status={status as string}
/>
);
return (
@@ -98,6 +65,7 @@ export default function InvestmentDetailStatus() {
) : null,
}}
/>
<ViewWrapper>
<StackCustom gap={"sm"}>
{status === "publish" && (
@@ -108,7 +76,7 @@ export default function InvestmentDetailStatus() {
</StackCustom>
</BaseBox>
)}
<BoxDetailDataSection
<Invesment_BoxDetailDataSection
data={
status === "publish"
? listDataPublishInvesment
@@ -117,8 +85,9 @@ export default function InvestmentDetailStatus() {
bottomSection={bottomSection}
/>
<Investment_ButtonStatusSection status={status as string} />
<Spacing />
<Investment_ButtonInvestasiSection isMine={false} />
</StackCustom>
<Spacing />
</ViewWrapper>
{/* ========= Draft Drawer ========= */}

21
app/(application)/(user)/investment/[id]/investor.tsx Normal file
View File

@@ -0,0 +1,21 @@
import {
AvatarUsernameAndOtherComponent,
BoxWithHeaderSection,
TextCustom,
ViewWrapper,
} from "@/components";
export default function InvestmentInvestor() {
return (
<>
<ViewWrapper>
{Array.from({ length: 10 }).map((_, index) => (
<BoxWithHeaderSection key={index}>
<AvatarUsernameAndOtherComponent />
<TextCustom bold>Rp. 7.000.000</TextCustom>
</BoxWithHeaderSection>
))}
</ViewWrapper>
</>
);
}

4
components/Grid/GridCustom.tsx
View File

@@ -90,8 +90,8 @@ const Col: React.FC<ColProps> = ({ children, span, style }) => {
col: {
flexBasis: `${(100 / columns) * colSpan}%`,
paddingVertical: margin,
// marginBottom: gap,
marginBlock: gap,
marginBottom: gap,
// marginBlock: gap,
},
});

4
screens/Invesment/BoxDetailDataSection.tsx
View File

@@ -8,7 +8,7 @@ import {
} from "@/components";
import { View } from "react-native";
export default function BoxDetailDataSection({
export default function Invesment_BoxDetailDataSection({
title,
data,
bottomSection,
@@ -41,7 +41,7 @@ export default function BoxDetailDataSection({
</Grid.Col>
</Grid>
))}
<Spacing />
{bottomSection}
</StackCustom>
</BaseBox>

17
screens/Invesment/ButtonInvestasiSection.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { ButtonCustom } from "@/components";
export default function Investment_ButtonInvestasiSection({
isMine,
}: {
isMine: boolean;
}) {
return (
<>
{isMine ? (
<ButtonCustom>Beli Saham</ButtonCustom>
) : (
<ButtonCustom disabled>Investasi Ini Milik Anda</ButtonCustom>
)}
</>
);
}

126
screens/Invesment/ComponentBoxOnBottomDetail.tsx Normal file
View File

@@ -0,0 +1,126 @@
import {
BaseBox,
CenterCustom,
Grid,
StackCustom,
TextCustom,
} from "@/components";
import { IconDocument, IconNews, IconProspectus } from "@/components/_Icon";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
export default function Invesment_ComponentBoxOnBottomDetail({
id,
status,
}: {
id: string;
status: string;
}) {
return (
<>
{status === "publish" ? (
<>
<Grid>
<Grid.Col span={6} style={{ paddingInline: 5 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/prospektus/file`}
>
<StackCustom>
<TextCustom align="center">Prospektus</TextCustom>
<CenterCustom>
<IconProspectus size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
<Grid.Col span={6} style={{ paddingInline: 5 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/list-of-document`}
>
<StackCustom>
<TextCustom align="center">Dokumen</TextCustom>
<CenterCustom>
<IconDocument size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6} style={{ paddingInline: 5 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/investor`}
>
<StackCustom>
<TextCustom align="center">Investor</TextCustom>
<CenterCustom>
<Ionicons
name="cash-outline"
size={50}
color={MainColor.white}
/>
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
<Grid.Col span={6} style={{ paddingInline: 5 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/list-of-news`}
>
<StackCustom>
<TextCustom align="center">Berita</TextCustom>
<CenterCustom>
<IconNews size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
</Grid>
</>
) : (
<Grid>
<Grid.Col span={6} style={{ paddingRight: 10 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/prospektus/file`}
>
<StackCustom>
<TextCustom align="center">Prospektus</TextCustom>
<CenterCustom>
<IconProspectus size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
<Grid.Col span={6} style={{ paddingLeft: 10 }}>
<BaseBox
backgroundColor={AccentColor.blue}
style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
href={`/investment/${id}/list-of-document`}
>
<StackCustom>
<TextCustom align="center">Dokumen</TextCustom>
<CenterCustom>
<IconDocument size={50} color={MainColor.white} />
</CenterCustom>
</StackCustom>
</BaseBox>
</Grid.Col>
</Grid>
)}
</>
);
}