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

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

@@ -1,310 +0,0 @@
-/**
- * Home/Dashboard Screen
- */
-
-import { useState } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
-import { router } from 'expo-router'
-import { useAuth } from '@nextsparkjs/mobile'
-import { useTasks } from '@/src/entities/tasks'
-import { useCustomers } from '@/src/entities/customers'
-import { Colors } from '@/src/constants/colors'
-import { Button } from '@/src/components/ui'
-import {
-  Progress,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  Slider,
-} from '@nextsparkjs/ui'
-
-export default function HomeScreen() {
-  const { user, team } = useAuth()
-  const { data: tasksData } = useTasks()
-  const { data: customersData } = useCustomers()
-  const [activeTab, setActiveTab] = useState('tab1')
-  const [sliderValue, setSliderValue] = useState([50])
-
-  const firstName = user?.name?.split(' ')[0] || 'Usuario'
-  const taskCount = tasksData?.data?.length || 0
-  const customerCount = customersData?.data?.length || 0
-
-  // Count tasks by status
-  const todoTasks = tasksData?.data?.filter((t) => t.status === 'todo').length || 0
-  const inProgressTasks =
-    tasksData?.data?.filter((t) => t.status === 'in-progress').length || 0
-
-  return (
-    <ScrollView style={styles.container}>
-      {/* Welcome Header */}
-      <View style={styles.header}>
-        <Text style={styles.pageTitle}>Dashboard</Text>
-        <Text style={styles.welcomeText}>Bienvenido de vuelta, {firstName}</Text>
-      </View>
-
-      {/* Stats Cards */}
-      <View style={styles.cardsContainer}>
-        {/* Account Status Card */}
-        <View style={styles.card}>
-          <View style={styles.cardHeader}>
-            <Text style={styles.cardLabel}>Estado de Cuenta</Text>
-            <Text style={styles.cardIcon}>📈</Text>
-          </View>
-          <Text style={styles.cardValue}>Activo</Text>
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>verificado</Text>
-          </View>
-        </View>
-
-        {/* Plan Card */}
-        <View style={styles.card}>
-          <View style={styles.cardHeader}>
-            <Text style={styles.cardLabel}>Plan</Text>
-            <Text style={styles.cardIcon}>💳</Text>
-          </View>
-          <Text style={styles.cardValue}>Gratis</Text>
-          <Button variant="link" size="sm" style={{ alignSelf: 'flex-start', height: 'auto', paddingHorizontal: 0 }}>
-            Actualizar plan →
-          </Button>
-        </View>
-
-        {/* Tasks Summary Card */}
-        <TouchableOpacity
-          style={styles.card}
-          onPress={() => router.push('/(app)/tasks')}
-          activeOpacity={0.7}
-        >
-          <View style={styles.cardHeader}>
-            <Text style={styles.cardLabel}>Mis Tareas</Text>
-            <Text style={styles.cardIcon}>☑</Text>
-          </View>
-          <Text style={styles.cardValue}>{taskCount}</Text>
-          <View style={styles.statsRow}>
-            <Text style={styles.statItem}>
-              <Text style={styles.statNumber}>{todoTasks}</Text> pendientes
-            </Text>
-            <Text style={styles.statItem}>
-              <Text style={styles.statNumber}>{inProgressTasks}</Text> en progreso
-            </Text>
-          </View>
-        </TouchableOpacity>
-
-        {/* Customers Card */}
-        <TouchableOpacity
-          style={styles.card}
-          onPress={() => router.push('/(app)/customers')}
-          activeOpacity={0.7}
-        >
-          <View style={styles.cardHeader}>
-            <Text style={styles.cardLabel}>Clientes</Text>
-            <Text style={styles.cardIcon}>👥</Text>
-          </View>
-          <Text style={styles.cardValue}>{customerCount}</Text>
-          <Text style={styles.cardLink}>Ver todos →</Text>
-        </TouchableOpacity>
-
-        {/* Team Card */}
-        {team && (
-          <View style={styles.card}>
-            <View style={styles.cardHeader}>
-              <Text style={styles.cardLabel}>Equipo Actual</Text>
-              <Text style={styles.cardIcon}>🏢</Text>
-            </View>
-            <Text style={styles.cardValue}>{team.name}</Text>
-            <View style={styles.badge}>
-              <Text style={styles.badgeText}>{team.role}</Text>
-            </View>
-          </View>
-        )}
-      </View>
-
-      {/* === TEST COMPONENTS - Phase 3 Migration === */}
-      <View style={styles.testSection}>
-        <Text style={styles.testTitle}>Component Test (Phase 3)</Text>
-
-        {/* Progress Test */}
-        <View style={styles.testCard}>
-          <Text style={styles.testLabel}>Progress Component</Text>
-          <Progress value={30} style={{ marginBottom: 8 }} />
-          <Progress value={60} style={{ marginBottom: 8 }} />
-          <Progress value={90} />
-        </View>
-
-        {/* Tabs Test */}
-        <View style={styles.testCard}>
-          <Text style={styles.testLabel}>Tabs Component</Text>
-          <Tabs value={activeTab} onValueChange={setActiveTab}>
-            <TabsList>
-              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-              <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-              <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-            </TabsList>
-            <TabsContent value="tab1">
-              <Text style={styles.testText}>Content for Tab 1</Text>
-            </TabsContent>
-            <TabsContent value="tab2">
-              <Text style={styles.testText}>Content for Tab 2</Text>
-            </TabsContent>
-            <TabsContent value="tab3">
-              <Text style={styles.testText}>Content for Tab 3</Text>
-            </TabsContent>
-          </Tabs>
-        </View>
-
-        {/* Accordion Test */}
-        <View style={styles.testCard}>
-          <Text style={styles.testLabel}>Accordion Component</Text>
-          <Accordion type="single" collapsible>
-            <AccordionItem value="item1">
-              <AccordionTrigger>Section 1</AccordionTrigger>
-              <AccordionContent>
-                <Text style={styles.testText}>This is the content for section 1.</Text>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item2">
-              <AccordionTrigger>Section 2</AccordionTrigger>
-              <AccordionContent>
-                <Text style={styles.testText}>This is the content for section 2.</Text>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </View>
-
-        {/* Slider Test */}
-        <View style={styles.testCard}>
-          <Text style={styles.testLabel}>Slider Component</Text>
-          <Text style={styles.testText}>Value: {sliderValue[0]}</Text>
-          <Slider
-            value={sliderValue}
-            onValueChange={setSliderValue}
-            min={0}
-            max={100}
-            step={1}
-          />
-        </View>
-      </View>
-      {/* === END TEST COMPONENTS === */}
-
-      <View style={styles.spacer} />
-    </ScrollView>
-  )
-}
-
-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,
-  },
-  welcomeText: {
-    fontSize: 15,
-    color: Colors.foregroundSecondary,
-  },
-  cardsContainer: {
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  card: {
-    backgroundColor: Colors.card,
-    borderRadius: 12,
-    padding: 20,
-    borderWidth: 1,
-    borderColor: Colors.border,
-  },
-  cardHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  cardLabel: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    fontWeight: '500',
-  },
-  cardIcon: {
-    fontSize: 18,
-  },
-  cardValue: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: Colors.foreground,
-    marginBottom: 8,
-  },
-  badge: {
-    alignSelf: 'flex-start',
-    backgroundColor: Colors.backgroundTertiary,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 6,
-  },
-  badgeText: {
-    fontSize: 12,
-    color: Colors.foregroundSecondary,
-    fontWeight: '500',
-  },
-  cardLink: {
-    fontSize: 14,
-    color: Colors.foreground,
-    fontWeight: '500',
-  },
-  statsRow: {
-    flexDirection: 'row',
-    gap: 16,
-  },
-  statItem: {
-    fontSize: 13,
-    color: Colors.foregroundSecondary,
-  },
-  statNumber: {
-    fontWeight: '600',
-    color: Colors.foreground,
-  },
-  spacer: {
-    height: 40,
-  },
-  // Test section styles
-  testSection: {
-    padding: 16,
-    marginTop: 16,
-  },
-  testTitle: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: Colors.foreground,
-    marginBottom: 16,
-  },
-  testCard: {
-    backgroundColor: Colors.card,
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: Colors.border,
-  },
-  testLabel: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: Colors.foregroundSecondary,
-    marginBottom: 12,
-  },
-  testText: {
-    fontSize: 14,
-    color: Colors.foreground,
-    paddingVertical: 8,
-  },
-})

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

