# React Native Design Guidelines - Simpler Mobile App

## Brand Colors

### Primary Color Palette
- **Primary Red**: `#CC0000` (Main brand color)
- **Primary Dark**: `#990000` (For pressed states, shadows)
- **Primary Light**: `#FF3333` (For highlights, accents)

### Secondary Color Palette
- **White**: `#FFFFFF` (Primary background)
- **Light Gray**: `#F8F9FA` (Secondary background)
- **Medium Gray**: `#6C757D` (Text secondary)
- **Dark Gray**: `#343A40` (Text primary)
- **Border Gray**: `#DEE2E6` (Borders, dividers)

### Status Colors
- **Success**: `#28A745` (Green)
- **Warning**: `#FFC107` (Yellow)
- **Error**: `#DC3545` (Red)
- **Info**: `#17A2B8` (Blue)

## Typography

### Font Families
- **Primary**: System default fonts (`System` on iOS, `Roboto` on Android)
- **Secondary**: `Arial`, `Helvetica`, `sans-serif`

### Font Sizes
```javascript
export const FontSizes = {
  h1: 32,
  h2: 28,
  h3: 24,
  h4: 20,
  h5: 18,
  h6: 16,
  body: 16,
  bodySmall: 14,
  caption: 12,
  overline: 10,
};
```

### Font Weights
```javascript
export const FontWeights = {
  thin: '100',
  light: '300',
  normal: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
  heavy: '800',
  black: '900',
};
```

## Spacing System

### Base Unit: 4px
```javascript
export const Spacing = {
  xs: 4,   // 4px
  sm: 8,   // 8px
  md: 16,  // 16px
  lg: 24,  // 24px
  xl: 32,  // 32px
  xxl: 48, // 48px
};
```

## Component Styles

### Buttons

#### Primary Button
```javascript
const primaryButton = {
  backgroundColor: '#CC0000',
  borderRadius: 8,
  paddingVertical: 12,
  paddingHorizontal: 24,
  minHeight: 48,
  justifyContent: 'center',
  alignItems: 'center',
  elevation: 2,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
};

const primaryButtonText = {
  color: '#FFFFFF',
  fontSize: 16,
  fontWeight: '600',
  textAlign: 'center',
};
```

#### Secondary Button
```javascript
const secondaryButton = {
  backgroundColor: '#FFFFFF',
  borderRadius: 8,
  paddingVertical: 12,
  paddingHorizontal: 24,
  minHeight: 48,
  justifyContent: 'center',
  alignItems: 'center',
  borderWidth: 1,
  borderColor: '#CC0000',
};

const secondaryButtonText = {
  color: '#CC0000',
  fontSize: 16,
  fontWeight: '600',
  textAlign: 'center',
};
```

#### Outline Button
```javascript
const outlineButton = {
  backgroundColor: 'transparent',
  borderRadius: 8,
  paddingVertical: 12,
  paddingHorizontal: 24,
  minHeight: 48,
  justifyContent: 'center',
  alignItems: 'center',
  borderWidth: 1,
  borderColor: '#DEE2E6',
};

const outlineButtonText = {
  color: '#343A40',
  fontSize: 16,
  fontWeight: '500',
  textAlign: 'center',
};
```

### Input Fields

#### Text Input
```javascript
const textInput = {
  backgroundColor: '#FFFFFF',
  borderRadius: 8,
  borderWidth: 1,
  borderColor: '#DEE2E6',
  paddingHorizontal: 16,
  paddingVertical: 12,
  fontSize: 16,
  minHeight: 48,
  color: '#343A40',
};

const textInputFocused = {
  ...textInput,
  borderColor: '#CC0000',
  borderWidth: 2,
};

const textInputLabel = {
  fontSize: 14,
  fontWeight: '500',
  color: '#343A40',
  marginBottom: 8,
};
```

### Cards

#### Basic Card
```javascript
const card = {
  backgroundColor: '#FFFFFF',
  borderRadius: 12,
  padding: 16,
  margin: 16,
  elevation: 3,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 8,
};

const cardHeader = {
  borderBottomWidth: 1,
  borderBottomColor: '#F8F9FA',
  paddingBottom: 12,
  marginBottom: 16,
};

const cardTitle = {
  fontSize: 18,
  fontWeight: '600',
  color: '#343A40',
};
```

#### Status Card
```javascript
const statusCard = {
  ...card,
  borderLeftWidth: 4,
  borderLeftColor: '#CC0000', // Change based on status
};
```

### Navigation

#### Header
```javascript
const header = {
  backgroundColor: '#FFFFFF',
  borderBottomWidth: 1,
  borderBottomColor: '#DEE2E6',
  elevation: 2,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
};

const headerTitle = {
  fontSize: 18,
  fontWeight: '600',
  color: '#343A40',
};
```

