diff --git a/src/components/home/SubscriptionList.tsx b/src/components/home/SubscriptionList.tsx index da4f76f4..27d3d6e0 100644 --- a/src/components/home/SubscriptionList.tsx +++ b/src/components/home/SubscriptionList.tsx @@ -1,10 +1,11 @@ import React, { useCallback } from 'react'; -import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import { View, Text, StyleSheet } from 'react-native'; import { FlashList } from '@shopify/flash-list'; import { colors, spacing, typography, borderRadius, shadows } from '../../utils/constants'; import { SubscriptionCard } from '../subscription/SubscriptionCard'; import { Subscription } from '../../types/subscription'; import { usePerformanceProfiler } from '../../hooks/usePerformanceProfiler'; +import { EmptyState } from '../common/EmptyState'; interface SubscriptionListProps { subscriptions: Subscription[]; @@ -97,7 +98,7 @@ export const SubscriptionList: React.FC = React.memo( Your Subscriptions - {hasSubscriptions && ( + {hasSubscriptions && activeSubscriptions.length > 0 && ( = React.memo( )} - {hasSubscriptions ? ( + {!hasSubscriptions ? ( + /* Context 1: Absolute empty state (no tracking items exist) */ + + ) : activeSubscriptions.length === 0 ? ( + /* Context 2: Active filter empty state (subscriptions exist but filtered out) */ + + ) : ( = React.memo( showsVerticalScrollIndicator={false} /> - ) : ( - - - ๐Ÿ“ฑ - - - No subscriptions yet - - - Add your first subscription to start tracking your spending - - - Add Subscription - - )} @@ -226,37 +211,4 @@ const styles = StyleSheet.create({ subscriptionsList: { marginBottom: spacing.lg, }, - emptyState: { - alignItems: 'center', - paddingVertical: spacing.xl, - paddingHorizontal: spacing.lg, - }, - emptyIcon: { - fontSize: 48, - marginBottom: spacing.md, - }, - emptyText: { - ...typography.h3, - color: colors.text, - marginBottom: spacing.xs, - textAlign: 'center', - }, - emptySubtext: { - ...typography.body, - color: colors.textSecondary, - textAlign: 'center', - marginBottom: spacing.lg, - lineHeight: 22, - }, - addFirstButton: { - backgroundColor: colors.primary, - paddingVertical: spacing.md, - paddingHorizontal: spacing.lg, - borderRadius: borderRadius.md, - }, - addFirstButtonText: { - ...typography.body, - color: colors.text, - fontWeight: '600', - }, }); diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index a9f20d63..49c8db5d 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -46,8 +46,7 @@ const HomeScreen: React.FC = () => { const [upcomingSubscriptions, setUpcomingSubscriptions] = useState([]); const [showFilterModal, setShowFilterModal] = useState(false); - - // Use the new hook + // Use the filter tracking hook const { filters, filteredAndSorted, activeFilterCount, hasActiveFilters, clearAllFilters } = useFilteredSubscriptions(subscriptions); @@ -66,7 +65,6 @@ const HomeScreen: React.FC = () => { if (subscriptions) setUpcomingSubscriptions(getUpcomingSubscriptions(subscriptions)); }, [subscriptions, calculateStats, preferredCurrency, exchangeRates]); - const onRefresh = async () => { await refresh({ fetcher: refreshSubscriptions, @@ -160,7 +158,6 @@ const HomeScreen: React.FC = () => { currency={preferredCurrency} /> - {!isOnline && ( @@ -304,4 +301,4 @@ function createStyles(colors: ReturnType) { }); } -export default HomeScreen; +export default HomeScreen; \ No newline at end of file diff --git a/src/screens/InvoiceListScreen.tsx b/src/screens/InvoiceListScreen.tsx index 716c5fdd..7daac30e 100644 --- a/src/screens/InvoiceListScreen.tsx +++ b/src/screens/InvoiceListScreen.tsx @@ -66,8 +66,10 @@ const InvoiceListScreen: React.FC = () => { {sortedInvoices.length === 0 ? ( navigation.navigate('Home')} /> ) : ( sortedInvoices.map((invoice) => ( @@ -87,14 +89,16 @@ const InvoiceListScreen: React.FC = () => { - Total - - {formatCurrency(invoice.total, invoice.currency)} - - - - Due - {formatDate(invoice.dueDate)} + + Total + + {formatCurrency(invoice.total, invoice.currency)} + + + + Due + {formatDate(invoice.dueDate)} + @@ -130,7 +134,12 @@ function createStyles(colors: ReturnType) { alignItems: 'center', marginTop: spacing.sm, }, - detailLabel: { ...typography.caption, color: colors.textSecondary, textTransform: 'uppercase' }, + detailLabel: { + ...typography.caption, + color: colors.textSecondary, + textTransform: 'uppercase', + marginBottom: 2, + }, detailValue: { ...typography.body, color: colors.text }, totalValue: { ...typography.h3, color: colors.accent }, }); diff --git a/src/store/subscriptionStore.ts b/src/store/subscriptionStore.ts index ee568fc8..f3c7fa2b 100644 --- a/src/store/subscriptionStore.ts +++ b/src/store/subscriptionStore.ts @@ -608,7 +608,6 @@ export const useSubscriptionStore = create()( fetchSubscriptions: async () => { set({ isLoading: true, error: null }); try { - // TODO: Replace with remote sync; local storage remains source-of-truth offline. await new Promise((resolve) => setTimeout(resolve, 1000)); set({ isLoading: false }); get().calculateStats();