82 lines
3 KiB
TypeScript
82 lines
3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { View, Text, ScrollView, StyleSheet } from 'react-native';
|
||
|
|
import { Button, Card } from 'react-native-elements';
|
||
|
|
import { TeamSwitcher } from './components/TeamSwitcher';
|
||
|
|
import { MainNav } from './components/MainNav';
|
||
|
|
import { Search } from './components/Search';
|
||
|
|
import { UserNav } from './components/UserNav';
|
||
|
|
import { CalendarDateRangePicker } from './components/DateRangePicker';
|
||
|
|
import { Overview } from './components/Overview';
|
||
|
|
import { RecentSales } from './components/RecentSales';
|
||
|
|
|
||
|
|
export default function DashboardScreen() {
|
||
|
|
return (
|
||
|
|
<ScrollView style={styles.container}>
|
||
|
|
<View style={styles.header}>
|
||
|
|
<TeamSwitcher />
|
||
|
|
<MainNav />
|
||
|
|
<View style={styles.rightHeader}>
|
||
|
|
<Search />
|
||
|
|
<UserNav />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.content}>
|
||
|
|
<View style={styles.titleRow}>
|
||
|
|
<Text style={styles.title}>Dashboard</Text>
|
||
|
|
<View style={styles.actions}>
|
||
|
|
<CalendarDateRangePicker />
|
||
|
|
<Button title="Download" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.cards}>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Total Revenue</Card.Title>
|
||
|
|
<Text style={styles.cardValue}>$45,231.89</Text>
|
||
|
|
<Text style={styles.cardSubtext}>+20.1% from last month</Text>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Subscriptions</Card.Title>
|
||
|
|
<Text style={styles.cardValue}>+2350</Text>
|
||
|
|
<Text style={styles.cardSubtext}>+180.1% from last month</Text>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Sales</Card.Title>
|
||
|
|
<Text style={styles.cardValue}>+12,234</Text>
|
||
|
|
<Text style={styles.cardSubtext}>+19% from last month</Text>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Active Now</Card.Title>
|
||
|
|
<Text style={styles.cardValue}>+573</Text>
|
||
|
|
<Text style={styles.cardSubtext}>+201 since last hour</Text>
|
||
|
|
</Card>
|
||
|
|
</View>
|
||
|
|
<View style={styles.charts}>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Overview</Card.Title>
|
||
|
|
<Overview />
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<Card.Title>Recent Sales</Card.Title>
|
||
|
|
<Text>You made 265 sales this month.</Text>
|
||
|
|
<RecentSales />
|
||
|
|
</Card>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: { flex: 1, backgroundColor:'white' },
|
||
|
|
header: { flexDirection: 'row', padding: 16, alignItems: 'center' },
|
||
|
|
rightHeader: { flexDirection: 'row', marginLeft: 'auto' },
|
||
|
|
content: { padding: 16 },
|
||
|
|
titleRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
|
||
|
|
title: { fontSize: 24, fontWeight: 'bold' },
|
||
|
|
actions: { flexDirection: 'row' },
|
||
|
|
cards: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
|
||
|
|
charts: { marginTop: 16 },
|
||
|
|
cardValue: { fontSize: 20, fontWeight: 'bold' },
|
||
|
|
cardSubtext: { fontSize: 12, color: 'gray' },
|
||
|
|
});
|