#### Tab Bar
```javascript
const tabBar = {
  backgroundColor: '#FFFFFF',
  borderTopWidth: 1,
  borderTopColor: '#DEE2E6',
  paddingVertical: 8,
};

const tabBarLabel = {
  fontSize: 12,
  fontWeight: '500',
};

const tabBarActiveTint = '#CC0000';
const tabBarInactiveTint = '#6C757D';
```

## Screen Layouts

### Authentication Screens

#### Login Screen
```javascript
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, SafeAreaView, Alert } from 'react-native';
import { AuthService } from '../services/AuthService';

const LoginScreen = ({ navigation }) => {
  const [invoicingId, setInvoicingId] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [loading, setLoading] = useState(false);

  const handleCheckCustomer = async () => {
    if (!invoicingId || !phoneNumber) {
      Alert.alert('Error', 'Please fill in all fields');
      return;
    }

    setLoading(true);
    try {
      const result = await AuthService.checkCustomer(invoicingId, phoneNumber);
      
      if (result.success) {
        if (result.status === 'NO_PASSWORD') {
          navigation.navigate('SetPassword', { 
            userId: result.user_id,
            customerData: result.customer_data 
          });
        } else if (result.status === 'HAS_PASSWORD') {
          navigation.navigate('EnterPassword', { 
            userId: result.user_id,
            customerData: result.customer_data 
          });
        }
      } else {
        Alert.alert('Error', result.message);
      }
    } catch (error) {
      Alert.alert('Error', error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Welcome to Simpler</Text>
        <Text style={styles.subtitle}>Enter your details to continue</Text>
        
        <View style={styles.formContainer}>
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Client ID</Text>
            <TextInput
              style={styles.input}
              value={invoicingId}
              onChangeText={setInvoicingId}
              placeholder="Enter your client ID"
              autoCapitalize="none"
            />
          </View>
          
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Phone Number</Text>
            <TextInput
              style={styles.input}
              value={phoneNumber}
              onChangeText={setPhoneNumber}
              placeholder="Enter your phone number"
              keyboardType="phone-pad"
            />
          </View>
          
          <TouchableOpacity 
            style={[styles.button, loading && styles.buttonDisabled]}
            onPress={handleCheckCustomer}
            disabled={loading}
          >
            <Text style={styles.buttonText}>
              {loading ? 'Checking...' : 'Continue'}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    flex: 1,
    paddingHorizontal: 24,
    paddingTop: 48,
  },
  title: {
    fontSize: 32,
    fontWeight: '700',
    color: '#CC0000',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#6C757D',
    textAlign: 'center',
    marginBottom: 48,
  },
  formContainer: {
    flex: 1,
  },
  inputContainer: {
    marginBottom: 24,
  },
  label: {
    fontSize: 14,
    fontWeight: '500',
    color: '#343A40',
    marginBottom: 8,
  },
  input: {
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#DEE2E6',
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 16,
    minHeight: 48,
    color: '#343A40',
  },
  button: {
    backgroundColor: '#CC0000',
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
    minHeight: 48,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 24,
  },
  buttonDisabled: {
    backgroundColor: '#6C757D',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default LoginScreen;
```

