mobile-tabungan/app/(tabs)/index.tsx

import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { router } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tabungan H.Hadi</Text>
      <Text style={styles.subtitle}>Kelola pemasukan & pengeluaranmu untuk nikah </Text>

      <View style={styles.balanceCard}>
        <Text style={styles.balanceLabel}>Total Saldo</Text>
        <Text style={styles.balanceAmount}>Rp 500.000.000.000</Text>
      </View>

      <View style={styles.summaryContainer}>
        <View style={styles.summaryCard}>
          <Ionicons name="arrow-down-circle" size={30} color="#16A34A" />
          <Text style={styles.summaryTitle}>Income</Text>
          <Text style={styles.summaryAmount}>Rp 7.000.000</Text>
        </View>

        <View style={styles.summaryCard}>
          <Ionicons name="arrow-up-circle" size={30} color="#DC2626" />
          <Text style={styles.summaryTitle}>Expense</Text>
          <Text style={styles.summaryAmount}>Rp 2.000.000</Text>
        </View>
      </View>

      <TouchableOpacity
        style={styles.buttonIncome}
        onPress={() => router.push("/add-income")}
      >
        <Text style={styles.buttonText}>+ Tambah Pemasukan</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.buttonExpense}
        onPress={() => router.push("/add-expense")}
      >
        <Text style={styles.buttonText}>- Tambah Pengeluaran</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F7FA",
    padding: 24,
    paddingTop: 60,
  },

  title: {
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 8,
  },

  subtitle: {
    fontSize: 16,
    color: "#666",
    marginBottom: 28,
  },

  balanceCard: {
    backgroundColor: "#2563EB",
    borderRadius: 20,
    padding: 24,
    marginBottom: 24,
  },

  balanceLabel: {
    color: "#E0E7FF",
    fontSize: 16,
    marginBottom: 8,
  },

  balanceAmount: {
    color: "#FFFFFF",
    fontSize: 32,
    fontWeight: "bold",
  },

  summaryContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 32,
  },

  summaryCard: {
    backgroundColor: "#FFFFFF",
    width: "48%",
    padding: 20,
    borderRadius: 16,
    alignItems: "center",
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 3,
  },

  summaryTitle: {
    marginTop: 10,
    fontSize: 15,
    color: "#666",
  },

  summaryAmount: {
    marginTop: 6,
    fontSize: 16,
    fontWeight: "600",
  },

  buttonIncome: {
    backgroundColor: "#16A34A",
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center",
    marginBottom: 16,
  },

  buttonExpense: {
    backgroundColor: "#DC2626",
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center",
  },

  buttonText: {
    color: "#FFFFFF",
    fontSize: 16,
    fontWeight: "600",
  },
});