@l4yercak3/cli 1.3.1 → 2.0.0-alpha.0

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

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