### Dashboard Screen
```javascript
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, StyleSheet, SafeAreaView, RefreshControl } from 'react-native';
import { CustomerService } from '../services/CustomerService';
import { OutageService } from '../services/OutageService';

const DashboardScreen = () => {
  const [customerData, setCustomerData] = useState(null);
  const [outages, setOutages] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const loadData = async () => {
    try {
      const [customerResult, outagesResult] = await Promise.all([
        CustomerService.getCustomerInfo(),
        OutageService.getActiveOutages()
      ]);

      if (customerResult.success) {
        setCustomerData(customerResult.data);
      }

      if (outagesResult.success) {
        setOutages(outagesResult.data);
      }
    } catch (error) {
      console.error('Error loading dashboard data:', error);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const onRefresh = async () => {
    setRefreshing(true);
    await loadData();
    setRefreshing(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        {/* Welcome Section */}
        <View style={styles.welcomeSection}>
          <Text style={styles.welcomeTitle}>Welcome back!</Text>
          <Text style={styles.welcomeSubtitle}>
            {customerData?.name || 'Customer'}
          </Text>
        </View>

        {/* Account Balance Card */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>Account Balance</Text>
          <Text style={styles.balanceAmount}>
            R {customerData?.balance || '0.00'}
          </Text>
          <Text style={styles.balanceLabel}>Current Balance</Text>
        </View>

        {/* Outages Section */}
        {outages.length > 0 && (
          <View style={styles.card}>
            <Text style={styles.cardTitle}>Network Status</Text>
            {outages.map((outage, index) => (
              <OutageCard key={index} outage={outage} />
            ))}
          </View>
        )}

        {/* Quick Actions */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>Quick Actions</Text>
          <View style={styles.quickActions}>
            <QuickActionButton
              title="View Invoices"
              icon="📄"
              onPress={() => navigation.navigate('Invoices')}
            />
            <QuickActionButton
              title="Data Usage"
              icon="📊"
              onPress={() => navigation.navigate('Usage')}
            />
            <QuickActionButton
              title="Support"
              icon="🎧"
              onPress={() => navigation.navigate('Support')}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const OutageCard = ({ outage }) => (
  <View style={[styles.outageCard, styles[`severity${outage.severity}`]]}>
    <Text style={styles.outageTitle}>{outage.title}</Text>
    <Text style={styles.outageDescription}>{outage.description}</Text>
    <Text style={styles.outageStatus}>Status: {outage.status}</Text>
  </View>
);

const QuickActionButton = ({ title, icon, onPress }) => (
  <TouchableOpacity style={styles.quickActionButton} onPress={onPress}>
    <Text style={styles.quickActionIcon}>{icon}</Text>
    <Text style={styles.quickActionTitle}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  scrollView: {
    flex: 1,
  },
  welcomeSection: {
    padding: 24,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#DEE2E6',
  },
  welcomeTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#343A40',
    marginBottom: 4,
  },
  welcomeSubtitle: {
    fontSize: 16,
    color: '#6C757D',
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    margin: 16,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#343A40',
    marginBottom: 16,
  },
  balanceAmount: {
    fontSize: 36,
    fontWeight: '700',
    color: '#CC0000',
    textAlign: 'center',
    marginBottom: 8,
  },
  balanceLabel: {
    fontSize: 14,
    color: '#6C757D',
    textAlign: 'center',
  },
  outageCard: {
    backgroundColor: '#F8F9FA',
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    borderLeftWidth: 4,
  },
  severitycritical: {
    borderLeftColor: '#DC3545',
  },
  severityhigh: {
    borderLeftColor: '#FD7E14',
  },
  severitymedium: {
    borderLeftColor: '#FFC107',
  },
  severitylow: {
    borderLeftColor: '#28A745',
  },
  outageTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#343A40',
    marginBottom: 4,
  },
  outageDescription: {
    fontSize: 14,
    color: '#6C757D',
    marginBottom: 4,
  },
  outageStatus: {
    fontSize: 12,
    color: '#6C757D',
    textTransform: 'capitalize',
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  quickActionButton: {
    flex: 1,
    alignItems: 'center',
    padding: 16,
    marginHorizontal: 4,
    backgroundColor: '#F8F9FA',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#DEE2E6',
  },
  quickActionIcon: {
    fontSize: 24,
    marginBottom: 8,
  },
  quickActionTitle: {
    fontSize: 12,
    color: '#343A40',
    textAlign: 'center',
  },
});

export default DashboardScreen;
```

### Outages Screen
```javascript
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, SafeAreaView, RefreshControl } from 'react-native';
import { OutageService } from '../services/OutageService';

const OutagesScreen = () => {
  const [outages, setOutages] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const loadOutages = async () => {
    try {
      const result = await OutageService.getActiveOutages();
      if (result.success) {
        setOutages(result.data);
      }
    } catch (error) {
      console.error('Error loading outages:', error);
    }
  };

  useEffect(() => {
    loadOutages();
  }, []);

  const onRefresh = async () => {
    setRefreshing(true);
    await loadOutages();
    setRefreshing(false);
  };

  const renderOutage = ({ item }) => (
    <View style={[styles.outageCard, styles[`severity${item.severity}`]]}>
      <View style={styles.outageHeader}>
        <Text style={styles.outageTitle}>{item.title}</Text>
        <View style={[styles.statusBadge, styles[`status${item.status}`]]}>
          <Text style={styles.statusText}>{item.status}</Text>
        </View>
      </View>
      
      <Text style={styles.outageDescription}>{item.description}</Text>
      
      <View style={styles.outageDetails}>
        <Text style={styles.detailLabel}>Affected Services:</Text>
        <Text style={styles.detailValue}>{item.affected_services.join(', ')}</Text>
      </View>
      
      <View style={styles.outageDetails}>
        <Text style={styles.detailLabel}>Affected Areas:</Text>
        <Text style={styles.detailValue}>{item.affected_areas.join(', ')}</Text>
      </View>
      
      <View style={styles.outageDetails}>
        <Text style={styles.detailLabel}>Start Time:</Text>
        <Text style={styles.detailValue}>
          {new Date(item.start_time).toLocaleString()}
        </Text>
      </View>
      
      {item.estimated_resolution && (
        <View style={styles.outageDetails}>
          <Text style={styles.detailLabel}>Estimated Resolution:</Text>
          <Text style={styles.detailValue}>
            {new Date(item.estimated_resolution).toLocaleString()}
          </Text>
        </View>
      )}
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={outages}
        renderItem={renderOutage}
        keyExtractor={(item) => item.id.toString()}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        contentContainerStyle={styles.listContainer}
        ListEmptyComponent={
          <View style={styles.emptyState}>
            <Text style={styles.emptyTitle}>No Active Outages</Text>
            <Text style={styles.emptySubtitle}>
              All services are running normally
            </Text>
          </View>
        }
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  listContainer: {
    padding: 16,
  },
  outageCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    borderLeftWidth: 4,
  },
  severitycritical: {
    borderLeftColor: '#DC3545',
  },
  severityhigh: {
    borderLeftColor: '#FD7E14',
  },
  severitymedium: {
    borderLeftColor: '#FFC107',
  },
  severitylow: {
    borderLeftColor: '#28A745',
  },
  outageHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  outageTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#343A40',
    flex: 1,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    marginLeft: 8,
  },
  statusongoing: {
    backgroundColor: '#DC3545',
  },
  statusplanned: {
    backgroundColor: '#007BFF',
  },
  statusresolved: {
    backgroundColor: '#28A745',
  },
  statusText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '500',
    textTransform: 'capitalize',
  },
  outageDescription: {
    fontSize: 14,
    color: '#6C757D',
    marginBottom: 16,
    lineHeight: 20,
  },
  outageDetails: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  detailLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#343A40',
    width: 120,
  },
  detailValue: {
    fontSize: 14,
    color: '#6C757D',
    flex: 1,
  },
  emptyState: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 100,
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#343A40',
    marginBottom: 8,
  },
  emptySubtitle: {
    fontSize: 16,
    color: '#6C757D',
    textAlign: 'center',
  },
});

export default OutagesScreen;
```

