@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/dashboard/angular/src/app/pages/users.component.ts

@@ -0,0 +1,153 @@
+import { Component } from '@angular/core';
+
+interface UserItem {
+  avatar: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'Active' | 'Inactive';
+}
+
+@Component({
+  selector: 'app-users',
+  standalone: true,
+  template: `
+    <h1 class="users-heading">Users</h1>
+    <div class="users-table-card">
+      <table class="users-table">
+        <thead>
+          <tr>
+            <th>Avatar</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (user of users; track user.email) {
+            <tr>
+              <td class="users-table-avatar">{{ user.avatar }}</td>
+              <td>{{ user.name }}</td>
+              <td class="users-table-email">{{ user.email }}</td>
+              <td>{{ user.role }}</td>
+              <td>
+                <span
+                  class="users-table-badge"
+                  [class]="user.status.toLowerCase()"
+                >
+                  {{ user.status }}
+                </span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+  styles: [`
+    .users-heading {
+      font-size: 1.5rem;
+      color: #111827;
+      margin-bottom: 1.5rem;
+    }
+
+    .users-table-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      border: 1px solid #e5e7eb;
+    }
+
+    .users-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .users-table th {
+      text-align: left;
+      padding: 0.6rem;
+      font-size: 0.75rem;
+      color: #6b7280;
+      text-transform: uppercase;
+      border-bottom: 2px solid #e5e7eb;
+    }
+
+    .users-table td {
+      padding: 0.75rem 0.6rem;
+      border-bottom: 1px solid #f3f4f6;
+      font-size: 0.875rem;
+    }
+
+    .users-table-avatar {
+      font-size: 1.5rem;
+    }
+
+    .users-table-email {
+      color: #6b7280;
+    }
+
+    .users-table-badge {
+      padding: 0.2rem 0.6rem;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .active {
+      background: #d1fae5;
+      color: #059669;
+    }
+
+    .inactive {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+  `]
+})
+export class UsersComponent {
+  users: UserItem[] = [
+    {
+      avatar: '👩‍💼',
+      name: 'Alice Johnson',
+      email: 'alice@example.com',
+      role: 'Admin',
+      status: 'Active',
+    },
+    {
+      avatar: '👨‍💻',
+      name: 'Bob Smith',
+      email: 'bob@example.com',
+      role: 'Editor',
+      status: 'Active',
+    },
+    {
+      avatar: '👩‍🎨',
+      name: 'Carol Davis',
+      email: 'carol@example.com',
+      role: 'Viewer',
+      status: 'Inactive',
+    },
+    {
+      avatar: '👨‍🔧',
+      name: 'Dan Wilson',
+      email: 'dan@example.com',
+      role: 'Editor',
+      status: 'Active',
+    },
+    {
+      avatar: '👩‍🔬',
+      name: 'Eve Martinez',
+      email: 'eve@example.com',
+      role: 'Admin',
+      status: 'Active',
+    },
+    {
+      avatar: '👨‍🏫',
+      name: 'Frank Lee',
+      email: 'frank@example.com',
+      role: 'Viewer',
+      status: 'Inactive',
+    },
+  ];
+}

package/templates/overlays/dashboard/angular/src/main.ts

@@ -0,0 +1,10 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+  ],
+}).catch((err: unknown) => console.error(err));

package/templates/overlays/dashboard/nextjs/src/app/analytics/page.tsx

@@ -0,0 +1,76 @@
+import { ChartPlaceholder } from '../components/ChartPlaceholder';
+
+const metrics = [
+  { label: 'Page Views', value: '124,892', change: '+14.2%', icon: '👁️' },
+  { label: 'Bounce Rate', value: '32.1%', change: '-2.4%', icon: '📉' },
+  { label: 'Avg. Session', value: '4m 32s', change: '+8.7%', icon: '⏱️' },
+  { label: 'New Visitors', value: '8,432', change: '+18.9%', icon: '🆕' },
+];
+
+const topPages = [
+  { page: '/home', views: '24,521', percentage: 32 },
+  { page: '/products', views: '18,432', percentage: 24 },
+  { page: '/about', views: '12,841', percentage: 17 },
+  { page: '/blog', views: '9,234', percentage: 12 },
+  { page: '/contact', views: '6,128', percentage: 8 },
+  { page: '/pricing', views: '5,432', percentage: 7 },
+];
+
+export default function AnalyticsPage() {
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Analytics</h1>
+        <p>Track your website performance and user engagement.</p>
+      </div>
+
+      <div className="kpi-grid">
+        {metrics.map((m) => (
+          <div key={m.label} className="kpi-card">
+            <div className="kpi-header">
+              <span className="kpi-icon">{m.icon}</span>
+              <span className={`kpi-change ${m.change.startsWith('+') ? 'up' : 'down'}`}>{m.change}</span>
+            </div>
+            <p className="kpi-value">{m.value}</p>
+            <p className="kpi-title">{m.label}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="charts-grid">
+        <ChartPlaceholder title="Traffic Sources" type="pie" />
+        <ChartPlaceholder title="Visitor Trend" type="line" />
+      </div>
+
+      <div className="table-card">
+        <h3 className="table-title">Top Pages</h3>
+        <div className="table-wrapper">
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>Page</th>
+                <th>Views</th>
+                <th>Share</th>
+                <th>Progress</th>
+              </tr>
+            </thead>
+            <tbody>
+              {topPages.map((page) => (
+                <tr key={page.page}>
+                  <td className="order-id">{page.page}</td>
+                  <td>{page.views}</td>
+                  <td>{page.percentage}%</td>
+                  <td>
+                    <div className="progress-bar">
+                      <div className="progress-fill" style={{ width: `${page.percentage}%` }} />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/components/ChartPlaceholder.tsx

@@ -0,0 +1,58 @@
+interface ChartPlaceholderProps {
+  title: string;
+  type?: 'bar' | 'line' | 'pie';
+}
+
+export function ChartPlaceholder({ title, type = 'bar' }: ChartPlaceholderProps) {
+  const bars = [40, 65, 45, 80, 55, 70, 60, 85, 50, 75, 90, 68];
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+  return (
+    <div className="chart-card">
+      <h3 className="chart-title">{title}</h3>
+      {type === 'bar' && (
+        <div className="chart-bars">
+          {bars.map((height, i) => (
+            <div key={i} className="chart-bar-wrapper">
+              <div className="chart-bar" style={{ height: `${height}%` }} />
+              <span className="chart-label">{months[i]}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      {type === 'line' && (
+        <div className="chart-line-placeholder">
+          <svg viewBox="0 0 400 150" className="chart-svg">
+            <polyline
+              fill="none"
+              stroke="#4f46e5"
+              strokeWidth="2.5"
+              points="0,120 35,90 70,100 105,50 140,70 175,30 210,45 245,20 280,55 315,40 350,25 385,10"
+            />
+            <polyline
+              fill="rgba(79,70,229,0.1)"
+              stroke="none"
+              points="0,150 0,120 35,90 70,100 105,50 140,70 175,30 210,45 245,20 280,55 315,40 350,25 385,10 385,150"
+            />
+          </svg>
+        </div>
+      )}
+      {type === 'pie' && (
+        <div className="chart-pie-placeholder">
+          <div className="pie-chart">
+            <div className="pie-segment" style={{ '--segment-color': '#4f46e5', '--segment-percent': '35' } as React.CSSProperties}>35%</div>
+            <div className="pie-segment" style={{ '--segment-color': '#7c3aed', '--segment-percent': '25' } as React.CSSProperties}>25%</div>
+            <div className="pie-segment" style={{ '--segment-color': '#06b6d4', '--segment-percent': '20' } as React.CSSProperties}>20%</div>
+            <div className="pie-segment" style={{ '--segment-color': '#10b981', '--segment-percent': '20' } as React.CSSProperties}>20%</div>
+          </div>
+          <div className="pie-legend">
+            <div className="legend-item"><span className="legend-dot" style={{ background: '#4f46e5' }} />Direct (35%)</div>
+            <div className="legend-item"><span className="legend-dot" style={{ background: '#7c3aed' }} />Organic (25%)</div>
+            <div className="legend-item"><span className="legend-dot" style={{ background: '#06b6d4' }} />Referral (20%)</div>
+            <div className="legend-item"><span className="legend-dot" style={{ background: '#10b981' }} />Social (20%)</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/components/DataTable.tsx

@@ -0,0 +1,60 @@
+interface Order {
+  id: string;
+  customer: string;
+  product: string;
+  amount: string;
+  status: 'Completed' | 'Pending' | 'Processing' | 'Cancelled';
+  date: string;
+}
+
+const orders: Order[] = [
+  { id: 'ORD-001', customer: 'Alice Johnson', product: 'Wireless Headphones', amount: '$79.99', status: 'Completed', date: '2025-01-15' },
+  { id: 'ORD-002', customer: 'Bob Smith', product: 'Smart Watch', amount: '$199.99', status: 'Processing', date: '2025-01-15' },
+  { id: 'ORD-003', customer: 'Carol Davis', product: 'Running Shoes', amount: '$129.99', status: 'Pending', date: '2025-01-14' },
+  { id: 'ORD-004', customer: 'David Wilson', product: 'Backpack', amount: '$59.99', status: 'Completed', date: '2025-01-14' },
+  { id: 'ORD-005', customer: 'Eva Martinez', product: 'Coffee Maker', amount: '$89.99', status: 'Cancelled', date: '2025-01-13' },
+  { id: 'ORD-006', customer: 'Frank Brown', product: 'Desk Lamp', amount: '$45.99', status: 'Completed', date: '2025-01-13' },
+  { id: 'ORD-007', customer: 'Grace Lee', product: 'Yoga Mat', amount: '$34.99', status: 'Processing', date: '2025-01-12' },
+  { id: 'ORD-008', customer: 'Henry Taylor', product: 'Sunglasses', amount: '$149.99', status: 'Completed', date: '2025-01-12' },
+];
+
+interface DataTableProps {
+  title?: string;
+  limit?: number;
+}
+
+export function DataTable({ title = 'Recent Orders', limit }: DataTableProps) {
+  const displayOrders = limit ? orders.slice(0, limit) : orders;
+
+  return (
+    <div className="table-card">
+      <h3 className="table-title">{title}</h3>
+      <div className="table-wrapper">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Order ID</th>
+              <th>Customer</th>
+              <th>Product</th>
+              <th>Amount</th>
+              <th>Status</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {displayOrders.map((order) => (
+              <tr key={order.id}>
+                <td className="order-id">{order.id}</td>
+                <td>{order.customer}</td>
+                <td>{order.product}</td>
+                <td className="amount">{order.amount}</td>
+                <td><span className={`status-badge ${order.status.toLowerCase()}`}>{order.status}</span></td>
+                <td className="date">{order.date}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/components/KPICards.tsx

@@ -0,0 +1,31 @@
+interface KPI {
+  title: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down';
+  icon: string;
+}
+
+const kpis: KPI[] = [
+  { title: 'Total Revenue', value: '$48,250', change: '+12.5%', trend: 'up', icon: '💰' },
+  { title: 'Active Users', value: '2,340', change: '+8.1%', trend: 'up', icon: '👥' },
+  { title: 'Orders', value: '1,120', change: '+23.4%', trend: 'up', icon: '📦' },
+  { title: 'Conversion Rate', value: '3.2%', change: '-1.8%', trend: 'down', icon: '📈' },
+];
+
+export function KPICards() {
+  return (
+    <div className="kpi-grid">
+      {kpis.map((kpi) => (
+        <div key={kpi.title} className="kpi-card">
+          <div className="kpi-header">
+            <span className="kpi-icon">{kpi.icon}</span>
+            <span className={`kpi-change ${kpi.trend}`}>{kpi.change}</span>
+          </div>
+          <p className="kpi-value">{kpi.value}</p>
+          <p className="kpi-title">{kpi.title}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/components/Sidebar.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+  { href: '/', label: 'Overview', icon: '📊' },
+  { href: '/analytics', label: 'Analytics', icon: '📈' },
+  { href: '/users', label: 'Users', icon: '👥' },
+  { href: '/settings', label: 'Settings', icon: '⚙️' },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-header">
+        <span className="sidebar-logo">📊</span>
+        <span className="sidebar-title">{'{{projectName}}'}</span>
+      </div>
+      <nav className="sidebar-nav">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`sidebar-link ${pathname === item.href ? 'active' : ''}`}
+          >
+            <span className="sidebar-icon">{item.icon}</span>
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+      <div className="sidebar-footer">
+        <div className="user-info">
+          <div className="user-avatar">👤</div>
+          <div>
+            <p className="user-name">Admin User</p>
+            <p className="user-role">Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/globals.css

@@ -0,0 +1,150 @@
+/* === DASHBOARD TEMPLATE STYLES === */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --dark: #111827;
+  --text: #374151;
+  --text-light: #6b7280;
+  --bg: #f3f4f6;
+  --white: #ffffff;
+  --border: #e5e7eb;
+  --radius: 12px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
+  --sidebar-width: 260px;
+}
+
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
+a { text-decoration: none; color: inherit; }
+
+/* Dashboard Layout */
+.dashboard-layout { display: flex; min-height: 100vh; }
+.dashboard-main { flex: 1; margin-left: var(--sidebar-width); padding: 2rem; overflow-x: hidden; }
+
+/* Sidebar */
+.sidebar { width: var(--sidebar-width); background: var(--dark); color: var(--white); position: fixed; top: 0; left: 0; height: 100vh; display: flex; flex-direction: column; z-index: 100; }
+.sidebar-header { padding: 1.5rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #1f2937; }
+.sidebar-logo { font-size: 1.5rem; }
+.sidebar-title { font-size: 1.1rem; font-weight: 700; }
+.sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
+.sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 8px; color: #9ca3af; transition: all 0.2s; font-weight: 500; }
+.sidebar-link:hover { background: #1f2937; color: var(--white); }
+.sidebar-link.active { background: var(--primary); color: var(--white); }
+.sidebar-icon { font-size: 1.2rem; }
+.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid #1f2937; }
+.user-info { display: flex; align-items: center; gap: 0.75rem; }
+.user-avatar { font-size: 1.5rem; }
+.user-name { font-size: 0.9rem; font-weight: 600; color: var(--white); }
+.user-role { font-size: 0.75rem; color: #9ca3af; }
+
+/* Page */
+.page { max-width: 1200px; }
+.page-header { margin-bottom: 2rem; }
+.page-header h1 { font-size: 1.75rem; color: var(--dark); font-weight: 700; }
+.page-header p { color: var(--text-light); margin-top: 0.25rem; }
+
+/* KPI Cards */
+.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
+.kpi-card { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
+.kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
+.kpi-icon { font-size: 1.5rem; }
+.kpi-change { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 20px; }
+.kpi-change.up { color: #059669; background: #d1fae5; }
+.kpi-change.down { color: #dc2626; background: #fee2e2; }
+.kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--dark); }
+.kpi-title { font-size: 0.85rem; color: var(--text-light); margin-top: 0.25rem; }
+
+/* Charts */
+.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
+.chart-card { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
+.chart-title { font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: 1.25rem; }
+.chart-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 200px; padding-top: 1rem; }
+.chart-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
+.chart-bar { width: 100%; background: linear-gradient(to top, var(--primary), #818cf8); border-radius: 4px 4px 0 0; transition: height 0.3s; min-height: 4px; }
+.chart-label { font-size: 0.65rem; color: var(--text-light); margin-top: 0.35rem; }
+.chart-line-placeholder { padding: 0.5rem 0; }
+.chart-svg { width: 100%; height: 150px; }
+.chart-pie-placeholder { display: flex; align-items: center; gap: 2rem; padding: 1rem 0; }
+.pie-chart { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.pie-segment { padding: 1rem; border-radius: 8px; color: var(--white); font-weight: 700; font-size: 0.9rem; background: var(--segment-color); }
+.pie-legend { display: flex; flex-direction: column; gap: 0.5rem; }
+.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text); }
+.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+
+/* Data Table */
+.table-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 2rem; }
+.table-title { font-size: 1rem; font-weight: 600; color: var(--dark); padding: 1.25rem 1.5rem 0; margin-bottom: 1rem; }
+.table-controls { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; gap: 1rem; flex-wrap: wrap; }
+.search-input { display: flex; align-items: center; gap: 0.5rem; background: var(--bg); border-radius: 8px; padding: 0.5rem 1rem; flex: 1; max-width: 300px; }
+.search-input input { border: none; outline: none; background: transparent; font-size: 0.9rem; width: 100%; }
+.filter-group { display: flex; gap: 0.35rem; }
+.filter-btn { padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 6px; background: var(--white); cursor: pointer; font-size: 0.8rem; font-weight: 500; color: var(--text); transition: all 0.2s; }
+.filter-btn:hover, .filter-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
+.table-wrapper { overflow-x: auto; }
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th { text-align: left; padding: 0.75rem 1.5rem; font-size: 0.75rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); background: var(--bg); }
+.data-table td { padding: 0.875rem 1.5rem; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
+.data-table tbody tr:hover { background: #f9fafb; }
+.order-id { font-weight: 600; color: var(--primary); }
+.amount { font-weight: 600; }
+.date { color: var(--text-light); }
+.user-cell { display: flex; align-items: center; gap: 0.5rem; }
+.user-cell-avatar { font-size: 1.25rem; }
+
+/* Status & Role Badges */
+.status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
+.status-badge.completed, .status-badge.active { background: #d1fae5; color: #059669; }
+.status-badge.pending { background: #fef3c7; color: #d97706; }
+.status-badge.processing { background: #dbeafe; color: #2563eb; }
+.status-badge.cancelled, .status-badge.inactive { background: #fee2e2; color: #dc2626; }
+.role-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
+.role-badge.admin { background: #ede9fe; color: #7c3aed; }
+.role-badge.editor { background: #dbeafe; color: #2563eb; }
+.role-badge.viewer { background: #f3f4f6; color: #6b7280; }
+
+/* Progress Bar */
+.progress-bar { width: 100%; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
+.progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
+
+/* Settings */
+.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; }
+.settings-card { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
+.settings-card h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 1.25rem; }
+.form-group { margin-bottom: 1rem; }
+.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
+.form-group input, .form-group select { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; color: var(--text); background: var(--white); }
+.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
+.toggle-group { display: flex; flex-direction: column; gap: 1rem; }
+.toggle-row { display: flex; justify-content: space-between; align-items: center; }
+.toggle-label { font-weight: 600; color: var(--dark); font-size: 0.9rem; }
+.toggle-desc { font-size: 0.8rem; color: var(--text-light); }
+.toggle-switch { width: 48px; height: 26px; border-radius: 13px; border: none; background: #d1d5db; cursor: pointer; position: relative; transition: background 0.2s; }
+.toggle-switch.active { background: var(--primary); }
+.toggle-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--white); position: absolute; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
+.toggle-switch.active .toggle-knob { transform: translateX(22px); }
+.theme-options { display: flex; gap: 1rem; }
+.theme-option { text-align: center; cursor: pointer; }
+.theme-option.active .theme-preview { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.2); }
+.theme-preview { width: 80px; height: 55px; border-radius: 8px; border: 2px solid var(--border); margin-bottom: 0.35rem; }
+.theme-preview.light { background: var(--white); }
+.theme-preview.dark { background: #1f2937; }
+.theme-preview.system { background: linear-gradient(135deg, var(--white) 50%, #1f2937 50%); }
+.theme-option span { font-size: 0.8rem; font-weight: 500; color: var(--text); }
+
+/* Buttons */
+.btn { display: inline-block; padding: 0.625rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; font-size: 0.9rem; }
+.btn-primary { background: var(--primary); color: var(--white); }
+.btn-primary:hover { background: var(--primary-hover); }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .sidebar { width: 70px; overflow: hidden; }
+  .sidebar-title, .sidebar-link span:not(.sidebar-icon), .user-info div, .user-name, .user-role { display: none; }
+  .sidebar-header { justify-content: center; }
+  .sidebar-link { justify-content: center; padding: 0.75rem; }
+  .dashboard-main { margin-left: 70px; padding: 1rem; }
+  .charts-grid { grid-template-columns: 1fr; }
+  .settings-grid { grid-template-columns: 1fr; }
+}

package/templates/overlays/dashboard/nextjs/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import './globals.css';
+import { Sidebar } from './components/Sidebar';
+
+export const metadata = {
+  title: '{{projectName}} - Dashboard',
+  description: 'Admin dashboard for {{projectName}}',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="dashboard-layout">
+          <Sidebar />
+          <main className="dashboard-main">{children}</main>
+        </div>
+      </body>
+    </html>
+  );
+}

package/templates/overlays/dashboard/nextjs/src/app/page.tsx

@@ -0,0 +1,20 @@
+import { KPICards } from './components/KPICards';
+import { ChartPlaceholder } from './components/ChartPlaceholder';
+import { DataTable } from './components/DataTable';
+
+export default function OverviewPage() {
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Overview</h1>
+        <p>Welcome back! Here is what is happening with your business.</p>
+      </div>
+      <KPICards />
+      <div className="charts-grid">
+        <ChartPlaceholder title="Revenue Over Time" type="bar" />
+        <ChartPlaceholder title="Growth Trend" type="line" />
+      </div>
+      <DataTable title="Recent Orders" limit={5} />
+    </div>
+  );
+}