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

upd: division

Browse Source 
Deskripsi:
- ui list divisi
- ui detail divisi

No Issues
This commit is contained in:
amel
2025-03-07 15:24:07 +08:00
parent d3779fcf5d
commit 5c8d621a5e
10 changed files with 317 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/(application)/division/[id]/index.tsx Normal file
View File

@@ -0,0 +1,35 @@
import ButtonBackHeader from "@/components/buttonBackHeader"
import DiscussionDivisionDetail from "@/components/division/discussionDivisionDetail"
import FileDivisionDetail from "@/components/division/fileDivisionDetail"
import FiturDivisionDetail from "@/components/division/fiturDivisionDetail"
import HeaderRightDivisionDetail from "@/components/division/headerDivisionDetail"
import TaskDivisionDetail from "@/components/division/taskDivisionDetail"
import CaraouselHome from "@/components/home/carouselHome"
import Styles from "@/constants/Styles"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { SafeAreaView, ScrollView, View } from "react-native"
export default function DetailDivisionFitur() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Judul Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDivisionDetail id={id} />,
}}
/>
<ScrollView>
<CaraouselHome />
<View style={[Styles.ph15, Styles.mb100]}>
<FiturDivisionDetail />
<TaskDivisionDetail />
<FileDivisionDetail />
<DiscussionDivisionDetail />
</View>
</ScrollView>
</SafeAreaView>
)
}

58
app/(application)/division/index.tsx
View File

@@ -1,7 +1,10 @@
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonTab from "@/components/buttonTab"
import InputSearch from "@/components/inputSearch"
import PaperGridContent from "@/components/paperGridContent"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons"
import { AntDesign, Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
@@ -39,6 +42,59 @@ export default function ListDivision() {
<View style={[Styles.mv05]}>
<Text>Filter : Dinas</Text>
</View>
{
isList
?
<View>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={'#384288'} />
</View>
}
title="Kasi Pelayanan"
titleWeight="normal"
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={'#384288'} />
</View>
}
title="Kaur TU dan Umum"
titleWeight="normal"
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={'#384288'} />
</View>
}
title="Kasi Pemerintahan"
titleWeight="normal"
/>
</View>
:
<View>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur Pelayanan" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kasi Pemerintahan" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur TU dan Umum" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
</View>
}
</View>
</ScrollView>

14
components/borderBottomItem.tsx
View File

@@ -1,8 +1,9 @@
import Styles from "@/constants/Styles";
import React from "react";
import { Pressable, Text, View } from "react-native";
import { Dimensions, Pressable, Text, View } from "react-native";
import LabelStatus from "./labelStatus";
import { Feather } from "@expo/vector-icons";
import { ColorsStatus } from "@/constants/ColorsStatus";
type Props = {
title: string
@@ -15,14 +16,19 @@ type Props = {
leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string
titleWeight?: 'normal' | 'bold'
bgColor?: 'white' | 'transparent'
width?: number
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight }: Props) {
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width }: Props) {
const lebarDim = Dimensions.get("window").width;
const lebar = width ? lebarDim * width / 100 : 'auto';
return (
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : borderType == 'all' ? Styles.wrapItemBorderAll : Styles.wrapItemBorderNone]} onPressOut={onPress}>
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : borderType == 'all' ? Styles.wrapItemBorderAll : Styles.wrapItemBorderNone, bgColor && bgColor == 'white' && ColorsStatus.white]} onPressOut={onPress}>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
<View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
<View style={[Styles.ml10]}>
<Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold]}>{title}</Text>
{

16
components/division/discussionDivisionDetail.tsx Normal file
View File

@@ -0,0 +1,16 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import DiscussionItem from "../discussionItem";
export default function DiscussionDivisionDetail() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
</View>
</View>
)
}

39
components/division/fileDivisionDetail.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import React from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
export default function FileDivisionDetail() {
const data = [...new Array(6).keys()];
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
<Carousel
ref={ref}
width={width}
height={100}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
renderItem={({ index }) => (
<View style={{ width: '30%' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
<Feather name="file-text" size={50} color="black" style={Styles.mr05} />
</View>
<Text style={[Styles.textMediumNormal, { textAlign: 'center' }]}>File_Pertama.png</Text>
</View>
)}
/>
</View>
)
}

70
components/division/fiturDivisionDetail.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { AntDesign, MaterialIcons, SimpleLineIcons } from "@expo/vector-icons"
import { Text, View } from "react-native"
import BorderBottomItem from "../borderBottomItem"
export default function FiturDivisionDetail() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Fitur</Text>
<View>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="filetext1" size={25} color={'#384288'} />
</View>
}
title="Tugas"
subtitle='15 Tugas'
width={28}
/>
<BorderBottomItem
bgColor="white"
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="attach-file" size={25} color={'#384288'} />
</View>
}
title="Dokumen"
subtitle='20 File'
width={28}
/>
</View>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<SimpleLineIcons name="bubbles" size={25} color={'#384288'} />
</View>
}
title="Diskusi"
subtitle='5 Diskusi'
width={28}
/>
<BorderBottomItem
bgColor="white"
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="calendar" size={25} color={'#384288'} />
</View>
}
title="Kalender"
subtitle='23 Acara'
width={28}
/>
</View>
</View>
</View>
)
}

40
components/division/headerDivisionDetail.tsx Normal file
View File

@@ -0,0 +1,40 @@
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { useState } from "react"
import { View } from "react-native"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
type Props = {
id: string | string[]
}
export default function HeaderRightDivisionDetail({ id }: Props) {
const [isVisible, setVisible] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
title="Informasi Divisi"
onPress={() => {
setVisible(false)
// router.push('/project/create')
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />}
title="Laporan Divisi"
onPress={() => {
setVisible(false)
}}
/>
</View>
</DrawerBottom>
</>
)
}

38
components/division/taskDivisionDetail.tsx Normal file
View File

@@ -0,0 +1,38 @@
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import React from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
export default function TaskDivisionDetail() {
const data = [...new Array(6).keys()];
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
return (
<View>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
<Carousel
ref={ref}
width={width}
height={100}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
renderItem={({ index }) => (
<View style={[Styles.wrapPaper, { width: '80%'}]}>
<Text style={[Styles.textDefaultSemiBold]}>Rancangan Laporan - Laporan 1</Text>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<Feather name="clock" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation]}>5 Mar 2025 - 12 Mar 2025</Text>
</View>
</View>
)}
/>
</View>
)
}

5
components/paperGridContent.tsx
View File

@@ -8,15 +8,16 @@ type Props = {
title: string
headerColor: 'primary' | 'warning'
onPress?: () => void
contentPosition?: 'top' | 'center'
};
export default function PaperGridContent({ content, children, title, headerColor, onPress }: Props) {
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition }: Props) {
return (
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
</View>
<View style={[Styles.contentPaperGrid]}>
<View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
{children}
</View>
</View>

9
constants/Styles.ts
View File

@@ -246,6 +246,15 @@ const Styles = StyleSheet.create({
paddingHorizontal: 20,
justifyContent: 'space-evenly'
},
contentPaperGrid2: {
backgroundColor: 'white',
height: 100,
borderBottomEndRadius: 15,
borderBottomStartRadius: 15,
paddingHorizontal: 20,
paddingVertical: 15,
justifyContent: 'flex-start'
},
wrapBar: {
height: 20,
backgroundColor: '#ccc',