@nextsparkjs/mobile 0.1.0-beta.146 → 0.1.0-beta.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/mobile",
-  "version": "0.1.0-beta.146",
+  "version": "0.1.0-beta.148",
   "description": "Mobile app infrastructure for NextSpark - API client, providers, and utilities for Expo apps",
   "license": "MIT",
   "author": "NextSpark <hello@nextspark.dev>",

package/templates/app/(app)/_layout.tsx

@@ -1,216 +0,0 @@
-/**
- * App Layout - NextSpark Mobile Style with Bottom Tab Navigation
- */
-
-import { useEffect, useState, useMemo } from 'react'
-import { View, StyleSheet } from 'react-native'
-import { Alert, useAuth } from '@nextsparkjs/mobile'
-import { Stack, router } from 'expo-router'
-import { useQueryClient } from '@tanstack/react-query'
-import {
-  TopBar,
-  BottomTabBar,
-  MoreSheet,
-  CreateSheet,
-  type TabKey,
-} from '@/src/components/navigation'
-import { Colors } from '@/src/constants/colors'
-import notificationsData from '@/src/data/notifications.mock.json'
-
-export default function AppLayout() {
-  const { isAuthenticated, isLoading, logout } = useAuth()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState<TabKey>('home')
-  const [moreSheetVisible, setMoreSheetVisible] = useState(false)
-  const [createSheetVisible, setCreateSheetVisible] = useState(false)
-
-  // Calculate unread notifications count from mock data
-  const unreadNotificationCount = useMemo(
-    () => notificationsData.notifications.filter((n) => !n.read).length,
-    []
-  )
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      router.replace('/login')
-    }
-  }, [isAuthenticated, isLoading])
-
-  if (isLoading || !isAuthenticated) {
-    return null
-  }
-
-  const handleTabPress = (tab: TabKey) => {
-    if (tab === 'more') {
-      setMoreSheetVisible(true)
-      return
-    }
-
-    if (tab === 'create') {
-      setCreateSheetVisible(true)
-      return
-    }
-
-    setActiveTab(tab)
-
-    // Navigate based on tab
-    switch (tab) {
-      case 'home':
-        router.replace('/(app)' as const)
-        break
-      case 'tasks':
-        router.replace('/(app)/tasks')
-        break
-      case 'customers':
-        router.replace('/(app)/customers')
-        break
-    }
-  }
-
-  const handleMoreNavigate = (screen: string) => {
-    switch (screen) {
-      case 'profile':
-        router.push('/(app)/profile')
-        break
-      case 'settings':
-        router.push('/(app)/settings')
-        break
-      case 'billing':
-        // TODO: Add billing screen
-        break
-      case 'api-keys':
-        // TODO: Add API keys screen
-        break
-    }
-  }
-
-  const handleCreateEntity = (entity: string) => {
-    switch (entity) {
-      case 'customer':
-        router.push('/(app)/customer/create')
-        break
-      case 'task':
-        router.push('/(app)/task/create')
-        break
-    }
-  }
-
-  const handleLogout = async () => {
-    setMoreSheetVisible(false)
-    const confirmed = await Alert.confirmDestructive(
-      'Cerrar Sesión',
-      '¿Estás seguro que deseas salir?',
-      'Salir'
-    )
-
-    if (confirmed) {
-      await logout()
-      router.replace('/login')
-    }
-  }
-
-  const handleTeamChange = () => {
-    // Invalidate all queries to refresh data for the new team
-    queryClient.invalidateQueries()
-    // Navigate to home to show refreshed data
-    setActiveTab('home')
-    router.replace('/(app)' as const)
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Top Bar */}
-      <TopBar notificationCount={unreadNotificationCount} />
-
-      {/* Screen Content */}
-      <View style={styles.content}>
-        <Stack
-          screenOptions={{
-            headerShown: false,
-            contentStyle: { backgroundColor: Colors.backgroundSecondary },
-          }}
-        >
-          <Stack.Screen name="index" />
-          <Stack.Screen name="tasks" />
-          <Stack.Screen name="customers" />
-          <Stack.Screen name="settings" />
-          <Stack.Screen name="profile" />
-          <Stack.Screen
-            name="notifications"
-            options={{
-              headerShown: false,
-              presentation: 'modal',
-            }}
-          />
-          <Stack.Screen
-            name="task/create"
-            options={{
-              presentation: 'modal',
-              headerShown: true,
-              headerTitle: 'Nueva Tarea',
-              headerStyle: { backgroundColor: Colors.background },
-              headerTintColor: Colors.foreground,
-            }}
-          />
-          <Stack.Screen
-            name="task/[id]"
-            options={{
-              headerShown: true,
-              headerTitle: 'Editar Tarea',
-              headerStyle: { backgroundColor: Colors.background },
-              headerTintColor: Colors.foreground,
-            }}
-          />
-          <Stack.Screen
-            name="customer/create"
-            options={{
-              presentation: 'modal',
-              headerShown: true,
-              headerTitle: 'Nuevo Cliente',
-              headerStyle: { backgroundColor: Colors.background },
-              headerTintColor: Colors.foreground,
-            }}
-          />
-          <Stack.Screen
-            name="customer/[id]"
-            options={{
-              headerShown: true,
-              headerTitle: 'Editar Cliente',
-              headerStyle: { backgroundColor: Colors.background },
-              headerTintColor: Colors.foreground,
-            }}
-          />
-        </Stack>
-      </View>
-
-      {/* Bottom Tab Bar */}
-      <BottomTabBar activeTab={activeTab} onTabPress={handleTabPress} />
-
-      {/* More Options Sheet */}
-      <MoreSheet
-        visible={moreSheetVisible}
-        onClose={() => setMoreSheetVisible(false)}
-        onNavigate={handleMoreNavigate}
-        onLogout={handleLogout}
-        onTeamChange={handleTeamChange}
-      />
-
-      {/* Create Sheet */}
-      <CreateSheet
-        visible={createSheetVisible}
-        onClose={() => setCreateSheetVisible(false)}
-        onCreateEntity={handleCreateEntity}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.background,
-  },
-  content: {
-    flex: 1,
-  },
-})

