From 4111392f17c7d46606eca889861196568775eb11 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 13 Mar 2025 11:31:30 +0800
Subject: [PATCH] upd: tampilan

Deskripsi:
- tampilan form tambah banner
- button save header tambah banner
- tampilan form edit banner
- button save header edit banner
- padding form input with icon left or right

No Issues
---
 app/(application)/banner/[id].tsx             | 12 ++++----
 app/(application)/banner/create.tsx           | 16 +++++-----
 app/(application)/discussion/[id].tsx         |  1 +
 .../discussion/[detail]/index.tsx             | 11 +++----
 app/(application)/notification.tsx            | 18 +++++------
 components/buttonBackHeader.tsx               |  2 +-
 components/buttonSaveHeader.tsx               | 30 +++++++++++++++++++
 components/inputForm.tsx                      |  6 ++--
 8 files changed, 64 insertions(+), 32 deletions(-)
 create mode 100644 components/buttonSaveHeader.tsx

diff --git a/app/(application)/banner/[id].tsx b/app/(application)/banner/[id].tsx
index c32ebf8..1823298 100644
--- a/app/(application)/banner/[id].tsx
+++ b/app/(application)/banner/[id].tsx
@@ -1,13 +1,12 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import { InputForm } from "@/components/inputForm"
 import Styles from "@/constants/Styles"
 import { Entypo } from "@expo/vector-icons"
 import * as ImagePicker from 'expo-image-picker'
 import { router, Stack } from "expo-router"
 import { useState } from "react"
-import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
 
 export default function EditBanner() {
    const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
@@ -33,6 +32,7 @@ export default function EditBanner() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Edit Banner',
                headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="update" />
             }}
          />
          <ScrollView>
@@ -53,8 +53,8 @@ export default function EditBanner() {
                      )
                   }
                </View>
-               <InputForm label="Judul" type="numeric" placeholder="Judul" required />
-               <ButtonForm
+               <InputForm label="Judul" type="numeric" placeholder="Judul" required bg="white" />
+               {/* <ButtonForm
                   text="SIMPAN"
                   onPress={() => {
                      AlertKonfirmasi({
@@ -65,7 +65,7 @@ export default function EditBanner() {
                            router.push('/banner')
                         }
                      })
-                  }} />
+                  }} /> */}
             </View>
          </ScrollView>
       </SafeAreaView>
diff --git a/app/(application)/banner/create.tsx b/app/(application)/banner/create.tsx
index 1a975d4..68d9ff4 100644
--- a/app/(application)/banner/create.tsx
+++ b/app/(application)/banner/create.tsx
@@ -1,13 +1,12 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import ButtonBackHeader from "@/components/buttonBackHeader";
-import { ButtonForm } from "@/components/buttonForm";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
 import { Entypo } from "@expo/vector-icons";
 import * as ImagePicker from 'expo-image-picker';
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
 
 export default function CreateBanner() {
    const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
@@ -33,6 +32,7 @@ export default function CreateBanner() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah Banner',
                headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="create" />
             }}
          />
          <ScrollView>
