@nextsparkjs/mobile 0.1.0-beta.1

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

@@ -0,0 +1,242 @@
+/**
+ * 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>
+  );
+}

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

@@ -0,0 +1,254 @@
+/**
+ * Profile Screen - User information and settings
+ */
+
+import { View, Text, TextInput, ScrollView, StyleSheet } from 'react-native'
+import { useAuth } from '@nextsparkjs/mobile'
+import { Colors } from '@/src/constants/colors'
+
+export default function ProfileScreen() {
+  const { user } = useAuth()
+
+  // Split name into first and last name
+  const nameParts = user?.name?.split(' ') || ['', '']
+  const firstName = nameParts[0] || ''
+  const lastName = nameParts.slice(1).join(' ') || ''
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Page Header */}
+      <View style={styles.header}>
+        <Text style={styles.pageTitle}>Información Personal</Text>
+        <Text style={styles.pageSubtitle}>
+          Gestiona tu información personal y preferencias básicas de tu cuenta.
+        </Text>
+      </View>
+
+      {/* Personal Data Card */}
+      <View style={styles.card}>
+        <View style={styles.cardHeader}>
+          <Text style={styles.cardIcon}>👤</Text>
+          <View>
+            <Text style={styles.cardTitle}>Datos Personales</Text>
+            <Text style={styles.cardSubtitle}>
+              Actualiza tu nombre, país, zona horaria e idioma preferido
+            </Text>
+          </View>
+        </View>
+
+        {/* Name Field */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Nombre</Text>
+          <TextInput
+            style={styles.input}
+            value={firstName}
+            editable={false}
+            placeholder="Tu nombre"
+            placeholderTextColor={Colors.foregroundMuted}
+          />
+        </View>
+
+        {/* Last Name Field */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Apellido</Text>
+          <TextInput
+            style={styles.input}
+            value={lastName}
+            editable={false}
+            placeholder="Tu apellido"
+            placeholderTextColor={Colors.foregroundMuted}
+          />
+        </View>
+
+        {/* Email Field */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Email</Text>
+          <View style={styles.emailInputWrapper}>
+            <Text style={styles.emailIcon}>✉</Text>
+            <TextInput
+              style={[styles.input, styles.emailInput]}
+              value={user?.email || ''}
+              editable={false}
+              placeholder="Tu email"
+              placeholderTextColor={Colors.foregroundMuted}
+            />
+          </View>
+          <Text style={styles.hint}>No se puede cambiar</Text>
+        </View>
+
+        {/* Auth Method */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Método de Autenticación</Text>
+          <View style={styles.readOnlyRow}>
+            <Text style={styles.readOnlyIcon}>✉</Text>
+            <Text style={styles.readOnlyText}>Email</Text>
+          </View>
+        </View>
+
+        {/* Verification Status */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Estado de Verificación</Text>
+          <View style={styles.readOnlyRow}>
+            <Text style={styles.verifiedIcon}>✓</Text>
+            <Text style={styles.verifiedText}>Verificado</Text>
+          </View>
+        </View>
+
+        {/* Language */}
+        <View style={styles.field}>
+          <Text style={styles.label}>Idioma</Text>
+          <View style={styles.selectWrapper}>
+            <Text style={styles.selectIcon}>文</Text>
+            <Text style={styles.selectText}>Español</Text>
+            <Text style={styles.selectChevron}>⌄</Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.spacer} />
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundSecondary,
+  },
+  header: {
+    padding: 20,
+  },
+  pageTitle: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: Colors.foreground,
+    marginBottom: 8,
+  },
+  pageSubtitle: {
+    fontSize: 15,
+    color: Colors.foregroundSecondary,
+    lineHeight: 22,
+  },
+  card: {
+    backgroundColor: Colors.card,
+    marginHorizontal: 16,
+    borderRadius: 12,
+    padding: 20,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    marginBottom: 24,
+  },
+  cardIcon: {
+    fontSize: 20,
+    marginTop: 2,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.foreground,
+  },
+  cardSubtitle: {
+    fontSize: 14,
+    color: Colors.foregroundSecondary,
+    marginTop: 4,
+    lineHeight: 20,
+  },
+  field: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.foreground,
+    marginBottom: 8,
+  },
+  input: {
+    backgroundColor: Colors.backgroundSecondary,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 15,
+    color: Colors.foreground,
+  },
+  emailInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.backgroundSecondary,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingHorizontal: 14,
+  },
+  emailIcon: {
+    fontSize: 16,
+    color: Colors.foregroundMuted,
+    marginRight: 10,
+  },
+  emailInput: {
+    flex: 1,
+    borderWidth: 0,
+    paddingHorizontal: 0,
+    backgroundColor: 'transparent',
+  },
+  hint: {
+    fontSize: 12,
+    color: Colors.foregroundMuted,
+    marginTop: 6,
+  },
+  readOnlyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  readOnlyIcon: {
+    fontSize: 16,
+    color: Colors.foregroundSecondary,
+  },
+  readOnlyText: {
+    fontSize: 15,
+    color: Colors.foreground,
+  },
+  verifiedIcon: {
+    fontSize: 16,
+    color: Colors.success,
+  },
+  verifiedText: {
+    fontSize: 15,
+    color: Colors.success,
+    fontWeight: '500',
+  },
+  selectWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.backgroundSecondary,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+  },
+  selectIcon: {
+    fontSize: 16,
+    color: Colors.foregroundSecondary,
+    marginRight: 10,
+  },
+  selectText: {
+    flex: 1,
+    fontSize: 15,
+    color: Colors.foreground,
+  },
+  selectChevron: {
+    fontSize: 16,
+    color: Colors.foregroundSecondary,
+  },
+  spacer: {
+    height: 40,
+  },
+})