@ereactthohir/cli 1.1.0 → 1.2.0

package/dist/commands/create.js

@@ -54,7 +54,19 @@ async function create(name) {
                 type: 'list',
                 name: 'uiSystem',
                 message: 'UI Style:',
-                choices: ['Rice UI (default, official)']
+                choices: [
+                    'Rice UI (default, official)',
+                    'Tailwind CSS',
+                    'Bootstrap 5',
+                    'JokoUI',
+                    'DaisyUI',
+                    'Mantine',
+                    'Material UI',
+                    'Ant Design',
+                    'Chakra UI',
+                    'Shadcn/ui',
+                    'None (Custom CSS)'
+                ]
             },
             {
                 type: 'list',
@@ -214,6 +226,11 @@ DB_DRIVER=${answers.database.includes('sawit') ? 'sawit' : answers.database.toLo
                 "App\\Providers\\AuthServiceProvider"
             ]
         }, { spaces: 2 });
+        // Generate template structure based on selection
+        if (answers.template !== 'None (Blank)') {
+            spinner.text = `Generating ${answers.template} template...`;
+            await generateTemplateStructure(projectDir, answers.template, answers.uiSystem);
+        }
         // Install Semouth if selected
         if (answers.installSemouth) {
             spinner.text = 'Installing Semouth components...';
@@ -221,14 +238,25 @@ DB_DRIVER=${answers.database.includes('sawit') ? 'sawit' : answers.database.toLo
         }
         // Write package.json
         const dependencies = {
-            "@ereactthohir/core": "^1.0.0",
-            "@ereactthohir/rice-ui": "^1.0.0",
+            "@ereactthohir/core": "^1.2.0",
+            "@ereactthohir/rice-ui": "^1.2.0",
             "react": "^18.0.0",
             "react-dom": "^18.0.0"
         };
+        // Add UI System dependencies
+        const uiDependencies = getUIDependencies(answers.uiSystem);
+        Object.assign(dependencies, uiDependencies);
+        // Add Template-specific dependencies
+        const templateDependencies = getTemplateDependencies(answers.template);
+        Object.assign(dependencies, templateDependencies);
         // Add Semouth dependencies if installed
         if (answers.installSemouth) {
-            dependencies["@ereactthohir/semouth"] = "^1.0.0";
+            dependencies["@ereactthohir/semouth"] = "^1.2.0";
+        }
+        // Add UI configuration file if not using default Rice UI
+        if (answers.uiSystem !== 'Rice UI (default, official)') {
+            spinner.text = 'Configuring UI system...';
+            await configureUISystem(projectDir, answers.uiSystem);
         }
         await fs_extra_1.default.writeJSON(path_1.default.join(projectDir, 'package.json'), {
             name,
@@ -240,10 +268,11 @@ DB_DRIVER=${answers.database.includes('sawit') ? 'sawit' : answers.database.toLo
             },
             dependencies,
             devDependencies: {
-                "@ereactthohir/cli": "^1.0.0",
+                "@ereactthohir/cli": "^1.2.0",
                 "typescript": "^5.0.0",
                 "@types/react": "^18.0.0",
-                "@types/react-dom": "^18.0.0"
+                "@types/react-dom": "^18.0.0",
+                ...getUIDevDependencies(answers.uiSystem)
             }
         }, { spaces: 2 });
         spinner.succeed(chalk_1.default.green('Project created successfully!'));
@@ -581,4 +610,1680 @@ const code = 2fa.generateCode(secret);
 For more information, refer to the [Security Guide](../../docs/SECURITY.md).
 `);
 }
+/**
+ * Generate template structure based on template selection
+ */
+async function generateTemplateStructure(projectDir, template, uiSystem) {
+    // Create template-specific directories
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/components'));
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/pages'));
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/stores'));
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/hooks'));
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/services'));
+    switch (template) {
+        case 'Mobile App Starter':
+            await generateMobileAppTemplate(projectDir, uiSystem);
+            break;
+        case 'Admin Dashboard':
+            await generateAdminDashboardTemplate(projectDir, uiSystem);
+            break;
+        case 'Authentication Starter':
+            await generateAuthenticationTemplate(projectDir, uiSystem);
+            break;
+        case 'Enterprise App Template':
+            await generateEnterpriseTemplate(projectDir, uiSystem);
+            break;
+        case 'SaaS Template':
+            await generateSaaSTemplate(projectDir, uiSystem);
+            break;
+    }
+}
+/**
+ * Generate Mobile App Starter template
+ */
+async function generateMobileAppTemplate(projectDir, uiSystem) {
+    // Create API service
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/api.ts'), `import axios, { AxiosInstance } from 'axios';
+
+class ApiService {
+    private api: AxiosInstance;
+
+    constructor() {
+        this.api = axios.create({
+            baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
+            timeout: 10000,
+        });
+
+        // Add request interceptor
+        this.api.interceptors.request.use((config) => {
+            const token = localStorage.getItem('auth_token');
+            if (token) {
+                config.headers.Authorization = \`Bearer \${token}\`;
+            }
+            return config;
+        });
+
+        // Add response interceptor
+        this.api.interceptors.response.use(
+            (response) => response,
+            (error) => {
+                if (error.response?.status === 401) {
+                    localStorage.removeItem('auth_token');
+                    window.location.href = '/login';
+                }
+                return Promise.reject(error);
+            }
+        );
+    }
+
+    async get(url: string, config?: any) {
+        return this.api.get(url, config);
+    }
+
+    async post(url: string, data?: any, config?: any) {
+        return this.api.post(url, data, config);
+    }
+
+    async put(url: string, data?: any, config?: any) {
+        return this.api.put(url, data, config);
+    }
+
+    async delete(url: string, config?: any) {
+        return this.api.delete(url, config);
+    }
+}
+
+export default new ApiService();
+`);
+    // Create state management (Zustand)
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useAppStore.ts'), `import { create } from 'zustand';
+
+interface AppState {
+    user: any | null;
+    isLoading: boolean;
+    notifications: any[];
+    
+    setUser: (user: any) => void;
+    setLoading: (loading: boolean) => void;
+    addNotification: (notification: any) => void;
+    removeNotification: (id: string) => void;
+    logout: () => void;
+}
+
+export const useAppStore = create<AppState>((set) => ({
+    user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')!) : null,
+    isLoading: false,
+    notifications: [],
+
+    setUser: (user) => {
+        localStorage.setItem('user', JSON.stringify(user));
+        set({ user });
+    },
+
+    setLoading: (loading) => set({ isLoading: loading }),
+
+    addNotification: (notification) =>
+        set((state) => ({ notifications: [...state.notifications, notification] })),
+
+    removeNotification: (id) =>
+        set((state) => ({
+            notifications: state.notifications.filter((n) => n.id !== id),
+        })),
+
+    logout: () => {
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('user');
+        set({ user: null });
+    },
+}));
+`);
+    // Create Home page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Home.tsx'), `import React, { useEffect, useState } from 'react';
+import { useAppStore } from '../stores/useAppStore';
+import apiService from '../services/api';
+
+export default function Home() {
+    const { user, isLoading, setLoading } = useAppStore();
+    const [data, setData] = useState<any[]>([]);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const fetchData = async () => {
+        try {
+            setLoading(true);
+            const response = await apiService.get('/data');
+            setData(response.data);
+        } catch (error) {
+            console.error('Failed to fetch data:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="p-4">
+            <h1 className="text-2xl font-bold mb-4">Welcome, {user?.name || 'Guest'}</h1>
+            {isLoading && <p>Loading...</p>}
+            <div className="grid gap-4">
+                {data.map((item, idx) => (
+                    <div key={idx} className="border rounded p-4">
+                        <h2 className="font-semibold">{item.title}</h2>
+                        <p>{item.description}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+`);
+    // Create routes
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/mobile.ts'), `import { Route } from '@ereactthohir/core';
+
+Route.screen('Home', () => import('../resources/pages/Home'));
+Route.screen('Profile', () => import('../resources/pages/Profile'));
+Route.screen('Settings', () => import('../resources/pages/Settings'));
+`);
+}
+/**
+ * Generate Admin Dashboard template
+ */
+async function generateAdminDashboardTemplate(projectDir, uiSystem) {
+    // Create API service
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/api.ts'), `import axios from 'axios';
+
+const api = axios.create({
+    baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
+});
+
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem('auth_token');
+    if (token) config.headers.Authorization = \`Bearer \${token}\`;
+    return config;
+});
+
+export default api;
+`);
+    // Create Admin Store
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useAdminStore.ts'), `import { create } from 'zustand';
+
+interface AdminState {
+    activeMenu: string;
+    users: any[];
+    products: any[];
+    settings: any;
+    stats: any;
+    
+    setActiveMenu: (menu: string) => void;
+    setUsers: (users: any[]) => void;
+    setProducts: (products: any[]) => void;
+    setSettings: (settings: any) => void;
+    setStats: (stats: any) => void;
+}
+
+export const useAdminStore = create<AdminState>((set) => ({
+    activeMenu: 'dashboard',
+    users: [],
+    products: [],
+    settings: {},
+    stats: {},
+
+    setActiveMenu: (menu) => set({ activeMenu: menu }),
+    setUsers: (users) => set({ users }),
+    setProducts: (products) => set({ products }),
+    setSettings: (settings) => set({ settings }),
+    setStats: (stats) => set({ stats }),
+}));
+`);
+    // Create Dashboard component
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/components/Dashboard.tsx'), `import React, { useEffect } from 'react';
+import { useAdminStore } from '../stores/useAdminStore';
+import apiService from '../services/api';
+
+export default function Dashboard() {
+    const { stats, setStats } = useAdminStore();
+
+    useEffect(() => {
+        loadStats();
+    }, []);
+
+    const loadStats = async () => {
+        try {
+            const response = await apiService.get('/admin/stats');
+            setStats(response.data);
+        } catch (error) {
+            console.error('Failed to load stats:', error);
+        }
+    };
+
+    return (
+        <div className="p-6">
+            <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                <StatCard title="Total Users" value={stats?.totalUsers || 0} />
+                <StatCard title="Total Products" value={stats?.totalProducts || 0} />
+                <StatCard title="Revenue" value={\`\$\${stats?.revenue || 0}\`} />
+                <StatCard title="Active Sessions" value={stats?.activeSessions || 0} />
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <ChartSection title="Sales Overview" />
+                <ChartSection title="User Activity" />
+            </div>
+        </div>
+    );
+}
+
+function StatCard({ title, value }: { title: string; value: any }) {
+    return (
+        <div className="bg-white p-4 rounded-lg shadow">
+            <h3 className="text-gray-500 text-sm">{title}</h3>
+            <p className="text-2xl font-bold mt-2">{value}</p>
+        </div>
+    );
+}
+
+function ChartSection({ title }: { title: string }) {
+    return (
+        <div className="bg-white p-6 rounded-lg shadow">
+            <h2 className="text-lg font-semibold mb-4">{title}</h2>
+            <div className="h-64 bg-gray-100 rounded flex items-center justify-center">
+                <p className="text-gray-400">Chart placeholder</p>
+            </div>
+        </div>
+    );
+}
+`);
+    // Create Users management page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Users.tsx'), `import React, { useEffect } from 'react';
+import { useAdminStore } from '../stores/useAdminStore';
+import apiService from '../services/api';
+
+export default function Users() {
+    const { users, setUsers } = useAdminStore();
+
+    useEffect(() => {
+        loadUsers();
+    }, []);
+
+    const loadUsers = async () => {
+        try {
+            const response = await apiService.get('/admin/users');
+            setUsers(response.data);
+        } catch (error) {
+            console.error('Failed to load users:', error);
+        }
+    };
+
+    return (
+        <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-3xl font-bold">Users Management</h1>
+                <button className="bg-blue-500 text-white px-4 py-2 rounded">Add User</button>
+            </div>
+
+            <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                    <thead className="bg-gray-100">
+                        <tr>
+                            <th className="px-6 py-3 text-left">Name</th>
+                            <th className="px-6 py-3 text-left">Email</th>
+                            <th className="px-6 py-3 text-left">Role</th>
+                            <th className="px-6 py-3 text-left">Status</th>
+                            <th className="px-6 py-3 text-left">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {users.map((user) => (
+                            <tr key={user.id} className="border-t hover:bg-gray-50">
+                                <td className="px-6 py-3">{user.name}</td>
+                                <td className="px-6 py-3">{user.email}</td>
+                                <td className="px-6 py-3">{user.role}</td>
+                                <td className="px-6 py-3">
+                                    <span className={user.active ? 'text-green-600' : 'text-red-600'}>
+                                        {user.active ? 'Active' : 'Inactive'}
+                                    </span>
+                                </td>
+                                <td className="px-6 py-3">
+                                    <button className="text-blue-500 hover:underline mr-3">Edit</button>
+                                    <button className="text-red-500 hover:underline">Delete</button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+`);
+    // Create admin routes
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/admin.ts'), `import { Route } from '@ereactthohir/core';
+
+Route.middleware(['auth', 'admin']).group(() => {
+    Route.get('/dashboard', 'AdminController@dashboard').name('admin.dashboard');
+    Route.get('/users', 'AdminController@users').name('admin.users');
+    Route.get('/products', 'AdminController@products').name('admin.products');
+    Route.get('/settings', 'AdminController@settings').name('admin.settings');
+});
+`);
+}
+/**
+ * Generate Authentication Starter template
+ */
+async function generateAuthenticationTemplate(projectDir, uiSystem) {
+    // Create Auth store
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useAuthStore.ts'), `import { create } from 'zustand';
+import apiService from '../services/api';
+
+interface AuthState {
+    user: any | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: string | null;
+    
+    login: (email: string, password: string) => Promise<void>;
+    register: (data: any) => Promise<void>;
+    logout: () => Promise<void>;
+    refresh: () => Promise<void>;
+    setError: (error: string | null) => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+    user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')!) : null,
+    isAuthenticated: !!localStorage.getItem('auth_token'),
+    isLoading: false,
+    error: null,
+
+    login: async (email, password) => {
+        set({ isLoading: true, error: null });
+        try {
+            const response = await apiService.post('/auth/login', { email, password });
+            localStorage.setItem('auth_token', response.data.token);
+            localStorage.setItem('user', JSON.stringify(response.data.user));
+            set({ user: response.data.user, isAuthenticated: true });
+        } catch (error: any) {
+            set({ error: error.response?.data?.message || 'Login failed' });
+            throw error;
+        } finally {
+            set({ isLoading: false });
+        }
+    },
+
+    register: async (data) => {
+        set({ isLoading: true, error: null });
+        try {
+            const response = await apiService.post('/auth/register', data);
+            localStorage.setItem('auth_token', response.data.token);
+            localStorage.setItem('user', JSON.stringify(response.data.user));
+            set({ user: response.data.user, isAuthenticated: true });
+        } catch (error: any) {
+            set({ error: error.response?.data?.message || 'Registration failed' });
+            throw error;
+        } finally {
+            set({ isLoading: false });
+        }
+    },
+
+    logout: async () => {
+        try {
+            await apiService.post('/auth/logout');
+        } finally {
+            localStorage.removeItem('auth_token');
+            localStorage.removeItem('user');
+            set({ user: null, isAuthenticated: false });
+        }
+    },
+
+    refresh: async () => {
+        try {
+            const response = await apiService.post('/auth/refresh');
+            localStorage.setItem('auth_token', response.data.token);
+            localStorage.setItem('user', JSON.stringify(response.data.user));
+            set({ user: response.data.user });
+        } catch (error) {
+            localStorage.removeItem('auth_token');
+            set({ user: null, isAuthenticated: false });
+        }
+    },
+
+    setError: (error) => set({ error }),
+}));
+`);
+    // Create API service
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/api.ts'), `import axios from 'axios';
+
+const api = axios.create({
+    baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
+});
+
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem('auth_token');
+    if (token) config.headers.Authorization = \`Bearer \${token}\`;
+    return config;
+});
+
+api.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+        if (error.response?.status === 401) {
+            localStorage.removeItem('auth_token');
+            window.location.href = '/login';
+        }
+        return Promise.reject(error);
+    }
+);
+
+export default api;
+`);
+    // Create Login page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Login.tsx'), `import React, { useState } from 'react';
+import { useAuthStore } from '../stores/useAuthStore';
+import { useNavigate } from 'react-router-dom';
+
+export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const { login, isLoading, error } = useAuthStore();
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            await login(email, password);
+            navigate('/dashboard');
+        } catch (error) {
+            console.error('Login failed');
+        }
+    };
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <div className="w-full max-w-md bg-white rounded-lg shadow">
+                <div className="p-8">
+                    <h1 className="text-2xl font-bold text-center mb-6">Login</h1>
+                    
+                    {error && (
+                        <div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit}>
+                        <div className="mb-4">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">
+                                Email
+                            </label>
+                            <input
+                                type="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-6">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">
+                                Password
+                            </label>
+                            <input
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-400"
+                        >
+                            {isLoading ? 'Logging in...' : 'Login'}
+                        </button>
+                    </form>
+
+                    <p className="text-center mt-4 text-gray-600">
+                        Don't have an account? <a href="/register" className="text-blue-500 hover:underline">Register</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+`);
+    // Create Register page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Register.tsx'), `import React, { useState } from 'react';
+import { useAuthStore } from '../stores/useAuthStore';
+import { useNavigate } from 'react-router-dom';
+
+export default function Register() {
+    const [formData, setFormData] = useState({ name: '', email: '', password: '', password_confirmation: '' });
+    const { register, isLoading, error } = useAuthStore();
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (formData.password !== formData.password_confirmation) {
+            alert('Passwords do not match');
+            return;
+        }
+        try {
+            await register(formData);
+            navigate('/dashboard');
+        } catch (error) {
+            console.error('Registration failed');
+        }
+    };
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <div className="w-full max-w-md bg-white rounded-lg shadow">
+                <div className="p-8">
+                    <h1 className="text-2xl font-bold text-center mb-6">Register</h1>
+                    
+                    {error && (
+                        <div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit}>
+                        <div className="mb-4">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">Name</label>
+                            <input
+                                type="text"
+                                value={formData.name}
+                                onChange={(e) => setFormData({...formData, name: e.target.value})}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-4">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">Email</label>
+                            <input
+                                type="email"
+                                value={formData.email}
+                                onChange={(e) => setFormData({...formData, email: e.target.value})}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-4">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">Password</label>
+                            <input
+                                type="password"
+                                value={formData.password}
+                                onChange={(e) => setFormData({...formData, password: e.target.value})}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-6">
+                            <label className="block text-gray-700 text-sm font-semibold mb-2">Confirm Password</label>
+                            <input
+                                type="password"
+                                value={formData.password_confirmation}
+                                onChange={(e) => setFormData({...formData, password_confirmation: e.target.value})}
+                                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-400"
+                        >
+                            {isLoading ? 'Registering...' : 'Register'}
+                        </button>
+                    </form>
+
+                    <p className="text-center mt-4 text-gray-600">
+                        Already have an account? <a href="/login" className="text-blue-500 hover:underline">Login</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+`);
+    // Create auth routes
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/auth.ts'), `import { Route } from '@ereactthohir/core';
+
+Route.get('/login', 'AuthController@showLogin').name('login');
+Route.post('/login', 'AuthController@login').name('login.store');
+
+Route.get('/register', 'AuthController@showRegister').name('register');
+Route.post('/register', 'AuthController@register').name('register.store');
+
+Route.middleware(['auth']).group(() => {
+    Route.post('/logout', 'AuthController@logout').name('logout');
+});
+`);
+}
+/**
+ * Generate Enterprise App Template
+ */
+async function generateEnterpriseTemplate(projectDir, uiSystem) {
+    // Create API service with advanced interceptors
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/api.ts'), `import axios, { AxiosInstance } from 'axios';
+
+class EnterpriseApiService {
+    private api: AxiosInstance;
+    private requestQueue: any[] = [];
+    private isRefreshing = false;
+
+    constructor() {
+        this.api = axios.create({
+            baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
+            timeout: 15000,
+        });
+
+        this.setupInterceptors();
+    }
+
+    private setupInterceptors() {
+        this.api.interceptors.request.use((config) => {
+            const token = localStorage.getItem('auth_token');
+            if (token) {
+                config.headers.Authorization = \`Bearer \${token}\`;
+            }
+            config.headers['X-Client-Version'] = '1.0.0';
+            return config;
+        });
+
+        this.api.interceptors.response.use(
+            (response) => response,
+            async (error) => {
+                const originalRequest = error.config;
+
+                if (error.response?.status === 401 && !originalRequest._retry) {
+                    if (!this.isRefreshing) {
+                        this.isRefreshing = true;
+                        try {
+                            const response = await this.api.post('/auth/refresh');
+                            localStorage.setItem('auth_token', response.data.token);
+                            this.isRefreshing = false;
+                            this.processQueue(null);
+
+                            originalRequest._retry = true;
+                            return this.api(originalRequest);
+                        } catch (refreshError) {
+                            this.isRefreshing = false;
+                            this.processQueue(refreshError);
+                            localStorage.removeItem('auth_token');
+                            window.location.href = '/login';
+                        }
+                    }
+
+                    return new Promise((resolve, reject) => {
+                        this.requestQueue.push({ resolve, reject });
+                    }).then(() => this.api(originalRequest));
+                }
+
+                return Promise.reject(error);
+            }
+        );
+    }
+
+    private processQueue(error: any) {
+        this.requestQueue.forEach((req) => {
+            if (error) {
+                req.reject(error);
+            } else {
+                req.resolve();
+            }
+        });
+        this.requestQueue = [];
+    }
+
+    async get(url: string, config?: any) { return this.api.get(url, config); }
+    async post(url: string, data?: any, config?: any) { return this.api.post(url, data, config); }
+    async put(url: string, data?: any, config?: any) { return this.api.put(url, data, config); }
+    async patch(url: string, data?: any, config?: any) { return this.api.patch(url, data, config); }
+    async delete(url: string, config?: any) { return this.api.delete(url, config); }
+}
+
+export default new EnterpriseApiService();
+`);
+    // Create advanced store with persistence
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useEnterpriseStore.ts'), `import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+    permissions: string[];
+}
+
+interface EnterpriseState {
+    user: User | null;
+    organization: any | null;
+    features: string[];
+    settings: Record<string, any>;
+    
+    setUser: (user: User) => void;
+    setOrganization: (org: any) => void;
+    setFeatures: (features: string[]) => void;
+    updateSettings: (settings: Record<string, any>) => void;
+    hasPermission: (permission: string) => boolean;
+}
+
+export const useEnterpriseStore = create<EnterpriseState>()(
+    persist(
+        (set, get) => ({
+            user: null,
+            organization: null,
+            features: [],
+            settings: {},
+
+            setUser: (user) => set({ user }),
+            setOrganization: (organization) => set({ organization }),
+            setFeatures: (features) => set({ features }),
+            updateSettings: (settings) => set((state) => ({
+                settings: { ...state.settings, ...settings }
+            })),
+            hasPermission: (permission: string) => {
+                const { user } = get();
+                return user?.permissions.includes(permission) || false;
+            },
+        }),
+        { name: 'enterprise-store' }
+    )
+);
+`);
+    // Create modules structure
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/modules'));
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/modules/dashboard.ts'), `export const dashboardModule = {
+    routes: [
+        { path: '/dashboard', component: 'Dashboard', name: 'dashboard' },
+        { path: '/analytics', component: 'Analytics', name: 'analytics' },
+    ],
+    permissions: ['view.dashboard', 'view.analytics'],
+};
+`);
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/modules/users.ts'), `export const usersModule = {
+    routes: [
+        { path: '/users', component: 'UsersList', name: 'users.list' },
+        { path: '/users/:id', component: 'UserDetail', name: 'users.show' },
+        { path: '/users/create', component: 'UserForm', name: 'users.create' },
+    ],
+    permissions: ['manage.users'],
+};
+`);
+    // Create advanced hooks
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/hooks/useApi.ts'), `import { useState, useCallback } from 'react';
+import apiService from '../services/api';
+
+export function useApi<T>(url: string, options?: any) {
+    const [data, setData] = useState<T | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<any>(null);
+
+    const fetch = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await apiService.get(url, options);
+            setData(response.data);
+        } catch (err) {
+            setError(err);
+        } finally {
+            setLoading(false);
+        }
+    }, [url, options]);
+
+    return { data, loading, error, fetch };
+}
+`);
+    // Create main routes
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/enterprise.ts'), `import { Route } from '@ereactthohir/core';
+
+Route.middleware(['auth', 'verified']).group(() => {
+    // Dashboard
+    Route.get('/dashboard', 'DashboardController@index').name('dashboard');
+    
+    // Users Management
+    Route.get('/users', 'UserController@index').name('users.index');
+    Route.get('/users/create', 'UserController@create').name('users.create');
+    Route.post('/users', 'UserController@store').name('users.store');
+    Route.get('/users/:id', 'UserController@show').name('users.show');
+    Route.get('/users/:id/edit', 'UserController@edit').name('users.edit');
+    Route.put('/users/:id', 'UserController@update').name('users.update');
+    Route.delete('/users/:id', 'UserController@destroy').name('users.destroy');
+    
+    // Settings
+    Route.get('/settings', 'SettingsController@index').name('settings');
+    Route.put('/settings', 'SettingsController@update').name('settings.update');
+});
+`);
+}
+/**
+ * Generate SaaS Template
+ */
+async function generateSaaSTemplate(projectDir, uiSystem) {
+    // Create subscription service
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/subscription.ts'), `import apiService from './api';
+
+export class SubscriptionService {
+    async getPlans() {
+        const response = await apiService.get('/subscription/plans');
+        return response.data;
+    }
+
+    async subscribe(planId: number, billingCycle: 'monthly' | 'yearly') {
+        const response = await apiService.post('/subscription/subscribe', {
+            plan_id: planId,
+            billing_cycle: billingCycle,
+        });
+        return response.data;
+    }
+
+    async getCurrentSubscription() {
+        const response = await apiService.get('/subscription/current');
+        return response.data;
+    }
+
+    async cancelSubscription() {
+        const response = await apiService.post('/subscription/cancel');
+        return response.data;
+    }
+
+    async upgradeSubscription(planId: number) {
+        const response = await apiService.post('/subscription/upgrade', { plan_id: planId });
+        return response.data;
+    }
+
+    async getInvoices() {
+        const response = await apiService.get('/subscription/invoices');
+        return response.data;
+    }
+}
+
+export default new SubscriptionService();
+`);
+    // Create SaaS store
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useSaaSStore.ts'), `import { create } from 'zustand';
+import subscriptionService from '../services/subscription';
+
+interface Subscription {
+    id: number;
+    plan: any;
+    status: 'active' | 'canceled' | 'expired';
+    billing_cycle: 'monthly' | 'yearly';
+    current_period_start: string;
+    current_period_end: string;
+}
+
+interface SaaSState {
+    subscription: Subscription | null;
+    plans: any[];
+    invoices: any[];
+    isLoading: boolean;
+
+    loadPlans: () => Promise<void>;
+    loadSubscription: () => Promise<void>;
+    loadInvoices: () => Promise<void>;
+    subscribe: (planId: number, cycle: string) => Promise<void>;
+    cancelSubscription: () => Promise<void>;
+}
+
+export const useSaaSStore = create<SaaSState>((set) => ({
+    subscription: null,
+    plans: [],
+    invoices: [],
+    isLoading: false,
+
+    loadPlans: async () => {
+        set({ isLoading: true });
+        try {
+            const plans = await subscriptionService.getPlans();
+            set({ plans });
+        } finally {
+            set({ isLoading: false });
+        }
+    },
+
+    loadSubscription: async () => {
+        try {
+            const subscription = await subscriptionService.getCurrentSubscription();
+            set({ subscription });
+        } catch (error) {
+            console.error('Failed to load subscription:', error);
+        }
+    },
+
+    loadInvoices: async () => {
+        try {
+            const invoices = await subscriptionService.getInvoices();
+            set({ invoices });
+        } catch (error) {
+            console.error('Failed to load invoices:', error);
+        }
+    },
+
+    subscribe: async (planId: number, cycle: string) => {
+        set({ isLoading: true });
+        try {
+            await subscriptionService.subscribe(planId, cycle as any);
+            await subscriptionService.getCurrentSubscription();
+        } finally {
+            set({ isLoading: false });
+        }
+    },
+
+    cancelSubscription: async () => {
+        set({ isLoading: true });
+        try {
+            await subscriptionService.cancelSubscription();
+            set({ subscription: null });
+        } finally {
+            set({ isLoading: false });
+        }
+    },
+}));
+`);
+    // Create Pricing page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Pricing.tsx'), `import React, { useEffect } from 'react';
+import { useSaaSStore } from '../stores/useSaaSStore';
+
+export default function Pricing() {
+    const { plans, loadPlans, isLoading } = useSaaSStore();
+
+    useEffect(() => {
+        loadPlans();
+    }, []);
+
+    return (
+        <div className="py-12 px-4">
+            <div className="text-center mb-12">
+                <h1 className="text-4xl font-bold mb-4">Simple, Transparent Pricing</h1>
+                <p className="text-gray-600">Choose the plan that fits your needs</p>
+            </div>
+
+            {isLoading ? (
+                <p className="text-center">Loading plans...</p>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                    {plans.map((plan) => (
+                        <PricingCard key={plan.id} plan={plan} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function PricingCard({ plan }: { plan: any }) {
+    const { subscribe } = useSaaSStore();
+
+    return (
+        <div className={'rounded-lg p-8 ' + (plan.featured ? 'bg-blue-50 border-2 border-blue-500' : 'bg-white border border-gray-200')}>
+            <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
+            <p className="text-gray-600 text-sm mb-4">{plan.description}</p>
+            
+            <div className="mb-6">
+                <span className="text-3xl font-bold">\${plan.price}</span>
+                <span className="text-gray-600">/month</span>
+            </div>
+
+            <ul className="mb-6 space-y-2">
+                {plan.features.map((feature: string) => (
+                    <li key={feature} className="flex items-center">
+                        <span className="mr-2">✓</span>
+                        <span>{feature}</span>
+                    </li>
+                ))}
+            </ul>
+
+            <button
+                onClick={() => subscribe(plan.id, 'monthly')}
+                className={plan.featured ? 'w-full bg-blue-500 text-white py-2 rounded' : 'w-full border border-gray-300 py-2 rounded'}
+            >
+                Choose Plan
+            </button>
+        </div>
+    );
+}
+`);
+    // Create Subscription Management page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Subscription.tsx'), `import React, { useEffect } from 'react';
+import { useSaaSStore } from '../stores/useSaaSStore';
+
+export default function Subscription() {
+    const { subscription, invoices, loadSubscription, loadInvoices } = useSaaSStore();
+
+    useEffect(() => {
+        loadSubscription();
+        loadInvoices();
+    }, []);
+
+    return (
+        <div className="p-6 max-w-4xl mx-auto">
+            <h1 className="text-3xl font-bold mb-8">Subscription Management</h1>
+
+            {subscription && (
+                <div className="bg-white rounded-lg shadow p-6 mb-8">
+                    <h2 className="text-xl font-semibold mb-4">Current Plan</h2>
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <p className="text-gray-600">Plan</p>
+                            <p className="font-semibold">{subscription.plan.name}</p>
+                        </div>
+                        <div>
+                            <p className="text-gray-600">Status</p>
+                            <p className="font-semibold text-green-600">{subscription.status}</p>
+                        </div>
+                        <div>
+                            <p className="text-gray-600">Renewal Date</p>
+                            <p className="font-semibold">{new Date(subscription.current_period_end).toLocaleDateString()}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="bg-white rounded-lg shadow overflow-hidden">
+                <div className="p-6 border-b">
+                    <h2 className="text-xl font-semibold">Invoices</h2>
+                </div>
+                <table className="w-full">
+                    <thead className="bg-gray-50">
+                        <tr>
+                            <th className="px-6 py-3 text-left">Date</th>
+                            <th className="px-6 py-3 text-left">Amount</th>
+                            <th className="px-6 py-3 text-left">Status</th>
+                            <th className="px-6 py-3 text-left">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {invoices.map((invoice) => (
+                            <tr key={invoice.id} className="border-t">
+                                <td className="px-6 py-3">{new Date(invoice.date).toLocaleDateString()}</td>
+                                <td className="px-6 py-3">\${invoice.amount}</td>
+                                <td className="px-6 py-3">{invoice.status}</td>
+                                <td className="px-6 py-3">
+                                    <a href={invoice.url} className="text-blue-500 hover:underline">Download</a>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+`);
+    // Create SaaS routes
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/saas.ts'), `import { Route } from '@ereactthohir/core';
+
+// Public pricing
+Route.get('/pricing', 'PricingController@index').name('pricing');
+
+Route.middleware(['auth']).group(() => {
+    // Subscription management
+    Route.get('/subscription', 'SubscriptionController@index').name('subscription');
+    Route.post('/subscription/subscribe', 'SubscriptionController@subscribe').name('subscription.subscribe');
+    Route.post('/subscription/cancel', 'SubscriptionController@cancel').name('subscription.cancel');
+    Route.post('/subscription/upgrade', 'SubscriptionController@upgrade').name('subscription.upgrade');
+    
+    // Invoices
+    Route.get('/invoices', 'InvoiceController@index').name('invoices');
+    Route.get('/invoices/:id', 'InvoiceController@show').name('invoices.show');
+});
+`);
+}
+/**
+ * Get UI Framework dependencies based on selection
+ */
+function getUIDependencies(uiSystem) {
+    const deps = {};
+    switch (uiSystem) {
+        case 'Tailwind CSS':
+            deps['tailwindcss'] = '^3.3.0';
+            break;
+        case 'Bootstrap 5':
+            deps['bootstrap'] = '^5.3.0';
+            deps['react-bootstrap'] = '^2.8.0';
+            break;
+        case 'JokoUI':
+            deps['jokoui'] = '^1.0.0';
+            break;
+        case 'DaisyUI':
+            deps['daisyui'] = '^3.9.0';
+            deps['tailwindcss'] = '^3.3.0';
+            break;
+        case 'Mantine':
+            deps['@mantine/core'] = '^7.0.0';
+            deps['@mantine/hooks'] = '^7.0.0';
+            break;
+        case 'Chakra UI':
+            deps['@chakra-ui/react'] = '^2.8.0';
+            deps['@emotion/react'] = '^11.11.0';
+            deps['@emotion/styled'] = '^11.11.0';
+            deps['framer-motion'] = '^10.12.0';
+            break;
+        case 'Shadcn/ui':
+            deps['@radix-ui/primitives'] = '^1.0.0';
+            deps['class-variance-authority'] = '^0.7.0';
+            deps['clsx'] = '^2.0.0';
+            deps['tailwindcss'] = '^3.3.0';
+            break;
+        case 'None (Custom CSS)':
+            // No additional dependencies
+            break;
+    }
+    return deps;
+}
+/**
+ * Get UI Framework dev dependencies based on selection
+ */
+function getUIDevDependencies(uiSystem) {
+    const devDeps = {};
+    switch (uiSystem) {
+        case 'Tailwind CSS':
+        case 'DaisyUI': // DaisyUI uses Tailwind
+            devDeps['tailwindcss'] = '^3.3.0';
+            devDeps['postcss'] = '^8.4.0';
+            devDeps['autoprefixer'] = '^10.4.0';
+            break;
+        case 'Bootstrap 5':
+            devDeps['sass'] = '^1.66.0';
+            devDeps['sass-loader'] = '^13.3.0';
+            break;
+        case 'Shadcn/ui':
+            devDeps['tailwindcss'] = '^3.3.0';
+            devDeps['postcss'] = '^8.4.0';
+            devDeps['autoprefixer'] = '^10.4.0';
+            break;
+        case 'Mantine':
+            devDeps['postcss'] = '^8.4.0';
+            devDeps['postcss-preset-mantine'] = '^1.0.0';
+            devDeps['postcss-simple-vars'] = '^7.0.0';
+            break;
+    }
+    return devDeps;
+}
+/**
+ * Get Template-specific dependencies
+ */
+function getTemplateDependencies(template) {
+    const deps = {};
+    // Common dependencies for all templates (except Blank)
+    if (template !== 'None (Blank)') {
+        deps['axios'] = '^1.4.0';
+        deps['zustand'] = '^4.4.0';
+        deps['react-router-dom'] = '^6.14.0';
+    }
+    switch (template) {
+        case 'Mobile App Starter':
+            deps['react-native'] = '^0.72.0';
+            deps['react-native-navigation'] = '^7.0.0';
+            break;
+        case 'Admin Dashboard':
+            deps['recharts'] = '^2.8.0';
+            deps['lucide-react'] = '^0.263.0';
+            break;
+        case 'Enterprise App Template':
+            deps['lodash'] = '^4.17.21';
+            deps['date-fns'] = '^2.30.0';
+            deps['react-hook-form'] = '^7.45.0';
+            break;
+        case 'SaaS Template':
+            deps['stripe'] = '^12.10.0';
+            deps['date-fns'] = '^2.30.0';
+            deps['react-hook-form'] = '^7.45.0';
+            break;
+        case 'Authentication Starter':
+            deps['jsonwebtoken'] = '^9.0.2';
+            deps['bcryptjs'] = '^2.4.3';
+            break;
+    }
+    return deps;
+}
+/**
+ * Configure UI System files and configurations
+ */
+async function configureUISystem(projectDir, uiSystem) {
+    switch (uiSystem) {
+        case 'Tailwind CSS':
+            await configureTailwind(projectDir);
+            break;
+        case 'Bootstrap 5':
+            await configureBootstrap(projectDir);
+            break;
+        case 'JokoUI':
+            await configureJokoUI(projectDir);
+            break;
+        case 'DaisyUI':
+            await configureDaisyUI(projectDir);
+            break;
+        case 'Mantine':
+            await configureMantine(projectDir);
+            break;
+        case 'Material UI':
+            await configureMaterialUI(projectDir);
+            break;
+        case 'Ant Design':
+            await configureAntDesign(projectDir);
+            break;
+        case 'Chakra UI':
+            await configureChakraUI(projectDir);
+            break;
+        case 'Shadcn/ui':
+            await configureShadcn(projectDir);
+            break;
+    }
+}
+/**
+ * Configure Tailwind CSS
+ */
+async function configureTailwind(projectDir) {
+    // Create tailwind.config.js
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'tailwind.config.js'), `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./resources/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`);
+    // Create postcss.config.js
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'postcss.config.js'), `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`);
+    // Create tailwind.css
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/css'));
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/css/tailwind.css'), `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`);
+    // Create example component with Tailwind
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+
+export default function WelcomeComponent() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600">
+            <div className="text-center">
+                <h1 className="text-5xl font-bold text-white mb-4">Welcome to EreactThohir</h1>
+                <p className="text-xl text-gray-100 mb-8">With Tailwind CSS</p>
+                <button className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition">
+                    Get Started
+                </button>
+            </div>
+        </div>
+    );
+}
+`);
+}
+/**
+ * Configure Bootstrap 5
+ */
+async function configureBootstrap(projectDir) {
+    // Create example component with Bootstrap
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Container, Row, Col, Button } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+export default function WelcomeComponent() {
+    return (
+        <Container className="d-flex align-items-center justify-content-center" style={{ minHeight: '100vh' }}>
+            <Row className="text-center">
+                <Col>
+                    <h1 className="display-4 fw-bold mb-4">Welcome to EreactThohir</h1>
+                    <p className="lead mb-4">With Bootstrap 5</p>
+                    <Button variant="primary" size="lg">Get Started</Button>
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+`);
+}
+/**
+ * Configure Material UI
+ */
+async function configureMaterialUI(projectDir) {
+    // Create example component with Material UI
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Box, Container, Typography, Button, Stack } from '@mui/material';
+
+export default function WelcomeComponent() {
+    return (
+        <Container maxWidth="md">
+            <Box
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '100vh',
+                    textAlign: 'center',
+                }}
+            >
+                <Stack spacing={3}>
+                    <Typography variant="h1" component="h1">
+                        Welcome to EreactThohir
+                    </Typography>
+                    <Typography variant="h5" color="textSecondary">
+                        With Material UI
+                    </Typography>
+                    <Button variant="contained" size="large">
+                        Get Started
+                    </Button>
+                </Stack>
+            </Box>
+        </Container>
+    );
+}
+`);
+}
+/**
+ * Configure Ant Design
+ */
+async function configureAntDesign(projectDir) {
+    // Create example component with Ant Design
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Layout, Button, Space, Typography } from 'antd';
+import 'antd/dist/reset.css';
+
+const { Content } = Layout;
+const { Title, Text } = Typography;
+
+export default function WelcomeComponent() {
+    return (
+        <Layout style={{ minHeight: '100vh' }}>
+            <Content style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Space direction="vertical" align="center" style={{ textAlign: 'center' }}>
+                    <Title level={1}>Welcome to EreactThohir</Title>
+                    <Text type="secondary" style={{ fontSize: '18px' }}>
+                        With Ant Design
+                    </Text>
+                    <Button type="primary" size="large">
+                        Get Started
+                    </Button>
+                </Space>
+            </Content>
+        </Layout>
+    );
+}
+`);
+}
+/**
+ * Configure Chakra UI
+ */
+async function configureChakraUI(projectDir) {
+    // Create example component with Chakra UI
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Box, Container, Heading, Text, Button, VStack, Center } from '@chakra-ui/react';
+
+export default function WelcomeComponent() {
+    return (
+        <Center minH="100vh">
+            <Container maxW="md">
+                <VStack spacing={8} textAlign="center">
+                    <Heading as="h1" size="2xl">
+                        Welcome to EreactThohir
+                    </Heading>
+                    <Text fontSize="lg" color="gray.600">
+                        With Chakra UI
+                    </Text>
+                    <Button colorScheme="blue" size="lg">
+                        Get Started
+                    </Button>
+                </VStack>
+            </Container>
+        </Center>
+    );
+}
+`);
+}
+/**
+ * Configure Shadcn/ui
+ */
+async function configureShadcn(projectDir) {
+    // Create shadcn.json config
+    await fs_extra_1.default.writeJSON(path_1.default.join(projectDir, 'components.json'), {
+        "$schema": "https://ui.shadcn.com/schema.json",
+        "style": "default",
+        "rsc": true,
+        "tsx": true,
+        "tailwind": {
+            "config": "tailwind.config.js",
+            "css": "resources/css/globals.css",
+            "baseColor": "slate"
+        },
+        "aliases": {
+            "@/components": "./resources/components",
+            "@/lib/utils": "./resources/lib/utils"
+        }
+    }, { spaces: 2 });
+    // Create tailwind config for Shadcn
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'tailwind.config.js'), `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./resources/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+`);
+    // Create globals.css
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/css'));
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/css/globals.css'), `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.6%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.6%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.6%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 9.0%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --primary: 0 0% 9.0%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9.0%;
+    --ring: 0 0% 3.6%;
+  }
+}
+`);
+    // Create example component
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Button } from '@/components/ui/button';
+
+export default function WelcomeComponent() {
+    return (
+        <div className="flex items-center justify-center min-h-screen">
+            <div className="text-center">
+                <h1 className="text-5xl font-bold mb-4">Welcome to EreactThohir</h1>
+                <p className="text-xl text-muted-foreground mb-8">With Shadcn/ui</p>
+                <Button size="lg">Get Started</Button>
+            </div>
+        </div>
+    );
+}
+`);
+}
+/**
+ * Configure JokoUI
+ */
+async function configureJokoUI(projectDir) {
+    // Create jokoui.config.js
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'jokoui.config.js'), `export default {
+        theme: {
+            primary: '#3b82f6',
+            secondary: '#10b981',
+        },
+        components: {
+            button: {
+                borderRadius: '0.5rem',
+            }
+        }
+    }
+        `);
+    // Create example component
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+    import { Button, Card } from 'jokoui';
+
+    export default function WelcomeComponent() {
+        return (
+            <div style= {{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', backgroundColor: '#f3f4f6' }
+    }>
+        <Card style={ { padding: '2rem', textAlign: 'center', maxWidth: '500px' } }>
+            <h1 style={ { fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' } }> Welcome to EreactThohir </h1>
+                < p style = {{ color: '#666', marginBottom: '2rem' }
+}> With JokoUI </p>
+    < Button variant = "primary" size = "lg" > Get Started </Button>
+        </Card>
+        </div>
+    );
+}
+`);
+}
+/**
+ * Configure DaisyUI
+ */
+async function configureDaisyUI(projectDir) {
+    // Configure Tailwind + DaisyUI
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'tailwind.config.js'), `/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./resources/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [require("daisyui")],
+    daisyui: {
+        themes: ["light", "dark", "cupcake"],
+    },
+}
+    `);
+    // Create postcss.config.js
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'postcss.config.js'), `export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
+    `);
+    // Create tailwind.css
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/css'));
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/css/tailwind.css'), `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`);
+    // Create example component
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+
+export default function WelcomeComponent() {
+    return (
+        <div className= "hero min-h-screen bg-base-200" >
+        <div className="hero-content text-center" >
+            <div className="max-w-md" >
+                <h1 className="text-5xl font-bold" > Welcome to EreactThohir </h1>
+                    < p className = "py-6" > With DaisyUI + Tailwind CSS </p>
+                        < button className = "btn btn-primary" > Get Started </button>
+                            < button className = "btn btn-secondary ml-2" > Documentation </button>
+                                </div>
+                                </div>
+                                </div>
+    );
+}
+`);
+}
+/**
+ * Configure Mantine
+ */
+async function configureMantine(projectDir) {
+    // Create postcss.config.js for Mantine
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'postcss.config.cjs'), `module.exports = {
+    plugins: {
+        'postcss-preset-mantine': {},
+        'postcss-simple-vars': {
+            variables: {
+                'mantine-breakpoint-xs': '36em',
+                'mantine-breakpoint-sm': '48em',
+                'mantine-breakpoint-md': '62em',
+                'mantine-breakpoint-lg': '75em',
+                'mantine-breakpoint-xl': '88em',
+            },
+        },
+    },
+};
+`);
+    // Create Example Component
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/WelcomeComponent.tsx'), `import React from 'react';
+import { Container, Title, Text, Button, Group } from '@mantine/core';
+
+export default function WelcomeComponent() {
+    return (
+        <Container size= "md" h = "100vh" style = {{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }
+}>
+    <Title order={ 1 } mb = "md" > Welcome to EreactThohir </Title>
+        < Text size = "lg" c = "dimmed" mb = "xl" > With Mantine UI </Text>
+
+            < Group >
+            <Button size="lg" variant = "filled" color = "blue" > Get Started </Button>
+                < Button size = "lg" variant = "light" color = "blue" > Learn More </Button>
+                    </Group>
+                    </Container>
+    );
+}
+`);
+    // Note: User needs to wrap App with MantineProvider, but we can't easily edit App.tsx/index.tsx here without parsing it.
+    // We assume the user or the template generator handles the provider wrapping if possible, 
+    // or we could overwrite the main entry point if we knew where it was.
+    // For now, we'll just provide the component.
+}
 //# sourceMappingURL=create.js.map