119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import { Card } from '../../../components';
|
|
|
|
interface SummaryCardProps {
|
|
branch: string;
|
|
user: string;
|
|
tenant: string;
|
|
}
|
|
|
|
const SummaryCardComponent = ({ branch, user, tenant }: SummaryCardProps) => {
|
|
const theme = useTheme();
|
|
const today = new Date().toLocaleDateString('en-IN', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
});
|
|
|
|
return (
|
|
<Card style={styles.container}>
|
|
<View style={styles.header}>
|
|
<View style={[styles.iconFrame, { backgroundColor: `${theme.colors.primary}10` }]}>
|
|
<Ionicons name="information-circle" size={18} color={theme.colors.primary} />
|
|
</View>
|
|
<View>
|
|
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>Account Details</Text>
|
|
<Text style={[styles.date, { color: theme.colors.textSecondary }]}>{today}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.grid}>
|
|
<View style={styles.item}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Branch Name</Text>
|
|
<Text style={[styles.value, { color: theme.colors.textPrimary }]}>{branch}</Text>
|
|
</View>
|
|
<View style={styles.item}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Account ID</Text>
|
|
<Text style={[styles.value, { color: theme.colors.textPrimary }]}>{user}</Text>
|
|
</View>
|
|
<View style={styles.item}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Server Node</Text>
|
|
<Text style={[styles.value, { color: theme.colors.textPrimary }]}>{tenant}</Text>
|
|
</View>
|
|
<View style={styles.item}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>System Status</Text>
|
|
<View style={styles.row}>
|
|
<View style={[styles.dot, { backgroundColor: theme.colors.success }]} />
|
|
<Text style={[styles.value, { color: theme.colors.success }]}>Online</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
gap: 20,
|
|
padding: 20,
|
|
borderRadius: 24,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
iconFrame: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontFamily: fontFamily.bold,
|
|
letterSpacing: -0.3,
|
|
},
|
|
date: {
|
|
fontSize: 12,
|
|
fontFamily: fontFamily.medium,
|
|
marginTop: 1,
|
|
},
|
|
grid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
rowGap: 16,
|
|
},
|
|
item: {
|
|
width: '50%',
|
|
gap: 4,
|
|
},
|
|
label: {
|
|
fontSize: 10,
|
|
fontFamily: fontFamily.bold,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
},
|
|
value: {
|
|
fontSize: 13,
|
|
fontFamily: fontFamily.bold,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
},
|
|
dot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
},
|
|
});
|
|
|
|
export const SummaryCard = memo(SummaryCardComponent);
|
|
|