Merge pull request #8 from bipproduction/amalia/07-mar-25

upd: division

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 (
+      <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>
+   )
+}

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() {
                <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>

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 (
-      <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>
                   {

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 (
+      <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>
+   )
+}

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<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>
+   )
+}

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 (
+      <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>
+   )
+}

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 (
+      <>
+         <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>
+      </>
+   )
+}

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<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>
+   )
+}

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 (
       <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>

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',