update login, detail table in tripInfo

2025-10-31 23:55:39 +07:00
parent 5801992eae
commit 44fc6848a8
9 changed files with 132 additions and 16 deletions
--- a/components/tripInfo/CrewListTable.tsx
+++ b/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>
        ))}
--- a/components/tripInfo/NetListTable.tsx
+++ b/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>
        ))}
--- a/components/tripInfo/TripCostTable.tsx
+++ b/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>
  );
--- a/components/tripInfo/style/CrewListTable.styles.ts
+++ b/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",
+  },
 });
--- a/components/tripInfo/style/NetListTable.styles.ts
+++ b/components/tripInfo/style/NetListTable.styles.ts
@@ -4,13 +4,13 @@ export default StyleSheet.create({
  container: {
    width: "100%",
    backgroundColor: "#fff",
-    borderRadius: 10,
-    padding: 12,
+    borderRadius: 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",
  },
 });
--- a/components/tripInfo/style/TripCostTable.styles.ts
+++ b/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;