diff --git a/app/(application)/division/[id]/index.tsx b/app/(application)/division/[id]/index.tsx new file mode 100644 index 0000000..1fd96e8 --- /dev/null +++ b/app/(application)/division/[id]/index.tsx @@ -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 ( + + { router.back() }} />, + headerTitle: 'Judul Divisi', + headerTitleAlign: 'center', + headerRight: () => , + }} + /> + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/app/(application)/division/index.tsx b/app/(application)/division/index.tsx index 93a2a9d..218ceb0 100644 --- a/app/(application)/division/index.tsx +++ b/app/(application)/division/index.tsx @@ -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() { Filter : Dinas + { + isList + ? + + { }} + borderType="bottom" + icon={ + + + + } + title="Kasi Pelayanan" + titleWeight="normal" + /> + { }} + borderType="bottom" + icon={ + + + + } + title="Kaur TU dan Umum" + titleWeight="normal" + /> + { }} + borderType="bottom" + icon={ + + + + } + title="Kasi Pemerintahan" + titleWeight="normal" + /> + + : + + + { router.push('/division/234') }} content="page" title="Kaur Pelayanan" headerColor="primary" contentPosition="top"> + Deskripsi Divisi + + { router.push('/division/234') }} content="page" title="Kasi Pemerintahan" headerColor="primary" contentPosition="top"> + Deskripsi Divisi + + { router.push('/division/234') }} content="page" title="Kaur TU dan Umum" headerColor="primary" contentPosition="top"> + Deskripsi Divisi + + + } + diff --git a/components/borderBottomItem.tsx b/components/borderBottomItem.tsx index 662897d..31f6987 100644 --- a/components/borderBottomItem.tsx +++ b/components/borderBottomItem.tsx @@ -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 ( - + {icon} - + {title} { diff --git a/components/division/discussionDivisionDetail.tsx b/components/division/discussionDivisionDetail.tsx new file mode 100644 index 0000000..847c413 --- /dev/null +++ b/components/division/discussionDivisionDetail.tsx @@ -0,0 +1,16 @@ +import Styles from "@/constants/Styles"; +import { Text, View } from "react-native"; +import DiscussionItem from "../discussionItem"; + +export default function DiscussionDivisionDetail() { + return ( + + Diskusi + + + + + + + ) +} \ No newline at end of file diff --git a/components/division/fileDivisionDetail.tsx b/components/division/fileDivisionDetail.tsx new file mode 100644 index 0000000..a7503e1 --- /dev/null +++ b/components/division/fileDivisionDetail.tsx @@ -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(null); + const width = Dimensions.get("window").width; + + return ( + + Dokumen Terkini + ( + + + + + File_Pertama.png + + + )} + /> + + ) +} \ No newline at end of file diff --git a/components/division/fiturDivisionDetail.tsx b/components/division/fiturDivisionDetail.tsx new file mode 100644 index 0000000..cbb879d --- /dev/null +++ b/components/division/fiturDivisionDetail.tsx @@ -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 ( + + Fitur + + + + + + } + title="Tugas" + subtitle='15 Tugas' + width={28} + /> + + + + + } + title="Dokumen" + subtitle='20 File' + width={28} + /> + + + + + + + } + title="Diskusi" + subtitle='5 Diskusi' + width={28} + /> + + + + + } + title="Kalender" + subtitle='23 Acara' + width={28} + /> + + + + ) +} \ No newline at end of file diff --git a/components/division/headerDivisionDetail.tsx b/components/division/headerDivisionDetail.tsx new file mode 100644 index 0000000..602b64c --- /dev/null +++ b/components/division/headerDivisionDetail.tsx @@ -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 ( + <> + { setVisible(true) }} /> + + + } + title="Informasi Divisi" + onPress={() => { + setVisible(false) + // router.push('/project/create') + }} + /> + } + title="Laporan Divisi" + onPress={() => { + setVisible(false) + }} + /> + + + + ) +} \ No newline at end of file diff --git a/components/division/taskDivisionDetail.tsx b/components/division/taskDivisionDetail.tsx new file mode 100644 index 0000000..584ab80 --- /dev/null +++ b/components/division/taskDivisionDetail.tsx @@ -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(null); + const width = Dimensions.get("window").width; + + return ( + + Tugas Hari Ini + ( + + Rancangan Laporan - Laporan 1 + + + 5 Mar 2025 - 12 Mar 2025 + + + )} + /> + + ) +} \ No newline at end of file diff --git a/components/paperGridContent.tsx b/components/paperGridContent.tsx index d13d242..d06932e 100644 --- a/components/paperGridContent.tsx +++ b/components/paperGridContent.tsx @@ -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 ( {title} - + {children} diff --git a/constants/Styles.ts b/constants/Styles.ts index b407377..d774fdf 100644 --- a/constants/Styles.ts +++ b/constants/Styles.ts @@ -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',