Dashboard

                                        import React from "react";
import {
  View,
  StyleSheet,
  Text,
  SafeAreaView,
  ScrollView,
  Dimensions,
  StatusBar,
  TouchableOpacity,
} from "react-native";

import { LineChart } from "react-native-chart-kit";

// Get the screen width for responsive graph rendering
const screenWidth = Dimensions.get("window").width;

// Chart configuration for the graph
const chartConfigs = [
  {
    backgroundColor: "#ffffff", // White background
    backgroundGradientFrom: "#ffffff", // White gradient start
    backgroundGradientTo: "#ffffff", // White gradient end
    decimalPlaces: 2, // Number of decimal places for data points
    color: (opacity: number = 1) => `rgba(0, 0, 0, ${opacity})`, // Black lines and text
    labelColor: (opacity: number = 1) => `rgba(0, 0, 0, ${opacity})`, // Black labels
    style: {
      borderRadius: 16,
    },
    propsForDots: {
      r: "6",
      strokeWidth: "2",
      stroke: "#000000", // Black dots
    },
  },
];

// Revenue data for the graph
const revenueData = {
  labels: [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
  ],
  datasets: [
    {
      data: [
        5000, 7000, 8000, 6000, 9000, 11000,
        10000, 12000, 9500, 10500, 11500, 12500,
      ], // Monthly revenue values
    },
  ],
};

// Props interface for the Card component
interface CardProps {
  number: string;
  text: string;
  white?: boolean;
}

// Reusable Card component
const Card: React.FC<CardProps> = ({ number, text, white }) => {
  return (
    <TouchableOpacity style={[styles.card, white && styles.whiteCard]}>
      <Text style={[styles.cardNumber, white && styles.blackText]}>{number}</Text>
      <Text style={[styles.cardText, white && styles.blackText]}>{text}</Text>
    </TouchableOpacity>
  );
};

// Main Dashboard component
const Dashboard: React.FC = () => {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="white" barStyle="dark-content" />
      <ScrollView showsVerticalScrollIndicator={false}>
        <Text style={styles.title}>Dashboard</Text>

        {/* First Row of Cards */}
        <View style={styles.row}>
          <Card number="180" text="Total Products" />
          <Card number="210" text="Total Orders" white />
        </View>

        {/* Second Row of Cards */}
        <View style={styles.row}>
          <Card number="150" text="Total Clients" white />
          <Card number="110" text="Revenue" white />
        </View>

        {/* Revenue Graph */}
        <View style={styles.graphContainer}>
          <Text style={styles.labelStyle}>Monthly Revenue</Text>
          <LineChart
            data={revenueData} // Revenue data for the graph
            width={screenWidth - 10} // Adjusted width to fit the screen with padding
            height={220} // Graph height
            chartConfig={chartConfigs[0]} // Chart configuration
            bezier // Smooth curve for the graph
            style={styles.graphStyle} // Graph styling
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 10,
  },
  title: {
    fontSize: 25,
    textAlign: "left",
    marginVertical: 10,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
  },
  card: {
    backgroundColor: "black",
    flex: 1,
    height: 150,
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 5,
    padding: 10,

    // Shadow for iOS
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    // Shadow for Android
    elevation: 5,
  },
  whiteCard: {
    backgroundColor: "white",
  },
  cardNumber: {
    fontSize: 25,
    textAlign: "center",
    color: "white",
  },
  cardText: {
    fontSize: 16,
    textAlign: "center",
    marginTop: 5,
    color: "white",
  },
  blackText: {
    color: "black",
  },
  graphContainer: {
    marginTop: 20,
  },
  labelStyle: {
    fontSize: 20,
    textAlign: "left",
    marginVertical: 10,
  },
  graphStyle: {
    marginVertical: 10,
    borderRadius: 16,
  },
});

export default Dashboard;