update login, detail table in tripInfo

app/auth/login.tsx

@@ -10,9 +10,10 @@ import {
 } from "@/utils/storage";
 import { parseJwtToken } from "@/utils/token";
 import { useRouter } from "expo-router";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   ActivityIndicator,
+  Image,
   KeyboardAvoidingView,
   Platform,
   ScrollView,
@@ -98,9 +99,23 @@ export default function LoginScreen() {
         <ThemedView style={styles.container}>
           {/* Header */}
           <View style={styles.headerContainer}>
+            {/* Logo */}
+            <Image
+              source={require("@/assets/images/logo.png")}
+              style={styles.logo}
+              resizeMode="contain"
+            />
             <ThemedText type="title" style={styles.title}>
-              SGW App
+              Hệ thống giám sát tàu cá
             </ThemedText>
+            {/* Owner Logo */}
+            <View style={styles.ownerContainer}>
+              <Image
+                source={require("@/assets/images/owner.png")}
+                style={styles.ownerLogo}
+                resizeMode="contain"
+              />
+            </View>
             <ThemedText style={styles.subtitle}>
               Đăng nhập để tiếp tục
             </ThemedText>
@@ -160,6 +175,13 @@ export default function LoginScreen() {
                 <Text style={styles.linkText}>Đăng ký ngay</Text>
               </ThemedText>
             </View>
+
+            {/* Copyright */}
+            <View style={styles.copyrightContainer}>
+              <ThemedText style={styles.copyrightText}>
+                © {new Date().getFullYear()} - Sản phẩm của Mobifone
+              </ThemedText>
+            </View>
           </View>
         </ThemedView>
       </ScrollView>
@@ -181,8 +203,13 @@ const styles = StyleSheet.create({
     marginBottom: 40,
     alignItems: "center",
   },
+  logo: {
+    width: 120,
+    height: 120,
+    marginBottom: 20,
+  },
   title: {
-    fontSize: 32,
+    fontSize: 28,
     fontWeight: "bold",
     marginBottom: 8,
   },
@@ -236,4 +263,20 @@ const styles = StyleSheet.create({
     color: "#007AFF",
     fontWeight: "600",
   },
+  ownerContainer: {
+    alignItems: "center",
+  },
+  ownerLogo: {
+    width: 150,
+    height: 50,
+  },
+  copyrightContainer: {
+    marginTop: 20,
+    alignItems: "center",
+  },
+  copyrightText: {
+    fontSize: 12,
+    opacity: 0.6,
+    textAlign: "center",
+  },
 });

components/tripInfo/CrewListTable.tsx

@@ -17,6 +17,12 @@ interface CrewMember {
 // ⚓ Dữ liệu mẫu
 // ---------------------------
 const data: CrewMember[] = [
+  {
+    id: "10",
+    maDinhDanh: "ChuTau",
+    ten: "Nguyễn Nhật Minh",
+    chucVu: "Chủ tàu",
+  },
   {
     id: "1",
     maDinhDanh: "TV001",
@@ -43,6 +49,10 @@ const CrewListTable: React.FC = () => {
     setCollapsed((prev) => !prev);
   };
 
+  const handleCrewPress = (crewId: string) => {
+    console.log("Crew ID:", crewId);
+  };
+
   return (
     <View style={styles.container}>
       {/* Header toggle */}
@@ -77,7 +87,9 @@ const CrewListTable: React.FC = () => {
           <Text style={[styles.cell, styles.left, styles.headerText]}>
             Mã định danh
           </Text>
-          <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          <View style={styles.cellWrapper}>
+            <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          </View>
           <Text style={[styles.cell, styles.right, styles.headerText]}>
             Chức vụ
           </Text>
@@ -87,7 +99,12 @@ const CrewListTable: React.FC = () => {
         {data.map((item) => (
           <View key={item.id} style={styles.row}>
             <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
-            <Text style={[styles.cell]}>{item.ten}</Text>
+            <TouchableOpacity
+              style={styles.cellWrapper}
+              onPress={() => handleCrewPress(item.id)}
+            >
+              <Text style={[styles.cell, styles.linkText]}>{item.ten}</Text>
+            </TouchableOpacity>
             <Text style={[styles.cell, styles.right]}>{item.chucVu}</Text>
           </View>
         ))}
@@ -109,7 +126,9 @@ const CrewListTable: React.FC = () => {
           <Text style={[styles.cell, styles.left, styles.headerText]}>
             Mã định danh
           </Text>
-          <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          <View style={styles.cellWrapper}>
+            <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          </View>
           <Text style={[styles.cell, styles.right, styles.headerText]}>
             Chức vụ
           </Text>
@@ -119,7 +138,12 @@ const CrewListTable: React.FC = () => {
         {data.map((item) => (
           <View key={item.id} style={styles.row}>
             <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
-            <Text style={[styles.cell]}>{item.ten}</Text>
+            <TouchableOpacity
+              style={styles.cellWrapper}
+              onPress={() => handleCrewPress(item.id)}
+            >
+              <Text style={[styles.cell, styles.linkText]}>{item.ten}</Text>
+            </TouchableOpacity>
             <Text style={[styles.cell, styles.right]}>{item.chucVu}</Text>
           </View>
         ))}

components/tripInfo/NetListTable.tsx

@@ -37,6 +37,10 @@ const NetListTable: React.FC = () => {
     setCollapsed((prev) => !prev);
   };
 
+  const handleStatusPress = (id: string) => {
+    console.log(`ID mẻ lưới: ${id}`);
+  };
+
   return (
     <View style={styles.container}>
       {/* Header toggle */}
@@ -79,7 +83,9 @@ const NetListTable: React.FC = () => {
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
               <View style={styles.statusDot} />
-              <Text style={styles.statusText}>{item.trangThai}</Text>
+              <TouchableOpacity onPress={() => handleStatusPress(item.id)}>
+                <Text style={styles.statusText}>{item.trangThai}</Text>
+              </TouchableOpacity>
             </View>
           </View>
         ))}
@@ -102,7 +108,9 @@ const NetListTable: React.FC = () => {
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
               <View style={styles.statusDot} />
-              <Text style={styles.statusText}>{item.trangThai}</Text>
+              <TouchableOpacity onPress={() => handleStatusPress(item.id)}>
+                <Text style={styles.statusText}>{item.trangThai}</Text>
+              </TouchableOpacity>
             </View>
           </View>
         ))}

components/tripInfo/TripCostTable.tsx

@@ -73,6 +73,10 @@ const TripCostTable: React.FC = () => {
     setCollapsed((prev) => !prev);
   };
 
+  const handleViewDetail = () => {
+    console.log("View trip cost details");
+  };
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -140,6 +144,14 @@ const TripCostTable: React.FC = () => {
             {tongCong.toLocaleString()}
           </Text>
         </View>
+
+        {/* View Detail Button */}
+        <TouchableOpacity
+          style={styles.viewDetailButton}
+          onPress={handleViewDetail}
+        >
+          <Text style={styles.viewDetailText}>Xem chi tiết</Text>
+        </TouchableOpacity>
       </View>
 
       <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
@@ -170,6 +182,14 @@ const TripCostTable: React.FC = () => {
             {tongCong.toLocaleString()}
           </Text>
         </View>
+
+        {/* View Detail Button */}
+        <TouchableOpacity
+          style={styles.viewDetailButton}
+          onPress={handleViewDetail}
+        >
+          <Text style={styles.viewDetailText}>Xem chi tiết</Text>
+        </TouchableOpacity>
       </Animated.View>
     </View>
   );

components/tripInfo/style/CrewListTable.styles.ts

@@ -47,6 +47,11 @@ export default StyleSheet.create({
     color: "#111",
     textAlign: "center",
   },
+  cellWrapper: {
+    flex: 1.5,
+    justifyContent: "center",
+    alignItems: "center",
+  },
   left: {
     textAlign: "center",
   },
@@ -64,4 +69,8 @@ export default StyleSheet.create({
     color: "#ff6600",
     fontWeight: "800",
   },
+  linkText: {
+    color: "#007AFF",
+    textDecorationLine: "underline",
+  },
 });

components/tripInfo/style/NetListTable.styles.ts

@@ -4,13 +4,13 @@ export default StyleSheet.create({
   container: {
     width: "100%",
     backgroundColor: "#fff",
-    borderRadius: 10,
+    borderRadius: 12,
-    padding: 12,
+    padding: 16,
     marginVertical: 10,
     borderWidth: 1,
     borderColor: "#eee",
     shadowColor: "#000",
-    shadowOpacity: 0.05,
+    shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: 1,
   },
@@ -34,7 +34,7 @@ export default StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     paddingVertical: 8,
-    borderBottomWidth: 0.6,
+    borderBottomWidth: 0.5,
     borderBottomColor: "#eee",
   },
   tableHeader: {
@@ -52,7 +52,7 @@ export default StyleSheet.create({
     flex: 0.3,
     fontSize: 15,
     color: "#111",
-    textAlign: "left",
+    textAlign: "center",
     paddingLeft: 10,
   },
   headerText: {
@@ -72,6 +72,7 @@ export default StyleSheet.create({
   },
   statusText: {
     fontSize: 15,
-    color: "#111",
+    color: "#4a90e2",
+    textDecorationLine: "underline",
   },
 });

components/tripInfo/style/TripCostTable.styles.ts

@@ -56,6 +56,17 @@ const styles = StyleSheet.create({
     color: "#ff6600",
     fontWeight: "700",
   },
+  viewDetailButton: {
+    marginTop: 12,
+    paddingVertical: 8,
+    alignItems: "center",
+  },
+  viewDetailText: {
+    color: "#007AFF",
+    fontSize: 15,
+    fontWeight: "600",
+    textDecorationLine: "underline",
+  },
 });
 
 export default styles;