canx-starter-admin 1.0.0 → 1.1.1

package/src/controllers/AuthController.ts

@@ -1,49 +1,11 @@
-import { BaseController, Controller, Get, Post } from 'canxjs';
-import { renderPage, jsx } from 'canxjs';
+import { BaseController, Controller, Get, Post, View } from 'canxjs';
+import { Login } from '../views/auth/Login';
 
 @Controller('/auth')
 export class AuthController extends BaseController {
   @Get('/login')
   login() {
-    const html = renderPage(
-      jsx('div', { className: 'min-h-screen bg-gray-100 flex items-center justify-center p-4' },
-        jsx('div', { className: 'bg-white rounded-2xl shadow-xl p-8 w-full max-w-md' },
-          jsx('div', { className: 'text-center mb-8' },
-            jsx('h1', { className: 'text-2xl font-bold text-gray-900' }, 'Admin Login'),
-            jsx('p', { className: 'text-gray-500 mt-2' }, 'Sign in to access the dashboard')
-          ),
-          jsx('form', { action: '/auth/login', method: 'POST', className: 'space-y-4' },
-            jsx('div', {},
-              jsx('label', { className: 'block text-sm font-medium text-gray-700 mb-2' }, 'Email'),
-              jsx('input', { 
-                type: 'email', 
-                name: 'email', 
-                className: 'w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
-                placeholder: 'admin@example.com',
-                required: true
-              })
-            ),
-            jsx('div', {},
-              jsx('label', { className: 'block text-sm font-medium text-gray-700 mb-2' }, 'Password'),
-              jsx('input', { 
-                type: 'password', 
-                name: 'password', 
-                className: 'w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
-                placeholder: '••••••••',
-                required: true
-              })
-            ),
-            jsx('button', { 
-              type: 'submit', 
-              className: 'w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium' 
-            }, 'Sign In')
-          )
-        )
-      ),
-      { title: 'Login - Admin' }
-    );
-    
-    return this.response.html(html);
+    return View(Login);
   }
   
   @Post('/login')

package/src/controllers/DashboardController.ts

@@ -1,5 +1,5 @@
-import { BaseController, Controller, Get } from 'canxjs';
-import { adminLayout } from '../views/layouts/admin';
+import { BaseController, Controller, Get, View } from 'canxjs';
+import { Dashboard } from '../views/Dashboard';
 
 @Controller('/')
 export class DashboardController extends BaseController {
@@ -12,99 +12,9 @@ export class DashboardController extends BaseController {
       growth: '+12.5%'
     };
     
-    const recentActivity = [
-      { id: 1, action: 'New user registered', user: 'john@example.com', time: '5 min ago' },
-      { id: 2, action: 'Order completed', user: 'jane@example.com', time: '12 min ago' },
-      { id: 3, action: 'Payment received', user: 'bob@example.com', time: '1 hour ago' },
-    ];
+    // User mock - in real app would come from auth
+    const user = { name: "Admin", email: "admin@canx.app" };
 
-    const html = adminLayout({
-      title: 'Dashboard',
-      content: `
-        <div class="mb-8">
-          <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p class="text-gray-500">Welcome back, Admin!</p>
-        </div>
-        
-        <!-- Stats Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-gray-500">Total Users</p>
-                <p class="text-2xl font-bold text-gray-900">${stats.users}</p>
-              </div>
-              <div class="p-3 bg-blue-100 rounded-lg">
-                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          
-          <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-gray-500">Total Orders</p>
-                <p class="text-2xl font-bold text-gray-900">${stats.orders}</p>
-              </div>
-              <div class="p-3 bg-green-100 rounded-lg">
-                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          
-          <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-gray-500">Revenue</p>
-                <p class="text-2xl font-bold text-gray-900">${stats.revenue}</p>
-              </div>
-              <div class="p-3 bg-purple-100 rounded-lg">
-                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          
-          <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm font-medium text-gray-500">Growth</p>
-                <p class="text-2xl font-bold text-green-600">${stats.growth}</p>
-              </div>
-              <div class="p-3 bg-emerald-100 rounded-lg">
-                <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- Recent Activity -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-100">
-          <div class="p-6 border-b border-gray-100">
-            <h2 class="text-lg font-semibold text-gray-900">Recent Activity</h2>
-          </div>
-          <div class="divide-y divide-gray-100">
-            ${recentActivity.map(item => `
-              <div class="p-4 flex items-center justify-between hover:bg-gray-50">
-                <div>
-                  <p class="font-medium text-gray-900">${item.action}</p>
-                  <p class="text-sm text-gray-500">${item.user}</p>
-                </div>
-                <span class="text-sm text-gray-400">${item.time}</span>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      `
-    });
-    
-    return this.response.html(html);
+    return View(Dashboard, { user, stats });
   }
 }

package/src/controllers/PlaceholderControllers.ts

@@ -0,0 +1,28 @@
+import { BaseController, Controller, Get, View } from 'canxjs';
+import { Placeholder } from '../views/Placeholder';
+
+const user = { name: "Admin", email: "admin@canx.app" };
+
+@Controller('/products')
+export class ProductsController extends BaseController {
+    @Get('/')
+    index() { return View(Placeholder, { title: 'Products', user }); }
+}
+
+@Controller('/orders')
+export class OrdersController extends BaseController {
+    @Get('/')
+    index() { return View(Placeholder, { title: 'Orders', user }); }
+}
+
+@Controller('/analytics')
+export class AnalyticsController extends BaseController {
+    @Get('/')
+    index() { return View(Placeholder, { title: 'Analytics', user }); }
+}
+
+@Controller('/settings')
+export class SettingsController extends BaseController {
+    @Get('/')
+    index() { return View(Placeholder, { title: 'Settings', user }); }
+}

package/src/controllers/ProfileController.ts

@@ -0,0 +1,22 @@
+import { BaseController, Controller, Get, Post, View } from 'canxjs';
+import { Profile } from '../views/Profile';
+
+@Controller('/profile')
+export class ProfileController extends BaseController {
+  @Get('/')
+  edit() {
+    // Mock user for admin
+    const user = { name: "Admin User", email: "admin@canx.app" };
+    return View(Profile, { user });
+  }
+
+  @Post('/')
+  update() {
+    return this.response.redirect('/profile');
+  }
+  
+  @Post('/password')
+  updatePassword() {
+    return this.response.redirect('/profile');
+  }
+}

package/src/controllers/UserController.ts

@@ -1,5 +1,5 @@
-import { BaseController, Controller, Get, Post } from 'canxjs';
-import { adminLayout } from '../views/layouts/admin';
+import { BaseController, Controller, Get, Post, View } from 'canxjs';
+import { Users } from '../views/Users';
 
 // Mock users data
 const users = [
@@ -14,165 +14,13 @@ const users = [
 export class UserController extends BaseController {
   @Get('/')
   index() {
-    const html = adminLayout({
-      title: 'Users',
-      content: `
-        <div class="flex items-center justify-between mb-8">
-          <div>
-            <h1 class="text-3xl font-bold text-gray-900">Users</h1>
-            <p class="text-gray-500">Manage your users and their roles</p>
-          </div>
-          <a href="/users/create" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-            </svg>
-            Add User
-          </a>
-        </div>
-        
-        <!-- Data Table -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-          <div class="p-4 border-b border-gray-100 flex items-center justify-between">
-            <div class="relative">
-              <input type="text" placeholder="Search users..." class="pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64">
-              <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </div>
-            <div class="flex items-center gap-2">
-              <select class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <option>All Roles</option>
-                <option>Admin</option>
-                <option>Editor</option>
-                <option>User</option>
-              </select>
-            </div>
-          </div>
-          
-          <table class="w-full">
-            <thead class="bg-gray-50">
-              <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
-                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-100">
-              ${users.map(user => `
-                <tr class="hover:bg-gray-50">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-medium">
-                        ${user.name.charAt(0)}
-                      </div>
-                      <div class="ml-3">
-                        <p class="font-medium text-gray-900">${user.name}</p>
-                        <p class="text-sm text-gray-500">${user.email}</p>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <span class="px-2 py-1 text-xs font-medium rounded-full ${
-                      user.role === 'Admin' ? 'bg-purple-100 text-purple-700' :
-                      user.role === 'Editor' ? 'bg-blue-100 text-blue-700' :
-                      'bg-gray-100 text-gray-700'
-                    }">${user.role}</span>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <span class="flex items-center gap-1.5">
-                      <span class="w-2 h-2 rounded-full ${user.status === 'Active' ? 'bg-green-500' : 'bg-gray-400'}"></span>
-                      <span class="text-sm text-gray-600">${user.status}</span>
-                    </span>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${user.createdAt}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-right">
-                    <div class="flex items-center justify-end gap-2">
-                      <a href="/users/${user.id}/edit" class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                        </svg>
-                      </a>
-                      <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                        </svg>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-          
-          <!-- Pagination -->
-          <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
-            <p class="text-sm text-gray-500">Showing 1 to 5 of 5 results</p>
-            <div class="flex items-center gap-1">
-              <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Previous</button>
-              <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg">1</button>
-              <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Next</button>
-            </div>
-          </div>
-        </div>
-      `
-    });
-    
-    return this.response.html(html);
+    return View(Users, { users });
   }
   
   @Get('/create')
   create() {
-    const html = adminLayout({
-      title: 'Add User',
-      content: `
-        <div class="mb-8">
-          <a href="/users" class="text-blue-600 hover:text-blue-700 flex items-center gap-1 text-sm mb-2">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-            </svg>
-            Back to Users
-          </a>
-          <h1 class="text-3xl font-bold text-gray-900">Add New User</h1>
-        </div>
-        
-        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 max-w-2xl">
-          <form action="/users" method="POST" class="space-y-6">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
-              <input type="text" name="name" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
-            </div>
-            
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
-              <input type="email" name="email" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
-            </div>
-            
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">Role</label>
-              <select name="role" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <option value="User">User</option>
-                <option value="Editor">Editor</option>
-                <option value="Admin">Admin</option>
-              </select>
-            </div>
-            
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
-              <input type="password" name="password" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
-            </div>
-            
-            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-100">
-              <a href="/users" class="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</a>
-              <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Create User</button>
-            </div>
-          </form>
-        </div>
-      `
-    });
-    
-    return this.response.html(html);
+     // Placeholder for create view
+     return this.response.html("<h1>Create User (Coming Soon)</h1>");
   }
   
   @Post('/')