update tab nhật ký (Lọc, Ngôn ngữ,...)

This commit is contained in:
2025-12-07 20:23:10 +07:00
parent 0672f8adf9
commit e405a0bcfa
17 changed files with 851 additions and 332 deletions

View File

@@ -9,6 +9,7 @@ import {
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";
import { useI18n } from "@/hooks/use-i18n";
interface DateRangePickerProps {
startDate: Date | null;
@@ -23,6 +24,7 @@ export default function DateRangePicker({
onStartDateChange,
onEndDateChange,
}: DateRangePickerProps) {
const { t } = useI18n();
const [showStartPicker, setShowStartPicker] = useState(false);
const [showEndPicker, setShowEndPicker] = useState(false);
@@ -50,7 +52,7 @@ export default function DateRangePicker({
return (
<View style={styles.container}>
<Text style={styles.label}>Ngày đi</Text>
<Text style={styles.label}>{t("diary.dateRangePicker.label")}</Text>
<View style={styles.dateRangeContainer}>
{/* Start Date */}
<TouchableOpacity
@@ -59,7 +61,7 @@ export default function DateRangePicker({
activeOpacity={0.7}
>
<Text style={[styles.dateText, !startDate && styles.placeholder]}>
{startDate ? formatDate(startDate) : "Ngày bắt đầu"}
{startDate ? formatDate(startDate) : t("diary.dateRangePicker.startDate")}
</Text>
</TouchableOpacity>
@@ -77,7 +79,7 @@ export default function DateRangePicker({
activeOpacity={0.7}
>
<Text style={[styles.dateText, !endDate && styles.placeholder]}>
{endDate ? formatDate(endDate) : "Ngày kết thúc"}
{endDate ? formatDate(endDate) : t("diary.dateRangePicker.endDate")}
</Text>
</TouchableOpacity>
@@ -96,11 +98,11 @@ export default function DateRangePicker({
<View style={styles.pickerContainer}>
<View style={styles.pickerHeader}>
<TouchableOpacity onPress={() => setShowStartPicker(false)}>
<Text style={styles.cancelButton}>Hủy</Text>
<Text style={styles.cancelButton}>{t("common.cancel")}</Text>
</TouchableOpacity>
<Text style={styles.pickerTitle}>Chọn ngày bắt đu</Text>
<Text style={styles.pickerTitle}>{t("diary.dateRangePicker.selectStartDate")}</Text>
<TouchableOpacity onPress={() => setShowStartPicker(false)}>
<Text style={styles.doneButton}>Xong</Text>
<Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
</TouchableOpacity>
</View>
<DateTimePicker
@@ -122,11 +124,11 @@ export default function DateRangePicker({
<View style={styles.pickerContainer}>
<View style={styles.pickerHeader}>
<TouchableOpacity onPress={() => setShowEndPicker(false)}>
<Text style={styles.cancelButton}>Hủy</Text>
<Text style={styles.cancelButton}>{t("common.cancel")}</Text>
</TouchableOpacity>
<Text style={styles.pickerTitle}>Chọn ngày kết thúc</Text>
<Text style={styles.pickerTitle}>{t("diary.dateRangePicker.selectEndDate")}</Text>
<TouchableOpacity onPress={() => setShowEndPicker(false)}>
<Text style={styles.doneButton}>Xong</Text>
<Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
</TouchableOpacity>
</View>
<DateTimePicker