## Design Principles

### 1. Simplicity
- Clean, uncluttered interfaces
- Minimal cognitive load
- Clear information hierarchy

### 2. Consistency
- Consistent color usage throughout the app
- Uniform spacing and typography
- Predictable interaction patterns

### 3. Accessibility
- High contrast ratios
- Touch targets at least 44x44 points
- Clear focus indicators
- Screen reader support

### 4. Brand Alignment
- Prominent use of brand red (#CC0000)
- Professional and trustworthy appearance
- Consistent with web presence

### 5. Mobile-First
- Optimized for mobile interaction
- Responsive design principles
- Touch-friendly interface elements

## Implementation Notes

### Theme Configuration
```javascript
// themes/colors.js
export const Colors = {
  primary: '#CC0000',
  primaryDark: '#990000',
  primaryLight: '#FF3333',
  white: '#FFFFFF',
  lightGray: '#F8F9FA',
  mediumGray: '#6C757D',
  darkGray: '#343A40',
  borderGray: '#DEE2E6',
  success: '#28A745',
  warning: '#FFC107',
  error: '#DC3545',
  info: '#17A2B8',
};

// themes/typography.js
export const Typography = {
  fontSizes: {
    h1: 32,
    h2: 28,
    h3: 24,
    h4: 20,
    h5: 18,
    h6: 16,
    body: 16,
    bodySmall: 14,
    caption: 12,
    overline: 10,
  },
  fontWeights: {
    thin: '100',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    heavy: '800',
    black: '900',
  },
};

// themes/spacing.js
export const Spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};
```

### Global StyleSheet
```javascript
// styles/globalStyles.js
import { StyleSheet } from 'react-native';
import { Colors, Typography, Spacing } from '../themes';

export const GlobalStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.white,
  },
  card: {
    backgroundColor: Colors.white,
    borderRadius: 12,
    padding: Spacing.md,
    margin: Spacing.md,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
  },
  primaryButton: {
    backgroundColor: Colors.primary,
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
    minHeight: 48,
    justifyContent: 'center',
    alignItems: 'center',
  },
  primaryButtonText: {
    color: Colors.white,
    fontSize: Typography.fontSizes.body,
    fontWeight: Typography.fontWeights.semibold,
  },
  textInput: {
    backgroundColor: Colors.white,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Colors.borderGray,
    paddingHorizontal: Spacing.md,
    paddingVertical: 12,
    fontSize: Typography.fontSizes.body,
    minHeight: 48,
    color: Colors.darkGray,
  },
  sectionTitle: {
    fontSize: Typography.fontSizes.h4,
    fontWeight: Typography.fontWeights.semibold,
    color: Colors.darkGray,
    marginBottom: Spacing.md,
  },
  bodyText: {
    fontSize: Typography.fontSizes.body,
    color: Colors.darkGray,
    lineHeight: 24,
  },
  captionText: {
    fontSize: Typography.fontSizes.caption,
    color: Colors.mediumGray,
  },
});
```

This comprehensive design guideline provides all the necessary components, styles, and patterns needed to create a consistent, professional React Native app that aligns with your brand colors and provides an excellent user experience.