101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
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;
|