Kantongku: fitur pilih tanggal saat catat & edit transaksi (backdate)

src/screens/EditTransactionScreen.tsx

@@ -1,3 +1,5 @@
+import { Ionicons } from '@expo/vector-icons';
+import DateTimePicker from '@react-native-community/datetimepicker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import type { RouteProp } from '@react-navigation/native';
@@ -36,6 +38,8 @@ export function EditTransactionScreen() {
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
   const [note, setNote] = useState('');
+  const [occurredAt, setOccurredAt] = useState(new Date());
+  const [showDate, setShowDate] = useState(false);
   const [percent, setPercent] = useState(10);
   const [saving, setSaving] = useState(false);
   const [loaded, setLoaded] = useState(false);
@@ -52,6 +56,7 @@ export function EditTransactionScreen() {
       setAmountText(String(tx.amount));
       setSelectedCategoryId(tx.categoryId);
       setNote(tx.note);
+      setOccurredAt(new Date(tx.occurredAt));
       const p = await getSettingNumber('auto_save_percent', 10);
       setPercent(p);
       const cats = await getCategories(tx.type);
@@ -85,6 +90,7 @@ export function EditTransactionScreen() {
         amount,
         categoryId: selectedCategoryId,
         note: note.trim(),
+        occurredAt,
       });
       Alert.alert('Tersimpan ✅', 'Transaksi berhasil diperbarui.', [
         { text: 'Oke', onPress: () => navigation.goBack() },
@@ -175,6 +181,32 @@ export function EditTransactionScreen() {
           </View>
         )}
 
+        {/* Tanggal */}
+        <Text style={styles.sectionTitle}>Tanggal</Text>
+        <Pressable style={styles.dateRow} onPress={() => setShowDate(true)}>
+          <Ionicons name="calendar" size={18} color={colors.primaryDark} />
+          <Text style={styles.dateRowText}>
+            {occurredAt.toLocaleDateString('id-ID', {
+              weekday: 'long',
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            })}
+          </Text>
+          <Ionicons name="chevron-down" size={16} color={colors.textMuted} />
+        </Pressable>
+        {showDate && (
+          <DateTimePicker
+            value={occurredAt}
+            mode="date"
+            maximumDate={new Date()}
+            onChange={(e, d) => {
+              setShowDate(false);
+              if (d) setOccurredAt(d);
+            }}
+          />
+        )}
+
         {/* Kategori */}
         <Text style={styles.sectionTitle}>Kategori</Text>
         <View style={styles.categoryGrid}>
@@ -290,6 +322,19 @@ const styles = StyleSheet.create({
     color: colors.text,
     paddingVertical: 4,
   },
+  dateRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    marginBottom: 4,
+  },
+  dateRowText: { flex: 1, fontSize: 14, color: colors.text, fontWeight: '600' },
   saveHintCard: {
     flexDirection: 'row',
     alignItems: 'center',