@ereactthohir/cli 1.3.0 → 1.5.0

package/dist/commands/create.js

@@ -10,8 +10,17 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const ora_1 = __importDefault(require("ora"));
 async function create(name) {
-    console.log(chalk_1.default.blue(`\n🚀 Initializing EreactThohir Project: ${name}`));
-    console.log(chalk_1.default.gray('   Powered by KangPCode (Dhafa Nazula Permadi)\n'));
+    console.log(chalk_1.default.red.bold(`
+    ███████╗██████╗ ███████╗ █████╗  ██████╗████████╗████████╗██╗  ██╗ ██████╗ ██╗  ██╗██╗██████╗ 
+    ██╔════╝██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██║  ██║██╔═══██╗██║  ██║██║██╔══██╗
+    █████╗  ██████╔╝█████╗  ███████║██║        ██║      ██║   ███████║██║   ██║███████║██║██████╔╝
+    ██╔══╝  ██╔══██╗██╔══╝  ██╔══██║██║        ██║      ██║   ██╔══██║██║   ██║██╔══██║██║██╔══██╗
+    ███████╗██║  ██║███████╗██║  ██║╚██████╗   ██║      ██║   ██║  ██║╚██████╔╝██║  ██║██║██║  ██║
+    ╚══════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝   ╚═╝      ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝  ╚═╝
+    `));
+    console.log(chalk_1.default.blue(`\n  🚀 [EN] Initializing EreactThohir Project: ${chalk_1.default.bold(name)}`));
+    console.log(chalk_1.default.blue(`     [ID] Inisialisasi Proyek EreactThohir: ${chalk_1.default.bold(name)}`));
+    console.log(chalk_1.default.gray(`     Powered by ${chalk_1.default.white.bold('Dhafa Nazula Permadi')} (KangPCode)\n`));
     let answers;
     if (process.env.CI) {
         console.log(chalk_1.default.yellow('   Run in automated CI mode (Skipping prompts)'));
@@ -157,93 +166,9 @@ Route.get('/', (req, res) => {
     return res.view('Welcome');
 });
 `);
-        // Write Welcome component
-        await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/Welcome.tsx'), `import React from 'react';
-
-export default function Welcome() {
-    return (
-        <div className="rice-min-h-screen rice-bg-white rice-relative rice-overflow-hidden">
-            {/* Background Decorative Elements */}
-            <div className="rice-absolute rice-inset-0 rice-pointer-events-none">
-                <div className="rice-absolute rice-top-[-10%] rice-right-[-5%] rice-w-[500px] rice-h-[500px] rice-bg-primary-500 rice-opacity-5 rice-blur-3xl rice-rounded-full" />
-                <div className="rice-absolute rice-bottom-[-10%] rice-left-[-5%] rice-w-[600px] rice-h-[600px] rice-secondary-600 rice-opacity-5 rice-blur-3xl rice-rounded-full" />
-            </div>
-
-            {/* Navigation */}
-            <nav className="rice-relative rice-z-10 rice-flex rice-items-center rice-justify-between rice-px-8 rice-py-6 rice-max-w-7xl rice-mx-auto">
-                <div className="rice-flex rice-items-center rice-gap-2">
-                    <div className="rice-w-10 rice-h-10 rice-bg-secondary-900 rice-rounded-xl rice-flex rice-items-center rice-justify-center rice-text-white rice-font-black">E</div>
-                    <span className="rice-text-xl rice-font-black rice-tracking-tighter">EreactThohir</span>
-                </div>
-                <div className="rice-hidden rice-md-flex rice-items-center rice-gap-8 rice-text-sm rice-font-medium rice-text-secondary-600">
-                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Documentation</a>
-                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Showcase</a>
-                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Community</a>
-                    <a href="/auth/login" className="rice-px-5 rice-py-2 rice-bg-secondary-900 rice-text-white rice-rounded-full rice-hover-scale-105 rice-transition-all">Get Started</a>
-                </div>
-            </nav>
-
-            <main className="rice-relative rice-z-10 rice-max-w-7xl rice-mx-auto rice-px-8 rice-pt-20 rice-pb-32">
-                <div className="rice-text-center rice-max-w-4xl rice-mx-auto">
-                    <div className="rice-inline-flex rice-items-center rice-gap-2 rice-px-4 rice-py-2 rice-bg-secondary-100 rice-rounded-full rice-mb-8 rice-animate-pulse">
-                        <span className="rice-w-2 rice-h-2 rice-bg-primary-500 rice-rounded-full" />
-                        <span className="rice-text-xs rice-font-bold rice-text-secondary-600">Framework v1.3.0 "Powerful" is now available</span>
-                    </div>
-                    
-                    <h1 className="rice-text-6xl rice-md-text-8xl rice-font-black rice-tracking-tight rice-mb-8">
-                        The Future of <span className="rice-gradient-primary rice-bg-clip-text rice-text-transparent">Modern Web</span> Development.
-                    </h1>
-                    
-                    <p className="rice-text-xl rice-md-text-2xl rice-text-secondary-600 rice-mb-12 rice-leading-relaxed">
-                        Combine the elegance of Laravel's architecture with the power of React. 
-                        Build stunning, enterprise-ready applications faster than ever before.
-                    </p>
-
-                    <div className="rice-flex rice-flex-wrap rice-justify-center rice-gap-4">
-                        <a href="/auth/register" className="rice-px-10 rice-py-5 rice-bg-secondary-900 rice-text-white rice-text-lg rice-font-bold rice-rounded-2xl rice-shadow-2xl rice-hover-scale-105 rice-transition-all rice-duration-300">
-                            Create Your First App
-                        </a>
-                        <a href="#" className="rice-px-10 rice-py-5 rice-bg-white rice-border rice-text-secondary-900 rice-text-lg rice-font-bold rice-rounded-2xl rice-hover-bg-secondary-50 rice-transition-all rice-duration-300">
-                            Read Documentation
-                        </a>
-                    </div>
-                </div>
-
-                {/* Feature Grid */}
-                <div className="rice-mt-32 rice-grid rice-grid-cols-1 rice-md-grid-cols-3 rice-gap-8">
-                    <div className="rice-p-8 rice-bg-white rice-border rice-rounded-3xl rice-hover-shadow-xl rice-transition-all rice-duration-300">
-                        <div className="rice-w-12 rice-h-12 rice-bg-primary-500 rice-bg-opacity-10 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-mb-6 rice-text-primary-600 rice-text-xl">MVC</div>
-                        <h3 className="rice-text-xl rice-font-bold rice-mb-3">Clean MVC Architecture</h3>
-                        <p className="rice-text-secondary-600 rice-leading-relaxed">Full-featured routing, controllers, models, and middleware inspired by Laravel's elegance.</p>
-                    </div>
-                    <div className="rice-p-8 rice-bg-white rice-border rice-rounded-3xl rice-hover-shadow-xl rice-transition-all rice-duration-300">
-                        <div className="rice-w-12 rice-h-12 rice-bg-success-600 rice-bg-opacity-10 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-mb-6 rice-text-success-600 rice-text-xl">⚡</div>
-                        <h3 className="rice-text-xl rice-font-bold rice-mb-3">Real-time Performance</h3>
-                        <p className="rice-text-secondary-600 rice-leading-relaxed">Optimized SSR and hydration system ensures your app loads instantly and stays interactive.</p>
-                    </div>
-                    <div className="rice-p-8 rice-bg-white rice-border rice-rounded-3xl rice-hover-shadow-xl rice-transition-all rice-duration-300">
-                        <div className="rice-w-12 rice-h-12 rice-bg-secondary-900 rice-bg-opacity-10 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-mb-6 rice-text-secondary-900 rice-text-xl">🎨</div>
-                        <h3 className="rice-text-xl rice-font-bold rice-mb-3">Rice UI System</h3>
-                        <p className="rice-text-secondary-600 rice-leading-relaxed">Beautiful, accessible components built-in. No more fighting with CSS frameworks.</p>
-                    </div>
-                </div>
-            </main>
-
-            {/* Footer */}
-            <footer className="rice-py-12 rice-border-t">
-                <div className="rice-max-w-7xl rice-mx-auto rice-px-8 rice-flex rice-flex-col rice-md-flex-row rice-items-center rice-justify-between rice-gap-6">
-                    <p className="rice-text-secondary-500 rice-text-sm">© 2024 EreactThohir. Built with passion for developers.</p>
-                    <div className="rice-flex rice-gap-6 rice-text-secondary-400 rice-text-xl">
-                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">𝕏</a>
-                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">GitHub</a>
-                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Discord</a>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    );
-}
-`);
+        // Write Welcome component with dynamic UI System
+        const welcomeContent = generateWelcomePage(answers.uiSystem, name);
+        await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/views/Welcome.tsx'), welcomeContent);
         // Write routes/api.ts
         await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/api.ts'), `import { Route } from '@ereactthohir/core';
 
@@ -273,12 +198,6 @@ Route.screen('Home', () => {
     template: '${answers.template}'
 };
 `);
-        // Write ereact.json marker
-        await fs_extra_1.default.writeJSON(path_1.default.join(projectDir, 'ereact.json'), {
-            name: name,
-            version: '0.0.1',
-            created_at: new Date().toISOString()
-        }, { spaces: 2 });
         // Write README.md with template info
         await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'README.md'), `# ${name}
 
@@ -317,6 +236,14 @@ DB_DRIVER=${answers.database.includes('sawit') ? 'sawit' : answers.database.toLo
                 "App\\Providers\\AuthServiceProvider"
             ]
         }, { spaces: 2 });
+        // Write ereact.json for project metadata
+        await fs_extra_1.default.writeJSON(path_1.default.join(projectDir, 'ereact.json'), {
+            name,
+            template: answers.template,
+            uiSystem: answers.uiSystem,
+            installSemouth: answers.installSemouth,
+            createdAt: new Date().toISOString()
+        }, { spaces: 2 });
         // Generate template structure based on selection
         if (answers.template !== 'None (Blank)') {
             spinner.text = `Generating ${answers.template} template...`;
@@ -344,7 +271,19 @@ DB_DRIVER=${answers.database.includes('sawit') ? 'sawit' : answers.database.toLo
         if (answers.installSemouth) {
             dependencies["@ereactthohir/semouth"] = "^1.3.0";
         }
-        // Add UI configuration file if not using default Rice UI
+        // Write Global CSS
+        await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/css'));
+        let globalCSS = '';
+        if (answers.uiSystem === 'Rice UI (default, official)') {
+            globalCSS = await fs_extra_1.default.readFile(path_1.default.join(__dirname, '../../rice-ui/src/styles/rice.css'), 'utf-8');
+        }
+        else if (answers.uiSystem === 'JokoUI') {
+            globalCSS = await fs_extra_1.default.readFile(path_1.default.join(__dirname, '../../rice-ui/src/styles/joko.css'), 'utf-8');
+        }
+        if (globalCSS) {
+            await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/css/app.css'), globalCSS);
+        }
+        // Configuration for non-default systems
         if (answers.uiSystem !== 'Rice UI (default, official)') {
             spinner.text = 'Configuring UI system...';
             await configureUISystem(projectDir, answers.uiSystem);
@@ -853,24 +792,159 @@ async function generateTemplateStructure(projectDir, template, uiSystem) {
             break;
     }
 }
+/**
+ * Generate CMS Template
+ */
 /**
  * Generate CMS Template
  */
 async function generateCMSTemplate(projectDir, uiSystem) {
-    // Create Post Editor Page
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
+    // Create CMS Dashboard Page
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/CMSDashboard.tsx'), `import React from 'react';
+${uiSystem === 'Material UI' ? "import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, Typography, Button, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Chip, AppBar, Toolbar, Divider } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Card, Button, Table, Badge, Nav, Navbar } from 'react-bootstrap';" : ""}
 
 export default function CMSDashboard() {
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ display: 'flex', bgcolor: '#f8fafc', minHeight: '100vh' }}>
+            <Drawer variant="permanent" sx={{ width: 280, flexShrink: 0, '& .MuiDrawer-paper': { width: 280, boxSizing: 'border-box', borderRight: '1px solid #e2e8f0', bgcolor: '#fff' } }}>
+                <Box sx={{ p: 4, display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Box sx={{ width: 32, height: 32, bgcolor: 'primary.main', borderRadius: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 900 }}>C</Box>
+                    <Typography variant="h6" sx={{ fontWeight: 900, color: 'text.primary' }}>RiceCMS</Typography>
+                </Box>
+                <Divider sx={{ mb: 2 }} />
+                <List sx={{ px: 2 }}>
+                    {['Dashboard', 'Posts', 'Categories', 'Media', 'Staff', 'Settings'].map((text, index) => (
+                        <ListItem button key={text} selected={index === 0} sx={{ borderRadius: 3, mb: 1, py: 1.5, '&.Mui-selected': { bgcolor: 'primary.main', color: 'primary.contrastText', '&:hover': { bgcolor: 'primary.dark' } } }}>
+                            <ListItemText primary={text} primaryTypographyProps={{ fontWeight: 700, fontSize: '0.9rem' }} />
+                        </ListItem>
+                    ))}
+                </List>
+            </Drawer>
+
+            <Box component="main" sx={{ flexGrow: 1, p: 8 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 8 }}>
+                    <Box>
+                        <Typography variant="h3" sx={{ fontWeight: 900, mb: 1, tracking: -1 }}>Content Overview</Typography>
+                        <Typography color="textSecondary" sx={{ fontWeight: 500 }}>Manage your publication and track performance.</Typography>
+                    </Box>
+                    <Button variant="contained" sx={{ py: 2, px: 4, fontWeight: 900, borderRadius: 3, textTransform: 'none', fontSize: '1rem', boxShadow: '0 4px 14px 0 rgba(0,118,255,0.39)' }}>
+                        + New Entry
+                    </Button>
+                </Box>
+
+                <Grid container spacing={4} sx={{ mb: 8 }}>
+                    {[{t: 'Total Posts', v: '1,280', c: '#6366f1'}, {t: 'Total Views', v: '48.2K', c: '#10b981'}, {t: 'Pending', v: '12', c: '#f59e0b'}].map(s => (
+                        <Grid item xs={12} md={4} key={s.t}>
+                            <Paper sx={{ p: 4, borderRadius: 6, border: '1px solid #e2e8f0', boxShadow: '0 1px 3px 0 rgba(0,0,0,0.1)' }}>
+                                <Typography color="textSecondary" sx={{ fontWeight: 700, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: 1, mb: 2 }}>{s.t}</Typography>
+                                <Typography variant="h4" sx={{ fontWeight: 900, color: s.c }}>{s.v}</Typography>
+                            </Paper>
+                        </Grid>
+                    ))}
+                </Grid>
+
+                <TableContainer component={Paper} sx={{ borderRadius: 6, border: '1px solid #e2e8f0', boxShadow: 'none', overflow: 'hidden' }}>
+                    <Table>
+                        <TableHead sx={{ bgcolor: '#f8fafc' }}>
+                            <TableRow>
+                                <TableCell sx={{ fontWeight: 900, py: 3, ps: 4 }}>TITLE</TableCell>
+                                <TableCell sx={{ fontWeight: 900, py: 3 }}>AUTHOR</TableCell>
+                                <TableCell sx={{ fontWeight: 900, py: 3 }}>STATUS</TableCell>
+                                <TableCell sx={{ fontWeight: 900, py: 3, pe: 4 }}>DATE</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {['The Art of Minimalist Living', 'Explaining EreactThohir Architecture', 'Designing with Rice UI'].map((title, i) => (
+                                <TableRow key={title} hover sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                    <TableCell sx={{ fontWeight: 700, py: 3, ps: 4 }}>{title}</TableCell>
+                                    <TableCell sx={{ color: 'text.secondary', fontWeight: 500 }}>Dhafa N.</TableCell>
+                                    <TableCell>
+                                        <Chip label={i === 2 ? "DRAFT" : "PUBLISHED"} size="small" color={i === 2 ? "default" : "success"} sx={{ fontWeight: 900, borderRadius: 1.5, fontSize: '0.7rem' }} />
+                                    </TableCell>
+                                    <TableCell sx={{ color: 'text.secondary', py: 3, pe: 4 }}>Oct {24-i}, 2023</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </Box>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
     return (
-        <div className="rice-min-h-screen rice-bg-secondary-50 rice-flex">
+        <div className="d-flex bg-white min-vh-100">
             {/* Sidebar */}
-            <aside className="rice-w-72 rice-bg-white rice-border-r rice-p-8 rice-flex rice-col rice-gap-8 rice-hidden rice-md-flex">
-                <div className="rice-flex rice-items-center rice-gap-2">
-                    <div className="rice-w-8 rice-h-8 rice-bg-secondary-900 rice-rounded-lg rice-flex rice-items-center rice-justify-center rice-text-white rice-font-black">C</div>
-                    <span className="rice-text-xl rice-font-black">RiceCMS</span>
+            <div className="bg-light border-end d-none d-md-block" style={{ width: '280px' }}>
+                <div className="p-4 d-flex align-items-center gap-2 mb-4">
+                    <div className="bg-dark rounded-3 text-white fw-black d-flex align-items-center justify-content-center" style={{ width: '32px', height: '32px' }}>C</div>
+                    <span className="h5 fw-black mb-0 text-dark">RiceCMS</span>
+                </div>
+                <Nav className="flex-column px-3 gap-1">
+                    <Nav.Link className="bg-primary text-white rounded-4 fw-bold p-3 mb-2 shadow-sm">📊 Dashboard</Nav.Link>
+                    <Nav.Link className="text-secondary fw-bold p-3">📝 Posts</Nav.Link>
+                    <Nav.Link className="text-secondary fw-bold p-3">📁 Categories</Nav.Link>
+                    <Nav.Link className="text-secondary fw-bold p-3">🖼️ Media</Nav.Link>
+                    <Nav.Link className="text-secondary fw-bold p-3">👥 Staff</Nav.Link>
+                    <Nav.Link className="text-secondary fw-bold p-3">⚙️ Settings</Nav.Link>
+                </Nav>
+            </div>
+
+            {/* Main Content */}
+            <main className="flex-grow-1 p-5 bg-white">
+                <div className="d-flex justify-content-between align-items-center mb-5">
+                    <div>
+                        <h1 className="display-5 fw-black mb-1 letter-spacing-tight">Content Overview</h1>
+                        <p className="text-muted lead fs-6">Manage your publication and track performance.</p>
+                    </div>
+                    <Button variant="dark" className="py-3 px-4 fw-bold rounded-4 shadow-lg border-0" style={{ background: 'linear-gradient(135deg, #0f172a 0%, #334155 100%)' }}>
+                        + New Entry
+                    </Button>
+                </div>
+
+                <Row className="mb-5 g-4 text-center">
+                    {[{t:'Total Posts',v:'1,280',c:'primary'}, {t:'Total Views',v:'48.2K',c:'success'}, {t:'Pending',v:'12',c:'warning'}].map(s => (
+                        <Col md={4} key={s.t}>
+                            <Card className="border-0 bg-light rounded-5 p-4 h-100">
+                                <span className="text-uppercase small fw-black text-secondary letter-spacing-wide mb-2">{s.t}</span>
+                                <h2 className={\`fw-black mb-0 text-\${s.c}\`}>{s.v}</h2>
+                            </Card>
+                        </Col>
+                    ))}
+                </Row>
+
+                <div className="card border-0 shadow-sm rounded-5 overflow-hidden">
+                    <Table hover responsive className="mb-0 align-middle">
+                        <thead className="bg-light">
+                            <tr>
+                                <th className="p-4 ps-5 border-0 text-secondary small fw-black">TITLE</th>
+                                <th className="p-4 border-0 text-secondary small fw-black">AUTHOR</th>
+                                <th className="p-4 border-0 text-secondary small fw-black">STATUS</th>
+                                <th className="p-4 pe-5 border-0 text-secondary small fw-black">DATE</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                             <CMSRow title="The Art of Minimalist Living" author="Dhafa N." status="Published" date="Oct 24, 2023" />
+                             <CMSRow title="Explaining EreactThohir Architecture" author="Dhafa N." status="Published" date="Oct 22, 2023" />
+                             <CMSRow title="Designing Rice UI" author="Sarah K." status="Draft" date="Oct 20, 2023" />
+                        </tbody>
+                    </Table>
+                </div>
+            </main>
+        </div>
+    );` : `
+    return (
+        <div className="\${p}min-h-screen \${p}bg-secondary-50 \${p}flex">
+            {/* Sidebar */}
+            <aside className="\${p}w-72 \${p}bg-white \${p}border-r \${p}p-8 \${p}flex \${p}col \${p}gap-8 \${p}hidden \${p}md-flex">
+                <div className="\${p}flex \${p}items-center \${p}gap-2">
+                    <div className="\${p}w-8 \${p}h-8 \${p}bg-secondary-900 \${p}rounded-lg \${p}flex \${p}items-center \${p}justify-center \${p}text-white \${p}font-black">C</div>
+                    <span className="\${p}text-xl \${p}font-black">RiceCMS</span>
                 </div>
                 
-                <nav className="rice-flex rice-col rice-gap-2 rice-w-full">
+                <nav className="\${p}flex \${p}col \${p}gap-2 \${p}w-full">
                     <NavItem icon="📊" label="Dashboard" active />
                     <NavItem icon="📝" label="Posts" />
                     <NavItem icon="📁" label="Categories" />
@@ -881,55 +955,53 @@ export default function CMSDashboard() {
             </aside>
 
             {/* Main Content */}
-            <main className="rice-flex-1 rice-p-8 rice-md-p-12">
-                <header className="rice-mb-12 rice-flex rice-justify-between rice-items-center">
+            <main className="\${p}flex-1 \${p}p-8 \${p}md-p-12">
+                <header className="\${p}mb-12 \${p}flex \${p}justify-between \${p}items-center">
                     <div>
-                        <h1 className="rice-text-4xl rice-font-black rice-mb-2">Content Overview</h1>
-                        <p className="rice-text-secondary-600">Manage your publication and track performance.</p>
+                        <h1 className="\${p}text-4xl \${p}font-black \${p}mb-2">Content Overview</h1>
+                        <p className="\${p}text-secondary-600">Manage your publication and track performance.</p>
                     </div>
-                    <button className="rice-px-6 rice-py-3 rice-bg-primary-500 rice-text-white rice-rounded-xl rice-font-bold rice-shadow-lg rice-hover-scale-105 rice-transition-all">
+                    <button className="\${p}px-6 \${p}py-3 \${p}bg-primary-500 \${p}text-white \${p}rounded-xl \${p}font-bold \${p}shadow-lg \${p}hover-scale-105 \${p}transition-all">
                         + New Entry
                     </button>
                 </header>
 
                 {/* Stats Grid */}
-                <div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-3 rice-gap-8 rice-mb-12">
+                <div className="\${p}grid \${p}grid-cols-1 \${p}md-grid-cols-3 \${p}gap-8 \${p}mb-12">
                     <CMSStatCard title="Total Posts" value="1,280" icon="📝" />
                     <CMSStatCard title="Total Views" value="48.2K" icon="👁️" />
-                    <CMSStatCard title="Pending Review" value="12" icon="⏳" color="rice-text-primary-500" />
+                    <CMSStatCard title="Pending Review" value="12" icon="⏳" color="\${p}text-primary-500" />
                 </div>
 
                 {/* Recent Entries Table */}
-                <div className="rice-bg-white rice-border rice-rounded-3xl rice-overflow-hidden">
-                    <div className="rice-p-8 rice-border-b rice-flex rice-justify-between rice-items-center">
-                        <h2 className="rice-text-xl rice-font-bold">Recent Entries</h2>
-                        <span className="rice-text-sm rice-text-secondary-500 rice-cursor-pointer rice-hover-text-secondary-900">View all</span>
+                <div className="\${p}bg-white \${p}border \${p}rounded-3xl \${p}overflow-hidden">
+                    <div className="\${p}p-8 \${p}border-b \${p}flex \${p}justify-between \${p}items-center">
+                        <h2 className="\${p}text-xl \${p}font-bold">Recent Entries</h2>
+                        <span className="\${p}text-sm \${p}text-secondary-500 \${p}cursor-pointer \${p}hover-text-secondary-900">View all</span>
                     </div>
-                    <table className="rice-w-full">
-                        <thead className="rice-bg-secondary-50">
+                    <table className="\${p}w-full">
+                        <thead className="\${p}bg-secondary-50">
                             <tr>
-                                <th className="rice-px-8 rice-py-4 rice-text-left rice-text-xs rice-font-bold rice-text-secondary-500">TITLE</th>
-                                <th className="rice-px-8 rice-py-4 rice-text-left rice-text-xs rice-font-bold rice-text-secondary-500">AUTHOR</th>
-                                <th className="rice-px-8 rice-py-4 rice-text-left rice-text-xs rice-font-bold rice-text-secondary-500">STATUS</th>
-                                <th className="rice-px-8 rice-py-4 rice-text-left rice-text-xs rice-font-bold rice-text-secondary-500">DATE</th>
+                                <th className="\${p}px-8 \${p}py-4 \${p}text-left \${p}text-xs \${p}font-bold \${p}text-secondary-500">TITLE</th>
+                                <th className="\${p}px-8 \${p}py-4 \${p}text-left \${p}text-xs \${p}font-bold \${p}text-secondary-500">AUTHOR</th>
+                                <th className="\${p}px-8 \${p}py-4 \${p}text-left \${p}text-xs \${p}font-bold \${p}text-secondary-500">STATUS</th>
+                                <th className="\${p}px-8 \${p}py-4 \${p}text-left \${p}text-xs \${p}font-bold \${p}text-secondary-500">DATE</th>
                             </tr>
                         </thead>
-                        <tbody className="rice-divide-y">
+                        <tbody className="\${p}divide-y">
                             <CMSRow title="The Art of Minimalist Living" author="Dhafa N." status="Published" date="Oct 24, 2023" />
                             <CMSRow title="Explaining EreactThohir Internal Architecture" author="Dhafa N." status="Published" date="Oct 22, 2023" />
-                            <CMSRow title="Designing with Rice UI in Mind" author="Sarah K." status="Draft" date="Oct 20, 2023" />
-                            <CMSRow title="Future of Serverless Frameworks" author="Mark T." status="Scheduled" date="Oct 18, 2023" />
                         </tbody>
                     </table>
                 </div>
             </main>
         </div>
-    );
+    );`}
 }
 
 function NavItem({ icon, label, active = false }: any) {
     return (
-        <div className={\`rice-flex rice-items-center rice-gap-3 rice-px-4 rice-py-3 rice-rounded-xl rice-text-sm rice-font-bold rice-cursor-pointer rice-transition-all \${active ? 'rice-bg-secondary-900 rice-text-white' : 'rice-text-secondary-600 rice-hover-bg-secondary-100'}\`}>
+        <div className={\`\${p}flex \${p}items-center \${p}gap-3 \${p}px-4 \${p}py-3 \${p}rounded-xl \${p}text-sm \${p}font-bold \${p}cursor-pointer \${p}transition-all \${active ? '\${p}bg-secondary-900 \${p}text-white' : '\${p}text-secondary-600 \${p}hover-bg-secondary-100'}\`}>
             <span>{icon}</span>
             <span>{label}</span>
         </div>
@@ -938,39 +1010,48 @@ function NavItem({ icon, label, active = false }: any) {
 
 function CMSStatCard({ title, value, icon, color }: any) {
     return (
-        <div className="rice-bg-white rice-p-8 rice-border rice-rounded-3xl rice-shadow-sm">
-            <div className="rice-flex rice-justify-between rice-items-start rice-mb-4">
-                <div className="rice-w-12 rice-h-12 rice-bg-secondary-50 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-text-xl">{icon}</div>
+        <div className="\${p}bg-white \${p}p-8 \${p}border \${p}rounded-3xl \${p}shadow-sm">
+            <div className="\${p}flex \${p}justify-between \${p}items-start \${p}mb-4">
+                <div className="\${p}w-12 \${p}h-12 \${p}bg-secondary-50 \${p}rounded-2xl \${p}flex \${p}items-center \${p}justify-center \${p}text-xl">{icon}</div>
             </div>
-            <p className="rice-text-sm rice-font-medium rice-text-secondary-500 rice-mb-1">{title}</p>
-            <p className={\`rice-text-3xl rice-font-black \${color || 'rice-text-secondary-900'}\`}>{value}</p>
+            <p className="\${p}text-sm \${p}font-medium \${p}text-secondary-500 \${p}mb-1">{title}</p>
+            <p className={\`\${p}text-3xl \${p}font-black \${color || '\${p}text-secondary-900'}\`}>{value}</p>
         </div>
     );
 }
 
 function CMSRow({ title, author, status, date }: any) {
+    ${uiSystem === 'Bootstrap 5' ? `
+    return (
+        <tr>
+            <td className="p-4 ps-5 fw-bold text-dark">{title}</td>
+            <td className="p-4 text-muted">{author}</td>
+            <td className="p-4"><Badge bg={status === 'Published'?'success':'secondary'} pill className="px-3 py-2">{status.toUpperCase()}</Badge></td>
+            <td className="p-4 pe-5 text-muted">{date}</td>
+        </tr>
+    );` : `
     return (
-        <tr className="rice-hover-bg-secondary-50 rice-transition-all rice-cursor-pointer">
-            <td className="rice-px-8 rice-py-6">
-                <p className="rice-font-bold rice-text-secondary-900">{title}</p>
+        <tr className="\${p}hover-bg-secondary-50 \${p}transition-all \${p}cursor-pointer">
+            <td className="\${p}px-8 \${p}py-6">
+                <p className="\${p}font-bold \${p}text-secondary-900">{title}</p>
             </td>
-            <td className="rice-px-8 rice-py-6">
-                <p className="rice-text-sm rice-text-secondary-600">{author}</p>
+            <td className="\${p}px-8 \${p}py-6">
+                <p className="\${p}text-sm \${p}text-secondary-600">{author}</p>
             </td>
-            <td className="rice-px-8 rice-py-6">
-                <span className={\`rice-px-3 rice-py-1 rice-rounded-full rice-text-[10px] rice-font-black rice-tracking-wider \${
-                    status === 'Published' ? 'rice-bg-success-600 rice-bg-opacity-10 rice-text-success-600' : 
-                    status === 'Draft' ? 'rice-bg-secondary-200 rice-text-secondary-600' : 
-                    'rice-bg-primary-500 rice-bg-opacity-10 rice-text-primary-600'
+            <td className="\${p}px-8 \${p}py-6">
+                <span className={\`\${p}px-3 \${p}py-1 \${p}rounded-full \${p}text-[10px] \${p}font-black \${p}tracking-wider \${
+                    status === 'Published' ? '\${p}bg-success-600 \${p}bg-opacity-10 \${p}text-success-600' : 
+                    status === 'Draft' ? '\${p}bg-secondary-200 \${p}text-secondary-600' : 
+                    '\${p}bg-primary-500 \${p}bg-opacity-10 \${p}text-primary-600'
                 }\`}>
                     {status.toUpperCase()}
                 </span>
             </td>
-            <td className="rice-px-8 rice-py-6">
-                <p className="rice-text-sm rice-text-secondary-500">{date}</p>
+            <td className="\${p}px-8 \${p}py-6">
+                <p className="\${p}text-sm \${p}text-secondary-500">{date}</p>
             </td>
         </tr>
-    );
+    );`}
 }
 `);
     // Create Entry Editor Page
@@ -978,34 +1059,34 @@ function CMSRow({ title, author, status, date }: any) {
 
 export default function CMSEditor() {
     return (
-        <div className="rice-min-h-screen rice-bg-white rice-flex rice-col">
-            <header className="rice-p-6 rice-border-b rice-flex rice-justify-between rice-items-center">
-                <div className="rice-flex rice-items-center rice-gap-4">
-                    <button className="rice-p-2 rice-hover-bg-secondary-100 rice-rounded-lg">←</button>
-                    <h1 className="rice-text-lg rice-font-bold">Edit Entry</h1>
+        <div className="\${p}min-h-screen \${p}bg-white \${p}flex \${p}col">
+            <header className="\${p}p-6 \${p}border-b \${p}flex \${p}justify-between \${p}items-center">
+                <div className="\${p}flex \${p}items-center \${p}gap-4">
+                    <button className="\${p}p-2 \${p}hover-bg-secondary-100 \${p}rounded-lg">←</button>
+                    <h1 className="\${p}text-lg \${p}font-bold">Edit Entry</h1>
                 </div>
-                <div className="rice-flex rice-gap-3">
-                    <button className="rice-px-5 rice-py-2 rice-text-secondary-600 rice-font-bold rice-text-sm">Save as Draft</button>
-                    <button className="rice-px-5 rice-py-2 rice-bg-secondary-900 rice-text-white rice-rounded-xl rice-font-bold rice-text-sm">Publish Post</button>
+                <div className="\${p}flex \${p}gap-3">
+                    <button className="\${p}px-5 \${p}py-2 \${p}text-secondary-600 \${p}font-bold \${p}text-sm">Save as Draft</button>
+                    <button className="\${p}px-5 \${p}py-2 \${p}bg-secondary-900 \${p}text-white \${p}rounded-xl \${p}font-bold \${p}text-sm">Publish Post</button>
                 </div>
             </header>
 
-            <main className="rice-flex-1 rice-p-8 rice-max-w-4xl rice-mx-auto rice-w-full">
+            <main className="\${p}flex-1 \${p}p-8 \${p}max-w-4xl \${p}mx-auto \${p}w-full">
                 <input 
                     type="text" 
                     placeholder="Enter post title..." 
-                    className="rice-w-full rice-text-5xl rice-font-black rice-placeholder-secondary-300 rice-focus-outline-none rice-mb-8"
+                    className="\${p}w-full \${p}text-5xl \${p}font-black \${p}rice-placeholder-secondary-300 \${p}focus-outline-none \${p}mb-8"
                 />
                 
-                <div className="rice-flex rice-gap-4 rice-mb-8 rice-border-b rice-pb-4">
-                    <button className="rice-text-sm rice-font-bold rice-text-primary-500">Content</button>
-                    <button className="rice-text-sm font-medium rice-text-secondary-500">SEO</button>
-                    <button className="rice-text-sm font-medium rice-text-secondary-500">Settings</button>
+                <div className="\${p}flex \${p}gap-4 \${p}mb-8 \${p}border-b \${p}pb-4">
+                    <button className="\${p}text-sm \${p}font-bold \${p}text-primary-500">Content</button>
+                    <button className="\${p}text-sm \${p}font-medium \${p}text-secondary-500">SEO</button>
+                    <button className="\${p}text-sm \${p}font-medium \${p}text-secondary-500">Settings</button>
                 </div>
 
                 <textarea 
                     placeholder="Start writing your masterpiece..."
-                    className="rice-w-full rice-h-[500px] rice-text-lg rice-leading-relaxed rice-placeholder-secondary-300 rice-focus-outline-none rice-resize-none"
+                    className="\${p}w-full \${p}h-[500px] \${p}text-lg \${p}leading-relaxed \${p}rice-placeholder-secondary-300 \${p}focus-outline-none \${p}rice-resize-none"
                 />
             </main>
         </div>
@@ -1016,9 +1097,9 @@ export default function CMSEditor() {
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/cms.ts'), `import { Route } from '@ereactthohir/core';
 
 Route.group({ prefix: '/cms' }, () => {
-    Route.get('/dashboard', (req, res) => res.view('CMSDashboard'));
-    Route.get('/editor', (req, res) => res.view('CMSEditor'));
-    Route.get('/media', (req, res) => res.view('CMSMedia'));
+    Route.get('/dashboard', (req, res) => {
+        return res.view('CMSDashboard');
+    });
 });
 `);
 }
@@ -1026,6 +1107,8 @@ Route.group({ prefix: '/cms' }, () => {
  * Generate Ecommerce App template
  */
 async function generateEcommerceTemplate(projectDir, uiSystem) {
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     // Create Cart Store
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/stores/useCartStore.ts'), `import { create } from 'zustand';
 
@@ -1074,6 +1157,8 @@ export const useCartStore = create<CartState>((set) => ({
     // Create Shop Page
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Shop.tsx'), `import React from 'react';
 import { useCartStore } from '../stores/useCartStore';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, Grid, Card as MuiCard, CardMedia, CardContent, Button as MuiButton, AppBar, Toolbar, Badge } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Card as BsCard, Button as BsButton, Navbar, Nav, Badge as BsBadge } from 'react-bootstrap';" : ""}
 
 const products = [
     { id: 1, name: 'Premium Wireless Headphones', price: 299, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500' },
@@ -1085,39 +1170,119 @@ const products = [
 export default function Shop() {
     const { addItem, items } = useCartStore();
 
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ bgcolor: '#f8fafc', minHeight: '100vh' }}>
+            <AppBar position="sticky" sx={{ bgcolor: 'white', color: 'text.primary', boxShadow: 'none', borderBottom: '1px solid #e2e8f0' }}>
+                <Container>
+                    <Toolbar sx={{ justifyContent: 'space-between' }}>
+                        <Typography variant="h5" sx={{ fontWeight: 900, color: 'primary.main' }}>ERectShop</Typography>
+                        <Badge badgeContent={items.length} color="primary">
+                             <Typography sx={{ fontSize: 24 }}>🛒</Typography>
+                        </Badge>
+                    </Toolbar>
+                </Container>
+            </AppBar>
+
+            <Container sx={{ py: 8 }}>
+                <Box sx={{ mb: 6 }}>
+                    <Typography variant="h3" sx={{ fontWeight: 900, mb: 1 }}>Featured Products</Typography>
+                    <Typography color="textSecondary">Curated collection of premium tech gadgets.</Typography>
+                </Box>
+
+                <Grid container spacing={4}>
+                    {products.map(product => (
+                        <Grid item xs={12} sm={6} lg={3} key={product.id}>
+                            <MuiCard sx={{ borderRadius: 4, overflow: 'hidden', transition: '0.3s', '&:hover': { transform: 'translateY(-8px)', boxShadow: 10 } }}>
+                                <CardMedia component="img" height="240" image={product.image} />
+                                <CardContent sx={{ p: 3 }}>
+                                    <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{product.name}</Typography>
+                                    <Typography variant="h5" color="primary" sx={{ fontWeight: 900, mb: 2 }}>\${product.price}</Typography>
+                                    <MuiButton variant="contained" fullWidth sx={{ py: 1.5, fontWeight: 900, borderRadius: 2 }} onClick={() => addItem(product)}>
+                                        Add To Cart
+                                    </MuiButton>
+                                </CardContent>
+                            </MuiCard>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Container>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
     return (
-        <div className="rice-min-h-screen rice-bg-secondary-100">
+        <div className="bg-light min-vh-100">
+            <Navbar bg="white" sticky="top" className="py-3 shadow-sm">
+                <Container>
+                    <Navbar.Brand className="fw-black text-primary fs-3">ERectShop</Navbar.Brand>
+                    <Nav className="ms-auto align-items-center">
+                        <div className="position-relative">
+                             <span className="fs-4">🛒</span>
+                             {items.length > 0 && <BsBadge pill bg="primary" className="position-absolute top-0 start-100 translate-middle">{items.length}</BsBadge>}
+                        </div>
+                    </Nav>
+                </Container>
+            </Navbar>
+
+            <Container className="py-5">
+                <header className="mb-5">
+                    <h2 className="display-5 fw-black mb-2">Featured Products</h2>
+                    <p className="text-secondary lead">Curated collection of premium tech gadgets.</p>
+                </header>
+
+                <Row className="g-4">
+                    {products.map(product => (
+                        <Col sm={6} lg={3} key={product.id}>
+                            <BsCard className="border-0 shadow-lg rounded-4 overflow-hidden h-100">
+                                <div className="ratio ratio-4x3">
+                                    <BsCard.Img variant="top" src={product.image} className="object-fit-cover" />
+                                </div>
+                                <BsCard.Body className="p-4">
+                                    <BsCard.Title className="fw-bold fs-5 mb-2">{product.name}</BsCard.Title>
+                                    <BsCard.Text className="fs-4 fw-black text-primary mb-4">\${product.price}</BsCard.Text>
+                                    <BsButton variant="dark" className="w-100 py-3 rounded-3 fw-bold" onClick={() => addItem(product)}>
+                                        Add to Cart
+                                    </BsButton>
+                                </BsCard.Body>
+                            </BsCard>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        </div>
+    );` : `
+    return (
+        <div className="\${p}min-h-screen \${p}bg-secondary-100">
             {/* Navbar */}
-            <nav className="rice-p-6 rice-bg-white rice-shadow-sm rice-flex rice-justify-between rice-items-center rice-sticky rice-top-0 rice-z-10">
-                <h1 className="rice-text-2xl rice-font-black rice-gradient-primary rice-bg-clip-text rice-text-transparent">RiceShop</h1>
-                <div className="rice-relative rice-cursor-pointer">
-                    <span className="rice-text-lg">🛒</span>
+            <nav className="\${p}p-6 \${p}bg-white \${p}shadow-sm \${p}flex \${p}justify-between \${p}items-center \${p}sticky \${p}top-0 \${p}z-10">
+                <h1 className="\${p}text-2xl \${p}font-black \${h.cls('rice-gradient-primary rice-bg-clip-text rice-text-transparent', 'text-blue-600', 'joko-text-primary-600')}">ERectShop</h1>
+                <div className="\${p}relative \${p}cursor-pointer">
+                    <span className="\${p}text-lg">🛒</span>
                     {items.length > 0 && (
-                        <span className="rice-absolute -rice-top-2 -rice-right-2 rice-bg-primary-500 rice-text-white rice-text-xs rice-font-bold rice-rounded-full rice-w-5 rice-h-5 rice-flex rice-items-center rice-justify-center">
+                        <span className="\${p}absolute -\${p}top-2 -\${p}right-2 \${p}bg-primary-500 \${p}text-white \${p}text-xs \${p}font-bold \${p}rounded-full \${p}w-5 \${p}h-5 \${p}flex \${p}items-center \${p}justify-center">
                             {items.length}
                         </span>
                     )}
                 </div>
             </nav>
 
-            <div className="rice-p-8 rice-max-w-7xl rice-mx-auto">
-                <header className="rice-mb-12">
-                    <h2 className="rice-text-4xl rice-font-bold rice-mb-2">Featured Products</h2>
-                    <p className="rice-text-secondary-600">Curated collection of premium tech gadgets.</p>
+            <div className="\${p}p-8 \${p}max-w-7xl \${p}mx-auto">
+                <header className="\${p}mb-12">
+                    <h2 className="\${p}text-4xl \${p}font-bold \${p}mb-2">Featured Products</h2>
+                    <p className="\${p}text-secondary-600">Curated collection of premium tech gadgets.</p>
                 </header>
 
-                <div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-2 rice-lg-grid-cols-4 rice-gap-8">
+                <div className="\${p}grid \${p}grid-cols-1 \${h.cls('rice-md-grid-cols-2 rice-lg-grid-cols-4', 'md:grid-cols-2 lg:grid-cols-4', 'joko-grid-cols-2')} \${p}gap-8">
                     {products.map(product => (
-                        <div key={product.id} className="rice-bg-white rice-rounded-2xl rice-overflow-hidden rice-shadow-lg rice-hover-shadow-2xl rice-transition-all rice-duration-300 rice-group">
-                            <div className="rice-h-64 rice-overflow-hidden">
-                                <img src={product.image} alt={product.name} className="rice-w-full rice-h-full rice-object-cover rice-group-hover-scale-110 rice-transition-all rice-duration-500" />
+                        <div key={product.id} className="\${h.cls('rice-bg-white rice-rounded-2xl rice-overflow-hidden rice-shadow-lg rice-hover-shadow-2xl rice-transition-all rice-duration-300 rice-group', 'bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 group', 'joko-card')}">
+                            <div className="\${p}h-64 \${p}overflow-hidden">
+                                <img src={product.image} alt={product.name} className="\${p}w-full \${p}h-full \${p}object-cover \${p}transition-all \${p}duration-500" />
                             </div>
-                            <div className="rice-p-6">
-                                <h3 className="rice-font-bold rice-text-lg rice-mb-1">{product.name}</h3>
-                                <p className="rice-text-primary-600 rice-font-black rice-text-xl rice-mb-4">$\${product.price}</p>
+                            <div className="\${p}p-6">
+                                <h3 className="\${p}font-bold \${p}text-lg \${p}mb-1">{product.name}</h3>
+                                <p className="\${h.cls('rice-text-primary-600 rice-font-black rice-text-xl rice-mb-4', 'text-blue-600 font-black text-xl mb-4', 'joko-text-primary-600 font-bold mb-4')}">{product.price}</p>
                                 <button 
                                     onClick={() => addItem(product)}
-                                    className="rice-w-full rice-py-3 rice-bg-secondary-900 rice-text-white rice-rounded-xl rice-font-bold rice-hover-bg-primary-600 rice-transition-all"
+                                    className="\${h.cls('rice-w-full rice-py-3 rice-bg-secondary-900 rice-text-white rice-rounded-xl rice-font-bold rice-hover-bg-primary-600 rice-transition-all', 'w-full py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-blue-600 transition-all', 'joko-btn joko-btn-primary')} joko-w-full"
                                 >
                                     Add to Cart
                                 </button>
@@ -1127,7 +1292,7 @@ export default function Shop() {
                 </div>
             </div>
         </div>
-    );
+    );`}
 }
 `);
     // Create Ecommerce routes
@@ -1135,54 +1300,140 @@ export default function Shop() {
 
 Route.get('/shop', (req, res) => res.view('Shop'));
 Route.get('/cart', (req, res) => res.view('Cart'));
-Route.get('/checkout', (req, res) => res.view('Checkout'));
+Route.post('/checkout', 'CheckoutController@store');
 `);
 }
 /**
  * Generate Portfolio Template
  */
 async function generatePortfolioTemplate(projectDir, uiSystem) {
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Portfolio.tsx'), `import React from 'react';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, Button, Grid, Paper, Chip, Stack } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Button, Card, Nav } from 'react-bootstrap';" : ""}
 
 export default function Portfolio() {
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ bgcolor: 'white', color: 'text.primary', minHeight: '100vh' }}>
+            {/* Hero Section */}
+            <Container sx={{ py: 15, textAlign: 'center' }}>
+                <Box sx={{ mb: 4 }}>
+                    <Chip label="Available for hire" color="primary" sx={{ fontWeight: 900, borderRadius: 10, px: 1 }} />
+                </Box>
+                <Typography variant="h1" sx={{ fontWeight: 900, mb: 3, tracking: -2 }}>
+                    Crafting <Box component="span" sx={{ color: 'primary.main' }}>Digital Experiences</Box> that matter.
+                </Typography>
+                <Typography variant="h5" color="textSecondary" sx={{ maxW: '800px', mx: 'auto', mb: 6, fontWeight: 500, lineHeight: 1.6 }}>
+                    I'm a Fullstack Developer specializing in building high-performance web applications with EreactThohir ecosystem.
+                </Typography>
+                <Stack direction="row" spacing={3} justifyContent="center">
+                    <Button variant="contained" size="large" sx={{ px: 6, py: 2, borderRadius: 10, fontWeight: 900 }}>View Projects</Button>
+                    <Button variant="outlined" size="large" sx={{ px: 6, py: 2, borderRadius: 10, fontWeight: 900 }}>Contact Me</Button>
+                </Stack>
+            </Container>
+
+            {/* Projects Grid */}
+            <Box sx={{ py: 12, bgcolor: '#f8fafc' }}>
+                <Container>
+                    <Typography variant="h3" sx={{ fontWeight: 900, mb: 8 }}>Selected Works</Typography>
+                    <Grid container spacing={6}>
+                        {[1, 2, 3, 4].map(i => (
+                            <Grid item xs={12} md={6} key={i}>
+                                <Paper elevation={0} sx={{ borderRadius: 8, overflow: 'hidden', bgcolor: 'transparent', cursor: 'pointer', transition: '0.3s', '&:hover': { transform: 'translateY(-8px)' } }}>
+                                    <Box sx={{ aspectSize: '16/9', bgcolor: '#e2e8f0', borderRadius: 8, mb: 3 }} />
+                                    <Typography variant="h5" sx={{ fontWeight: 900, mb: 1 }}>Project Name #{i}</Typography>
+                                    <Typography color="textSecondary" sx={{ fontWeight: 500 }}>UI/UX Design • Development • 2024</Typography>
+                                </Paper>
+                            </Grid>
+                        ))}
+                    </Grid>
+                </Container>
+            </Box>
+
+            {/* Footer */}
+            <Box component="footer" sx={{ py: 8, textAlign: 'center', borderTop: '1px solid #e2e8f0' }}>
+                <Typography color="textSecondary">© 2024 Designer • Built with EreactThohir</Typography>
+            </Box>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <div className="bg-white text-dark min-vh-100">
+            {/* Hero Section */}
+            <Container className="py-5 text-center" style={{ marginTop: '100px', marginBottom: '100px' }}>
+                <div className="mb-4">
+                    <span className="badge rounded-pill bg-primary px-3 py-2 fw-black">Available for hire</span>
+                </div>
+                <h1 className="display-1 fw-black mb-4 tracking-tight">Crafting <span className="text-primary">Digital Experiences</span> that matter.</h1>
+                <p className="lead text-muted mx-auto mb-5" style={{ maxWidth: '800px' }}>I'm a Fullstack Developer specializing in building high-performance web applications with EreactThohir ecosystem.</p>
+                <div className="d-flex justify-content-center gap-3">
+                    <Button variant="dark" size="lg" className="px-5 py-3 rounded-pill fw-black shadow-lg">View Projects</Button>
+                    <Button variant="outline-dark" size="lg" className="px-5 py-3 rounded-pill fw-black">Contact Me</Button>
+                </div>
+            </Container>
+
+            {/* Projects */}
+            <div className="bg-light py-5">
+                <Container className="py-5">
+                    <h2 className="display-5 fw-black mb-5">Selected Works</h2>
+                    <Row className="g-5">
+                        {[1, 2, 3, 4].map(i => (
+                            <Col md={6} key={i}>
+                                <div className="project-card cursor-pointer transition-transform" style={{ cursor: 'pointer' }}>
+                                    <div className="bg-secondary rounded-5 mb-4 shadow-sm" style={{ aspectRatio: '16/9', opacity: 0.1 }}></div>
+                                    <h3 className="h4 fw-black mb-2">Project Name #{i}</h3>
+                                    <p className="text-muted fw-bold">UI/UX Design • Development • 2024</p>
+                                </div>
+                            </Col>
+                        ))}
+                    </Row>
+                </Container>
+            </div>
+
+            <footer className="py-5 text-center border-top">
+                <p className="text-muted mb-0">© 2024 Designer • Built with EreactThohir</p>
+            </footer>
+        </div>
+    );` : `
     return (
-        <div className="rice-min-h-screen rice-bg-white rice-text-secondary-900">
+        <div className="\${p}min-h-screen \${p}bg-white \${p}text-secondary-900">
             {/* Hero Section */}
-            <section className="rice-py-24 rice-px-6 rice-max-w-7xl rice-mx-auto rice-text-center">
-                <div className="rice-mb-8 rice-animate-pulse">
-                    <span className="rice-px-4 rice-py-2 rice-bg-primary-500 rice-bg-opacity-10 rice-text-primary-600 rice-rounded-full rice-text-sm rice-font-bold">
+            <section className="\${p}py-24 \${p}px-6 \${p}max-w-7xl \${p}mx-auto \${p}text-center">
+                <div className="\${p}mb-8 \${p}animate-pulse">
+                    <span className="\${p}px-4 \${p}py-2 \${p}bg-primary-500 \${p}bg-opacity-10 \${p}text-primary-600 \${p}rounded-full \${p}text-sm \${p}font-bold">
                         Available for hire
                     </span>
                 </div>
-                <h1 className="rice-text-7xl rice-font-black rice-mb-6 rice-tracking-tight">
-                    Crafting <span className="rice-gradient-primary rice-bg-clip-text rice-text-transparent">Digital Experiences</span> that matter.
+                <h1 className="\${p}text-7xl \${p}font-black \${p}mb-6 \${p}tracking-tight">
+                    Crafting <span className="\${p}gradient-primary \${p}bg-clip-text \${p}text-transparent">Digital Experiences</span> that matter.
                 </h1>
-                <p className="rice-text-2xl rice-text-secondary-600 rice-max-w-3xl rice-mx-auto rice-mb-12">
+                <p className="\${p}text-2xl \${p}text-secondary-600 \${p}max-w-3xl \${p}mx-auto \${p}mb-12">
                     I'm a Fullstack Developer specializing in building high-performance web applications with EreactThohir ecosystem.
                 </p>
-                <div className="rice-flex rice-justify-center rice-gap-4">
-                    <button className="rice-px-8 rice-py-4 rice-bg-secondary-900 rice-text-white rice-rounded-full rice-font-bold rice-shadow-xl rice-hover-scale-105 rice-transition-all">
+                <div className="\${p}flex \${p}justify-center \${p}gap-4">
+                    <button className="\${p}px-8 \${p}py-4 \${p}bg-secondary-900 \${p}text-white \${p}rounded-full \${p}font-bold \${p}shadow-xl \${p}hover-scale-105 \${p}transition-all">
                         View Projects
                     </button>
-                    <button className="rice-px-8 rice-py-4 rice-border rice-rounded-full rice-font-bold rice-hover-bg-secondary-100 rice-transition-all">
+                    <button className="\${p}px-8 \${p}py-4 \${p}border \${p}rounded-full \${p}font-bold \${p}hover-bg-secondary-100 \${p}transition-all">
                         Contact Me
                     </button>
                 </div>
             </section>
 
             {/* Projects Grid */}
-            <section className="rice-py-20 rice-bg-secondary-50">
-                <div className="rice-max-w-7xl rice-mx-auto rice-px-6">
-                    <h2 className="rice-text-4xl rice-font-bold rice-mb-12">Selected Works</h2>
-                    <div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-2 rice-gap-12">
+            <section className="\${p}py-20 \${p}bg-secondary-50">
+                <div className="\${p}max-w-7xl \${p}mx-auto \${p}px-6">
+                    <h2 className="\${p}text-4xl \${p}font-bold \${p}mb-12">Selected Works</h2>
+                    <div className="\${p}grid \${p}grid-cols-1 \${p}md-grid-cols-2 \${p}gap-12">
                         {[1, 2, 3, 4].map(i => (
-                            <div key={i} className="rice-group rice-cursor-pointer">
-                                <div className="rice-aspect-video rice-bg-secondary-200 rice-rounded-3xl rice-mb-6 rice-overflow-hidden rice-relative">
-                                    <div className="rice-absolute rice-inset-0 rice-bg-primary-500 rice-opacity-0 group-hover-opacity-10 rice-transition-all" />
-                                    <div className="rice-w-full rice-h-full rice-bg-gradient-to-br rice-from-secondary-200 rice-to-secondary-300" />
+                            <div key={i} className="\${p}group \${p}cursor-pointer">
+                                <div className="\${p}aspect-video \${p}bg-secondary-200 \${p}rounded-3xl \${p}mb-6 \${p}overflow-hidden \${p}relative">
+                                    <div className="\${p}absolute \${p}inset-0 \${p}bg-primary-500 \${p}opacity-0 \${p}group-hover-opacity-10 \${p}transition-all" />
+                                    <div className="\${p}w-full \${p}h-full \${p}bg-gradient-to-br \${p}from-secondary-200 \${p}to-secondary-300" />
                                 </div>
-                                <h3 className="rice-text-2xl rice-font-bold rice-mb-2">Project Name #\${i}</h3>
-                                <p className="rice-text-secondary-600">UI/UX Design • Development • 2024</p>
+                                <h3 className="\${p}text-2xl \${p}font-bold \${p}mb-2">Project Name #\${i}</h3>
+                                <p className="\${p}text-secondary-600">UI/UX Design • Development • 2024</p>
                             </div>
                         ))}
                     </div>
@@ -1190,16 +1441,18 @@ export default function Portfolio() {
             </section>
 
             {/* Footer */}
-            <footer className="rice-py-12 rice-text-center rice-border-t">
-                <p className="rice-text-secondary-500">© 2024 Designer • Built with EreactThohir</p>
+            <footer className="\${p}py-12 \${p}text-center \${p}border-t">
+                <p className="\${p}text-secondary-500">© 2024 Designer • Built with EreactThohir</p>
             </footer>
         </div>
-    );
+    );`}
 }
 `);
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'routes/portfolio.ts'), `import { Route } from '@ereactthohir/core';
 
-Route.get('/portfolio', (req, res) => res.view('Portfolio'));
+Route.get('/portfolio', (req, res) => {
+    return res.view('Portfolio');
+});
 `);
 }
 /**
@@ -1400,94 +1653,165 @@ 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;
-`);
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     // 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';
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/components/Dashboard.tsx'), `import React from 'react';
+${uiSystem === 'Material UI' ? "import { Box, Typography, Grid, Paper, Stack, Button as MuiButton } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Card, Button as BsButton } from 'react-bootstrap';" : ""}
 
 export default function Dashboard() {
-    const { stats, setStats } = useAdminStore();
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ p: 4, bgcolor: 'background.default', minHeight: '100vh' }}>
+            <Box sx={{ mb: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+                <Box>
+                    <Typography variant="h3" sx={{ fontWeight: 900, mb: 1 }}>System Overview</Typography>
+                    <Typography color="textSecondary">Institutional management dashboard.</Typography>
+                </Box>
+                <MuiButton variant="contained" sx={{ px: 4, py: 1.5, fontWeight: 900, borderRadius: 3 }}>
+                    Export Data
+                </MuiButton>
+            </Box>
+            
+            <Grid container spacing={3} sx={{ mb: 6 }}>
+                <Grid item xs={12} md={6} lg={3}><StatCard title="Total Users" value="12,482" change="+12%" icon="👥" uiSystem="${uiSystem}" /></Grid>
+                <Grid item xs={12} md={6} lg={3}><StatCard title="Total Sales" value="$48,230" change="+18%" icon="💰" uiSystem="${uiSystem}" /></Grid>
+                <Grid item xs={12} md={6} lg={3}><StatCard title="Active Projects" value="84" change="+3%" icon="⚡" uiSystem="${uiSystem}" /></Grid>
+                <Grid item xs={12} md={6} lg={3}><StatCard title="Server Load" value="23%" change="-2%" icon="📊" uiSystem="${uiSystem}" /></Grid>
+            </Grid>
+
+            <Grid container spacing={4}>
+                <Grid item xs={12} lg={8}>
+                    <Paper sx={{ p: 4, borderRadius: 6, border: '1px solid #e2e8f0' }} elevation={0}>
+                        <Typography variant="h6" sx={{ fontWeight: 900, mb: 4 }}>Performance Trend</Typography>
+                        <Box sx={{ height: 350, bgcolor: '#f8fafc', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #e2e8f0' }}>
+                            <Typography color="textSecondary">Visualization Ready</Typography>
+                        </Box>
+                    </Paper>
+                </Grid>
+                <Grid item xs={12} lg={4}>
+                    <Paper sx={{ p: 4, borderRadius: 6, border: '1px solid #e2e8f0' }} elevation={0}>
+                        <Typography variant="h6" sx={{ fontWeight: 900, mb: 4 }}>Recent Alerts</Typography>
+                        <Stack spacing={3}>
+                            {[1, 2, 3].map(i => (
+                                <Box key={i} sx={{ display: 'flex', gap: 2 }}>
+                                    <Box sx={{ width: 44, height: 44, bgcolor: '#f1f5f9', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>🔔</Box>
+                                    <Box>
+                                        <Typography sx={{ fontWeight: 900, fontSize: '0.875rem' }}>System Update</Typography>
+                                        <Typography variant="caption" color="textSecondary">v1.2.0 deployed</Typography>
+                                    </Box>
+                                </Box>
+                            ))}
+                        </Stack>
+                    </Paper>
+                </Grid>
+            </Grid>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <Container fluid className="p-5 bg-light min-vh-100">
+            <header className="mb-5 d-flex justify-content-between align-items-end">
+                <div>
+                    <h1 className="display-5 fw-black mb-1">System Overview</h1>
+                    <p className="text-secondary">Premium Bootstrap Dashboard.</p>
+                </div>
+                <BsButton variant="dark" className="px-4 py-2 rounded-3 fw-bold shadow-sm">
+                    Export Data
+                </BsButton>
+            </header>
+            
+            <Row className="g-4 mb-5">
+                <Col md={6} lg={3}><StatCard title="Total Users" value="12,482" change="+12%" icon="👥" uiSystem="${uiSystem}" /></Col>
+                <Col md={6} lg={3}><StatCard title="Total Sales" value="$48,230" change="+18%" icon="💰" uiSystem="${uiSystem}" /></Col>
+                <Col md={6} lg={3}><StatCard title="Active Projects" value="84" change="+3%" icon="⚡" uiSystem="${uiSystem}" /></Col>
+                <Col md={6} lg={3}><StatCard title="Server Load" value="23%" change="-2%" icon="📊" uiSystem="${uiSystem}" /></Col>
+            </Row>
 
+            <Row className="g-4">
+                <Col lg={8}>
+                    <Card className="border-0 shadow-sm rounded-4 p-4">
+                        <h2 className="h5 fw-bold mb-4">Performance Trend</h2>
+                        <div className="bg-light rounded-4 border-2 border-dashed d-flex align-items-center justify-content-center" style={{ height: '350px' }}>
+                            <p className="text-secondary mb-0">Analytics Engine Active</p>
+                        </div>
+                    </Card>
+                </Col>
+                <Col lg={4}>
+                    <Card className="border-0 shadow-sm rounded-4 p-4">
+                        <h2 className="h5 fw-bold mb-4">Recent Alerts</h2>
+                        <div className="vstack gap-4">
+                            {[1, 2, 3].map(i => (
+                                <div key={i} className="d-flex gap-3">
+                                    <div className="rounded-circle bg-light d-flex align-items-center justify-content-center shadow-inner" style={{ width: '44px', height: '44px' }}>🔔</div>
+                                    <div>
+                                        <p className="small fw-bold mb-0">Security Patch</p>
+                                        <p className="x-small text-secondary mb-0">System secured</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </Card>
+                </Col>
+            </Row>
+        </Container>
+    );` : `
     return (
-        <div className="rice-p-8 rice-bg-secondary-50 rice-min-h-screen">
-            <header className="rice-mb-10 rice-flex rice-justify-between rice-items-end">
+        <div className="\${p}p-8 \${p}bg-secondary-50 \${p}min-h-screen">
+            <header className="\${p}mb-10 \${p}flex \${p}justify-between \${p}items-end">
                 <div>
-                    <h1 className="rice-text-4xl rice-font-black rice-mb-2">System Overview</h1>
-                    <p className="rice-text-secondary-600">Welcome back, Admin. Here's what's happening today.</p>
+                    <h1 className="\${p}text-4xl \${p}font-black \${p}mb-2">System Overview</h1>
+                    <p className="\${p}text-secondary-600">Premium management dashboard.</p>
                 </div>
-                <button className="rice-px-6 rice-py-3 rice-bg-secondary-900 rice-text-white rice-rounded-xl rice-font-bold rice-shadow-lg rice-hover-scale-105 rice-transition-all">
-                    Download Reports
+                <button className="\${h.cls('rice-px-6 rice-py-3 rice-bg-secondary-900 rice-text-white rice-rounded-xl rice-font-bold rice-shadow-lg', 'px-6 py-3 bg-slate-900 text-white rounded-xl font-bold shadow-lg', 'joko-btn joko-btn-primary')}">
+                    Export Data
                 </button>
             </header>
             
-            <div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-2 rice-lg-grid-cols-4 rice-gap-6 rice-mb-10">
-                <StatCard title="Total Users" value={stats?.totalUsers || '12,482'} change="+12%" icon="👥" />
-                <StatCard title="Total Products" value={stats?.totalProducts || '1,240'} change="+3%" icon="📦" />
-                <StatCard title="Total Revenue" value={stats?.revenue || '$128,430'} change="+18%" icon="💰" color="rice-text-success-600" />
-                <StatCard title="Active Sessions" value={stats?.activeSessions || '842'} change="-2%" icon="⚡" />
+            <div className="\${p}grid \${p}grid-cols-1 \${h.cls('rice-md-grid-cols-2 rice-lg-grid-cols-4', 'md:grid-cols-2 lg:grid-cols-4', 'joko-grid-cols-3')} \${p}gap-6 \${p}mb-10">
+                <StatCard title="Total Users" value="12,482" change="+12%" icon="👥" uiSystem="${uiSystem}" />
+                <StatCard title="Total Sales" value="$48,230" change="+18%" icon="💰" uiSystem="${uiSystem}" />
+                <StatCard title="Active Projects" value="84" change="+3%" icon="⚡" uiSystem="${uiSystem}" />
+                <StatCard title="Server Load" value="23%" change="-2%" icon="📊" uiSystem="${uiSystem}" />
             </div>
 
-            <div className="rice-grid rice-grid-cols-1 rice-lg-grid-cols-3 rice-gap-8">
-                <div className="rice-lg-col-span-2 rice-bg-white rice-p-8 rice-rounded-3xl rice-border rice-shadow-sm">
-                    <h2 className="rice-text-xl rice-font-bold rice-mb-6">Revenue Growth</h2>
-                    <div className="rice-h-80 rice-bg-secondary-50 rice-rounded-2xl rice-border-2 rice-border-dashed rice-flex rice-items-center rice-justify-center">
-                        <p className="rice-text-secondary-400 rice-font-medium">Interactive Chart Integration Coming Soon</p>
+            <div className="\${p}grid \${p}grid-cols-1 \${h.cls('rice-lg-grid-cols-3', 'lg:grid-cols-3', 'joko-grid-cols-1')} \${p}gap-8">
+                <div className="\${h.cls('rice-lg-col-span-2 rice-bg-white rice-p-8 rice-rounded-3xl rice-border rice-shadow-sm', 'lg:col-span-2 bg-white p-8 rounded-3xl border border-slate-200 shadow-sm', 'joko-card')}">
+                    <h2 className="\${p}text-xl \${p}font-bold \${p}mb-6">Performance Trend</h2>
+                    <div className="\${p}h-80 \${p}bg-secondary-50 \${p}rounded-2xl \${p}border-2 \${p}border-dashed \${p}flex \${p}items-center \${p}justify-center">
+                        <p className="\${p}text-secondary-400">Visualization Engine Ready</p>
                     </div>
                 </div>
-                <div className="rice-bg-white rice-p-8 rice-rounded-3xl rice-border rice-shadow-sm">
-                    <h2 className="rice-text-xl rice-font-bold rice-mb-6">Recent Activity</h2>
-                    <div className="rice-space-y-6">
-                        {[1, 2, 3, 4, 5].map(i => (
-                            <div key={i} className="rice-flex rice-gap-4">
-                                <div className="rice-w-10 rice-h-10 rice-bg-secondary-100 rice-rounded-full rice-flex rice-items-center rice-justify-center">👤</div>
+                <div className="\${h.cls('rice-bg-white rice-p-8 rice-rounded-3xl rice-border rice-shadow-sm', 'bg-white p-8 rounded-3xl border border-slate-200 shadow-sm', 'joko-card')}">
+                    <h2 className="\${p}text-xl \${p}font-bold \${p}mb-6">Recent Alerts</h2>
+                    <div className="\${p}space-y-6">
+                        {[1, 2, 3].map(i => (
+                            <div key={i} className="\${p}flex \${p}gap-4">
+                                <div className="\${p}w-10 \${p}h-10 \${p}bg-secondary-100 \${p}rounded-full \${p}flex \${p}items-center \${p}justify-center">🔔</div>
                                 <div>
-                                    <p className="rice-text-sm rice-font-bold">New user registered</p>
-                                    <p className="rice-text-xs rice-text-secondary-500">2 minutes ago</p>
+                                    <p className="\${p}text-sm \${p}font-bold">System Update Successful</p>
+                                    <p className="\${p}text-xs \${p}text-secondary-500">v1.2.0 deployed</p>
                                 </div>
                             </div>
                         ))}
@@ -1495,102 +1819,56 @@ export default function Dashboard() {
                 </div>
             </div>
         </div>
-    );
+    );`}
 }
 
-function StatCard({ title, value, change, icon, color }: { title: string; value: any; change: string; icon: string; color?: string }) {
+function StatCard({ title, value, change, icon, uiSystem }: any) {
+    ${uiSystem === 'Material UI' ? `
     return (
-        <div className="rice-bg-white rice-p-6 rice-rounded-3xl rice-border rice-shadow-sm rice-hover-shadow-md rice-transition-all">
-            <div className="rice-flex rice-justify-between rice-items-start rice-mb-4">
-                <div className="rice-w-12 rice-h-12 rice-bg-secondary-50 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-text-2xl">{icon}</div>
-                <span className={\`rice-text-xs rice-font-black rice-px-2 rice-py-1 rice-rounded-lg \${change.startsWith('+') ? 'rice-bg-success-600 rice-bg-opacity-10 rice-text-success-600' : 'rice-bg-secondary-200 rice-text-secondary-600'}\`}>
+        <Paper sx={{ p: 3, borderRadius: 5, border: '1px solid #e2e8f0', bgcolor: 'white' }} elevation={0}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                <Box sx={{ width: 44, height: 44, bgcolor: '#f1f5f9', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>{icon}</Box>
+                <Box sx={{ px: 1, py: 0.5, bgcolor: change.startsWith('+') ? '#dcfce7' : '#f1f5f9', color: change.startsWith('+') ? '#166534' : '#64748b', borderRadius: 1.5, fontSize: '0.75rem', fontWeight: 900 }}>{change}</Box>
+            </Box>
+            <Typography variant="body2" color="textSecondary" sx={{ fontWeight: 700, mb: 0.5 }}>{title}</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 900 }}>{value}</Typography>
+        </Paper>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <Card className="border-0 shadow-sm rounded-4 p-4 h-100">
+            <div className="d-flex justify-content-between align-items-center mb-3">
+                <div className="bg-light rounded-3 d-flex align-items-center justify-content-center shadow-inner" style={{ width: '48px', height: '48px', fontSize: '1.5rem' }}>{icon}</div>
+                <span className={\`badge \${change.startsWith('+') ? 'bg-success-soft text-success' : 'bg-light text-secondary'} rounded-pill\`} style={change.startsWith('+') ? { backgroundColor: '#dcfce7' } : {}}>
                     {change}
                 </span>
             </div>
-            <h3 className="rice-text-secondary-500 rice-text-sm rice-font-medium rice-mb-1">{title}</h3>
-            <p className={\`rice-text-3xl rice-font-black \${color || 'rice-text-secondary-900'}\`}>{value}</p>
-        </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);
-        }
-    };
-
+            <p className="text-secondary small fw-bold mb-1">{title}</p>
+            <h3 className="fw-black mb-0">{value}</h3>
+        </Card>
+    );` : `
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     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 className="\${h.cls('rice-bg-white rice-p-6 rice-rounded-3xl rice-border rice-shadow-sm rice-hover-shadow-md rice-transition-all', 'bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all', 'joko-card')}">
+            <div className="\${p}flex \${p}justify-between \${p}items-start \${p}mb-4">
+                <div className="\${p}w-12 \${p}h-12 \${p}bg-secondary-50 \${p}rounded-2xl \${p}flex \${p}items-center \${p}justify-center \${p}text-2xl">{icon}</div>
+                <span className=\\\`\${p}text-xs \${p}font-black \${p}px-2 \${p}py-1 \${p}rounded-lg \\\${change.startsWith('+') ? '\${p}text-success-600 \${p}bg-success-600 \${p}bg-opacity-10' : '\${p}text-secondary-600 \${p}bg-secondary-200'}\\\`>
+                    {change}
+                </span>
             </div>
+            <h3 className="\${p}text-secondary-500 \${p}text-sm \${p}font-medium \${p}mb-1">{title}</h3>
+            <p className="\${p}text-3xl \${p}font-black">{value}</p>
         </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) {
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     // 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';
@@ -1699,6 +1977,8 @@ export default api;
     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';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, TextField, Button, Paper, Alert, Link } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Card, Form, Button, Alert } from 'react-bootstrap';" : ""}
 
 export default function Login() {
     const [email, setEmail] = useState('');
@@ -1716,67 +1996,127 @@ export default function Login() {
         }
     };
 
+    ${uiSystem === 'Material UI' ? `
     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>
-                    )}
+        <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', bgcolor: '#f8fafc' }}>
+            <Container maxWidth="xs">
+                <Paper sx={{ p: 6, borderRadius: 8, boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)' }}>
+                    <Box sx={{ textAlign: 'center', mb: 4 }}>
+                        <Typography variant="h4" sx={{ fontWeight: 900, mb: 1 }}>Welcome Back</Typography>
+                        <Typography color="textSecondary">Sign in to your account</Typography>
+                    </Box>
+
+                    {error && <Alert severity="error" sx={{ mb: 3, borderRadius: 3 }}>{error}</Alert>}
 
                     <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
-                            />
+                        <TextField fullWidth label="Email Address" margin="normal" variant="outlined" value={email} onChange={(e) => setEmail(e.target.value)} sx={{ mb: 2 }} />
+                        <TextField fullWidth label="Password" type="password" margin="normal" variant="outlined" value={password} onChange={(e) => setPassword(e.target.value)} sx={{ mb: 4 }} />
+                        <Button fullWidth variant="contained" size="large" type="submit" disabled={isLoading} sx={{ py: 1.8, borderRadius: 3, fontWeight: 900, textTransform: 'none', fontSize: '1rem' }}>
+                            {isLoading ? 'Decrypting...' : 'Sign In'}
+                        </Button>
+                    </form>
+
+                    <Box sx={{ textAlign: 'center', mt: 4 }}>
+                        <Typography color="textSecondary">
+                            New here? <Link href="/register" sx={{ fontWeight: 700, textDecoration: 'none' }}>Create an account</Link>
+                        </Typography>
+                    </Box>
+                </Paper>
+            </Container>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <div className="bg-light min-vh-100 d-flex align-items-center py-5">
+            <Container>
+                <Card className="border-0 shadow-lg rounded-5 mx-auto" style={{ maxWidth: '450px' }}>
+                    <Card.Body className="p-5">
+                        <div className="text-center mb-5">
+                            <h2 className="fw-black mb-1">Welcome Back</h2>
+                            <p className="text-muted">Sign in to your account</p>
                         </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
-                            />
+                        {error && <Alert variant="danger" className="rounded-4">{error}</Alert>}
+
+                        <Form onSubmit={handleSubmit}>
+                            <Form.Group className="mb-4">
+                                <Form.Label className="small fw-bold">Email Address</Form.Label>
+                                <Form.Control type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="py-3 px-4 rounded-4 border-2" placeholder="name@example.com" />
+                            </Form.Group>
+                            <Form.Group className="mb-5">
+                                <Form.Label className="small fw-bold">Password</Form.Label>
+                                <Form.Control type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="py-3 px-4 rounded-4 border-2" placeholder="••••••••" />
+                            </Form.Group>
+                            <Button variant="dark" type="submit" disabled={isLoading} className="w-100 py-3 fw-black rounded-4 shadow">
+                                {isLoading ? 'Authenticating...' : 'Sign In'}
+                            </Button>
+                        </Form>
+
+                        <div className="text-center mt-4">
+                            <p className="text-muted">Don't have an account? <a href="/register" className="fw-bold text-dark">Register</a></p>
                         </div>
+                    </Card.Body>
+                </Card>
+            </Container>
+        </div>
+    );` : `
+    return (
+        <div className="\${p}min-h-screen \${p}flex \${p}items-center \${p}justify-center \${p}bg-secondary-50 \${p}py-12 \${p}px-4">
+            <div className="\${p}max-w-md \${p}w-full \${p}bg-white \${p}p-10 \${p}rounded-[40px] \${p}shadow-2xl \${p}border \${p}border-white">
+                <div className="\${p}text-center \${p}mb-10">
+                    <h2 className="\${p}text-4xl \${p}font-black \${p}mb-2">Welcome Back</h2>
+                    <p className="\${p}text-secondary-600">Enter your credentials to continue</p>
+                </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>
+                {error && (
+                    <div className="\${p}mb-6 \${p}p-4 \${p}bg-danger-50 \${p}text-danger-600 \${p}rounded-2xl \${p}text-sm \${p}font-bold">
+                        {error}
+                    </div>
+                )}
 
-                    <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>
+                <form onSubmit={handleSubmit} className="\${p}space-y-6">
+                    <div>
+                        <label className="\${p}block \${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2">Email Address</label>
+                        <input 
+                            type="email" 
+                            value={email} 
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}transition-all \${p}outline-none \${p}font-bold"
+                            placeholder="hello@rice.com"
+                        />
+                    </div>
+                    <div>
+                        <label className="\${p}block \${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2">Password</label>
+                        <input 
+                            type="password" 
+                            value={password} 
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}transition-all \${p}outline-none \${p}font-bold"
+                            placeholder="••••••••"
+                        />
+                    </div>
+                    
+                    <button 
+                        type="submit" 
+                        disabled={isLoading}
+                        className="\${p}w-full \${p}py-4 \${p}bg-secondary-900 \${p}text-white \${p}rounded-2xl \${p}font-black \${p}text-lg \${p}shadow-xl \${p}hover-scale-[1.02] \${p}active-scale-95 \${p}transition-all \${p}disabled-opacity-50">
+                        {isLoading ? 'Authenticating...' : 'Sign In'}
+                    </button>
+                </form>
+
+                <p className="\${p}text-center \${p}mt-10 \${p}text-secondary-600">
+                    New here? <a href="/register" className="\${p}text-primary-500 \${p}font-black \${p}hover-underline">Create an account</a>
+                </p>
             </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';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, TextField, Button, Paper, Alert, Link, Checkbox, FormControlLabel } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Card, Form, Button, Alert } from 'react-bootstrap';" : ""}
 
 export default function Register() {
     const [formData, setFormData] = useState({ name: '', email: '', password: '', password_confirmation: '' });
@@ -1797,92 +2137,131 @@ export default function Register() {
         }
     };
 
+    ${uiSystem === 'Material UI' ? `
     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>
-                    )}
+        <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', bgcolor: '#f8fafc', py: 8 }}>
+            <Container maxWidth="xs">
+                <Paper sx={{ p: 6, borderRadius: 8, boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)' }}>
+                    <Box sx={{ textAlign: 'center', mb: 4 }}>
+                        <Typography variant="h4" sx={{ fontWeight: 900, mb: 1 }}>Sign Up</Typography>
+                        <Typography color="textSecondary">Create your free account</Typography>
+                    </Box>
+
+                    {error && <Alert severity="error" sx={{ mb: 3, borderRadius: 3 }}>{error}</Alert>}
 
                     <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>
+                        <TextField fullWidth label="Full Name" margin="normal" variant="outlined" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} sx={{ mb: 2 }} />
+                        <TextField fullWidth label="Email Address" margin="normal" variant="outlined" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} sx={{ mb: 2 }} />
+                        <TextField fullWidth label="Password" type="password" margin="normal" variant="outlined" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} sx={{ mb: 2 }} />
+                        <TextField fullWidth label="Confirm Password" type="password" margin="normal" variant="outlined" value={formData.password_confirmation} onChange={(e) => setFormData({...formData, password_confirmation: e.target.value})} sx={{ mb: 4 }} />
+                        
+                        <Button fullWidth variant="contained" size="large" type="submit" disabled={isLoading} sx={{ py: 1.8, borderRadius: 3, fontWeight: 900, textTransform: 'none', fontSize: '1rem' }}>
+                            {isLoading ? 'Creating Account...' : 'Get Started'}
+                        </Button>
+                    </form>
 
-                        <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
-                            />
+                    <Box sx={{ textAlign: 'center', mt: 4 }}>
+                        <Typography color="textSecondary">
+                            Already have an account? <Link href="/login" sx={{ fontWeight: 700, textDecoration: 'none' }}>Sign in here</Link>
+                        </Typography>
+                    </Box>
+                </Paper>
+            </Container>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <div className="bg-light min-vh-100 d-flex align-items-center py-5">
+            <Container>
+                <Card className="border-0 shadow-lg rounded-5 mx-auto" style={{ maxWidth: '500px' }}>
+                    <Card.Body className="p-5">
+                        <div className="text-center mb-5">
+                            <h2 className="fw-black mb-1">Create Account</h2>
+                            <p className="text-muted">Start your journey with us</p>
                         </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
-                            />
+                        {error && <Alert variant="danger" className="rounded-4">{error}</Alert>}
+
+                        <Form onSubmit={handleSubmit}>
+                            <Form.Group className="mb-3">
+                                <Form.Label className="small fw-bold">Full Name</Form.Label>
+                                <Form.Control type="text" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} className="py-3 px-4 rounded-4 border-2" />
+                            </Form.Group>
+                            <Form.Group className="mb-3">
+                                <Form.Label className="small fw-bold">Email Address</Form.Label>
+                                <Form.Control type="email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} className="py-3 px-4 rounded-4 border-2" />
+                            </Form.Group>
+                            <Form.Group className="mb-3">
+                                <Form.Label className="small fw-bold">Password</Form.Label>
+                                <Form.Control type="password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} className="py-3 px-4 rounded-4 border-2" />
+                            </Form.Group>
+                            <Form.Group className="mb-5">
+                                <Form.Label className="small fw-bold">Confirm Password</Form.Label>
+                                <Form.Control type="password" value={formData.password_confirmation} onChange={(e) => setFormData({...formData, password_confirmation: e.target.value})} className="py-3 px-4 rounded-4 border-2" />
+                            </Form.Group>
+                            <Button variant="dark" type="submit" disabled={isLoading} className="w-100 py-3 fw-black rounded-4 shadow">
+                                {isLoading ? 'Processing...' : 'Register Now'}
+                            </Button>
+                        </Form>
+
+                        <div className="text-center mt-4">
+                            <p className="text-muted mb-0">Member already? <a href="/login" className="fw-bold text-dark">Login instead</a></p>
                         </div>
+                    </Card.Body>
+                </Card>
+            </Container>
+        </div>
+    );` : `
+    return (
+        <div className="\${p}min-h-screen \${p}flex \${p}items-center \${p}justify-center \${p}bg-secondary-50 \${p}py-20 \${p}px-4">
+            <div className="\${p}max-w-md \${p}w-full \${p}bg-white \${p}p-10 \${p}rounded-[40px] \${p}shadow-2xl \${p}border \${p}border-white">
+                <div className="\${p}text-center \${p}mb-10">
+                    <h2 className="\${p}text-4xl \${p}font-black \${p}mb-2">Get Started</h2>
+                    <p className="\${p}text-secondary-600">Join our premium community today</p>
+                </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>
+                {error && (
+                    <div className="\${p}mb-6 \${p}p-4 \${p}bg-danger-50 \${p}text-danger-600 \${p}rounded-2xl \${p}text-sm \${p}font-bold">
+                        {error}
+                    </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>
+                <form onSubmit={handleSubmit} className="\${p}space-y-5">
+                    <div>
+                        <label className="\${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2 \${p}block">Name</label>
+                        <input type="text" className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}outline-none \${p}font-bold" placeholder="Dhafa N." value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} required />
+                    </div>
+                    <div>
+                        <label className="\${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2 \${p}block">Email</label>
+                        <input type="email" className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}outline-none \${p}font-bold" placeholder="name@example.com" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required />
+                    </div>
+                    <div>
+                        <label className="\${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2 \${p}block">Password</label>
+                        <input type="password" className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}outline-none \${p}font-bold" placeholder="••••••••" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} required />
+                    </div>
+                    <div>
+                        <label className="\${p}text-xs \${p}font-black \${p}text-secondary-500 \${p}uppercase \${p}tracking-widest \${p}mb-2 \${p}block">Confirm Password</label>
+                        <input type="password" className="\${p}w-full \${p}px-6 \${p}py-4 \${p}bg-secondary-50 \${p}border-2 \${p}border-transparent \${p}focus-border-primary-500 \${p}rounded-2xl \${p}outline-none \${p}font-bold" placeholder="••••••••" value={formData.password_confirmation} onChange={(e) => setFormData({...formData, password_confirmation: e.target.value})} required />
+                    </div>
+                    
+                    <button type="submit" disabled={isLoading} className="\${p}w-full \${p}py-4 \${p}bg-secondary-900 \${p}text-white \${p}rounded-2xl \${p}font-black \${p}text-lg \${p}shadow-xl \${p}hover-scale-[1.02] \${p}active-scale-95 \${p}transition-all \${p}mt-4">
+                        {isLoading ? 'Processing...' : 'Create Account'}
+                    </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>
+                <p className="\${p}text-center \${p}mt-10 \${p}text-secondary-600">
+                    Already have an account? <a href="/login" className="\${p}text-primary-500 \${p}font-black \${p}hover-underline">Sign in</a>
+                </p>
             </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');
+Route.group({ prefix: '/auth' }, () => {
+    Route.get('/login', (req, res) => res.view('Login'));
+    Route.get('/register', (req, res) => res.view('Register'));
 });
 `);
 }
@@ -1890,6 +2269,8 @@ Route.middleware(['auth']).group(() => {
  * Generate Enterprise App Template
  */
 async function generateEnterpriseTemplate(projectDir, uiSystem) {
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     // 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';
 
@@ -2019,69 +2400,163 @@ export const useEnterpriseStore = create<EnterpriseState>()(
     )
 );
 `);
-    // 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';
+    // Create Dashboard page
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Dashboard.tsx'), `import React from 'react';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, Grid, Paper, IconButton, Avatar, Card, CardContent } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Card, Nav, Navbar } from 'react-bootstrap';" : ""}
+
+export default function Dashboard() {
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: '#f1f5f9' }}>
+            <Box sx={{ flexGrow: 1, p: 4 }}>
+                <Container maxWidth="xl">
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6 }}>
+                        <Box>
+                            <Typography variant="h4" sx={{ fontWeight: 900, mb: 1 }}>Enterprise Dashboard</Typography>
+                            <Typography color="textSecondary">Welcome back, Admin</Typography>
+                        </Box>
+                        <Avatar sx={{ width: 48, height: 48, bgcolor: 'primary.main' }}>AD</Avatar>
+                    </Box>
+
+                    <Grid container spacing={4}>
+                        {[1, 2, 3, 4].map(i => (
+                            <Grid item xs={12} sm={6} md={3} key={i}>
+                                <Paper sx={{ p: 4, borderRadius: 6, boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
+                                    <Typography color="textSecondary" sx={{ fontWeight: 700, mb: 1 }}>Metric \${i}</Typography>
+                                    <Typography variant="h3" sx={{ fontWeight: 900 }}>\${(Math.random() * 100).toFixed(0)}%</Typography>
+                                </Paper>
+                            </Grid>
+                        ))}
+                    </Grid>
+
+                    <Paper sx={{ mt: 6, p: 4, borderRadius: 6 }}>
+                        <Typography variant="h6" sx={{ fontWeight: 900, mb: 4 }}>Recent Activities</Typography>
+                        <Box sx={{ height: 400, bgcolor: '#f8fafc', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <Typography color="textSecondary">Performance Data Visualization</Typography>
+                        </Box>
+                    </Paper>
+                </Container>
+            </Box>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <div className="bg-light min-vh-100 pb-5">
+            <Navbar bg="white" className="border-bottom py-3 mb-5">
+                <Container>
+                    <Navbar.Brand className="fw-black fs-4">ENTERPRISE OS</Navbar.Brand>
+                    <Nav className="ms-auto flex-row gap-4 align-items-center">
+                        <Nav.Link href="#" className="fw-bold">Settings</Nav.Link>
+                        <div className="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px' }}>A</div>
+                    </Nav>
+                </Container>
+            </Navbar>
+
+            <Container>
+                <div className="mb-5">
+                    <h2 className="fw-black mb-1">Corporate Insights</h2>
+                    <p className="text-muted">Analyzing organizational metrics in real-time</p>
+                </div>
 
-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);
+                <Row className="g-4 mb-5">
+                    {[1, 2, 3, 4].map(i => (
+                        <Col md={3} key={i}>
+                            <Card className="border-0 shadow-sm rounded-4 p-3">
+                                <Card.Body>
+                                    <h6 className="text-muted fw-bold mb-3 uppercase small tracking-wider">KPI \${i}</h6>
+                                    <h2 className="fw-black mb-0">\${(Math.random() * 10).toFixed(1)}M</h2>
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    ))}
+                </Row>
 
-    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]);
+                <Card className="border-0 shadow-sm rounded-5 overflow-hidden">
+                    <Card.Body className="p-0">
+                        <div className="p-4 border-bottom d-flex justify-content-between">
+                            <h5 className="mb-0 fw-black">Enterprise Resource Distribution</h5>
+                        </div>
+                        <div className="bg-white p-5 text-center" style={{ height: '400px' }}>
+                            <div className="bg-light w-100 h-100 rounded-5 d-flex align-items-center justify-content-center border-dashed">
+                                <p className="text-muted mb-0">Graphic Layer (Chart.js / D3)</p>
+                            </div>
+                        </div>
+                    </Card.Body>
+                </Card>
+            </Container>
+        </div>
+    );` : `
+    return (
+        <div className="\${p}min-h-screen \${p}bg-secondary-50 \${p}flex">
+            {/* Sidebar */}
+            <div className="\${p}w-72 \${p}bg-secondary-900 \${p}text-white \${p}p-8 \${p}flex \${p}flex-col">
+                <div className="\${p}text-2xl \${p}font-black \${p}mb-12 \${p}tracking-tighter">ERECT_ENT</div>
+                <div className="\${p}space-y-4 \${p}flex-1">
+                    <div className="\${p}px-4 \${p}py-3 \${p}bg-primary-500 \${p}rounded-2xl \${p}font-black">Overview</div>
+                    <div className="\${p}px-4 \${p}py-3 \${p}text-secondary-400 \${p}hover-text-white \${p}transition-colors">Team</div>
+                    <div className="\${p}px-4 \${p}py-3 \${p}text-secondary-400 \${p}hover-text-white \${p}transition-colors">Compliance</div>
+                    <div className="\${p}px-4 \${p}py-3 \${p}text-secondary-400 \${p}hover-text-white \${p}transition-colors">Financials</div>
+                </div>
+                <div className="\${p}pt-8 \${p}border-t \${p}border-secondary-800">
+                    <div className="\${p}flex \${p}items-center \${p}gap-4">
+                        <div className="\${p}w-10 \${p}h-10 \${p}bg-secondary-700 \${p}rounded-full"></div>
+                        <div>
+                            <div className="\${p}text-sm \${p}font-black">Dhafa Thohir</div>
+                            <div className="\${p}text-xs \${p}text-secondary-500">CEO</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main Content */}
+            <div className="\${p}flex-1 \${p}p-12 \${p}overflow-y-auto">
+                <header className="\${p}flex \${p}justify-between \${p}items-end \${p}mb-12">
+                    <div>
+                        <h1 className="\${p}text-4xl \${p}font-black \${p}mb-2">Operational Hub</h1>
+                        <p className="\${p}text-secondary-500">Global system status: <span className="\${p}text-success-500 \${p}font-black">OPTIMAL</span></p>
+                    </div>
+                    <button className="\${p}px-6 \${p}py-3 \${p}bg-white \${p}border-2 \${p}border-secondary-200 \${p}rounded-2xl \${p}font-black \${p}hover-border-secondary-900 \${p}transition-all">
+                        Report Sync
+                    </button>
+                </header>
+
+                <div className="\${p}grid \${p}grid-cols-3 \${p}gap-8 \${p}mb-8">
+                    <div className="\${p}p-8 \${p}bg-white \${p}rounded-[32px] \${p}shadow-sm \${p}border \${p}border-secondary-100">
+                        <div className="\${p}text-secondary-400 \${p}text-xs \${p}font-black \${p}uppercase \${p}tracking-widest \${p}mb-2">Total Equity</div>
+                        <div className="\${p}text-3xl \${p}font-black">$2.4M</div>
+                    </div>
+                    <div className="\${p}p-8 \${p}bg-white \${p}rounded-[32px] \${p}shadow-sm \${p}border \${p}border-secondary-100">
+                        <div className="\${p}text-secondary-400 \${p}text-xs \${p}font-black \${p}uppercase \${p}tracking-widest \${p}mb-2">Active Nodes</div>
+                        <div className="\${p}text-3xl \${p}font-black">104</div>
+                    </div>
+                    <div className="\${p}p-8 \${p}bg-white \${p}rounded-[32px] \${p}shadow-sm \${p}border \${p}border-secondary-100">
+                        <div className="\${p}text-secondary-400 \${p}text-xs \${p}font-black \${p}uppercase \${p}tracking-widest \${p}mb-2">Compliance Score</div>
+                        <div className="\${p}text-3xl \${p}font-black">98.2</div>
+                    </div>
+                </div>
 
-    return { data, loading, error, fetch };
+                <div className="\${p}bg-white \${p}rounded-[40px] \${p}p-10 \${p}shadow-sm \${p}border \${p}border-secondary-100">
+                    <div className="\${p}flex \${p}justify-between \${p}items-center \${p}mb-8">
+                        <h2 className="\${p}text-xl \${p}font-black">Strategic Performance Matrix</h2>
+                        <div className="\${p}flex \${p}gap-2">
+                             <div className="\${p}w-3 \${p}h-3 \${p}bg-primary-500 \${p}rounded-full"></div>
+                             <div className="\${p}w-3 \${p}h-3 \${p}bg-secondary-200 \${p}rounded-full"></div>
+                        </div>
+                    </div>
+                    <div className="\${p}w-full \${p}h-96 \${p}bg-secondary-50 \${p}rounded-[32px] \${p}flex \${p}items-center \${p}justify-center \${p}border-2 \${p}border-dashed \${p}border-secondary-200">
+                        <p className="\${p}text-secondary-400 \${p}font-bold">Real-time Visualization Engine</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );`}
 }
 `);
     // 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');
+Route.middleware(['auth']).group(() => {
+    Route.get('/dashboard', (req, res) => res.view('Dashboard'));
 });
 `);
 }
@@ -2089,6 +2564,8 @@ Route.middleware(['auth', 'verified']).group(() => {
  * Generate SaaS Template
  */
 async function generateSaaSTemplate(projectDir, uiSystem) {
+    const h = getUIHelper(uiSystem);
+    const p = h.cls('rice-', '', 'joko-');
     // Create subscription service
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/services/subscription.ts'), `import apiService from './api';
 
@@ -2212,6 +2689,8 @@ export const useSaaSStore = create<SaaSState>((set) => ({
 `);
     // Create Pricing page
     await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/pages/Pricing.tsx'), `import React, { useState } from 'react';
+${uiSystem === 'Material UI' ? "import { Box, Container, Typography, Button, Grid, Card, List, ListItem, ListItemIcon, ListItemText, Switch, Stack } from '@mui/material';" : ""}
+${uiSystem === 'Bootstrap 5' ? "import { Container, Row, Col, Card, Button, Form } from 'react-bootstrap';" : ""}
 
 const plans = [
     { id: 1, name: 'Basic', description: 'Perfect for side projects and small experiments.', price: '$0', featured: false, features: ['1 Project', '1,000 requests/mo', 'Basic Support', 'Community Access'] },
@@ -2222,66 +2701,138 @@ const plans = [
 export default function Pricing() {
     const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly');
 
+    ${uiSystem === 'Material UI' ? `
+    return (
+        <Box sx={{ minHeight: '100vh', bgcolor: '#f8fafc', py: 15 }}>
+            <Container>
+                <Box sx={{ textAlign: 'center', mb: 10 }}>
+                    <Typography variant="h2" sx={{ fontWeight: 900, mb: 2, tracking: -2 }}>
+                        Scale your <Box component="span" sx={{ color: 'primary.main' }}>Ideas</Box>.
+                    </Typography>
+                    <Typography color="textSecondary" sx={{ fontSize: '1.2rem', maxW: 600, mx: 'auto', mb: 6 }}>
+                        Choose a plan that scales with your growth. No hidden fees.
+                    </Typography>
+                    <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
+                        <Typography sx={{ fontWeight: 700 }}>Monthly</Typography>
+                        <Switch checked={billing === 'yearly'} onChange={() => setBilling(billing === 'monthly' ? 'yearly' : 'monthly')} />
+                        <Typography sx={{ fontWeight: 700 }}>Yearly <Box component="span" sx={{ color: 'success.main' }}>-20%</Box></Typography>
+                    </Stack>
+                </Box>
+
+                <Grid container spacing={4} alignItems="center">
+                    {plans.map((plan) => (
+                        <Grid item xs={12} md={4} key={plan.id}>
+                            <Card sx={{ p: 5, borderRadius: 10, border: plan.featured ? '2px solid' : 'none', borderColor: 'primary.main', transform: plan.featured ? 'scale(1.05)' : 'none', boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)' }}>
+                                <Typography variant="h5" sx={{ fontWeight: 900, mb: 1 }}>{plan.name}</Typography>
+                                <Typography color="textSecondary" sx={{ mb: 4, height: 60 }}>{plan.description}</Typography>
+                                <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 4 }}>
+                                    <Typography variant="h3" sx={{ fontWeight: 900 }}>{plan.price}</Typography>
+                                    <Typography color="textSecondary" sx={{ ml: 1, fontWeight: 700 }}>/mo</Typography>
+                                </Box>
+                                <Button fullWidth variant={plan.featured ? "contained" : "outlined"} sx={{ py: 2, borderRadius: 4, fontWeight: 900, mb: 4 }}>Get Started</Button>
+                                <List>
+                                    {plan.features.map(f => (
+                                        <ListItem key={f} sx={{ px: 0 }}>
+                                            <ListItemText primary={f} primaryTypographyProps={{ fontWeight: 700, fontSize: '0.9rem' }} />
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Container>
+        </Box>
+    );` : uiSystem === 'Bootstrap 5' ? `
+    return (
+        <div className="bg-white min-vh-100 py-5">
+            <Container className="py-5">
+                <div className="text-center mb-5">
+                    <h1 className="display-3 fw-black mb-3">Scale your Projects</h1>
+                    <p className="lead text-muted mx-auto mb-5" style={{ maxWidth: '600px' }}>Choose a plan that scales with your growth. Simple, transparent pricing.</p>
+                    <div className="d-flex justify-content-center align-items-center gap-3">
+                        <span className="fw-bold">Monthly</span>
+                        <Form.Check type="switch" checked={billing === 'yearly'} onChange={() => setBilling(billing === 'monthly' ? 'yearly' : 'monthly')} />
+                        <span className="fw-bold">Yearly <span className="text-success">(Save 20%)</span></span>
+                    </div>
+                </div>
+
+                <Row className="g-4 align-items-center">
+                    {plans.map(plan => (
+                        <Col md={4} key={plan.id}>
+                            <Card className={\`border-\${plan.featured ? 'primary' : '0'} shadow-lg rounded-5 p-4 \${plan.featured ? 'scale-105' : ''}\`} style={plan.featured ? { borderWidth: '2px' } : {}}>
+                                <Card.Body>
+                                    <h3 className="fw-black mb-1">{plan.name}</h3>
+                                    <p className="text-muted mb-4">{plan.description}</p>
+                                    <div className="d-flex align-items-baseline mb-4">
+                                        <span className="display-4 fw-black">{plan.price}</span>
+                                        <span className="text-muted ms-2 fw-bold">/mo</span>
+                                    </div>
+                                    <Button variant={plan.featured ? 'primary' : 'outline-dark'} className="w-100 py-3 fw-black rounded-4 mb-4">Get Started</Button>
+                                    <ul className="list-unstyled">
+                                        {plan.features.map(f => (
+                                            <li key={f} className="mb-3 fw-bold text-secondary small">✓ {f}</li>
+                                        ))}
+                                    </ul>
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        </div>
+    );` : `
     return (
-        <div className="rice-min-h-screen rice-bg-secondary-50 rice-py-24 rice-px-6">
-            <div className="rice-max-w-7xl rice-mx-auto">
-                <div className="rice-text-center rice-mb-16">
-                    <h1 className="rice-text-5xl rice-md-text-7xl rice-font-black rice-tracking-tight rice-mb-6">
-                        Scale your <span className="rice-gradient-primary rice-bg-clip-text rice-text-transparent">Ideas</span>.
+        <div className="\${p}min-h-screen \${p}bg-secondary-50 \${p}py-24 \${p}px-6">
+            <div className="\${p}max-w-7xl \${p}mx-auto">
+                <div className="\${p}text-center \${p}mb-16">
+                    <h1 className="\${p}text-5xl \${p}md-text-7xl \${p}font-black \${p}tracking-tight \${p}mb-6">
+                        Scale your <span className="\${p}gradient-primary \${p}bg-clip-text \${p}text-transparent">Ideas</span>.
                     </h1>
-                    <p className="rice-text-xl rice-text-secondary-600 rice-max-w-2xl rice-mx-auto rice-mb-10">
+                    <p className="\${p}text-xl \${p}text-secondary-600 \${p}max-w-2xl \${p}mx-auto \${p}mb-10">
                         Choose a plan that scales with your growth. No hidden fees, cancel anytime.
                     </p>
                     
                     {/* Billing Toggle */}
-                    <div className="rice-inline-flex rice-p-1 rice-bg-secondary-200 rice-rounded-2xl rice-mb-12">
+                    <div className="\${p}inline-flex \${p}p-1 \${p}bg-secondary-200 \${p}rounded-2xl \${p}mb-12">
                         <button 
                             onClick={() => setBilling('monthly')}
-                            className={\`rice-px-6 rice-py-2 rice-rounded-xl rice-text-sm rice-font-bold rice-transition-all \${billing === 'monthly' ? 'rice-bg-white rice-shadow-sm' : 'rice-text-secondary-600'}\`}>
+                            className={\`\${p}px-6 \${p}py-2 \${p}rounded-xl \${p}text-sm \${p}font-bold \${p}transition-all \${billing === 'monthly' ? '\${p}bg-white \${p}shadow-sm' : '\${p}text-secondary-600'}\`}>
                             Monthly
                         </button>
                         <button 
                             onClick={() => setBilling('yearly')}
-                            className={\`rice-px-6 rice-py-2 rice-rounded-xl rice-text-sm rice-font-bold rice-transition-all \${billing === 'yearly' ? 'rice-bg-white rice-shadow-sm' : 'rice-text-secondary-600'}\`}>
-                            Yearly <span className="rice-text-success-600">-20%</span>
+                            className={\`\${p}px-6 \${p}py-2 \${p}rounded-xl \${p}text-sm \${p}font-bold \${p}transition-all \${billing === 'yearly' ? '\${p}bg-white \${p}shadow-sm' : '\${p}text-secondary-600'}\`}>
+                            Yearly <span className="\${p}text-success-600">-20%</span>
                         </button>
                     </div>
                 </div>
 
-                <div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-3 rice-gap-8">
+                <div className="\${p}grid \${p}grid-cols-1 \${p}md-grid-cols-3 \${p}gap-8">
                     {plans.map((plan) => (
-                        <div key={plan.id} className={\`rice-relative rice-p-10 rice-bg-white rice-rounded-[40px] rice-border-2 rice-transition-all rice-hover-shadow-2xl \${plan.featured ? 'rice-border-primary-500 rice-scale-105 rice-z-10' : 'rice-border-transparent rice-shadow-sm'}\`}>
-                            {plan.featured && (
-                                <span className="rice-absolute rice-top-[-20px] rice-left-1/2 -rice-translate-x-1/2 rice-px-4 rice-py-1 rice-bg-primary-500 rice-text-white rice-text-xs rice-font-black rice-rounded-full">
-                                    MOST POPULAR
-                                </span>
-                            )}
-                            <h3 className="rice-text-2xl rice-font-black rice-mb-2">{plan.name}</h3>
-                            <p className="rice-text-sm rice-text-secondary-500 rice-mb-8">{plan.description}</p>
-                            
-                            <div className="rice-mb-8">
-                                <span className="rice-text-5xl rice-font-black">{plan.price}</span>
-                                {plan.price !== 'Custom' && <span className="rice-text-secondary-500 rice-font-medium"> /mo</span>}
+                        <div key={plan.id} className={\`\${p}relative \${p}p-10 \${p}bg-white \${p}rounded-[40px] \${p}border-2 \${p}transition-all \${p}hover-shadow-2xl \${plan.featured ? '\${p}border-primary-500 \${p}scale-105 \${p}z-10' : '\${p}border-transparent \${p}shadow-sm'}\`}>
+                            <h3 className="\${p}text-2xl \${p}font-black \${p}mb-2">{plan.name}</h3>
+                            <p className="\${p}text-secondary-500 \${p}mb-8 \${p}h-12">{plan.description}</p>
+                            <div className="\${p}flex \${p}items-baseline \${p}mb-8">
+                                <span className="\${p}text-5xl \${p}font-black">{plan.price}</span>
+                                <span className="\${p}text-secondary-500 \${p}ml-2 \${p}font-bold">/mo</span>
                             </div>
-
-                            <ul className="rice-space-y-4 rice-mb-10">
-                                {plan.features.map((feature: string) => (
-                                    <li key={feature} className="rice-flex rice-items-center rice-gap-3 rice-text-sm rice-font-medium rice-text-secondary-700">
-                                        <span className="rice-text-primary-500">✓</span>
-                                        {feature}
+                            <button className={\`\${p}w-full \${p}py-4 \${p}rounded-2xl \${p}font-black \${p}transition-all \${p}mb-8 \${plan.featured ? '\${p}bg-primary-500 \${p}text-white \${p}shadow-lg' : '\${p}bg-secondary-900 \${p}text-white'}\`}>
+                                Get Started
+                            </button>
+                            <ul className="\${p}space-y-4">
+                                {plan.features.map(f => (
+                                    <li key={f} className="\${p}flex \${p}items-center \${p}gap-3 \${p}text-sm \${p}font-bold \${p}text-secondary-600">
+                                        <span className="\${p}text-success-500">✓</span> {f}
                                     </li>
                                 ))}
                             </ul>
-
-                            <button className={\`rice-w-full rice-py-4 rice-rounded-2xl rice-font-black rice-transition-all \${plan.featured ? 'rice-bg-primary-500 rice-text-white rice-shadow-lg rice-hover-bg-primary-600' : 'rice-bg-secondary-100 rice-text-secondary-900 rice-hover-bg-secondary-200'}\`}>
-                                {plan.price === 'Custom' ? 'Contact Sales' : 'Start Trial'}
-                            </button>
                         </div>
                     ))}
                 </div>
             </div>
         </div>
-    );
+    );`}
 }
 `);
     // Create Subscription Management page
@@ -2589,19 +3140,39 @@ export default function WelcomeComponent() {
  * Configure Bootstrap 5
  */
 async function configureBootstrap(projectDir) {
+    // Create custom bootstrap variations
+    const customBootstrap = `
+    :root {
+        --bs-primary: #0d6efd;
+        --bs-primary-rgb: 13, 110, 253;
+        --bs-border-radius: 1rem;
+        --bs-border-radius-lg: 2rem;
+        --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+    .fw-black { font-weight: 900 !important; }
+    .shadow-2xl { shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
+    .bg-primary-soft { background-color: rgba(var(--bs-primary-rgb), 0.1) !important; }
+    .rounded-4 { border-radius: 1.5rem !important; }
+    .rounded-5 { border-radius: 2.5rem !important; }
+    `;
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/css'));
+    await fs_extra_1.default.appendFile(path_1.default.join(projectDir, 'resources/css/app.css'), customBootstrap);
     // 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 { Container, Row, Col, Button, Card } 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>
+        <Container className="py-5">
+            <Row className="justify-content-center text-center">
+                <Col md={8}>
+                    <h1 className="display-4 fw-black mb-4">Bootstrap x EreactThohir</h1>
+                    <p className="lead mb-5">Institutional strength meets modern speed.</p>
+                    <div className="d-flex gap-3 justify-content-center">
+                        <Button variant="primary" size="lg" className="rounded-pill px-5">Get Started</Button>
+                        <Button variant="outline-dark" size="lg" className="rounded-pill px-5">Learn More</Button>
+                    </div>
                 </Col>
             </Row>
         </Container>
@@ -2613,35 +3184,60 @@ export default function WelcomeComponent() {
  * Configure Material UI
  */
 async function configureMaterialUI(projectDir) {
+    // Create Theme Configuration
+    await fs_extra_1.default.ensureDir(path_1.default.join(projectDir, 'resources/theme'));
+    await fs_extra_1.default.writeFile(path_1.default.join(projectDir, 'resources/theme/index.ts'), `import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+  palette: {
+    primary: { main: '#6366f1', contrastText: '#fff' },
+    secondary: { main: '#f43f5e' },
+    background: { default: '#f8fafc', paper: '#ffffff' },
+    text: { primary: '#0f172a', secondary: '#64748b' }
+  },
+  typography: {
+    fontFamily: '"Outfit", "Inter", sans-serif',
+    h1: { fontWeight: 900 },
+    h2: { fontWeight: 800 },
+    button: { textTransform: 'none', fontWeight: 700 }
+  },
+  shape: { borderRadius: 12 },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: { borderRadius: 12, padding: '10px 24px' }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: { border: '1px solid #e2e8f0', boxShadow: 'none' }
+      }
+    }
+  }
+});
+`);
     // 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';
+import { Box, Container, Typography, Button, Stack, Paper } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { theme } from '../theme';
 
 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
+        <ThemeProvider theme={theme}>
+            <Container maxWidth="md">
+                <Box sx={{ py: 10, textAlign: 'center' }}>
+                    <Typography variant="h2" sx={{ mb: 2 }}>Material UI Starter</Typography>
+                    <Typography variant="h6" color="textSecondary" sx={{ mb: 4 }}>
+                        Powered by institutional strength and Google's Design System.
                     </Typography>
-                    <Typography variant="h5" color="textSecondary">
-                        With Material UI
-                    </Typography>
-                    <Button variant="contained" size="large">
-                        Get Started
-                    </Button>
-                </Stack>
-            </Box>
-        </Container>
+                    <Stack direction="row" spacing={2} justifyContent="center">
+                        <Button variant="contained" size="large">Documentation</Button>
+                        <Button variant="outlined" size="large">Github</Button>
+                    </Stack>
+                </Box>
+            </Container>
+        </ThemeProvider>
     );
 }
 `);
@@ -2937,4 +3533,507 @@ export default function WelcomeComponent() {
     // or we could overwrite the main entry point if we knew where it was.
     // For now, we'll just provide the component.
 }
+/**
+ * Generate Welcome Page Content based on UI System
+ */
+function generateWelcomePage(uiSystem, name) {
+    if (uiSystem === 'JokoUI')
+        return generateJokoWelcome(name);
+    if (uiSystem === 'Tailwind CSS' || uiSystem === 'DaisyUI' || uiSystem === 'Shadcn/ui')
+        return generateTailwindWelcome(name);
+    if (uiSystem === 'Bootstrap 5')
+        return generateBootstrapWelcome(name);
+    if (uiSystem === 'Material UI')
+        return generateMaterialWelcome(name);
+    return generateRiceWelcome(name);
+}
+function generateBootstrapWelcome(name) {
+    return `import React from 'react';
+import { Container, Row, Col, Button, Nav, Navbar } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+export default function Welcome() {
+    return (
+        <div style={{ backgroundColor: '#f8fafc', minHeight: '100vh' }}>
+            <Navbar bg="white" expand="lg" className="py-4 shadow-sm">
+                <Container>
+                    <Navbar.Brand href="#" className="fw-black fs-3">
+                        <span className="text-primary">E</span>reactThohir
+                    </Navbar.Brand>
+                    <Navbar.Toggle />
+                    <Navbar.Collapse className="justify-content-end">
+                        <Nav className="gap-4 fw-bold">
+                            <Nav.Link href="#docs">Docs</Nav.Link>
+                            <Nav.Link href="#showcase">Showcase</Nav.Link>
+                            <Button variant="dark" className="rounded-pill px-4">Get Started</Button>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar>
+
+            <Container className="pt-5 mt-5">
+                <Row className="align-items-center">
+                    <Col lg={6} className="text-center text-lg-start">
+                        <div className="badge bg-primary-soft text-primary px-3 py-2 rounded-pill mb-4" style={{ backgroundColor: '#e0f2fe' }}>
+                             NEW VERSION 1.3.5 AVAILABLE
+                        </div>
+                        <h1 className="display-1 fw-black mb-4 tracking-tight" style={{ lineHeight: 0.9 }}>
+                            Modernize <br/>
+                            <span className="text-primary">Web Apps.</span>
+                        </h1>
+                        <p className="lead text-secondary mb-5 fs-4">
+                            The ultimate Bootstrap 5 starter for EReactThohir. 
+                            Clean, fast, and extraordinarily powerful.
+                        </p>
+                        <div className="d-flex gap-3 justify-content-center justify-content-lg-start">
+                            <Button variant="primary" size="lg" className="px-5 py-3 rounded-4 shadow-lg fw-bold">
+                                Start Building
+                            </Button>
+                            <Button variant="outline-dark" size="lg" className="px-5 py-3 rounded-4 fw-bold">
+                                Examples
+                            </Button>
+                        </div>
+                    </Col>
+                    <Col lg={6} className="mt-5 mt-lg-0">
+                        <div className="bg-white p-5 rounded-5 shadow-2xl border">
+                             <div className="row g-4">
+                                 <div className="col-6">
+                                     <div className="p-4 bg-light rounded-4 text-center">
+                                         <span className="fs-1 d-block mb-2">⚡</span>
+                                         <span className="fw-bold">Fast SSR</span>
+                                     </div>
+                                 </div>
+                                 <div className="col-6">
+                                     <div className="p-4 bg-light rounded-4 text-center">
+                                         <span className="fs-1 d-block mb-2">🛡️</span>
+                                         <span className="fw-bold">Secure</span>
+                                     </div>
+                                 </div>
+                                 <div className="col-6">
+                                     <div className="p-4 bg-light rounded-4 text-center">
+                                         <span className="fs-1 d-block mb-2">📦</span>
+                                         <span className="fw-bold">Modular</span>
+                                     </div>
+                                 </div>
+                                 <div className="col-6">
+                                     <div className="p-4 bg-light rounded-4 text-center">
+                                         <span className="fs-1 d-block mb-2">🎨</span>
+                                         <span className="fw-bold">Customizable</span>
+                                     </div>
+                                 </div>
+                             </div>
+                        </div>
+                    </Col>
+                </Row>
+            </Container>
+            
+            <footer className="py-5 mt-5 border-top">
+                <Container className="text-center">
+                    <p className="text-secondary small">© 2024 EReactThohir • Integrated with Bootstrap 5 Ecosystem</p>
+                </Container>
+            </footer>
+        </div>
+    );
+}
+`;
+}
+function generateMaterialWelcome(name) {
+    return `import React from 'react';
+import { 
+    Box, 
+    Container, 
+    Typography, 
+    Button, 
+    Stack, 
+    AppBar, 
+    Toolbar, 
+    createTheme, 
+    ThemeProvider,
+    CssBaseline,
+    Paper,
+    Grid
+} from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: { main: '#6366f1' },
+    secondary: { main: '#ec4899' },
+    background: { default: '#f1f5f9' }
+  },
+  typography: {
+    fontFamily: "'Inter', sans-serif",
+    h1: { fontWeight: 900, letterSpacing: '-0.05em' },
+  },
+  shape: { borderRadius: 16 }
+});
+
+export default function Welcome() {
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Box sx={{ minHeight: '100vh', position: 'relative', overflow: 'hidden' }}>
+                <AppBar position="static" color="transparent" elevation={0} sx={{ py: 2 }}>
+                    <Container>
+                        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                                <Box sx={{ width: 40, height: 40, bgcolor: 'primary.main', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 'black', fontSize: 20 }}>M</Box>
+                                <Typography variant="h6" sx={{ fontWeight: 900, color: 'text.primary' }}>EReactMUI</Typography>
+                            </Box>
+                            <Stack direction="row" spacing={4} sx={{ display: { xs: 'none', md: 'flex' } }}>
+                                <Button color="inherit" sx={{ fontWeight: 700 }}>Docs</Button>
+                                <Button color="inherit" sx={{ fontWeight: 700 }}>Marketplace</Button>
+                                <Button variant="contained" sx={{ fontWeight: 900, px: 4 }}>Login</Button>
+                            </Stack>
+                        </Toolbar>
+                    </Container>
+                </AppBar>
+
+                <Container sx={{ pt: 15, pb: 10 }}>
+                    <Grid container spacing={8} alignItems="center">
+                        <Grid item xs={12} lg={7}>
+                            <Box sx={{ display: 'inline-block', px: 2, py: 0.5, bgcolor: 'secondary.main', color: 'white', borderRadius: 2, fontWeight: 900, fontSize: '0.75rem', mb: 3 }}>
+                                ENTERPRISE READY
+                            </Box>
+                            <Typography variant="h1" sx={{ fontSize: { xs: '3.5rem', md: '5.5rem' }, mb: 4, lineHeight: 1 }}>
+                                Premium <Typography component="span" variant="inherit" color="primary">Material</Typography> Experience.
+                            </Typography>
+                            <Typography variant="h5" color="textSecondary" sx={{ mb: 6, lineHeight: 1.6 }}>
+                                Combine Google's Material Design 3 with EreactThohir's architecture. 
+                                Build flawless interfaces with institutional strength.
+                            </Typography>
+                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3}>
+                                <Button variant="contained" size="large" sx={{ py: 2, px: 5, fontSize: '1.1rem', fontWeight: 900 }}>
+                                    Launch App
+                                </Button>
+                                <Button variant="outlined" size="large" sx={{ py: 2, px: 5, fontSize: '1.1rem', fontWeight: 900 }}>
+                                    View Library
+                                </Button>
+                            </Stack>
+                        </Grid>
+                        <Grid item xs={12} lg={5}>
+                            <Paper elevation={0} sx={{ p: 4, bgcolor: 'white', border: '1px solid #e2e8f0', borderRadius: 8 }}>
+                                <Stack spacing={3}>
+                                     <Box sx={{ p: 2, borderRadius: 4, bgcolor: '#f8fafc', display: 'flex', alignItems: 'center', gap: 2 }}>
+                                         <Box sx={{ fontSize: 32 }}>💎</Box>
+                                         <Box>
+                                             <Typography sx={{ fontWeight: 900 }}>High Quality</Typography>
+                                             <Typography variant="body2" color="textSecondary">Premium assets included</Typography>
+                                         </Box>
+                                     </Box>
+                                     <Box sx={{ p: 2, borderRadius: 4, bgcolor: '#f8fafc', display: 'flex', alignItems: 'center', gap: 2 }}>
+                                         <Box sx={{ fontSize: 32 }}>🚀</Box>
+                                         <Box>
+                                             <Typography sx={{ fontWeight: 900 }}>Fast Delivery</Typography>
+                                             <Typography variant="body2" color="textSecondary">Optimized build pipeline</Typography>
+                                         </Box>
+                                     </Box>
+                                </Stack>
+                            </Paper>
+                        </Grid>
+                    </Grid>
+                </Container>
+                
+                <Box component="footer" sx={{ py: 8, textAlign: 'center', borderTop: '1px solid #e2e8f0' }}>
+                    <Typography color="textSecondary" variant="body2">
+                        © 2024 EReactThohir Framework • Designed for Performance
+                    </Typography>
+                </Box>
+            </Box>
+        </ThemeProvider>
+    );
+}
+`;
+}
+function generateRiceWelcome(name) {
+    return `import React from 'react';
+
+export default function Welcome() {
+    return (
+        <div className="rice-min-h-screen rice-bg-white rice-relative rice-overflow-hidden rice-font-sans">
+            {/* Background Decorative Elements */}
+            <div className="rice-absolute rice-inset-0 rice-pointer-events-none">
+                <div className="rice-absolute rice-top-[-10%] rice-right-[-5%] rice-w-[500px] rice-h-[500px] rice-bg-primary-500 rice-opacity-10 rice-blur-[120px] rice-rounded-full" />
+                <div className="rice-absolute rice-bottom-[-10%] rice-left-[-5%] rice-w-[600px] rice-h-[600px] rice-bg-accent-500 rice-opacity-10 rice-blur-[120px] rice-rounded-full" />
+            </div>
+
+            {/* Navigation */}
+            <nav className="rice-relative rice-z-10 rice-flex rice-items-center rice-justify-between rice-px-8 rice-py-6 rice-max-w-7xl rice-mx-auto">
+                <div className="rice-flex rice-items-center rice-gap-3">
+                    <div className="rice-w-12 rice-h-12 rice-bg-secondary-900 rice-rounded-2xl rice-flex rice-items-center rice-justify-center rice-text-white rice-font-black rice-text-2xl rice-shadow-lg">E</div>
+                    <span className="rice-text-2xl rice-font-black rice-tracking-tighter rice-text-secondary-900">EreactThohir</span>
+                </div>
+                <div className="rice-hidden rice-md-flex rice-items-center rice-gap-10 rice-text-sm rice-font-bold rice-text-secondary-600">
+                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Documentation</a>
+                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Showcase</a>
+                    <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">Community</a>
+                    <a href="/auth/login" className="rice-px-6 rice-py-2.5 rice-bg-secondary-900 rice-text-white rice-rounded-full rice-hover-scale-105 rice-shadow-primary rice-transition-all">Get Started</a>
+                </div>
+            </nav>
+
+            <main className="rice-relative rice-z-10 rice-max-w-7xl rice-mx-auto rice-px-8 rice-pt-32 rice-pb-40">
+                <div className="rice-text-center rice-max-w-5xl rice-mx-auto">
+                    <div className="rice-inline-flex rice-items-center rice-gap-2 rice-px-5 rice-py-2.5 rice-bg-secondary-100 rice-rounded-full rice-mb-10 rice-animate-pulse rice-border rice-border-secondary-200">
+                        <span className="rice-w-2.5 rice-h-2.5 rice-bg-primary-500 rice-rounded-full" />
+                        <span className="rice-text-xs rice-font-black rice-text-secondary-900 rice-uppercase rice-tracking-widest">Framework v1.3.5 "Evolution" is here</span>
+                    </div>
+                    
+                    <h1 className="rice-text-7xl rice-md-text-9xl rice-font-black rice-tracking-tighter rice-mb-10 rice-leading-[0.9]">
+                        The New Standard of <br/>
+                        <span className="rice-gradient-primary rice-bg-clip-text rice-text-transparent">Modern Web</span> Apps.
+                    </h1>
+                    
+                    <p className="rice-text-xl rice-md-text-2xl rice-text-secondary-600 rice-mb-16 rice-leading-relaxed rice-max-w-3xl rice-mx-auto">
+                        Experience the raw speed of React combined with the solid architecture of EReactThohir. 
+                        Production-ready components, built with high-end Rice UI aesthetics.
+                    </p>
+
+                    <div className="rice-flex rice-flex-wrap rice-justify-center rice-gap-6">
+                        <a href="/auth/register" className="rice-px-12 rice-py-6 rice-bg-secondary-900 rice-text-white rice-text-xl rice-font-black rice-rounded-3xl rice-shadow-2xl rice-hover-lift rice-transition-all rice-duration-300">
+                            Build Your Vision
+                        </a>
+                        <a href="#" className="rice-px-12 rice-py-6 rice-bg-white rice-border rice-text-secondary-900 rice-text-xl rice-font-black rice-rounded-3xl rice-hover-bg-secondary-50 rice-transition-all rice-duration-300">
+                            Watch Demo
+                        </a>
+                    </div>
+                </div>
+
+                {/* Feature Grid with Glassmorphism */}
+                <div className="rice-mt-48 rice-grid rice-grid-cols-1 rice-md-grid-cols-3 rice-gap-10">
+                    <FeatureCard 
+                        title="MVC Redefined" 
+                        desc="Full-featured routing, controllers, and models inspired by Laravel's elegance but built for JS/TS."
+                        icon="🏛️"
+                    />
+                    <FeatureCard 
+                        title="Speed of Light" 
+                        desc="Advanced SSR with partial hydration ensures your lighthouse score stays at 100% effortlessly."
+                        icon="⚡"
+                    />
+                    <FeatureCard 
+                        title="Rice UI Design" 
+                        desc="Premade high-end components with glassmorphism and vibrance. Just drop and go."
+                        icon="🎨"
+                    />
+                </div>
+            </main>
+
+            <footer className="rice-py-20 rice-border-t rice-bg-secondary-50">
+                <div className="rice-max-w-7xl rice-mx-auto rice-px-8 rice-flex rice-flex-col rice-md-flex-row rice-items-center rice-justify-between rice-gap-10">
+                    <div>
+                        <p className="rice-text-secondary-900 rice-font-black rice-text-xl rice-mb-2">EreactThohir</p>
+                        <p className="rice-text-secondary-500 rice-text-sm">© 2024. Crafted for excellence by Dhafa Nazula Permadi.</p>
+                    </div>
+                    <div className="rice-flex rice-gap-8 rice-text-secondary-400 rice-text-2xl">
+                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">𝕏</a>
+                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">GitHub</a>
+                        <a href="#" className="rice-hover-text-secondary-900 rice-transition-all">LinkedIn</a>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}
+
+function FeatureCard({ title, desc, icon }: any) {
+    return (
+        <div className="rice-p-10 rice-bg-white rice-border rice-rounded-[40px] rice-hover-shadow-2xl rice-hover-lift rice-transition-all rice-duration-500 rice-group">
+            <div className="rice-w-16 rice-h-16 rice-bg-primary-500 rice-bg-opacity-10 rice-rounded-3xl rice-flex rice-items-center rice-justify-center rice-mb-8 rice-text-3xl rice-group-hover-scale-110 rice-transition-all">
+                {icon}
+            </div>
+            <h3 className="rice-text-2xl rice-font-black rice-mb-4 rice-text-secondary-900">{title}</h3>
+            <p className="rice-text-secondary-500 rice-leading-relaxed rice-font-medium">{desc}</p>
+        </div>
+    );
+}
+`;
+}
+function generateTailwindWelcome(name) {
+    return `import React from 'react';
+
+export default function Welcome() {
+    return (
+        <div className="min-h-screen bg-slate-50 font-sans selection:bg-blue-500 selection:text-white">
+            {/* Tailwind Mesh Gradient */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none -z-10">
+                <div className="absolute top-[-10%] right-[-10%] w-[800px] h-[800px] bg-blue-100 rounded-full blur-[120px] opacity-60"></div>
+                <div className="absolute bottom-[-10%] left-[-10%] w-[800px] h-[800px] bg-indigo-100 rounded-full blur-[120px] opacity-60"></div>
+            </div>
+
+            <nav className="flex items-center justify-between p-8 max-w-7xl mx-auto">
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white font-black text-xl shadow-lg ring-4 ring-blue-50">E</div>
+                    <span className="text-xl font-bold tracking-tight text-slate-900">EreactThohir</span>
+                </div>
+                <div className="hidden md:flex items-center gap-8">
+                    <a href="#" className="text-sm font-semibold text-slate-600 hover:text-blue-600 transition-colors">Documentation</a>
+                    <a href="#" className="text-sm font-semibold text-slate-600 hover:text-blue-600 transition-colors">Components</a>
+                    <a href="/login" className="px-5 py-2.5 bg-slate-900 text-white text-sm font-bold rounded-full hover:bg-blue-600 hover:scale-105 transition-all shadow-xl shadow-slate-200">
+                        Launch Project
+                    </a>
+                </div>
+            </nav>
+
+            <main className="max-w-7xl mx-auto px-8 pt-24 pb-32">
+                <div className="max-w-3xl">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-700 rounded-full mb-8 border border-blue-100">
+                        <span className="relative flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
+                        </span>
+                        <span className="text-xs font-bold uppercase tracking-wider">Tailwind Support Active</span>
+                    </div>
+
+                    <h1 className="text-6xl md:text-8xl font-black text-slate-900 tracking-tight leading-[1.1] mb-8">
+                        The Developer's <span className="text-blue-600">Superpower.</span>
+                    </h1>
+
+                    <p className="text-xl md:text-2xl text-slate-600 leading-relaxed mb-12">
+                        Build your next big idea with EReactThohir and the massive Tailwind CSS ecosystem. 
+                        No limits, just raw creative potential.
+                    </p>
+
+                    <div className="flex flex-wrap gap-4">
+                        <button className="px-8 py-4 bg-blue-600 text-white font-bold rounded-2xl shadow-2xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all">
+                            Start Coding Now
+                        </button>
+                        <button className="px-8 py-4 bg-white border border-slate-200 text-slate-900 font-bold rounded-2xl hover:bg-slate-50 transition-all">
+                            View Examples
+                        </button>
+                    </div>
+                </div>
+
+                <div className="mt-32 grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <FeatureCard title="Responsive" desc="Every pixel optimized for mobile, tablet, and desktop out of the box." />
+                    <FeatureCard title="Tailwind Ready" desc="Fully integrated with JIT engine and your custom design tokens." />
+                    <FeatureCard title="Type Safe" desc="End-to-end type safety for a predictable development experience." />
+                </div>
+            </main>
+        </div>
+    );
+}
+
+function FeatureCard({ title, desc }: any) {
+    return (
+        <div className="p-8 bg-white/50 backdrop-blur-xl border border-white rounded-[32px] hover:border-blue-200 hover:shadow-2xl transition-all group">
+            <h3 className="text-xl font-bold mb-3 text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-tight">{title}</h3>
+            <p className="text-slate-600 leading-relaxed">{desc}</p>
+        </div>
+    );
+}
+`;
+}
+function generateJokoWelcome(name) {
+    return `import React from 'react';
+
+export default function Welcome() {
+    return (
+        <div className="joko-flex joko-flex-col joko-min-h-screen joko-bg-secondary-50">
+            {/* Formal Header */}
+            <header className="joko-p-8 joko-bg-white joko-border-b joko-flex joko-items-center joko-justify-between">
+                <div className="joko-flex joko-items-center joko-gap-4">
+                    <div className="joko-w-10 joko-h-10 joko-bg-primary-600 joko-rounded-md joko-flex joko-items-center joko-justify-center joko-text-white joko-font-bold">JK</div>
+                    <span className="joko-text-2xl joko-font-bold joko-tracking-tight joko-text-primary-900">JokoUI + EReactThohir</span>
+                </div>
+                <nav className="joko-flex joko-gap-8 joko-text-sm joko-font-bold">
+                    <a href="#" className="joko-text-secondary-600 hover:joko-text-primary-600">PANDUAN</a>
+                    <a href="#" className="joko-text-secondary-600 hover:joko-text-primary-600">KOMPONEN</a>
+                    <Button variant="primary" style={{ padding: '0.5rem 1rem' }}>MEMULAI</Button>
+                </nav>
+            </header>
+
+            <main className="joko-flex-1 joko-flex joko-items-center joko-justify-center joko-p-8">
+                <div className="joko-max-w-4xl joko-w-full">
+                    <div className="joko-card joko-text-center">
+                        <span className="joko-text-primary-600 joko-font-bold joko-tracking-[0.2em] joko-text-xs joko-mb-6 joko-block">VERSI TERBARU v1.0.0</span>
+                        <h1 className="joko-text-6xl joko-font-bold joko-mb-8 joko-text-secondary-900 joko-leading-tight">
+                            Membangun Aplikasi dengan <br/>
+                            <span className="joko-text-primary-600">Kepercayaan</span> dan <span className="joko-text-accent-600">Kekuatan.</span>
+                        </h1>
+                        <p className="joko-text-xl joko-text-secondary-600 joko-mb-12 joko-max-w-2xl joko-mx-auto">
+                            Framework EReactThohir dengan JokoUI. Solusi formal untuk kebutuhan enterprise tingkat tinggi. 
+                            Handal, Sederhana, dan Berwibawa.
+                        </p>
+                        
+                        <div className="joko-flex joko-justify-center joko-gap-6">
+                            <button className="joko-btn joko-btn-primary joko-text-lg joko-px-10">
+                                Buat Proyek Baru
+                            </button>
+                            <button className="joko-btn joko-bg-white joko-border joko-border-secondary-300 joko-text-secondary-900 joko-text-lg joko-px-10">
+                                Dokumentasi
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="joko-grid joko-grid-cols-3 joko-gap-8 joko-mt-12">
+                        <StatCard label="KEANDALAN" value="100%" />
+                        <StatCard label="KECEPATAN" value="0.2s" />
+                        <StatCard label="KEAMANAN" value="EXTRA" />
+                    </div>
+                </div>
+            </main>
+
+            <footer className="joko-p-12 joko-bg-primary-900 joko-text-white joko-text-center">
+                <p className="joko-text-primary-300 joko-text-sm joko-font-bold joko-tracking-widest">ERECTTHOHIR ECOSYSTEM • 2024</p>
+            </footer>
+        </div>
+    );
+}
+
+function StatCard({ label, value }: any) {
+    return (
+        <div className="joko-bg-white joko-p-6 joko-border joko-border-secondary-200 joko-rounded-lg joko-text-center">
+            <p className="joko-text-xs joko-font-bold joko-text-secondary-400 joko-mb-2 joko-tracking-tighter">{label}</p>
+            <p className="joko-text-3xl joko-font-bold joko-text-primary-600">{value}</p>
+        </div>
+    );
+}
+
+function Button({ children, variant, style }: any) {
+    const base = "joko-btn";
+    const variantCls = variant === 'primary' ? 'joko-btn-primary' : '';
+    return <button className={\`\${base} \${variantCls}\`} style={style}>{children}</button>;
+}
+`;
+}
+function getUIHelper(uiSystem) {
+    const isRice = uiSystem === 'Rice UI (default, official)';
+    const isTailwind = uiSystem === 'Tailwind CSS' || uiSystem === 'DaisyUI' || uiSystem === 'Shadcn/ui';
+    const isJoko = uiSystem === 'JokoUI';
+    const isBootstrap = uiSystem === 'Bootstrap 5';
+    const isMaterial = uiSystem === 'Material UI';
+    const isMantine = uiSystem === 'Mantine';
+    const isChakra = uiSystem === 'Chakra UI';
+    return {
+        cls: (rice, tailwind, joko, bootstrap = '', material = '') => {
+            if (isRice)
+                return rice;
+            if (isTailwind)
+                return tailwind;
+            if (isJoko)
+                return joko;
+            if (isBootstrap && bootstrap)
+                return bootstrap;
+            if (isMaterial && material)
+                return material;
+            return tailwind;
+        },
+        mode: () => {
+            if (isRice)
+                return 'rice';
+            if (isTailwind)
+                return 'tailwind';
+            if (isJoko)
+                return 'joko';
+            if (isBootstrap)
+                return 'bootstrap';
+            if (isMaterial)
+                return 'material';
+            if (isMantine)
+                return 'mantine';
+            if (isChakra)
+                return 'chakra';
+            return 'none';
+        }
+    };
+}
 //# sourceMappingURL=create.js.map