@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

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

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function SettingsPage() {
+  const [siteName, setSiteName] = useState('{{projectName}}');
+  const [email, setEmail] = useState('admin@example.com');
+  const [notifications, setNotifications] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [language, setLanguage] = useState('en');
+  const [timezone, setTimezone] = useState('UTC');
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Settings</h1>
+        <p>Manage your application preferences and configuration.</p>
+      </div>
+
+      <div className="settings-grid">
+        <div className="settings-card">
+          <h3>⚙️ General</h3>
+          <div className="form-group">
+            <label>Site Name</label>
+            <input type="text" value={siteName} onChange={(e) => setSiteName(e.target.value)} />
+          </div>
+          <div className="form-group">
+            <label>Admin Email</label>
+            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div className="form-group">
+            <label>Language</label>
+            <select value={language} onChange={(e) => setLanguage(e.target.value)}>
+              <option value="en">English</option>
+              <option value="es">Spanish</option>
+              <option value="fr">French</option>
+              <option value="de">German</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>Timezone</label>
+            <select value={timezone} onChange={(e) => setTimezone(e.target.value)}>
+              <option value="UTC">UTC</option>
+              <option value="EST">Eastern Time</option>
+              <option value="PST">Pacific Time</option>
+              <option value="CET">Central European</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="settings-card">
+          <h3>🔔 Notifications</h3>
+          <div className="toggle-group">
+            <div className="toggle-row">
+              <div>
+                <p className="toggle-label">Email Notifications</p>
+                <p className="toggle-desc">Receive email updates about activity</p>
+              </div>
+              <button
+                className={`toggle-switch ${notifications ? 'active' : ''}`}
+                onClick={() => setNotifications(!notifications)}
+              >
+                <span className="toggle-knob" />
+              </button>
+            </div>
+            <div className="toggle-row">
+              <div>
+                <p className="toggle-label">Dark Mode</p>
+                <p className="toggle-desc">Use dark theme for the dashboard</p>
+              </div>
+              <button
+                className={`toggle-switch ${darkMode ? 'active' : ''}`}
+                onClick={() => setDarkMode(!darkMode)}
+              >
+                <span className="toggle-knob" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="settings-card">
+          <h3>🔒 Security</h3>
+          <div className="form-group">
+            <label>Current Password</label>
+            <input type="password" placeholder="Enter current password" />
+          </div>
+          <div className="form-group">
+            <label>New Password</label>
+            <input type="password" placeholder="Enter new password" />
+          </div>
+          <div className="form-group">
+            <label>Confirm Password</label>
+            <input type="password" placeholder="Confirm new password" />
+          </div>
+          <button className="btn btn-primary">Update Password</button>
+        </div>
+
+        <div className="settings-card">
+          <h3>🎨 Appearance</h3>
+          <div className="theme-options">
+            <div className="theme-option active">
+              <div className="theme-preview light" />
+              <span>Light</span>
+            </div>
+            <div className="theme-option">
+              <div className="theme-preview dark" />
+              <span>Dark</span>
+            </div>
+            <div className="theme-option">
+              <div className="theme-preview system" />
+              <span>System</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'Active' | 'Inactive';
+  joined: string;
+  avatar: string;
+}
+
+const users: User[] = [
+  { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active', joined: '2024-06-15', avatar: '👩' },
+  { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'Editor', status: 'Active', joined: '2024-07-22', avatar: '👨' },
+  { id: 3, name: 'Carol Davis', email: 'carol@example.com', role: 'Viewer', status: 'Active', joined: '2024-08-10', avatar: '👩' },
+  { id: 4, name: 'David Wilson', email: 'david@example.com', role: 'Editor', status: 'Inactive', joined: '2024-09-05', avatar: '👨' },
+  { id: 5, name: 'Eva Martinez', email: 'eva@example.com', role: 'Admin', status: 'Active', joined: '2024-10-18', avatar: '👩' },
+  { id: 6, name: 'Frank Brown', email: 'frank@example.com', role: 'Viewer', status: 'Active', joined: '2024-11-02', avatar: '👨' },
+  { id: 7, name: 'Grace Lee', email: 'grace@example.com', role: 'Editor', status: 'Inactive', joined: '2024-11-20', avatar: '👩' },
+  { id: 8, name: 'Henry Taylor', email: 'henry@example.com', role: 'Viewer', status: 'Active', joined: '2025-01-08', avatar: '👨' },
+];
+
+export default function UsersPage() {
+  const [search, setSearch] = useState('');
+  const [roleFilter, setRoleFilter] = useState('All');
+
+  const filtered = users.filter((u) => {
+    const matchesSearch = u.name.toLowerCase().includes(search.toLowerCase()) || u.email.toLowerCase().includes(search.toLowerCase());
+    const matchesRole = roleFilter === 'All' || u.role === roleFilter;
+    return matchesSearch && matchesRole;
+  });
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Users</h1>
+        <p>Manage your team members and their permissions.</p>
+      </div>
+
+      <div className="table-card">
+        <div className="table-controls">
+          <div className="search-input">
+            <span>🔍</span>
+            <input
+              type="text"
+              placeholder="Search users..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <div className="filter-group">
+            {['All', 'Admin', 'Editor', 'Viewer'].map((role) => (
+              <button
+                key={role}
+                className={`filter-btn ${roleFilter === role ? 'active' : ''}`}
+                onClick={() => setRoleFilter(role)}
+              >
+                {role}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="table-wrapper">
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Email</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th>Joined</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((user) => (
+                <tr key={user.id}>
+                  <td>
+                    <div className="user-cell">
+                      <span className="user-cell-avatar">{user.avatar}</span>
+                      <span>{user.name}</span>
+                    </div>
+                  </td>
+                  <td>{user.email}</td>
+                  <td><span className={`role-badge ${user.role.toLowerCase()}`}>{user.role}</span></td>
+                  <td><span className={`status-badge ${user.status.toLowerCase()}`}>{user.status}</span></td>
+                  <td className="date">{user.joined}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/dashboard/nuxt/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: #374151;
+  background-color: #f3f4f6;
+  line-height: 1.6;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

package/templates/overlays/dashboard/nuxt/components/ChartPlaceholder.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+
+const bars = [
+  { label: 'Mon', height: 65 },
+  { label: 'Tue', height: 80 },
+  { label: 'Wed', height: 45 },
+  { label: 'Thu', height: 90 },
+  { label: 'Fri', height: 70 },
+  { label: 'Sat', height: 55 },
+  { label: 'Sun', height: 75 },
+];
+</script>
+
+<template>
+  <div class="chart-card">
+    <h3 class="chart-title">{{ title }}</h3>
+    <div class="chart-area">
+      <div v-for="bar in bars" :key="bar.label" class="bar-wrapper">
+        <div class="bar" :style="{ height: bar.height + '%' }"></div>
+        <span class="bar-label">{{ bar.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chart-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.chart-title {
+  font-size: 1.1rem;
+  color: #111827;
+  margin-bottom: 1.5rem;
+}
+
+.chart-area {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  height: 200px;
+  padding-top: 1rem;
+}
+
+.bar-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.bar {
+  width: 100%;
+  max-width: 40px;
+  background: linear-gradient(180deg, #4f46e5, #818cf8);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+}
+
+.bar-label {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.5rem;
+}
+</style>

package/templates/overlays/dashboard/nuxt/components/DashSidebar.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const navItems = [
+  { path: '/', label: 'Overview', icon: '📊' },
+  { path: '/analytics', label: 'Analytics', icon: '📈' },
+  { path: '/users', label: 'Users', icon: '👥' },
+  { path: '/settings', label: 'Settings', icon: '⚙️' },
+];
+</script>
+
+<template>
+  <aside class="dash-sidebar">
+    <div class="sidebar-logo">
+      <span class="logo-icon">📋</span>
+      <span class="logo-text">{{projectName}}</span>
+    </div>
+
+    <nav class="sidebar-nav">
+      <NuxtLink
+        v-for="item in navItems"
+        :key="item.path"
+        :to="item.path"
+        :class="['nav-item', { active: route.path === item.path }]"
+      >
+        <span class="nav-icon">{{ item.icon }}</span>
+        <span class="nav-label">{{ item.label }}</span>
+      </NuxtLink>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.dash-sidebar {
+  width: 250px;
+  background: #111827;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.sidebar-logo {
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border-bottom: 1px solid #1f2937;
+}
+
+.logo-icon {
+  font-size: 1.5rem;
+}
+
+.logo-text {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.sidebar-nav {
+  padding: 1rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  color: #9ca3af;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.nav-item:hover {
+  background: #1f2937;
+  color: white;
+}
+
+.nav-item.active {
+  background: #4f46e5;
+  color: white;
+}
+
+.nav-icon {
+  font-size: 1.15rem;
+}
+
+.nav-label {
+  font-size: 0.95rem;
+}
+</style>

package/templates/overlays/dashboard/nuxt/components/DataTable.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+const orders = [
+  { id: '#ORD-001', customer: 'Alice Johnson', product: 'Wireless Headphones', amount: '$79.99', status: 'Completed', date: '2024-01-15' },
+  { id: '#ORD-002', customer: 'Bob Smith', product: 'Running Shoes', amount: '$129.99', status: 'Processing', date: '2024-01-14' },
+  { id: '#ORD-003', customer: 'Carol Williams', product: 'Coffee Maker', amount: '$49.99', status: 'Completed', date: '2024-01-14' },
+  { id: '#ORD-004', customer: 'David Brown', product: 'Backpack', amount: '$59.99', status: 'Shipped', date: '2024-01-13' },
+  { id: '#ORD-005', customer: 'Eva Martinez', product: 'Smartwatch', amount: '$199.99', status: 'Pending', date: '2024-01-13' },
+];
+</script>
+
+<template>
+  <div class="table-card">
+    <h3 class="table-title">Recent Orders</h3>
+    <div class="table-wrapper">
+      <table class="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>
+          <tr v-for="order in orders" :key="order.id">
+            <td class="order-id">{{ order.id }}</td>
+            <td>{{ order.customer }}</td>
+            <td>{{ order.product }}</td>
+            <td class="amount">{{ order.amount }}</td>
+            <td>
+              <span :class="['status-badge', order.status.toLowerCase()]">
+                {{ order.status }}
+              </span>
+            </td>
+            <td class="date">{{ order.date }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.table-title {
+  font-size: 1.1rem;
+  color: #111827;
+  margin-bottom: 1rem;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.data-table td {
+  padding: 0.875rem 1rem;
+  font-size: 0.9rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.order-id {
+  font-weight: 600;
+  color: #4f46e5;
+}
+
+.amount {
+  font-weight: 600;
+  color: #111827;
+}
+
+.date {
+  color: #6b7280;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 0.2rem 0.65rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.status-badge.completed {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.status-badge.processing {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.status-badge.shipped {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.status-badge.pending {
+  background: #f3f4f6;
+  color: #374151;
+}
+</style>

package/templates/overlays/dashboard/nuxt/components/KPICards.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const kpis = [
+  { label: 'Total Revenue', value: '$54,230', change: '+12.5%', icon: '💰', positive: true },
+  { label: 'Active Users', value: '2,345', change: '+8.1%', icon: '👥', positive: true },
+  { label: 'Orders', value: '1,247', change: '+23.4%', icon: '📦', positive: true },
+  { label: 'Conversion', value: '3.24%', change: '-0.8%', icon: '📈', positive: false },
+];
+</script>
+
+<template>
+  <div class="kpi-grid">
+    <div v-for="kpi in kpis" :key="kpi.label" class="kpi-card">
+      <div class="kpi-header">
+        <span class="kpi-label">{{ kpi.label }}</span>
+        <span class="kpi-icon">{{ kpi.icon }}</span>
+      </div>
+      <p class="kpi-value">{{ kpi.value }}</p>
+      <p :class="['kpi-change', kpi.positive ? 'positive' : 'negative']">
+        {{ kpi.change }} from last month
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.25rem;
+  margin-bottom: 2rem;
+}
+
+.kpi-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.kpi-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.kpi-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.kpi-icon {
+  font-size: 1.5rem;
+}
+
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 0.35rem;
+}
+
+.kpi-change {
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.kpi-change.positive {
+  color: #10b981;
+}
+
+.kpi-change.negative {
+  color: #ef4444;
+}
+</style>

package/templates/overlays/dashboard/nuxt/layouts/default.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="dash-layout">
+    <DashSidebar />
+    <main class="dash-main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style>
+.dash-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.dash-main {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+</style>