update button

app/(tabs)/tripInfo.tsx

@@ -1,3 +1,6 @@
+import ButtonCancelTrip from "@/components/ButtonCancelTrip";
+import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip";
+import ButtonEndTrip from "@/components/ButtonEndTrip";
 import CrewListTable from "@/components/tripInfo/CrewListTable";
 import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
 import NetListTable from "@/components/tripInfo/NetListTable";
@@ -8,13 +11,22 @@ import { SafeAreaView } from "react-native-safe-area-context";
 export default function TripInfoScreen() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
+      <View style={styles.header}>
+        <Text style={styles.titleText}>Thông Tin Chuyến Đi</Text>
+        <View style={styles.buttonWrapper}>
+          <ButtonCreateNewHaulOrTrip />
+        </View>
+      </View>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.container}>
-          <Text style={styles.titleText}>Thông Tin Chuyến Đi</Text>
           <TripCostTable />
           <FishingToolsTable />
           <CrewListTable />
           <NetListTable />
+          <View style={styles.buttonRow}>
+            <ButtonCancelTrip />
+            <ButtonEndTrip />
+          </View>
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -25,15 +37,32 @@ const styles = StyleSheet.create({
   scrollContent: {
     flexGrow: 1,
   },
+  header: {
+    width: "100%",
+    paddingHorizontal: 15,
+    paddingTop: 15,
+    paddingBottom: 10,
+    alignItems: "center",
+  },
+  buttonWrapper: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
   container: {
     alignItems: "center",
-    padding: 15,
+    paddingHorizontal: 15,
+  },
+  buttonRow: {
+    flexDirection: "row",
+    gap: 10,
+    marginTop: 15,
   },
   titleText: {
     fontSize: 32,
     fontWeight: "700",
     lineHeight: 40,
-    marginBottom: 10,
+    paddingBottom: 10,
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",

components/ButtonCancelTrip.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+interface ButtonCancelTripProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonCancelTrip: React.FC<ButtonCancelTripProps> = ({
+  title = "Hủy chuyến đi",
+  onPress,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#f45b57", // đỏ nhẹ giống ảnh
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2, // cho Android
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
+
+export default ButtonCancelTrip;

components/ButtonCreateNewHaulOrTrip.tsx

@@ -0,0 +1,107 @@
+import { AntDesign } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+interface StartButtonProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
+  title = "Bắt đầu mẻ lưới",
+  onPress,
+}) => {
+  const [isStarted, setIsStarted] = useState(false);
+
+  const handlePress = () => {
+    if (isStarted) {
+      Alert.alert(
+        "Kết thúc mẻ lưới",
+        "Bạn có chắc chắn muốn kết thúc mẻ lưới này?",
+        [
+          {
+            text: "Hủy",
+            style: "cancel",
+          },
+          {
+            text: "Kết thúc",
+            onPress: () => {
+              setIsStarted(false);
+              Alert.alert("Thành công", "Đã kết thúc mẻ lưới!");
+            },
+          },
+        ]
+      );
+    } else {
+      Alert.alert("Bắt đầu mẻ lưới", "Bạn có muốn bắt đầu mẻ lưới mới?", [
+        {
+          text: "Hủy",
+          style: "cancel",
+        },
+        {
+          text: "Bắt đầu",
+          onPress: () => {
+            setIsStarted(true);
+            Alert.alert("Thành công", "Đã bắt đầu mẻ lưới mới!");
+          },
+        },
+      ]);
+    }
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, isStarted && styles.buttonActive]}
+      onPress={handlePress}
+      activeOpacity={0.8}
+    >
+      <View style={styles.content}>
+        <AntDesign
+          name={isStarted ? "close" : "plus"}
+          size={18}
+          color="#fff"
+          style={styles.icon}
+        />
+        <Text style={styles.text}>
+          {isStarted ? "Kết thúc mẻ lưới" : title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#4ecdc4", // màu ngọc lam
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3, // hiệu ứng nổi trên Android
+  },
+  buttonActive: {
+    backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 6,
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+
+export default ButtonCreateNewHaulOrTrip;

components/ButtonEndTrip.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+interface ButtonEndTripProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonEndTrip: React.FC<ButtonEndTripProps> = ({
+  title = "Kết thúc",
+  onPress,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.85}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#ed9434", // màu cam sáng
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 28,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2, // hiệu ứng nổi trên Android
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
+
+export default ButtonEndTrip;

components/tripInfo/NetListTable.tsx

@@ -101,7 +101,7 @@ const NetListTable: React.FC = () => {
             </View>
 
             {/* Cột Thao tác */}
-            {/* <View style={[styles.cell, styles.actions]}>
+            <View style={[styles.cell, styles.actions]}>
               <IconSymbol name="eye" size={16} color="#333" />
               <IconSymbol
                 name="square.and.pencil"
@@ -109,7 +109,7 @@ const NetListTable: React.FC = () => {
                 color="#333"
                 style={{ marginLeft: 10 }}
               />
-            </View> */}
+            </View>
           </View>
         ))}
       </View>
@@ -138,7 +138,7 @@ const NetListTable: React.FC = () => {
             </View>
 
             {/* Cột Thao tác */}
-            {/* <View style={[styles.cell, styles.actions]}>
+            <View style={[styles.cell, styles.actions]}>
               <IconSymbol name="eye" size={16} color="#333" />
               <IconSymbol
                 name="square.and.pencil"
@@ -146,7 +146,7 @@ const NetListTable: React.FC = () => {
                 color="#333"
                 style={{ marginLeft: 10 }}
               />
-            </View> */}
+            </View>
           </View>
         ))}
       </Animated.View>