package/templates/app/(app)/customer/[id].tsx

@@ -1,68 +0,0 @@
-/**
- * Edit Customer Screen
- */
-
-import { useLocalSearchParams, router } from 'expo-router'
-import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
-import { CustomerForm } from '@/src/components/entities/customers'
-import { useCustomer, useUpdateCustomer, useDeleteCustomer, type UpdateCustomerInput } from '@/src/entities/customers'
-
-export default function EditCustomerScreen() {
-  const { id } = useLocalSearchParams<{ id: string }>()
-  const { data, isLoading, error } = useCustomer(id)
-  const updateCustomer = useUpdateCustomer()
-  const deleteCustomer = useDeleteCustomer()
-
-  const handleSubmit = async (formData: UpdateCustomerInput) => {
-    if (!id) return
-    await updateCustomer.mutateAsync({ id, data: formData })
-    router.back()
-  }
-
-  const handleDelete = async () => {
-    if (!id) return
-    await deleteCustomer.mutateAsync(id)
-    router.replace('/(app)/customers')
-  }
-
-  if (isLoading) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#10B981" />
-      </View>
-    )
-  }
-
-  if (error || !data?.data) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>
-          {error instanceof Error ? error.message : 'Customer not found'}
-        </Text>
-      </View>
-    )
-  }
-
-  return (
-    <CustomerForm
-      mode="edit"
-      initialData={data.data}
-      onSubmit={handleSubmit}
-      onDelete={handleDelete}
-      isLoading={updateCustomer.isPending || deleteCustomer.isPending}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F9FAFB',
-  },
-  errorText: {
-    color: '#DC2626',
-    fontSize: 16,
-  },
-})

package/templates/app/(app)/customer/create.tsx

