From fd80f63bbe4fc69c6880c8c957f35d49c80c448b Mon Sep 17 00:00:00 2001
From: MinhNN <minhnguyennhatt@gmail.com>
Date: Sun, 9 Nov 2025 18:34:58 +0700
Subject: [PATCH] update CreateOrHaulModal.tsx

---
 .../modal/CreateOrUpdateHaulModal.tsx         | 154 ++++++++++--------
 .../style/CreateOrUpdateHaulModal.styles.ts   |  23 +--
 2 files changed, 95 insertions(+), 82 deletions(-)

diff --git a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
index 0950202..00e07c9 100644
--- a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
+++ b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
@@ -5,7 +5,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import {
+  KeyboardAvoidingView,
   Modal,
+  Platform,
   ScrollView,
   Text,
   TextInput,
@@ -229,14 +231,16 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
               const quantity = watch(`fish.${index}.quantity`);
               const unit = watch(`fish.${index}.unit`);
 
-              return fishName ? (
+              return (
                 <View style={styles.fishCardHeaderContent}>
-                  <Text style={styles.fishCardTitle}>{fishName}:</Text>
+                  <Text style={styles.fishCardTitle}>
+                    {fishName || "Chọn loài cá"}:
+                  </Text>
                   <Text style={styles.fishCardSubtitle}>
-                    {quantity} {unit}
+                    {fishName ? `${quantity} ${unit}` : "---"}
                   </Text>
                 </View>
-              ) : null;
+              );
             })()}
           </View>
         )}
@@ -360,75 +364,81 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       presentationStyle="pageSheet"
       onRequestClose={onClose}
     >
-      <View style={styles.container}>
-        {/* Header */}
-        <View style={styles.header}>
-          <Text style={styles.title}>
-            {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
-          </Text>
-          <View style={styles.headerButtons}>
-            {isEditing ? (
-              <>
-                <TouchableOpacity
-                  onPress={() => {
-                    setIsEditing(false);
-                    reset(); // reset to previous values
-                  }}
-                  style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
-                >
-                  <Text style={styles.saveButtonText}>Hủy</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={handleSubmit(onSubmit)}
-                  style={styles.saveButton}
-                >
-                  <Text style={styles.saveButtonText}>Lưu</Text>
-                </TouchableOpacity>
-              </>
-            ) : (
-              !isCreateMode && (
-                <TouchableOpacity
-                  onPress={() => setIsEditing(true)}
-                  style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
-                >
-                  <Text style={styles.saveButtonText}>Sửa</Text>
-                </TouchableOpacity>
-              )
-            )}
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <View style={styles.closeIconButton}>
-                <IconSymbol name="xmark" size={24} color="#fff" />
-              </View>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {/* Content */}
-        <ScrollView style={styles.content}>
-          {/* Info Section */}
-          <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
-
-          {/* Fish List */}
-          {fields.map((item, index) => renderRow(item, index))}
-
-          {/* Add Button - only show when editing */}
-          {isEditing && (
-            <TouchableOpacity
-              onPress={() => append(defaultItem())}
-              style={styles.addButton}
-            >
-              <Text style={styles.addButtonText}>+ Thêm loài cá</Text>
-            </TouchableOpacity>
-          )}
-
-          {/* Error Message */}
-          {errors.fish && (
-            <Text style={styles.errorText}>
-              {(errors.fish as any)?.message}
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={60}
+      >
+        <View style={styles.container}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.title}>
+              {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
             </Text>
-          )}
-        </ScrollView>
-      </View>
+            <View style={styles.headerButtons}>
+              {isEditing ? (
+                <>
+                  <TouchableOpacity
+                    onPress={() => {
+                      setIsEditing(false);
+                      reset(); // reset to previous values
+                    }}
+                    style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
+                  >
+                    <Text style={styles.saveButtonText}>Hủy</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    onPress={handleSubmit(onSubmit)}
+                    style={styles.saveButton}
+                  >
+                    <Text style={styles.saveButtonText}>Lưu</Text>
+                  </TouchableOpacity>
+                </>
+              ) : (
+                !isCreateMode && (
+                  <TouchableOpacity
+                    onPress={() => setIsEditing(true)}
+                    style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
+                  >
+                    <Text style={styles.saveButtonText}>Sửa</Text>
+                  </TouchableOpacity>
+                )
+              )}
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <View style={styles.closeIconButton}>
+                  <IconSymbol name="xmark" size={24} color="#fff" />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Content */}
+          <ScrollView style={styles.content}>
+            {/* Info Section */}
+            <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
+
+            {/* Fish List */}
+            {fields.map((item, index) => renderRow(item, index))}
+
+            {/* Add Button - only show when editing */}
+            {isEditing && (
+              <TouchableOpacity
+                onPress={() => append(defaultItem())}
+                style={styles.addButton}
+              >
+                <Text style={styles.addButtonText}>+ Thêm loài cá</Text>
+              </TouchableOpacity>
+            )}
+
+            {/* Error Message */}
+            {errors.fish && (
+              <Text style={styles.errorText}>
+                {(errors.fish as any)?.message}
+              </Text>
+            )}
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };
diff --git a/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts b/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
index 16b8304..4731cc8 100644
--- a/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
+++ b/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
@@ -78,8 +78,8 @@ const styles = StyleSheet.create({
     color: "#000",
   },
   fishCardSubtitle: {
-    fontSize: 14,
-    color: "#666",
+    fontSize: 15,
+    color: "#ff6600",
     fontWeight: "500",
   },
   fieldGroup: {
@@ -132,19 +132,22 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
   addButton: {
-    backgroundColor: "#28a745",
-    borderRadius: 8,
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    marginTop: 16,
+    backgroundColor: "#007AFF",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
     justifyContent: "center",
     alignItems: "center",
-    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
   },
   addButtonText: {
-    color: "#fff",
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: "600",
+    color: "#fff",
   },
   footerSection: {
     paddingHorizontal: 16,