feat: Implement SubscriptionDetail screen

- Created SubscriptionDetailScreen with full subscription details
- Added pause/resume/cancel functionality
- Updated navigation to include SubscriptionDetail route
- Fixed type issues in navigation

Closes #8

Author: Smartdevs17

src/components/common/Button.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
-import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import { colors, spacing, typography, borderRadius } from '../../utils/constants';
 
 export interface ButtonProps {
   title: string;
   onPress: () => void;
-  variant?: 'primary' | 'secondary' | 'outline' | 'crypto';
+  variant?: 'primary' | 'secondary' | 'outline' | 'crypto' | 'danger';
   size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
   loading?: boolean;
   fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 export const Button: React.FC<ButtonProps> = ({
@@ -20,13 +28,15 @@ export const Button: React.FC<ButtonProps> = ({
   disabled = false,
   loading = false,
   fullWidth = false,
+  style,
 }) => {
   const buttonStyle = [
     styles.button,
     styles[variant],
     styles[size],
     fullWidth && styles.fullWidth,
     disabled && styles.disabled,
+    style,
   ];
 
   const textStyle = [
@@ -41,8 +51,7 @@ export const Button: React.FC<ButtonProps> = ({
       style={buttonStyle}
       onPress={onPress}
       disabled={disabled || loading}
-      activeOpacity={0.8}
-    >
+      activeOpacity={0.8}>
       {loading ? (
         <ActivityIndicator
           color={variant === 'outline' ? colors.primary : colors.text}
@@ -62,7 +71,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  
+
   // Variants
   primary: {
     backgroundColor: colors.primary,
@@ -78,7 +87,10 @@ const styles = StyleSheet.create({
   crypto: {
     backgroundColor: colors.accent,
   },
-  
+  danger: {
+    backgroundColor: colors.error,
+  },
+
   // Sizes
   small: {
     paddingVertical: spacing.sm,
@@ -95,15 +107,15 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xl,
     minHeight: 56,
   },
-  
+
   // States
   disabled: {
     opacity: 0.5,
   },
   fullWidth: {
     width: '100%',
   },
-  
+
   // Text styles
   text: {
     fontWeight: '600',
@@ -120,7 +132,10 @@ const styles = StyleSheet.create({
   cryptoText: {
     color: colors.text,
   },
-  
+  dangerText: {
+    color: colors.text,
+  },
+
   smallText: {
     ...typography.caption,
   },
@@ -130,7 +145,7 @@ const styles = StyleSheet.create({
   largeText: {
     ...typography.h3,
   },
-  
+
   disabledText: {
     opacity: 0.7,
   },

src/navigation/AppNavigator.tsx

@@ -7,6 +7,9 @@ import HomeScreen from '../screens/HomeScreen';
 import AddSubscriptionScreen from '../screens/AddSubscriptionScreen';
 import WalletConnectScreen from '../screens/WalletConnectScreen';
 import CryptoPaymentScreen from '../screens/CryptoPaymentScreen';
+import SubscriptionDetailScreen from '../screens/SubscriptionDetailScreen';
+import AnalyticsScreen from '../screens/AnalyticsScreen';
+import SettingsScreen from '../screens/SettingsScreen';
 import { colors } from '../utils/constants';
 import { RootStackParamList, TabParamList } from './types';
 
@@ -15,23 +18,24 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const HomeStack = () => (
   <Stack.Navigator>
-    <Stack.Screen 
-      name="Home" 
-      component={HomeScreen}
+    <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
+    <Stack.Screen
+      name="AddSubscription"
+      component={AddSubscriptionScreen}
       options={{ headerShown: false }}
     />
-    <Stack.Screen 
-      name="AddSubscription" 
-      component={AddSubscriptionScreen}
+    <Stack.Screen
+      name="SubscriptionDetail"
+      component={SubscriptionDetailScreen}
       options={{ headerShown: false }}
     />
-    <Stack.Screen 
-      name="WalletConnect" 
+    <Stack.Screen
+      name="WalletConnect"
       component={WalletConnectScreen}
       options={{ headerShown: false }}
     />
-    <Stack.Screen 
-      name="CryptoPayment" 
+    <Stack.Screen
+      name="CryptoPayment"
       component={CryptoPaymentScreen}
       options={{ headerShown: false }}
     />
@@ -49,8 +53,7 @@ const TabNavigator = () => (
       tabBarActiveTintColor: colors.primary,
       tabBarInactiveTintColor: colors.textSecondary,
       headerShown: false,
-    }}
-  >
+    }}>
     <Tab.Screen
       name="HomeTab"
       component={HomeStack}
@@ -81,6 +84,26 @@ const TabNavigator = () => (
         ),
       }}
     />
+    <Tab.Screen
+      name="AnalyticsTab"
+      component={AnalyticsScreen}
+      options={{
+        tabBarLabel: 'Analytics',
+        tabBarIcon: ({ color, size }) => (
+          <Text style={{ color, fontSize: size, fontWeight: 'bold' }}>📊</Text>
+        ),
+      }}
+    />
+    <Tab.Screen
+      name="SettingsTab"
+      component={SettingsScreen}
+      options={{
+        tabBarLabel: 'Settings',
+        tabBarIcon: ({ color, size }) => (
+          <Text style={{ color, fontSize: size, fontWeight: 'bold' }}>⚙️</Text>
+        ),
+      }}
+    />
   </Tab.Navigator>
 );