tuanta/sgw-owner-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tab

Browse Source
This commit is contained in:
MinhNN
2025-12-02 16:57:25 +07:00
parent 9ba43142e1
commit 80c02fef9d
9 changed files with 180 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/(tabs)/_layout.tsx
View File

@@ -46,16 +46,6 @@ export default function TabLayout() {
), ),
}} }}
/> />
<Tabs.Screen
name="tripInfo"
options={{
title: t("navigation.trip"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="ferry.fill" color={color} />
),
}}
/>
<Tabs.Screen <Tabs.Screen
name="diary" name="diary"
options={{ options={{
@@ -66,15 +56,21 @@ export default function TabLayout() {
}} }}
/> />
<Tabs.Screen <Tabs.Screen
name="sensor" name="manager"
options={{ options={{
title: t("navigation.sensor"), title: t("navigation.manager"),
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<IconSymbol <IconSymbol size={28} name="square.stack.3d.up" color={color} />
size={28} ),
name="dot.radiowaves.left.and.right" }}
color={color}
/> />
<Tabs.Screen
name="warning"
options={{
title: t("navigation.warning"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="bell.fill" color={color} />
), ),
}} }}
/> />

28
app/(tabs)/diary.tsx
View File

@@ -1,13 +1,14 @@
import CreateOrUpdateHaulModal from "@/components/tripInfo/modal/CreateOrUpdateHaulModal"; import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import { Button, Platform, StyleSheet, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context"; import { SafeAreaView } from "react-native-safe-area-context";
export default function Warning() { export default function diary() {
const [isShowModal, setIsShowModal] = useState(false);
return ( return (
<SafeAreaView style={{ flex: 1 }}> <SafeAreaView style={{ flex: 1 }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}>
<Text style={styles.titleText}>Nhật ký chuyến đi </Text>
</View>
</ScrollView>
</SafeAreaView> </SafeAreaView>
); );
} }
@@ -24,24 +25,11 @@ const styles = StyleSheet.create({
fontSize: 32, fontSize: 32,
fontWeight: "700", fontWeight: "700",
lineHeight: 40, lineHeight: 40,
marginBottom: 10, marginBottom: 30,
fontFamily: Platform.select({ fontFamily: Platform.select({
ios: "System", ios: "System",
android: "Roboto", android: "Roboto",
default: "System", default: "System",
}), }),
}, },
button: {
backgroundColor: "#007AFF",
paddingVertical: 14,
paddingHorizontal: 24,
borderRadius: 8,
marginTop: 20,
},
buttonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600",
},
}); });

35
app/(tabs)/manager.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function manager() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}>
<Text style={styles.titleText}>Quản lý tàu </Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
scrollContent: {
flexGrow: 1,
},
container: {
alignItems: "center",
padding: 15,
},
titleText: {
fontSize: 32,
fontWeight: "700",
lineHeight: 40,
marginBottom: 30,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
});

129
app/(tabs)/sensor.tsx
View File

@@ -1,129 +0,0 @@
import ScanQRCode from "@/components/ScanQRCode";
import Select from "@/components/Select";
import { useState } from "react";
import {
Platform,
Pressable,
ScrollView,
StyleSheet,
Text,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function Sensor() {
const [scanModalVisible, setScanModalVisible] = useState(false);
const [scannedData, setScannedData] = useState<string | null>(null);
const handleQRCodeScanned = (data: string) => {
setScannedData(data);
// Alert.alert("QR Code Scanned", `Result: ${data}`);
};
const handleScanPress = () => {
setScanModalVisible(true);
};
const [selectedValue, setSelectedValue] = useState<
string | number | undefined
>(undefined);
const options = [
{ label: "Apple", value: "apple" },
{ label: "Banana", value: "banana" },
{ label: "Cherry", value: "cherry", disabled: true },
];
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}>
<Text style={styles.titleText}>Cảm biến trên tàu</Text>
<Select
style={{ width: "80%", marginBottom: 20 }}
options={options}
value={selectedValue}
onChange={(val) => {
setSelectedValue(val);
console.log("Value: ", val);
}}
placeholder="Select a fruit"
allowClear
/>
<Pressable style={styles.scanButton} onPress={handleScanPress}>
<Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
</Pressable>
{scannedData && (
<View style={styles.resultContainer}>
<Text style={styles.resultLabel}>Last Scanned:</Text>
<Text style={styles.resultText}>{scannedData}</Text>
</View>
)}
</View>
</ScrollView>
<ScanQRCode
visible={scanModalVisible}
onClose={() => setScanModalVisible(false)}
onScanned={handleQRCodeScanned}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
scrollContent: {
flexGrow: 1,
},
container: {
alignItems: "center",
padding: 15,
},
titleText: {
fontSize: 32,
fontWeight: "700",
lineHeight: 40,
marginBottom: 30,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
scanButton: {
backgroundColor: "#007AFF",
paddingVertical: 14,
paddingHorizontal: 30,
borderRadius: 10,
marginVertical: 15,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
scanButtonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600",
textAlign: "center",
},
resultContainer: {
marginTop: 30,
padding: 15,
backgroundColor: "#f0f0f0",
borderRadius: 10,
minWidth: "80%",
},
resultLabel: {
fontSize: 14,
fontWeight: "600",
color: "#666",
marginBottom: 8,
},
resultText: {
fontSize: 14,
color: "#333",
fontFamily: "Menlo",
fontWeight: "500",
},
});

162
app/(tabs)/tripInfo.tsx
View File