@@ -1,242 +0,0 @@
-/**
- * Notifications Screen
- * Displays mock notifications data
- */
-
-import { useState, useMemo } from "react";
-import { View, FlatList, Pressable, RefreshControl } from "react-native";
-import { router } from "expo-router";
-import { Text, Card, Badge, Separator, Button } from "@/src/components/ui";
-import { cn } from "@/src/lib/utils";
-import notificationsData from "@/src/data/notifications.mock.json";
-
-interface Notification {
-  id: string;
-  type: string;
-  title: string;
-  message: string;
-  read: boolean;
-  createdAt: string;
-  data: Record<string, unknown>;
-}
-
-const NOTIFICATION_ICONS: Record<string, string> = {
-  task_assigned: "📋",
-  task_completed: "✅",
-  task_due_soon: "⏰",
-  task_overdue: "🚨",
-  task_comment: "💬",
-  customer_added: "👤",
-  team_invite: "👥",
-  system: "⚙️",
-};
-
-const NOTIFICATION_COLORS: Record<string, string> = {
-  task_assigned: "bg-blue-100",
-  task_completed: "bg-green-100",
-  task_due_soon: "bg-amber-100",
-  task_overdue: "bg-red-100",
-  task_comment: "bg-purple-100",
-  customer_added: "bg-cyan-100",
-  team_invite: "bg-indigo-100",
-  system: "bg-gray-100",
-};
-
-function formatTimeAgo(dateString: string): string {
-  const date = new Date(dateString);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMs / 3600000);
-  const diffDays = Math.floor(diffMs / 86400000);
-
-  if (diffMins < 60) {
-    return `hace ${diffMins} min`;
-  } else if (diffHours < 24) {
-    return `hace ${diffHours}h`;
-  } else if (diffDays === 1) {
-    return "ayer";
-  } else if (diffDays < 7) {
-    return `hace ${diffDays} días`;
-  } else {
-    return date.toLocaleDateString("es-ES", {
-      day: "numeric",
-      month: "short",
-    });
-  }
-}
-
-function NotificationItem({
-  notification,
-  onPress,
-  onMarkAsRead,
-}: {
-  notification: Notification;
-  onPress: () => void;
-  onMarkAsRead: () => void;
-}) {
-  const icon = NOTIFICATION_ICONS[notification.type] || "🔔";
-  const bgColor = NOTIFICATION_COLORS[notification.type] || "bg-gray-100";
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onLongPress={onMarkAsRead}
-      className={cn(
-        "mx-4 my-1 rounded-xl border bg-card p-4",
-        notification.read ? "border-border opacity-70" : "border-primary/20"
-      )}
-    >
-      <View className="flex-row gap-3">
-        {/* Icon */}
-        <View
-          className={cn(
-            "h-10 w-10 items-center justify-center rounded-full",
-            bgColor
-          )}
-        >
-          <Text className="text-lg">{icon}</Text>
-        </View>
-
-        {/* Content */}
-        <View className="flex-1">
-          <View className="flex-row items-start justify-between">
-            <Text
-              variant="subheading"
-              className={cn("flex-1", !notification.read && "font-bold")}
-              numberOfLines={1}
-            >
-              {notification.title}
-            </Text>
-            {!notification.read && (
-              <View className="ml-2 h-2 w-2 rounded-full bg-primary" />
-            )}
-          </View>
-
-          <Text variant="muted" className="mt-1" numberOfLines={2}>
-            {notification.message}
-          </Text>
-
-          <Text variant="muted" size="xs" className="mt-2">
-            {formatTimeAgo(notification.createdAt)}
-          </Text>
-        </View>
-      </View>
-    </Pressable>
-  );
-}
-
-export default function NotificationsScreen() {
-  const [notifications, setNotifications] = useState<Notification[]>(
-    notificationsData.notifications as Notification[]
-  );
-  const [refreshing, setRefreshing] = useState(false);
-
-  const unreadCount = useMemo(
-    () => notifications.filter((n) => !n.read).length,
-    [notifications]
-  );
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    // Simulate refresh delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    setRefreshing(false);
-  };
-
-  const handleNotificationPress = (notification: Notification) => {
-    // Mark as read
-    setNotifications((prev) =>
-      prev.map((n) => (n.id === notification.id ? { ...n, read: true } : n))
-    );
-
-    // Navigate based on type
-    if (notification.type.startsWith("task_") && notification.data.taskId) {
-      router.push(`/(app)/task/${notification.data.taskId}`);
-    } else if (notification.type === "customer_added" && notification.data.customerId) {
-      router.push(`/(app)/customer/${notification.data.customerId}`);
-    }
-  };
-
-  const handleMarkAsRead = (notificationId: string) => {
-    setNotifications((prev) =>
-      prev.map((n) => (n.id === notificationId ? { ...n, read: true } : n))
-    );
-  };
-
-  const handleMarkAllAsRead = () => {
-    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
-  };
-
-  const handleClearAll = () => {
-    setNotifications([]);
-  };
-
-  return (
-    <View className="flex-1 bg-secondary">
-      {/* Header */}
-      <View className="flex-row items-center justify-between bg-background px-4 py-3 border-b border-border">
-        <Pressable onPress={() => router.back()} className="p-2 -ml-2">
-          <Text size="xl">←</Text>
-        </Pressable>
-        <Text variant="heading" size="lg">
-          Notificaciones
-        </Text>
-        <View className="w-10" />
-      </View>
-
-      {/* Actions Bar */}
-      {notifications.length > 0 && (
-        <View className="flex-row items-center justify-between px-4 py-2 bg-background border-b border-border">
-          <View className="flex-row items-center gap-2">
-            {unreadCount > 0 && (
-              <Badge variant="default">
-                {unreadCount} sin leer
-              </Badge>
-            )}
-          </View>
-          <View className="flex-row gap-2">
-            {unreadCount > 0 && (
-              <Button variant="link" size="sm" onPress={handleMarkAllAsRead}>
-                Marcar todo leído
-              </Button>
-            )}
-            <Button variant="link" size="sm" onPress={handleClearAll} textStyle={{ color: '#ef4444' }}>
-              Limpiar
-            </Button>
-          </View>
-        </View>
-      )}
-
-      {/* Notifications List */}
-      {notifications.length === 0 ? (
-        <View className="flex-1 items-center justify-center p-8">
-          <Text className="text-6xl mb-4">🔔</Text>
-          <Text variant="heading" size="lg" className="text-center">
-            Sin notificaciones
-          </Text>
-          <Text variant="muted" className="text-center mt-2">
-            Cuando recibas notificaciones, aparecerán aquí
-          </Text>
-        </View>
-      ) : (
-        <FlatList
-          data={notifications}
-          keyExtractor={(item) => item.id}
-          renderItem={({ item }) => (
-            <NotificationItem
-              notification={item}
-              onPress={() => handleNotificationPress(item)}
-              onMarkAsRead={() => handleMarkAsRead(item.id)}
-            />
-          )}
-          contentContainerStyle={{ paddingVertical: 8 }}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-          }
-          ItemSeparatorComponent={() => <View className="h-1" />}
-        />
-      )}
-    </View>
-  );
-}