@l4yercak3/cli 1.2.16 → 1.2.18

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

@@ -0,0 +1,1466 @@
+/**
+ * Page Generator
+ * Generates Next.js App Router pages for L4YERCAK3 features
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { ensureDir, writeFileWithBackup, checkFileOverwrite } = require('../../../utils/file-utils');
+
+class PageGenerator {
+  /**
+   * Generate Next.js pages based on selected features
+   * @param {Object} options - Generation options
+   * @returns {Promise<Object>} - Generated file paths
+   */
+  async generate(options) {
+    const { projectPath, features = [], isTypeScript, frameworkType } = options;
+
+    // Only generate pages for Next.js
+    if (frameworkType !== 'nextjs') {
+      return {};
+    }
+
+    const results = {};
+
+    // Determine app directory
+    let appDir;
+    if (fs.existsSync(path.join(projectPath, 'src', 'app'))) {
+      appDir = path.join(projectPath, 'src', 'app');
+    } else if (fs.existsSync(path.join(projectPath, 'app'))) {
+      appDir = path.join(projectPath, 'app');
+    } else {
+      // Create app directory structure
+      appDir = path.join(projectPath, 'src', 'app');
+      ensureDir(appDir);
+    }
+
+    const ext = isTypeScript ? 'tsx' : 'jsx';
+
+    // Generate CRM pages
+    if (features.includes('crm')) {
+      results.contactsPage = await this.generateContactsPage(appDir, ext, isTypeScript);
+      results.contactDetailPage = await this.generateContactDetailPage(appDir, ext, isTypeScript);
+    }
+
+    // Generate Events pages
+    if (features.includes('events')) {
+      results.eventsPage = await this.generateEventsPage(appDir, ext, isTypeScript);
+      results.eventDetailPage = await this.generateEventDetailPage(appDir, ext, isTypeScript);
+    }
+
+    // Generate Products pages
+    if (features.includes('products') || features.includes('checkout')) {
+      results.productsPage = await this.generateProductsPage(appDir, ext, isTypeScript);
+    }
+
+    // Generate dashboard page (if any features selected)
+    if (features.length > 0) {
+      results.dashboardPage = await this.generateDashboardPage(appDir, ext, isTypeScript, features);
+    }
+
+    // Generate providers wrapper
+    results.providers = await this.generateProviders(appDir, ext, isTypeScript);
+
+    return results;
+  }
+
+  async generateContactsPage(appDir, ext, isTypeScript) {
+    const pageDir = path.join(appDir, 'contacts');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getContactsPageTS()
+      : this.getContactsPageJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getContactsPageTS() {
+    return `/**
+ * Contacts Page
+ * Lists all contacts with search and filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ContactList, ContactForm } from '@/components/l4yercak3';
+import type { Contact } from '@/lib/l4yercak3/types';
+
+export default function ContactsPage() {
+  const router = useRouter();
+  const [showForm, setShowForm] = useState(false);
+
+  const handleSelectContact = (contact: Contact) => {
+    router.push(\`/contacts/\${contact.id}\`);
+  };
+
+  const handleCreateSuccess = (contact: Contact) => {
+    setShowForm(false);
+    router.push(\`/contacts/\${contact.id}\`);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Contacts</h1>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          {showForm ? 'Cancel' : 'Add Contact'}
+        </button>
+      </div>
+
+      {showForm && (
+        <div className="mb-6 p-4 bg-white border rounded-lg shadow-sm">
+          <h2 className="text-lg font-semibold mb-4">New Contact</h2>
+          <ContactForm
+            onSuccess={handleCreateSuccess}
+            onCancel={() => setShowForm(false)}
+          />
+        </div>
+      )}
+
+      <ContactList onSelect={handleSelectContact} />
+    </div>
+  );
+}
+`;
+  }
+
+  getContactsPageJS() {
+    return `/**
+ * Contacts Page
+ * Lists all contacts with search and filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ContactList, ContactForm } from '@/components/l4yercak3';
+
+export default function ContactsPage() {
+  const router = useRouter();
+  const [showForm, setShowForm] = useState(false);
+
+  const handleSelectContact = (contact) => {
+    router.push(\`/contacts/\${contact.id}\`);
+  };
+
+  const handleCreateSuccess = (contact) => {
+    setShowForm(false);
+    router.push(\`/contacts/\${contact.id}\`);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Contacts</h1>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          {showForm ? 'Cancel' : 'Add Contact'}
+        </button>
+      </div>
+
+      {showForm && (
+        <div className="mb-6 p-4 bg-white border rounded-lg shadow-sm">
+          <h2 className="text-lg font-semibold mb-4">New Contact</h2>
+          <ContactForm
+            onSuccess={handleCreateSuccess}
+            onCancel={() => setShowForm(false)}
+          />
+        </div>
+      )}
+
+      <ContactList onSelect={handleSelectContact} />
+    </div>
+  );
+}
+`;
+  }
+
+  async generateContactDetailPage(appDir, ext, isTypeScript) {
+    const pageDir = path.join(appDir, 'contacts', '[id]');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getContactDetailPageTS()
+      : this.getContactDetailPageJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getContactDetailPageTS() {
+    return `/**
+ * Contact Detail Page
+ * Shows details and allows editing of a single contact
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useContact, useDeleteContact } from '@/lib/l4yercak3/hooks/use-contacts';
+import { ContactForm } from '@/components/l4yercak3';
+
+export default function ContactDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const contactId = params.id as string;
+  const { data: contact, isLoading, error } = useContact(contactId);
+  const deleteContact = useDeleteContact();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error || !contact) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+          {error?.message || 'Contact not found'}
+        </div>
+      </div>
+    );
+  }
+
+  const handleDelete = async () => {
+    if (confirm('Are you sure you want to delete this contact?')) {
+      await deleteContact.mutateAsync(contactId);
+      router.push('/contacts');
+    }
+  };
+
+  const handleUpdateSuccess = () => {
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <button
+        onClick={() => router.push('/contacts')}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        &larr; Back to Contacts
+      </button>
+
+      <div className="bg-white border rounded-lg shadow-sm p-6">
+        <div className="flex justify-between items-start mb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-2xl font-semibold">
+              {contact.firstName?.[0]}{contact.lastName?.[0]}
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold">
+                {contact.firstName} {contact.lastName}
+              </h1>
+              {contact.email && (
+                <p className="text-gray-500">{contact.email}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setIsEditing(!isEditing)}
+              className="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              {isEditing ? 'Cancel' : 'Edit'}
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={deleteContact.isPending}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+            >
+              {deleteContact.isPending ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </div>
+
+        {isEditing ? (
+          <ContactForm
+            contact={contact}
+            onSuccess={handleUpdateSuccess}
+            onCancel={() => setIsEditing(false)}
+          />
+        ) : (
+          <div className="space-y-4">
+            {contact.phone && (
+              <div>
+                <label className="text-sm text-gray-500">Phone</label>
+                <p className="font-medium">{contact.phone}</p>
+              </div>
+            )}
+
+            {contact.tags && contact.tags.length > 0 && (
+              <div>
+                <label className="text-sm text-gray-500">Tags</label>
+                <div className="flex flex-wrap gap-2 mt-1">
+                  {contact.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {contact.notes && (
+              <div>
+                <label className="text-sm text-gray-500">Notes</label>
+                <p className="whitespace-pre-wrap">{contact.notes}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  getContactDetailPageJS() {
+    return `/**
+ * Contact Detail Page
+ * Shows details and allows editing of a single contact
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useContact, useDeleteContact } from '@/lib/l4yercak3/hooks/use-contacts';
+import { ContactForm } from '@/components/l4yercak3';
+
+export default function ContactDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const contactId = params.id;
+  const { data: contact, isLoading, error } = useContact(contactId);
+  const deleteContact = useDeleteContact();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error || !contact) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+          {error?.message || 'Contact not found'}
+        </div>
+      </div>
+    );
+  }
+
+  const handleDelete = async () => {
+    if (confirm('Are you sure you want to delete this contact?')) {
+      await deleteContact.mutateAsync(contactId);
+      router.push('/contacts');
+    }
+  };
+
+  const handleUpdateSuccess = () => {
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <button
+        onClick={() => router.push('/contacts')}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        &larr; Back to Contacts
+      </button>
+
+      <div className="bg-white border rounded-lg shadow-sm p-6">
+        <div className="flex justify-between items-start mb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-2xl font-semibold">
+              {contact.firstName?.[0]}{contact.lastName?.[0]}
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold">
+                {contact.firstName} {contact.lastName}
+              </h1>
+              {contact.email && (
+                <p className="text-gray-500">{contact.email}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setIsEditing(!isEditing)}
+              className="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              {isEditing ? 'Cancel' : 'Edit'}
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={deleteContact.isPending}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+            >
+              {deleteContact.isPending ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </div>
+
+        {isEditing ? (
+          <ContactForm
+            contact={contact}
+            onSuccess={handleUpdateSuccess}
+            onCancel={() => setIsEditing(false)}
+          />
+        ) : (
+          <div className="space-y-4">
+            {contact.phone && (
+              <div>
+                <label className="text-sm text-gray-500">Phone</label>
+                <p className="font-medium">{contact.phone}</p>
+              </div>
+            )}
+
+            {contact.tags && contact.tags.length > 0 && (
+              <div>
+                <label className="text-sm text-gray-500">Tags</label>
+                <div className="flex flex-wrap gap-2 mt-1">
+                  {contact.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {contact.notes && (
+              <div>
+                <label className="text-sm text-gray-500">Notes</label>
+                <p className="whitespace-pre-wrap">{contact.notes}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  async generateEventsPage(appDir, ext, isTypeScript) {
+    const pageDir = path.join(appDir, 'events');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getEventsPageTS()
+      : this.getEventsPageJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getEventsPageTS() {
+    return `/**
+ * Events Page
+ * Lists all events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { EventList } from '@/components/l4yercak3';
+import type { Event } from '@/lib/l4yercak3/types';
+
+export default function EventsPage() {
+  const router = useRouter();
+
+  const handleSelectEvent = (event: Event) => {
+    router.push(\`/events/\${event.id}\`);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Events</h1>
+      <EventList onSelect={handleSelectEvent} />
+    </div>
+  );
+}
+`;
+  }
+
+  getEventsPageJS() {
+    return `/**
+ * Events Page
+ * Lists all events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { EventList } from '@/components/l4yercak3';
+
+export default function EventsPage() {
+  const router = useRouter();
+
+  const handleSelectEvent = (event) => {
+    router.push(\`/events/\${event.id}\`);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Events</h1>
+      <EventList onSelect={handleSelectEvent} />
+    </div>
+  );
+}
+`;
+  }
+
+  async generateEventDetailPage(appDir, ext, isTypeScript) {
+    const pageDir = path.join(appDir, 'events', '[id]');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getEventDetailPageTS()
+      : this.getEventDetailPageJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getEventDetailPageTS() {
+    return `/**
+ * Event Detail Page
+ * Shows event details and registration
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { useEvent, useEventAttendees } from '@/lib/l4yercak3/hooks/use-events';
+
+export default function EventDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+
+  const eventId = params.id as string;
+  const { data: event, isLoading, error } = useEvent(eventId);
+  const { data: attendees } = useEventAttendees(eventId);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error || !event) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+          {error?.message || 'Event not found'}
+        </div>
+      </div>
+    );
+  }
+
+  const startDate = event.startDate ? new Date(event.startDate) : null;
+  const endDate = event.endDate ? new Date(event.endDate) : null;
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <button
+        onClick={() => router.push('/events')}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        &larr; Back to Events
+      </button>
+
+      <div className="bg-white border rounded-lg shadow-sm overflow-hidden">
+        {/* Header */}
+        <div className="p-6 border-b">
+          <div className="flex justify-between items-start">
+            <div>
+              <h1 className="text-2xl font-bold">{event.name}</h1>
+              {startDate && (
+                <p className="text-gray-500 mt-1">{formatDate(startDate)}</p>
+              )}
+            </div>
+            <span
+              className={\`px-3 py-1 rounded-full text-sm \${
+                event.status === 'published'
+                  ? 'bg-green-100 text-green-700'
+                  : event.status === 'draft'
+                    ? 'bg-gray-100 text-gray-600'
+                    : 'bg-red-100 text-red-700'
+              }\`}
+            >
+              {event.status}
+            </span>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {event.description && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">About</h2>
+              <p className="text-gray-600 whitespace-pre-wrap">{event.description}</p>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Date & Time */}
+            <div>
+              <h2 className="text-lg font-semibold mb-2">Date & Time</h2>
+              <div className="space-y-1 text-gray-600">
+                {startDate && <p>Starts: {formatDate(startDate)}</p>}
+                {endDate && <p>Ends: {formatDate(endDate)}</p>}
+              </div>
+            </div>
+
+            {/* Location */}
+            {event.location && (
+              <div>
+                <h2 className="text-lg font-semibold mb-2">Location</h2>
+                <p className="text-gray-600">{event.location}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Attendees */}
+          {attendees && attendees.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">
+                Attendees ({attendees.length})
+              </h2>
+              <div className="flex -space-x-2">
+                {attendees.slice(0, 10).map((attendee, i) => (
+                  <div
+                    key={attendee.id || i}
+                    className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full border-2 border-white flex items-center justify-center text-xs font-medium"
+                  >
+                    {attendee.contact?.firstName?.[0] || '?'}
+                  </div>
+                ))}
+                {attendees.length > 10 && (
+                  <div className="w-8 h-8 bg-gray-100 text-gray-600 rounded-full border-2 border-white flex items-center justify-center text-xs">
+                    +{attendees.length - 10}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="p-6 border-t bg-gray-50">
+          <button
+            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Register for Event
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  getEventDetailPageJS() {
+    return `/**
+ * Event Detail Page
+ * Shows event details and registration
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { useEvent, useEventAttendees } from '@/lib/l4yercak3/hooks/use-events';
+
+export default function EventDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+
+  const eventId = params.id;
+  const { data: event, isLoading, error } = useEvent(eventId);
+  const { data: attendees } = useEventAttendees(eventId);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error || !event) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+          {error?.message || 'Event not found'}
+        </div>
+      </div>
+    );
+  }
+
+  const startDate = event.startDate ? new Date(event.startDate) : null;
+  const endDate = event.endDate ? new Date(event.endDate) : null;
+
+  const formatDate = (date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <button
+        onClick={() => router.push('/events')}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        &larr; Back to Events
+      </button>
+
+      <div className="bg-white border rounded-lg shadow-sm overflow-hidden">
+        {/* Header */}
+        <div className="p-6 border-b">
+          <div className="flex justify-between items-start">
+            <div>
+              <h1 className="text-2xl font-bold">{event.name}</h1>
+              {startDate && (
+                <p className="text-gray-500 mt-1">{formatDate(startDate)}</p>
+              )}
+            </div>
+            <span
+              className={\`px-3 py-1 rounded-full text-sm \${
+                event.status === 'published'
+                  ? 'bg-green-100 text-green-700'
+                  : event.status === 'draft'
+                    ? 'bg-gray-100 text-gray-600'
+                    : 'bg-red-100 text-red-700'
+              }\`}
+            >
+              {event.status}
+            </span>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {event.description && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">About</h2>
+              <p className="text-gray-600 whitespace-pre-wrap">{event.description}</p>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Date & Time */}
+            <div>
+              <h2 className="text-lg font-semibold mb-2">Date & Time</h2>
+              <div className="space-y-1 text-gray-600">
+                {startDate && <p>Starts: {formatDate(startDate)}</p>}
+                {endDate && <p>Ends: {formatDate(endDate)}</p>}
+              </div>
+            </div>
+
+            {/* Location */}
+            {event.location && (
+              <div>
+                <h2 className="text-lg font-semibold mb-2">Location</h2>
+                <p className="text-gray-600">{event.location}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Attendees */}
+          {attendees && attendees.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">
+                Attendees ({attendees.length})
+              </h2>
+              <div className="flex -space-x-2">
+                {attendees.slice(0, 10).map((attendee, i) => (
+                  <div
+                    key={attendee.id || i}
+                    className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full border-2 border-white flex items-center justify-center text-xs font-medium"
+                  >
+                    {attendee.contact?.firstName?.[0] || '?'}
+                  </div>
+                ))}
+                {attendees.length > 10 && (
+                  <div className="w-8 h-8 bg-gray-100 text-gray-600 rounded-full border-2 border-white flex items-center justify-center text-xs">
+                    +{attendees.length - 10}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="p-6 border-t bg-gray-50">
+          <button
+            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Register for Event
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  async generateProductsPage(appDir, ext, isTypeScript) {
+    const pageDir = path.join(appDir, 'products');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getProductsPageTS()
+      : this.getProductsPageJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getProductsPageTS() {
+    return `/**
+ * Products Page
+ * Displays a grid of products with cart functionality
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { ProductGrid } from '@/components/l4yercak3';
+import { useCreateCheckoutSession } from '@/lib/l4yercak3/hooks/use-products';
+import type { Product } from '@/lib/l4yercak3/types';
+
+interface CartItem {
+  product: Product;
+  quantity: number;
+}
+
+export default function ProductsPage() {
+  const [cart, setCart] = useState<CartItem[]>([]);
+  const createCheckout = useCreateCheckoutSession();
+
+  const handleAddToCart = (product: Product) => {
+    setCart((prev) => {
+      const existing = prev.find((item) => item.product.id === product.id);
+      if (existing) {
+        return prev.map((item) =>
+          item.product.id === product.id
+            ? { ...item, quantity: item.quantity + 1 }
+            : item
+        );
+      }
+      return [...prev, { product, quantity: 1 }];
+    });
+  };
+
+  const handleRemoveFromCart = (productId: string) => {
+    setCart((prev) => prev.filter((item) => item.product.id !== productId));
+  };
+
+  const handleCheckout = async () => {
+    const lineItems = cart.map((item) => ({
+      productId: item.product.id,
+      quantity: item.quantity,
+    }));
+
+    const session = await createCheckout.mutateAsync({
+      lineItems,
+      successUrl: \`\${window.location.origin}/checkout/success\`,
+      cancelUrl: \`\${window.location.origin}/products\`,
+    });
+
+    if (session.url) {
+      window.location.href = session.url;
+    }
+  };
+
+  const cartTotal = cart.reduce(
+    (total, item) => total + item.product.price * item.quantity,
+    0
+  );
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price / 100);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Products</h1>
+
+        {/* Cart Summary */}
+        {cart.length > 0 && (
+          <div className="flex items-center gap-4">
+            <span className="text-gray-600">
+              {cart.reduce((sum, item) => sum + item.quantity, 0)} items
+            </span>
+            <span className="font-bold">{formatPrice(cartTotal)}</span>
+            <button
+              onClick={handleCheckout}
+              disabled={createCheckout.isPending}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+            >
+              {createCheckout.isPending ? 'Processing...' : 'Checkout'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Cart Items */}
+      {cart.length > 0 && (
+        <div className="mb-6 p-4 bg-white border rounded-lg">
+          <h2 className="font-semibold mb-3">Cart</h2>
+          <div className="space-y-2">
+            {cart.map((item) => (
+              <div key={item.product.id} className="flex justify-between items-center">
+                <span>
+                  {item.product.name} x {item.quantity}
+                </span>
+                <div className="flex items-center gap-3">
+                  <span>{formatPrice(item.product.price * item.quantity)}</span>
+                  <button
+                    onClick={() => handleRemoveFromCart(item.product.id)}
+                    className="text-red-600 hover:underline text-sm"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ProductGrid onAddToCart={handleAddToCart} />
+    </div>
+  );
+}
+`;
+  }
+
+  getProductsPageJS() {
+    return `/**
+ * Products Page
+ * Displays a grid of products with cart functionality
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { ProductGrid } from '@/components/l4yercak3';
+import { useCreateCheckoutSession } from '@/lib/l4yercak3/hooks/use-products';
+
+export default function ProductsPage() {
+  const [cart, setCart] = useState([]);
+  const createCheckout = useCreateCheckoutSession();
+
+  const handleAddToCart = (product) => {
+    setCart((prev) => {
+      const existing = prev.find((item) => item.product.id === product.id);
+      if (existing) {
+        return prev.map((item) =>
+          item.product.id === product.id
+            ? { ...item, quantity: item.quantity + 1 }
+            : item
+        );
+      }
+      return [...prev, { product, quantity: 1 }];
+    });
+  };
+
+  const handleRemoveFromCart = (productId) => {
+    setCart((prev) => prev.filter((item) => item.product.id !== productId));
+  };
+
+  const handleCheckout = async () => {
+    const lineItems = cart.map((item) => ({
+      productId: item.product.id,
+      quantity: item.quantity,
+    }));
+
+    const session = await createCheckout.mutateAsync({
+      lineItems,
+      successUrl: \`\${window.location.origin}/checkout/success\`,
+      cancelUrl: \`\${window.location.origin}/products\`,
+    });
+
+    if (session.url) {
+      window.location.href = session.url;
+    }
+  };
+
+  const cartTotal = cart.reduce(
+    (total, item) => total + item.product.price * item.quantity,
+    0
+  );
+
+  const formatPrice = (price) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price / 100);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Products</h1>
+
+        {/* Cart Summary */}
+        {cart.length > 0 && (
+          <div className="flex items-center gap-4">
+            <span className="text-gray-600">
+              {cart.reduce((sum, item) => sum + item.quantity, 0)} items
+            </span>
+            <span className="font-bold">{formatPrice(cartTotal)}</span>
+            <button
+              onClick={handleCheckout}
+              disabled={createCheckout.isPending}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+            >
+              {createCheckout.isPending ? 'Processing...' : 'Checkout'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Cart Items */}
+      {cart.length > 0 && (
+        <div className="mb-6 p-4 bg-white border rounded-lg">
+          <h2 className="font-semibold mb-3">Cart</h2>
+          <div className="space-y-2">
+            {cart.map((item) => (
+              <div key={item.product.id} className="flex justify-between items-center">
+                <span>
+                  {item.product.name} x {item.quantity}
+                </span>
+                <div className="flex items-center gap-3">
+                  <span>{formatPrice(item.product.price * item.quantity)}</span>
+                  <button
+                    onClick={() => handleRemoveFromCart(item.product.id)}
+                    className="text-red-600 hover:underline text-sm"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ProductGrid onAddToCart={handleAddToCart} />
+    </div>
+  );
+}
+`;
+  }
+
+  async generateDashboardPage(appDir, ext, isTypeScript, features) {
+    const pageDir = path.join(appDir, 'dashboard');
+    ensureDir(pageDir);
+
+    const outputPath = path.join(pageDir, `page.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getDashboardPageTS(features)
+      : this.getDashboardPageJS(features);
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getDashboardPageTS(features) {
+    const imports = [];
+    const cards = [];
+
+    if (features.includes('crm')) {
+      imports.push("import { useContacts } from '@/lib/l4yercak3/hooks/use-contacts';");
+      cards.push(`
+        {/* Contacts Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Contacts</h2>
+          <div className="text-3xl font-bold text-blue-600">
+            {contactsLoading ? '...' : contacts?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Total contacts</p>
+          <a href="/contacts" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+    }
+
+    if (features.includes('events')) {
+      imports.push("import { useEvents } from '@/lib/l4yercak3/hooks/use-events';");
+      cards.push(`
+        {/* Events Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Upcoming Events</h2>
+          <div className="text-3xl font-bold text-green-600">
+            {eventsLoading ? '...' : events?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Events scheduled</p>
+          <a href="/events" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+    }
+
+    if (features.includes('products') || features.includes('checkout')) {
+      imports.push("import { useProducts, useOrders } from '@/lib/l4yercak3/hooks/use-products';");
+      cards.push(`
+        {/* Products Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Products</h2>
+          <div className="text-3xl font-bold text-purple-600">
+            {productsLoading ? '...' : products?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Active products</p>
+          <a href="/products" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+      cards.push(`
+        {/* Orders Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Recent Orders</h2>
+          <div className="text-3xl font-bold text-orange-600">
+            {ordersLoading ? '...' : orders?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Orders this month</p>
+        </div>`);
+    }
+
+    const hookCalls = [];
+    if (features.includes('crm')) {
+      hookCalls.push("const { data: contacts, isLoading: contactsLoading } = useContacts();");
+    }
+    if (features.includes('events')) {
+      hookCalls.push("const { data: events, isLoading: eventsLoading } = useEvents({ status: 'upcoming' });");
+    }
+    if (features.includes('products') || features.includes('checkout')) {
+      hookCalls.push("const { data: products, isLoading: productsLoading } = useProducts();");
+      hookCalls.push("const { data: orders, isLoading: ordersLoading } = useOrders();");
+    }
+
+    return `/**
+ * Dashboard Page
+ * Overview of L4YERCAK3 data
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+${imports.join('\n')}
+
+export default function DashboardPage() {
+  ${hookCalls.join('\n  ')}
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        ${cards.join('\n        ')}
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  getDashboardPageJS(features) {
+    const imports = [];
+    const cards = [];
+
+    if (features.includes('crm')) {
+      imports.push("import { useContacts } from '@/lib/l4yercak3/hooks/use-contacts';");
+      cards.push(`
+        {/* Contacts Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Contacts</h2>
+          <div className="text-3xl font-bold text-blue-600">
+            {contactsLoading ? '...' : contacts?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Total contacts</p>
+          <a href="/contacts" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+    }
+
+    if (features.includes('events')) {
+      imports.push("import { useEvents } from '@/lib/l4yercak3/hooks/use-events';");
+      cards.push(`
+        {/* Events Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Upcoming Events</h2>
+          <div className="text-3xl font-bold text-green-600">
+            {eventsLoading ? '...' : events?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Events scheduled</p>
+          <a href="/events" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+    }
+
+    if (features.includes('products') || features.includes('checkout')) {
+      imports.push("import { useProducts, useOrders } from '@/lib/l4yercak3/hooks/use-products';");
+      cards.push(`
+        {/* Products Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Products</h2>
+          <div className="text-3xl font-bold text-purple-600">
+            {productsLoading ? '...' : products?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Active products</p>
+          <a href="/products" className="text-blue-600 text-sm hover:underline mt-4 inline-block">
+            View all &rarr;
+          </a>
+        </div>`);
+      cards.push(`
+        {/* Orders Card */}
+        <div className="bg-white p-6 rounded-lg border shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Recent Orders</h2>
+          <div className="text-3xl font-bold text-orange-600">
+            {ordersLoading ? '...' : orders?.length || 0}
+          </div>
+          <p className="text-gray-500 text-sm mt-1">Orders this month</p>
+        </div>`);
+    }
+
+    const hookCalls = [];
+    if (features.includes('crm')) {
+      hookCalls.push("const { data: contacts, isLoading: contactsLoading } = useContacts();");
+    }
+    if (features.includes('events')) {
+      hookCalls.push("const { data: events, isLoading: eventsLoading } = useEvents({ status: 'upcoming' });");
+    }
+    if (features.includes('products') || features.includes('checkout')) {
+      hookCalls.push("const { data: products, isLoading: productsLoading } = useProducts();");
+      hookCalls.push("const { data: orders, isLoading: ordersLoading } = useOrders();");
+    }
+
+    return `/**
+ * Dashboard Page
+ * Overview of L4YERCAK3 data
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+${imports.join('\n')}
+
+export default function DashboardPage() {
+  ${hookCalls.join('\n  ')}
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        ${cards.join('\n        ')}
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  async generateProviders(appDir, ext, isTypeScript) {
+    const outputPath = path.join(appDir, `providers.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getProvidersTS()
+      : this.getProvidersJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getProvidersTS() {
+    return `/**
+ * App Providers
+ * Wraps the app with necessary providers (React Query, etc.)
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState, type ReactNode } from 'react';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+`;
+  }
+
+  getProvidersJS() {
+    return `/**
+ * App Providers
+ * Wraps the app with necessary providers (React Query, etc.)
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
+
+export function Providers({ children }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+`;
+  }
+}
+
+module.exports = new PageGenerator();