@@ -1,83 +1,83 @@
import ButtonCancelTrip from "@/components/ButtonCancelTrip"; // import ButtonCancelTrip from "@/components/ButtonCancelTrip";
import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip"; // import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip";
import ButtonEndTrip from "@/components/ButtonEndTrip"; // import ButtonEndTrip from "@/components/ButtonEndTrip";
import CrewListTable from "@/components/tripInfo/CrewListTable"; // import CrewListTable from "@/components/tripInfo/CrewListTable";
import FishingToolsTable from "@/components/tripInfo/FishingToolsList"; // import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
import NetListTable from "@/components/tripInfo/NetListTable"; // import NetListTable from "@/components/tripInfo/NetListTable";
import TripCostTable from "@/components/tripInfo/TripCostTable"; // import TripCostTable from "@/components/tripInfo/TripCostTable";
import { useI18n } from "@/hooks/use-i18n"; // import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context"; // import { useThemeContext } from "@/hooks/use-theme-context";
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native"; // import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context"; // import { SafeAreaView } from "react-native-safe-area-context";
export default function TripInfoScreen() { // export default function TripInfoScreen() {
const { t } = useI18n(); // const { t } = useI18n();
const { colors } = useThemeContext(); // const { colors } = useThemeContext();
return ( // return (
<SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}> // <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
<View style={styles.header}> // <View style={styles.header}>
<Text style={[styles.titleText, { color: colors.text }]}> // <Text style={[styles.titleText, { color: colors.text }]}>
{t("trip.infoTrip")} // {t("trip.infoTrip")}
</Text> // </Text>
<View style={styles.buttonWrapper}> // <View style={styles.buttonWrapper}>
<ButtonCreateNewHaulOrTrip /> // <ButtonCreateNewHaulOrTrip />
</View> // </View>
</View> // </View>
<ScrollView contentContainerStyle={styles.scrollContent}> // <ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}> // <View style={styles.container}>
<TripCostTable /> // <TripCostTable />
<FishingToolsTable /> // <FishingToolsTable />
<CrewListTable /> // <CrewListTable />
<NetListTable /> // <NetListTable />
<View style={styles.buttonRow}> // <View style={styles.buttonRow}>
<ButtonCancelTrip /> // <ButtonCancelTrip />
<ButtonEndTrip /> // <ButtonEndTrip />
</View> // </View>
</View> // </View>
</ScrollView> // </ScrollView>
</SafeAreaView> // </SafeAreaView>
); // );
} // }
const styles = StyleSheet.create({ // const styles = StyleSheet.create({
safeArea: { // safeArea: {
flex: 1, // flex: 1,
paddingBottom: 5, // paddingBottom: 5,
}, // },
scrollContent: { // scrollContent: {
flexGrow: 1, // flexGrow: 1,
}, // },
header: { // header: {
width: "100%", // width: "100%",
paddingHorizontal: 15, // paddingHorizontal: 15,
paddingTop: 15, // paddingTop: 15,
paddingBottom: 10, // paddingBottom: 10,
alignItems: "center", // alignItems: "center",
}, // },
buttonWrapper: { // buttonWrapper: {
width: "100%", // width: "100%",
flexDirection: "row", // flexDirection: "row",
justifyContent: "flex-end", // justifyContent: "flex-end",
}, // },
container: { // container: {
alignItems: "center", // alignItems: "center",
paddingHorizontal: 15, // paddingHorizontal: 15,
}, // },
buttonRow: { // buttonRow: {
flexDirection: "row", // flexDirection: "row",
gap: 10, // gap: 10,
marginTop: 15, // marginTop: 15,
marginBottom: 15, // marginBottom: 15,
}, // },
titleText: { // titleText: {
fontSize: 32, // fontSize: 32,
fontWeight: "700", // fontWeight: "700",
lineHeight: 40, // lineHeight: 40,
paddingBottom: 10, // paddingBottom: 10,
fontFamily: Platform.select({ // fontFamily: Platform.select({
ios: "System", // ios: "System",
android: "Roboto", // android: "Roboto",
default: "System", // default: "System",
}), // }),
}, // },
}); // });

35
app/(tabs)/warning.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function warning() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}>
<Text style={styles.titleText}>Cảnh báo</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
scrollContent: {
flexGrow: 1,
},
container: {
alignItems: "center",
padding: 15,
},
titleText: {
fontSize: 32,
fontWeight: "700",
lineHeight: 40,
marginBottom: 30,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
});

2
components/ui/icon-symbol.tsx
View File

@@ -31,6 +31,8 @@ const MAPPING = {
xmark: "close", xmark: "close",
pencil: "edit", pencil: "edit",
trash: "delete", trash: "delete",
"square.stack.3d.up": "layers",
"bell.fill": "notifications",
} as IconMapping; } as IconMapping;
/** /**

4
locales/en.json
View File

@@ -29,7 +29,9 @@
"diary": "Diary", "diary": "Diary",
"sensor": "Sensor", "sensor": "Sensor",
"trip": "Trip", "trip": "Trip",
"setting": "Settings" "setting": "Settings",
"manager": "Manager",
"warning": "Warning"
}, },
"home": { "home": {
"welcome": "Welcome", "welcome": "Welcome",

4
locales/vi.json
View File

@@ -29,7 +29,9 @@
"diary": "Nhật ký", "diary": "Nhật ký",
"sensor": "Cảm biến", "sensor": "Cảm biến",
"trip": "Chuyến đi", "trip": "Chuyến đi",
"setting": "Cài đặt" "setting": "Cài đặt",
"manager": "Quản lý",
"warning": "Cảnh báo"
}, },
"home": { "home": {
"welcome": "Chào mừng", "welcome": "Chào mừng",