@l4yercak3/cli 1.2.16 → 1.2.19

package/src/generators/quickstart/screens/index.js

@@ -0,0 +1,1498 @@
+/**
+ * Expo Screens Generator
+ * Generates React Native screens for Expo/React Native projects
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { ensureDir, writeFileWithBackup, checkFileOverwrite } = require('../../../utils/file-utils');
+
+class ScreensGenerator {
+  /**
+   * Generate Expo screens based on selected features
+   * @param {Object} options - Generation options
+   * @returns {Promise<Object>} - Generated file paths
+   */
+  async generate(options) {
+    const { projectPath, features = [], isTypeScript } = options;
+
+    const results = {};
+
+    // Detect if using Expo Router or React Navigation
+    const hasExpoRouter = this.hasExpoRouter(projectPath);
+
+    // Determine output directory
+    let outputDir;
+    if (hasExpoRouter) {
+      // Expo Router uses app/ directory with file-based routing
+      outputDir = path.join(projectPath, 'app', '(tabs)', 'l4yercak3');
+    } else if (fs.existsSync(path.join(projectPath, 'src', 'screens'))) {
+      outputDir = path.join(projectPath, 'src', 'screens', 'l4yercak3');
+    } else if (fs.existsSync(path.join(projectPath, 'screens'))) {
+      outputDir = path.join(projectPath, 'screens', 'l4yercak3');
+    } else {
+      outputDir = path.join(projectPath, 'src', 'screens', 'l4yercak3');
+    }
+
+    ensureDir(outputDir);
+
+    const ext = isTypeScript ? 'tsx' : 'jsx';
+
+    // Generate CRM screens
+    if (features.includes('crm')) {
+      results.contactsScreen = await this.generateContactsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
+      results.contactDetailScreen = await this.generateContactDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter);
+    }
+
+    // Generate Events screens
+    if (features.includes('events')) {
+      results.eventsScreen = await this.generateEventsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
+      results.eventDetailScreen = await this.generateEventDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter);
+    }
+
+    // Generate Products screens
+    if (features.includes('products') || features.includes('checkout')) {
+      results.productsScreen = await this.generateProductsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
+    }
+
+    // Generate layout file for Expo Router
+    if (hasExpoRouter) {
+      results.layout = await this.generateExpoRouterLayout(outputDir, ext, isTypeScript, features);
+    }
+
+    return results;
+  }
+
+  /**
+   * Check if project uses Expo Router
+   */
+  hasExpoRouter(projectPath) {
+    const packageJsonPath = path.join(projectPath, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+      return false;
+    }
+
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+      return !!deps['expo-router'];
+    } catch {
+      return false;
+    }
+  }
+
+  async generateContactsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
+    const fileName = hasExpoRouter ? 'contacts' : 'ContactsScreen';
+    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getContactsScreenTS(hasExpoRouter)
+      : this.getContactsScreenJS(hasExpoRouter);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getContactsScreenTS(hasExpoRouter) {
+    const navigation = hasExpoRouter
+      ? `import { useRouter } from 'expo-router';`
+      : `import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';`;
+
+    const navHook = hasExpoRouter
+      ? `const router = useRouter();`
+      : `const navigation = useNavigation<NativeStackNavigationProp<any>>();`;
+
+    const navAction = hasExpoRouter
+      ? `router.push(\`/l4yercak3/contact/\${contact.id}\`);`
+      : `navigation.navigate('ContactDetail', { id: contact.id });`;
+
+    return `/**
+ * Contacts Screen (Expo)
+ * Displays list of contacts with search
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+${navigation}
+import { ContactList } from '../../components/l4yercak3';
+import type { Contact } from '../../lib/l4yercak3/types';
+
+export default function ContactsScreen() {
+  ${navHook}
+
+  const handleSelectContact = (contact: Contact) => {
+    ${navAction}
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ContactList onSelect={handleSelectContact} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+});
+`;
+  }
+
+  getContactsScreenJS(hasExpoRouter) {
+    const navigation = hasExpoRouter
+      ? `import { useRouter } from 'expo-router';`
+      : `import { useNavigation } from '@react-navigation/native';`;
+
+    const navHook = hasExpoRouter
+      ? `const router = useRouter();`
+      : `const navigation = useNavigation();`;
+
+    const navAction = hasExpoRouter
+      ? `router.push(\`/l4yercak3/contact/\${contact.id}\`);`
+      : `navigation.navigate('ContactDetail', { id: contact.id });`;
+
+    return `/**
+ * Contacts Screen (Expo)
+ * Displays list of contacts with search
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+${navigation}
+import { ContactList } from '../../components/l4yercak3';
+
+export default function ContactsScreen() {
+  ${navHook}
+
+  const handleSelectContact = (contact) => {
+    ${navAction}
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ContactList onSelect={handleSelectContact} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+});
+`;
+  }
+
+  async generateContactDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
+    const fileName = hasExpoRouter ? 'contact/[id]' : 'ContactDetailScreen';
+
+    // For Expo Router, create the subdirectory
+    let outputPath;
+    if (hasExpoRouter) {
+      const contactDir = path.join(outputDir, 'contact');
+      ensureDir(contactDir);
+      outputPath = path.join(contactDir, `[id].${ext}`);
+    } else {
+      outputPath = path.join(outputDir, `${fileName}.${ext}`);
+    }
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getContactDetailScreenTS(hasExpoRouter)
+      : this.getContactDetailScreenJS(hasExpoRouter);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getContactDetailScreenTS(hasExpoRouter) {
+    const params = hasExpoRouter
+      ? `import { useLocalSearchParams } from 'expo-router';`
+      : `import { useRoute } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';`;
+
+    const paramsHook = hasExpoRouter
+      ? `const { id } = useLocalSearchParams<{ id: string }>();`
+      : `const route = useRoute<RouteProp<{ params: { id: string } }>>();
+  const { id } = route.params;`;
+
+    return `/**
+ * Contact Detail Screen (Expo)
+ * Displays individual contact details
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+${params}
+import { useContact } from '../../lib/l4yercak3/hooks/use-contacts';
+
+export default function ContactDetailScreen() {
+  ${paramsHook}
+
+  const { data: contact, isLoading, error } = useContact(id);
+
+  if (isLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error || !contact) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load contact</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Avatar */}
+        <View style={styles.avatarContainer}>
+          <View style={styles.avatar}>
+            <Text style={styles.avatarText}>
+              {(contact.firstName?.[0] || '') + (contact.lastName?.[0] || '')}
+            </Text>
+          </View>
+          <Text style={styles.name}>
+            {contact.firstName} {contact.lastName}
+          </Text>
+          {contact.email && (
+            <Text style={styles.email}>{contact.email}</Text>
+          )}
+        </View>
+
+        {/* Details */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Details</Text>
+
+          {contact.phone && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Phone</Text>
+              <Text style={styles.value}>{contact.phone}</Text>
+            </View>
+          )}
+
+          {contact.company && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Company</Text>
+              <Text style={styles.value}>{contact.company}</Text>
+            </View>
+          )}
+
+          {contact.status && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Status</Text>
+              <Text style={styles.value}>{contact.status}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Tags */}
+        {contact.tags && contact.tags.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Tags</Text>
+            <View style={styles.tags}>
+              {contact.tags.map((tag: string) => (
+                <View key={tag} style={styles.tag}>
+                  <Text style={styles.tagText}>{tag}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  content: {
+    padding: 16,
+  },
+  avatarContainer: {
+    alignItems: 'center',
+    paddingVertical: 24,
+  },
+  avatar: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    backgroundColor: '#DBEAFE',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarText: {
+    color: '#3B82F6',
+    fontSize: 32,
+    fontWeight: '600',
+  },
+  name: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  email: {
+    fontSize: 16,
+    color: '#6B7280',
+    marginTop: 4,
+  },
+  section: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  label: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  value: {
+    fontSize: 14,
+    color: '#111827',
+    fontWeight: '500',
+  },
+  tags: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  tag: {
+    backgroundColor: '#F3F4F6',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  tagText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+});
+`;
+  }
+
+  getContactDetailScreenJS(hasExpoRouter) {
+    const params = hasExpoRouter
+      ? `import { useLocalSearchParams } from 'expo-router';`
+      : `import { useRoute } from '@react-navigation/native';`;
+
+    const paramsHook = hasExpoRouter
+      ? `const { id } = useLocalSearchParams();`
+      : `const route = useRoute();
+  const { id } = route.params;`;
+
+    return `/**
+ * Contact Detail Screen (Expo)
+ * Displays individual contact details
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+${params}
+import { useContact } from '../../lib/l4yercak3/hooks/use-contacts';
+
+export default function ContactDetailScreen() {
+  ${paramsHook}
+
+  const { data: contact, isLoading, error } = useContact(id);
+
+  if (isLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error || !contact) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load contact</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Avatar */}
+        <View style={styles.avatarContainer}>
+          <View style={styles.avatar}>
+            <Text style={styles.avatarText}>
+              {(contact.firstName?.[0] || '') + (contact.lastName?.[0] || '')}
+            </Text>
+          </View>
+          <Text style={styles.name}>
+            {contact.firstName} {contact.lastName}
+          </Text>
+          {contact.email && (
+            <Text style={styles.email}>{contact.email}</Text>
+          )}
+        </View>
+
+        {/* Details */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Details</Text>
+
+          {contact.phone && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Phone</Text>
+              <Text style={styles.value}>{contact.phone}</Text>
+            </View>
+          )}
+
+          {contact.company && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Company</Text>
+              <Text style={styles.value}>{contact.company}</Text>
+            </View>
+          )}
+
+          {contact.status && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Status</Text>
+              <Text style={styles.value}>{contact.status}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Tags */}
+        {contact.tags && contact.tags.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Tags</Text>
+            <View style={styles.tags}>
+              {contact.tags.map((tag) => (
+                <View key={tag} style={styles.tag}>
+                  <Text style={styles.tagText}>{tag}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  content: {
+    padding: 16,
+  },
+  avatarContainer: {
+    alignItems: 'center',
+    paddingVertical: 24,
+  },
+  avatar: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    backgroundColor: '#DBEAFE',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarText: {
+    color: '#3B82F6',
+    fontSize: 32,
+    fontWeight: '600',
+  },
+  name: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  email: {
+    fontSize: 16,
+    color: '#6B7280',
+    marginTop: 4,
+  },
+  section: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  label: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  value: {
+    fontSize: 14,
+    color: '#111827',
+    fontWeight: '500',
+  },
+  tags: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  tag: {
+    backgroundColor: '#F3F4F6',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  tagText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+});
+`;
+  }
+
+  async generateEventsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
+    const fileName = hasExpoRouter ? 'events' : 'EventsScreen';
+    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getEventsScreenTS(hasExpoRouter)
+      : this.getEventsScreenJS(hasExpoRouter);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getEventsScreenTS(hasExpoRouter) {
+    const navigation = hasExpoRouter
+      ? `import { useRouter } from 'expo-router';`
+      : `import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';`;
+
+    const navHook = hasExpoRouter
+      ? `const router = useRouter();`
+      : `const navigation = useNavigation<NativeStackNavigationProp<any>>();`;
+
+    const navAction = hasExpoRouter
+      ? `router.push(\`/l4yercak3/event/\${event.id}\`);`
+      : `navigation.navigate('EventDetail', { id: event.id });`;
+
+    return `/**
+ * Events Screen (Expo)
+ * Displays list of events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+${navigation}
+import { EventList } from '../../components/l4yercak3';
+import type { Event } from '../../lib/l4yercak3/types';
+
+export default function EventsScreen() {
+  ${navHook}
+
+  const handleSelectEvent = (event: Event) => {
+    ${navAction}
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <EventList onSelect={handleSelectEvent} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+});
+`;
+  }
+
+  getEventsScreenJS(hasExpoRouter) {
+    const navigation = hasExpoRouter
+      ? `import { useRouter } from 'expo-router';`
+      : `import { useNavigation } from '@react-navigation/native';`;
+
+    const navHook = hasExpoRouter
+      ? `const router = useRouter();`
+      : `const navigation = useNavigation();`;
+
+    const navAction = hasExpoRouter
+      ? `router.push(\`/l4yercak3/event/\${event.id}\`);`
+      : `navigation.navigate('EventDetail', { id: event.id });`;
+
+    return `/**
+ * Events Screen (Expo)
+ * Displays list of events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+${navigation}
+import { EventList } from '../../components/l4yercak3';
+
+export default function EventsScreen() {
+  ${navHook}
+
+  const handleSelectEvent = (event) => {
+    ${navAction}
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <EventList onSelect={handleSelectEvent} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+});
+`;
+  }
+
+  async generateEventDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
+    let outputPath;
+    if (hasExpoRouter) {
+      const eventDir = path.join(outputDir, 'event');
+      ensureDir(eventDir);
+      outputPath = path.join(eventDir, `[id].${ext}`);
+    } else {
+      outputPath = path.join(outputDir, `EventDetailScreen.${ext}`);
+    }
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getEventDetailScreenTS(hasExpoRouter)
+      : this.getEventDetailScreenJS(hasExpoRouter);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getEventDetailScreenTS(hasExpoRouter) {
+    const params = hasExpoRouter
+      ? `import { useLocalSearchParams } from 'expo-router';`
+      : `import { useRoute } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';`;
+
+    const paramsHook = hasExpoRouter
+      ? `const { id } = useLocalSearchParams<{ id: string }>();`
+      : `const route = useRoute<RouteProp<{ params: { id: string } }>>();
+  const { id } = route.params;`;
+
+    return `/**
+ * Event Detail Screen (Expo)
+ * Displays individual event details
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+${params}
+import { useEvent } from '../../lib/l4yercak3/hooks/use-events';
+
+export default function EventDetailScreen() {
+  ${paramsHook}
+
+  const { data: event, isLoading, error } = useEvent(id);
+
+  if (isLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error || !event) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load event</Text>
+      </View>
+    );
+  }
+
+  const startDate = event.startDate ? new Date(event.startDate) : null;
+  const endDate = event.endDate ? new Date(event.endDate) : null;
+
+  const formatDateTime = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View style={styles.statusBadge}>
+            <Text style={styles.statusText}>{event.status}</Text>
+          </View>
+          <Text style={styles.title}>{event.name}</Text>
+          {event.description && (
+            <Text style={styles.description}>{event.description}</Text>
+          )}
+        </View>
+
+        {/* Date & Time */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Date & Time</Text>
+          {startDate && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Starts</Text>
+              <Text style={styles.value}>{formatDateTime(startDate)}</Text>
+            </View>
+          )}
+          {endDate && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Ends</Text>
+              <Text style={styles.value}>{formatDateTime(endDate)}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Location */}
+        {event.location && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Location</Text>
+            <Text style={styles.locationText}>{event.location}</Text>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  content: {
+    padding: 16,
+  },
+  header: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 20,
+  },
+  statusBadge: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#D1FAE5',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  statusText: {
+    color: '#047857',
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    lineHeight: 24,
+  },
+  section: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  row: {
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  label: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  value: {
+    fontSize: 14,
+    color: '#111827',
+    fontWeight: '500',
+  },
+  locationText: {
+    fontSize: 14,
+    color: '#111827',
+  },
+});
+`;
+  }
+
+  getEventDetailScreenJS(hasExpoRouter) {
+    const params = hasExpoRouter
+      ? `import { useLocalSearchParams } from 'expo-router';`
+      : `import { useRoute } from '@react-navigation/native';`;
+
+    const paramsHook = hasExpoRouter
+      ? `const { id } = useLocalSearchParams();`
+      : `const route = useRoute();
+  const { id } = route.params;`;
+
+    return `/**
+ * Event Detail Screen (Expo)
+ * Displays individual event details
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+${params}
+import { useEvent } from '../../lib/l4yercak3/hooks/use-events';
+
+export default function EventDetailScreen() {
+  ${paramsHook}
+
+  const { data: event, isLoading, error } = useEvent(id);
+
+  if (isLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error || !event) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load event</Text>
+      </View>
+    );
+  }
+
+  const startDate = event.startDate ? new Date(event.startDate) : null;
+  const endDate = event.endDate ? new Date(event.endDate) : null;
+
+  const formatDateTime = (date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View style={styles.statusBadge}>
+            <Text style={styles.statusText}>{event.status}</Text>
+          </View>
+          <Text style={styles.title}>{event.name}</Text>
+          {event.description && (
+            <Text style={styles.description}>{event.description}</Text>
+          )}
+        </View>
+
+        {/* Date & Time */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Date & Time</Text>
+          {startDate && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Starts</Text>
+              <Text style={styles.value}>{formatDateTime(startDate)}</Text>
+            </View>
+          )}
+          {endDate && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Ends</Text>
+              <Text style={styles.value}>{formatDateTime(endDate)}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Location */}
+        {event.location && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Location</Text>
+            <Text style={styles.locationText}>{event.location}</Text>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  content: {
+    padding: 16,
+  },
+  header: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 20,
+  },
+  statusBadge: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#D1FAE5',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  statusText: {
+    color: '#047857',
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    lineHeight: 24,
+  },
+  section: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  row: {
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  label: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  value: {
+    fontSize: 14,
+    color: '#111827',
+    fontWeight: '500',
+  },
+  locationText: {
+    fontSize: 14,
+    color: '#111827',
+  },
+});
+`;
+  }
+
+  async generateProductsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
+    const fileName = hasExpoRouter ? 'products' : 'ProductsScreen';
+    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getProductsScreenTS(hasExpoRouter)
+      : this.getProductsScreenJS(hasExpoRouter);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getProductsScreenTS(_hasExpoRouter) {
+    return `/**
+ * Products Screen (Expo)
+ * Displays list of products with grid layout
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  FlatList,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  Alert,
+  RefreshControl,
+} from 'react-native';
+import { useProducts } from '../../lib/l4yercak3/hooks/use-products';
+import { ProductCard } from '../../components/l4yercak3';
+import type { Product } from '../../lib/l4yercak3/types';
+
+export default function ProductsScreen() {
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = useProducts();
+
+  const products = data?.products || [];
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await refetch();
+    setRefreshing(false);
+  };
+
+  const handleAddToCart = (product: Product) => {
+    Alert.alert(
+      'Added to Cart',
+      \`\${product.name} has been added to your cart.\`,
+      [{ text: 'OK' }]
+    );
+  };
+
+  if (isLoading && !refreshing) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load products</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={products}
+        keyExtractor={(item) => item.id}
+        numColumns={2}
+        renderItem={({ item }) => (
+          <View style={styles.cardContainer}>
+            <ProductCard
+              product={item}
+              onAddToCart={handleAddToCart}
+            />
+          </View>
+        )}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+        }
+        contentContainerStyle={styles.list}
+        columnWrapperStyle={styles.row}
+        ListEmptyComponent={
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyText}>No products available</Text>
+          </View>
+        }
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  list: {
+    padding: 8,
+  },
+  row: {
+    justifyContent: 'space-between',
+  },
+  cardContainer: {
+    flex: 0.48,
+    marginBottom: 16,
+  },
+  emptyContainer: {
+    padding: 32,
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#6B7280',
+    fontSize: 16,
+  },
+});
+`;
+  }
+
+  getProductsScreenJS(_hasExpoRouter) {
+    return `/**
+ * Products Screen (Expo)
+ * Displays list of products with grid layout
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  FlatList,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  Alert,
+  RefreshControl,
+} from 'react-native';
+import { useProducts } from '../../lib/l4yercak3/hooks/use-products';
+import { ProductCard } from '../../components/l4yercak3';
+
+export default function ProductsScreen() {
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = useProducts();
+
+  const products = data?.products || [];
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await refetch();
+    setRefreshing(false);
+  };
+
+  const handleAddToCart = (product) => {
+    Alert.alert(
+      'Added to Cart',
+      \`\${product.name} has been added to your cart.\`,
+      [{ text: 'OK' }]
+    );
+  };
+
+  if (isLoading && !refreshing) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load products</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={products}
+        keyExtractor={(item) => item.id}
+        numColumns={2}
+        renderItem={({ item }) => (
+          <View style={styles.cardContainer}>
+            <ProductCard
+              product={item}
+              onAddToCart={handleAddToCart}
+            />
+          </View>
+        )}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+        }
+        contentContainerStyle={styles.list}
+        columnWrapperStyle={styles.row}
+        ListEmptyComponent={
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyText}>No products available</Text>
+          </View>
+        }
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 16,
+  },
+  list: {
+    padding: 8,
+  },
+  row: {
+    justifyContent: 'space-between',
+  },
+  cardContainer: {
+    flex: 0.48,
+    marginBottom: 16,
+  },
+  emptyContainer: {
+    padding: 32,
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#6B7280',
+    fontSize: 16,
+  },
+});
+`;
+  }
+
+  async generateExpoRouterLayout(outputDir, ext, isTypeScript, features) {
+    const outputPath = path.join(outputDir, `_layout.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getExpoRouterLayoutTS(features)
+      : this.getExpoRouterLayoutJS(features);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getExpoRouterLayoutTS(features) {
+    const screens = [];
+    if (features.includes('crm')) {
+      screens.push(`        <Stack.Screen name="contacts" options={{ title: 'Contacts' }} />`);
+      screens.push(`        <Stack.Screen name="contact/[id]" options={{ title: 'Contact Details' }} />`);
+    }
+    if (features.includes('events')) {
+      screens.push(`        <Stack.Screen name="events" options={{ title: 'Events' }} />`);
+      screens.push(`        <Stack.Screen name="event/[id]" options={{ title: 'Event Details' }} />`);
+    }
+    if (features.includes('products') || features.includes('checkout')) {
+      screens.push(`        <Stack.Screen name="products" options={{ title: 'Products' }} />`);
+    }
+
+    return `/**
+ * L4YERCAK3 Expo Router Layout
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import { Stack } from 'expo-router';
+
+export default function L4yercak3Layout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: '#3B82F6',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: '600',
+        },
+      }}
+    >
+${screens.join('\n')}
+    </Stack>
+  );
+}
+`;
+  }
+
+  getExpoRouterLayoutJS(features) {
+    const screens = [];
+    if (features.includes('crm')) {
+      screens.push(`        <Stack.Screen name="contacts" options={{ title: 'Contacts' }} />`);
+      screens.push(`        <Stack.Screen name="contact/[id]" options={{ title: 'Contact Details' }} />`);
+    }
+    if (features.includes('events')) {
+      screens.push(`        <Stack.Screen name="events" options={{ title: 'Events' }} />`);
+      screens.push(`        <Stack.Screen name="event/[id]" options={{ title: 'Event Details' }} />`);
+    }
+    if (features.includes('products') || features.includes('checkout')) {
+      screens.push(`        <Stack.Screen name="products" options={{ title: 'Products' }} />`);
+    }
+
+    return `/**
+ * L4YERCAK3 Expo Router Layout
+ * Auto-generated by @l4yercak3/cli
+ */
+
+import { Stack } from 'expo-router';
+
+export default function L4yercak3Layout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: '#3B82F6',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: '600',
+        },
+      }}
+    >
+${screens.join('\n')}
+    </Stack>
+  );
+}
+`;
+  }
+}
+
+module.exports = new ScreensGenerator();