@@ -1,24 +0,0 @@
-/**
- * Create Customer Screen
- */
-
-import { router } from 'expo-router'
-import { CustomerForm } from '@/src/components/entities/customers'
-import { useCreateCustomer, type CreateCustomerInput } from '@/src/entities/customers'
-
-export default function CreateCustomerScreen() {
-  const createCustomer = useCreateCustomer()
-
-  const handleSubmit = async (data: CreateCustomerInput) => {
-    await createCustomer.mutateAsync(data)
-    router.back()
-  }
-
-  return (
-    <CustomerForm
-      mode="create"
-      onSubmit={handleSubmit}
-      isLoading={createCustomer.isPending}
-    />
-  )
-}

package/templates/app/(app)/customers.tsx

@@ -1,164 +0,0 @@
-/**
- * Customers List Screen
- */
-
-import { useCallback, useState } from 'react'
-import {
-  View,
-  Text,
-  FlatList,
-  RefreshControl,
-  StyleSheet,
-} from 'react-native'
-import { router } from 'expo-router'
-import { useCustomers, type Customer } from '@/src/entities/customers'
-import { CustomerCard } from '@/src/components/entities/customers'
-import { Button } from '@/src/components/ui'
-import { Colors } from '@/src/constants/colors'
-
-export default function CustomersListScreen() {
-  const { data, isLoading, error, refetch } = useCustomers()
-  const [refreshing, setRefreshing] = useState(false)
-
-  const onRefresh = useCallback(async () => {
-    setRefreshing(true)
-    try {
-      await refetch()
-    } finally {
-      setRefreshing(false)
-    }
-  }, [refetch])
-
-  const handleCustomerPress = (customer: Customer) => {
-    router.push(`/(app)/customer/${customer.id}`)
-  }
-
-  const renderCustomer = ({ item }: { item: Customer }) => (
-    <CustomerCard customer={item} onPress={() => handleCustomerPress(item)} />
-  )
-
-  const renderEmpty = () => {
-    if (isLoading) return null
-
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={styles.emptyIcon}>👥</Text>
-        <Text style={styles.emptyTitle}>Sin clientes</Text>
-        <Text style={styles.emptyText}>
-          Toca el botón Crear para agregar tu primer cliente
-        </Text>
-      </View>
-    )
-  }
-
-  const renderError = () => (
-    <View style={styles.errorContainer}>
-      <Text style={styles.errorTitle}>Algo salió mal</Text>
-      <Text style={styles.errorText}>
-        {error instanceof Error ? error.message : 'Error al cargar clientes'}
-      </Text>
-      <Button onPress={() => refetch()}>
-        Reintentar
-      </Button>
-    </View>
-  )
-
-  return (
-    <View style={styles.container}>
-      {/* Page Header */}
-      <View style={styles.header}>
-        <Text style={styles.pageTitle}>Clientes</Text>
-        <Text style={styles.pageSubtitle}>
-          Gestiona tu cartera de clientes
-        </Text>
-      </View>
-
-      {/* Error State */}
-      {error && renderError()}
-
-      {/* Customers List */}
-      {!error && (
-        <FlatList
-          data={data?.data || []}
-          renderItem={renderCustomer}
-          keyExtractor={(item) => item.id}
-          contentContainerStyle={styles.listContent}
-          refreshControl={
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={Colors.primary}
-            />
-          }
-          ListEmptyComponent={renderEmpty}
-          showsVerticalScrollIndicator={false}
-        />
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.backgroundSecondary,
-  },
-  header: {
-    padding: 20,
-    paddingBottom: 12,
-  },
-  pageTitle: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: Colors.foreground,
-    marginBottom: 4,
-  },
-  pageSubtitle: {
-    fontSize: 15,
-    color: Colors.foregroundSecondary,
-  },
-  listContent: {
-    paddingBottom: 12,
-    flexGrow: 1,
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-  },
-  emptyIcon: {
-    fontSize: 48,
-    marginBottom: 16,
-    opacity: 0.5,
-  },
-  emptyTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: Colors.foreground,
-    marginBottom: 8,
-  },
-  emptyText: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    textAlign: 'center',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-  },
-  errorTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: Colors.destructive,
-    marginBottom: 8,
-  },
-  errorText: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-})