upd: redesign

app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx

@@ -1,15 +1,16 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
-import { useTheme } from "@/providers/ThemeProvider";
 import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
 import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -19,7 +20,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -263,7 +263,7 @@ export default function UpdateProjectTaskDivision() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -271,7 +271,7 @@ export default function UpdateProjectTaskDivision() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -281,13 +281,14 @@ export default function UpdateProjectTaskDivision() {
                            Tanggal tidak boleh kosong
                         </Text>
                      )}
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"

app/(application)/project/update/[detail].tsx

@@ -1,5 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasProject from "@/components/project/modalAddDetailTugasProject";
 import Text from "@/components/Text";
@@ -16,7 +17,7 @@ import 'intl';
 import 'intl/locale-data/jsonp/id';
 import moment from "moment";
 import React, { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
@@ -235,13 +236,13 @@ export default function UpdateProjectTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: '48%' }]}>
                            <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={{ color: colors.error }}>*</Text></Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: 'center' }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: '48%' }]}>
                            <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text></Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: 'center' }}>{to}</Text>
                            </View>
                         </View>
@@ -249,13 +250,14 @@ export default function UpdateProjectTask() {
                      {
                         (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"

components/home/projectHome.tsx

@@ -78,11 +78,11 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                               <LabelStatus
                                  size="default"
                                  category={
-                                    data[index].status === 0 ? 'primary' :
+                                    data[index].status === 0 ? 'secondary' :
                                        data[index].status === 1 ? 'warning' :
                                           data[index].status === 2 ? 'success' :
                                              data[index].status === 3 ? 'error' :
-                                                'primary'
+                                                'secondary'
                                  }
                                  text={
                                     data[index].status === 0 ? 'SEGERA' :

components/paperGridContent.tsx

@@ -1,9 +1,12 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Pressable, View } from "react-native";
+import { ImageBackground, Pressable, View } from "react-native";
 import Text from "./Text";
 
+import bgDark from '@/assets/images/bgproject-dark.png';
+import bgLight from '@/assets/images/bgproject-light.png';
+
 type Props = {
    content: 'carousel' | 'page';
    children: React.ReactNode;
@@ -15,13 +18,27 @@ type Props = {
    height?: number
 };
 export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
-   const { colors } = useTheme();
+   const { colors, activeTheme } = useTheme();
+   const bgSource = activeTheme === 'light' ? bgLight : bgDark;
    return (
       <Pressable onPress={onPress}>
          <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
-            <View style={[Styles.headerPaperGrid, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
+            {
-               <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
+               headerColor == 'warning' ? (
+                  <View style={[Styles.headerPaperGrid, ColorsStatus.warning]}>
+                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cDefault, { textAlign: 'center' }]}>{title}</Text>
                   </View>
+               ) : (
+                  <ImageBackground
+                     source={bgSource}
+                     resizeMode="cover"
+                     imageStyle={{ borderTopLeftRadius: 5, borderTopRightRadius: 5 }}
+                     style={[Styles.headerPaperGrid, { backgroundColor: colors.primary }]}
+                  >
+                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
+                  </ImageBackground>
+               )
+            }
             <View style={[
                contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
                { backgroundColor: colors.card },

declarations.d.ts

@@ -0,0 +1,24 @@
+declare module "*.png" {
+   const value: any;
+   export default value;
+}
+
+declare module "*.jpg" {
+   const value: any;
+   export default value;
+}
+
+declare module "*.jpeg" {
+   const value: any;
+   export default value;
+}
+
+declare module "*.svg" {
+   const value: any;
+   export default value;
+}
+
+declare module "*.gif" {
+   const value: any;
+   export default value;
+}