them icon

components/tripInfo/TripCostTable.styles.ts

@@ -0,0 +1,60 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    margin: 16,
+    padding: 16,
+    borderRadius: 12,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  row: {
+    flexDirection: "row",
+    borderBottomWidth: 0.5,
+    borderColor: "#ddd",
+    paddingVertical: 8,
+  },
+  cell: {
+    flex: 1,
+    textAlign: "center",
+    fontSize: 14,
+  },
+  left: {
+    textAlign: "left",
+  },
+  header: {
+    backgroundColor: "#f8f8f8",
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  headerText: {
+    fontWeight: "600",
+  },
+  highlight: {
+    color: "#ff6600",
+    fontWeight: "600",
+  },
+  footer: {
+    marginTop: 6,
+  },
+  footerText: {
+    fontWeight: "600",
+    color: "#007bff",
+  },
+  total: {
+    color: "#007bff",
+    fontWeight: "700",
+  },
+});
+
+export default styles;

components/tripInfo/TripCostTable.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { FlatList, ListRenderItem, Text, View } from "react-native";
+import styles from "./TripCostTable.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+interface CostItem {
+  id: string;
+  loai: string;
+  soLuong: number;
+  donVi: string;
+  chiPhi: number;
+  tongChiPhi: number;
+}
+
+// ---------------------------
+// 📊 Dữ liệu mẫu
+// ---------------------------
+const data: CostItem[] = [
+  {
+    id: "1",
+    loai: "Nhiên liệu",
+    soLuong: 1000,
+    donVi: "liters",
+    chiPhi: 20000,
+    tongChiPhi: 20000000,
+  },
+  {
+    id: "2",
+    loai: "Lương thực",
+    soLuong: 500,
+    donVi: "kg",
+    chiPhi: 30000,
+    tongChiPhi: 15000000,
+  },
+  {
+    id: "3",
+    loai: "Lương thuyền viên",
+    soLuong: 10,
+    donVi: "people",
+    chiPhi: 5000000,
+    tongChiPhi: 50000000,
+  },
+  {
+    id: "4",
+    loai: "Muối đá",
+    soLuong: 100,
+    donVi: "kg",
+    chiPhi: 20000,
+    tongChiPhi: 2000000,
+  },
+];
+
+// ---------------------------
+// 💰 Component chính
+// ---------------------------
+const TripCostTable: React.FC = () => {
+  const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
+
+  const renderItem: ListRenderItem<CostItem> = ({ item }) => (
+    <View style={styles.row}>
+      <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
+      <Text style={[styles.cell, styles.highlight]}>
+        {item.tongChiPhi.toLocaleString()}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Chi phí chuyến đi</Text>
+
+      {/* Header */}
+      <View style={[styles.row, styles.header]}>
+        <Text style={[styles.cell, styles.left, styles.headerText]}>Loại</Text>
+        <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
+      </View>
+
+      {/* Body */}
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+      />
+
+      {/* Footer */}
+      <View style={[styles.row, styles.footer]}>
+        <Text style={[styles.cell, styles.left, styles.footerText]}>
+          Tổng cộng
+        </Text>
+        <Text style={[styles.cell, styles.total]}>
+          {tongCong.toLocaleString()}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default TripCostTable;