@@ -41,11 +41,11 @@ export default function CreateBanner() {
                   {
                      selectedImage != undefined ? (
                         <Pressable onPress={pickImageAsync}>
-                           <Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height:100 }} />
+                           <Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height: 100 }} />
                         </Pressable>
                      ) : (
                         <Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
-                           <View style={{justifyContent:'center', alignItems:'center'}}>
+                           <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                               <Entypo name="image" size={50} color={'#aeaeae'} />
                               <Text style={[Styles.textInformation, Styles.mt05]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
                            </View>
@@ -53,8 +53,8 @@ export default function CreateBanner() {
                      )
                   }
                </View>
-               <InputForm label="Judul" type="numeric" placeholder="Judul" required />
-               <ButtonForm
+               <InputForm label="Judul" type="numeric" placeholder="Judul" required bg="white" />
+               {/* <ButtonForm
                   text="SIMPAN"
                   onPress={() => {
                      AlertKonfirmasi({
@@ -65,7 +65,7 @@ export default function CreateBanner() {
                            router.push('/banner')
                         }
                      })
-                  }} />
+                  }} /> */}
             </View>
          </ScrollView>
       </SafeAreaView>
diff --git a/app/(application)/discussion/[id].tsx b/app/(application)/discussion/[id].tsx
index 046efd7..b791cc0 100644
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -142,6 +142,7 @@ export default function DetailDiscussionGeneral() {
                   type="default"
                   round
                   placeholder="Kirim Komentar"
+                  bg="white"
                   itemRight={
                      <MaterialIcons name="send" size={25} color={'#384288'} />
                   }
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
index ba61f66..78a0046 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -29,11 +29,12 @@ export default function DiscussionDetail() {
                      <BorderBottomItem
                         borderType="bottom"
                         icon={
-                           <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                              <MaterialIcons name="chat" size={25} color={'#384288'} />
-                           </View>
+                           <Image
+                              source={require("../../../../../../../assets/images/user.jpeg")}
+                              style={[Styles.userProfileSmall]}
+                           />
                         }
-                        title="Danantara"
+                        title="Amalia Dwi"
                         subtitle={
                            <LabelStatus category='success' text='BUKA' size="small" />
                         }
@@ -137,7 +138,7 @@ export default function DiscussionDetail() {
                   </View>
                </ScrollView>
             </View>
-            <View style={[Styles.p15, { flex: 0.4 }]}>
+            <View style={[Styles.p10, { flex: 0.5 }]}>
                <InputForm
                   bg="white"
                   type="default"
diff --git a/app/(application)/notification.tsx b/app/(application)/notification.tsx
index 87633ba..5705f1b 100644
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -21,7 +21,7 @@ export default function Notification() {
                <View style={[Styles.wrapPaper, Styles.mb100]}>
                   <View style={[Styles.mb05]}>
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -32,7 +32,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -43,7 +43,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -54,7 +54,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -65,7 +65,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -76,7 +76,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -87,7 +87,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -98,7 +98,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -109,7 +109,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
-                        borderType="all"
+                        borderType="bottom"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
diff --git a/components/buttonBackHeader.tsx b/components/buttonBackHeader.tsx
index 7585a9f..86fdb79 100644
--- a/components/buttonBackHeader.tsx
+++ b/components/buttonBackHeader.tsx
@@ -10,7 +10,7 @@ export default function ButtonBackHeader({ onPress }: Props) {
       <>
          <ButtonHeader
             item={<Feather name="chevron-left" size={20} color="white" />}
-            onPress={onPress}
+            onPress={() => { onPress && onPress() }}
          />
       </>
    )
diff --git a/components/buttonSaveHeader.tsx b/components/buttonSaveHeader.tsx
new file mode 100644
index 0000000..6c4cad2
--- /dev/null
+++ b/components/buttonSaveHeader.tsx
@@ -0,0 +1,30 @@
+import { Feather } from "@expo/vector-icons"
+import { ButtonHeader } from "./buttonHeader"
+import AlertKonfirmasi from "./alertKonfirmasi"
+
+type Props = {
+   category: 'create' | 'update'
+   onPress?: () => void
+   disable?: boolean
+}
+
+export default function ButtonSaveHeader({ category, onPress, disable }: Props) {
+   return (
+      <>
+         <ButtonHeader
+            item={<Feather name="check" size={20} color={disable == false ? "grey" : "white"} />}
+            onPress={() => {
+               AlertKonfirmasi({
+                  title: 'Konfirmasi',
+                  desc: category == 'create' ? 'Apakah anda yakin ingin menambahkan data?' : 'Apakah anda yakin mengubah data?',
+                  onPress: () => {
+                     onPress && onPress()
+                  }
+               })
+            }
+
+            }
+         />
+      </>
+   )
+}
\ No newline at end of file
diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index f473550..c448d00 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -32,13 +32,13 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
                   </Text>
                )
             }
-            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
+            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10]}>
                {itemRight != undefined ? itemRight : itemLeft}
                <TextInput
                   placeholder={placeholder}
                   keyboardType={type}
                   onChangeText={onChange}
-                  style={{ width: width && lebar * width / 100}}
+                  style={[Styles.mh05, { width: width ? lebar * width / 100: lebar*0.78 }]}
                />
             </View>
             {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
@@ -66,7 +66,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
             onChangeText={onChange}
          />
          {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
-         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05 , Styles.cGray]}>{info}</Text>)}
+         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
       </View>
    )
 }
\ No newline at end of file