@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const orders = [
+  { id: '#3210', customer: 'Sarah Johnson', amount: '$245.00', status: 'Completed', badge: 'badge-success' },
+  { id: '#3209', customer: 'Mike Peters', amount: '$129.50', status: 'Processing', badge: 'badge-warning' },
+  { id: '#3208', customer: 'Emily Chen', amount: '$89.99', status: 'Completed', badge: 'badge-success' },
+  { id: '#3207', customer: 'James Wilson', amount: '$312.00', status: 'Cancelled', badge: 'badge-danger' },
+  { id: '#3206', customer: 'Anna Lee', amount: '$175.25', status: 'Shipped', badge: 'badge-info' },
+  { id: '#3205', customer: 'Tom Davis', amount: '$98.00', status: 'Completed', badge: 'badge-success' },
+];
+</script>
+
+<template>
+  <div class="data-table-wrapper">
+    <div class="table-header">Recent Orders</div>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Order ID</th>
+          <th>Customer</th>
+          <th>Amount</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="order in orders" :key="order.id">
+          <td>{{ order.id }}</td>
+          <td>{{ order.customer }}</td>
+          <td>{{ order.amount }}</td>
+          <td><span :class="['badge', order.badge]">{{ order.status }}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const kpis = [
+  { label: 'Total Revenue', value: '$48,250', change: '+12%', positive: true },
+  { label: 'Active Users', value: '2,420', change: '+8%', positive: true },
+  { label: 'Orders', value: '1,210', change: '-3%', positive: false },
+  { label: 'Conversion', value: '3.2%', change: '+0.5%', positive: true },
+];
+</script>
+
+<template>
+  <div class="kpi-grid">
+    <div v-for="kpi in kpis" :key="kpi.label" class="kpi-card">
+      <p class="kpi-label">{{ kpi.label }}</p>
+      <p class="kpi-value">{{ kpi.value }}</p>
+      <p :class="['kpi-change', kpi.positive ? 'positive' : 'negative']">{{ kpi.change }}</p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './style.css';
+
+createApp(App).use(router).mount('#app');

package/templates/overlays/dashboard/vue/src/pages/Analytics.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ChartPlaceholder from '../components/ChartPlaceholder.vue';
+
+const metrics = [
+  { label: 'Avg. Session', value: '4m 32s' },
+  { label: 'Bounce Rate', value: '32.1%' },
+  { label: 'Page Views', value: '18,420' },
+  { label: 'New Visitors', value: '1,105' },
+  { label: 'Top Channel', value: 'Organic' },
+  { label: 'Goal Completion', value: '68%' },
+];
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1 class="page-title">Analytics</h1>
+      <p class="page-subtitle">Detailed traffic and engagement metrics.</p>
+    </div>
+    <div class="metrics-row">
+      <div v-for="m in metrics" :key="m.label" class="metric-card">
+        <p class="metric-value">{{ m.value }}</p>
+        <p class="metric-label">{{ m.label }}</p>
+      </div>
+    </div>
+    <div class="charts-grid">
+      <ChartPlaceholder title="Traffic Sources" />
+      <ChartPlaceholder title="User Engagement" />
+    </div>
+    <ChartPlaceholder title="Weekly Active Users" />
+  </div>
+</template>

package/templates/overlays/dashboard/vue/src/pages/Overview.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import KPICards from '../components/KPICards.vue';
+import ChartPlaceholder from '../components/ChartPlaceholder.vue';
+import DataTable from '../components/DataTable.vue';
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1 class="page-title">Overview</h1>
+      <p class="page-subtitle">Welcome back. Here is what is happening today.</p>
+    </div>
+    <KPICards />
+    <ChartPlaceholder title="Monthly Revenue" />
+    <DataTable />
+  </div>
+</template>

package/templates/overlays/dashboard/vue/src/pages/Settings.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const siteName = ref('{{projectName}}');
+const email = ref('admin@example.com');
+const timezone = ref('UTC');
+const notifications = ref(true);
+const darkMode = ref(false);
+const twoFactor = ref(true);
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1 class="page-title">Settings</h1>
+      <p class="page-subtitle">Manage your application preferences.</p>
+    </div>
+    <div class="settings-form">
+      <div class="form-group">
+        <label class="form-label">Site Name</label>
+        <input v-model="siteName" type="text" class="form-input" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">Admin Email</label>
+        <input v-model="email" type="email" class="form-input" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">Timezone</label>
+        <select v-model="timezone" class="form-select">
+          <option value="UTC">UTC</option>
+          <option value="EST">Eastern (EST)</option>
+          <option value="CST">Central (CST)</option>
+          <option value="PST">Pacific (PST)</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <div class="form-toggle">
+          <div>
+            <p class="toggle-label">Email Notifications</p>
+            <p class="toggle-desc">Receive email alerts for important events</p>
+          </div>
+          <input v-model="notifications" type="checkbox" />
+        </div>
+        <div class="form-toggle">
+          <div>
+            <p class="toggle-label">Dark Mode</p>
+            <p class="toggle-desc">Use dark theme across the dashboard</p>
+          </div>
+          <input v-model="darkMode" type="checkbox" />
+        </div>
+        <div class="form-toggle">
+          <div>
+            <p class="toggle-label">Two-Factor Auth</p>
+            <p class="toggle-desc">Add an extra layer of security</p>
+          </div>
+          <input v-model="twoFactor" type="checkbox" />
+        </div>
+      </div>
+      <div class="form-actions">
+        <button class="btn-primary">Save Changes</button>
+        <button class="btn-secondary">Cancel</button>
+      </div>
+    </div>
+  </div>
+</template>

package/templates/overlays/dashboard/vue/src/pages/Users.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const users = [
+  { name: 'Sarah Johnson', email: 'sarah@example.com', role: 'Admin', status: 'Active', badge: 'badge-success', initials: 'SJ' },
+  { name: 'Mike Peters', email: 'mike@example.com', role: 'Editor', status: 'Active', badge: 'badge-success', initials: 'MP' },
+  { name: 'Emily Chen', email: 'emily@example.com', role: 'Viewer', status: 'Inactive', badge: 'badge-danger', initials: 'EC' },
+  { name: 'James Wilson', email: 'james@example.com', role: 'Editor', status: 'Active', badge: 'badge-success', initials: 'JW' },
+  { name: 'Anna Lee', email: 'anna@example.com', role: 'Admin', status: 'Active', badge: 'badge-success', initials: 'AL' },
+  { name: 'Tom Davis', email: 'tom@example.com', role: 'Viewer', status: 'Pending', badge: 'badge-warning', initials: 'TD' },
+  { name: 'Lisa Brown', email: 'lisa@example.com', role: 'Editor', status: 'Active', badge: 'badge-success', initials: 'LB' },
+];
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1 class="page-title">Users</h1>
+      <p class="page-subtitle">Manage your team members and their permissions.</p>
+    </div>
+    <div class="data-table-wrapper">
+      <div class="table-header">All Users</div>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>User</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in users" :key="user.email">
+            <td style="display:flex;align-items:center;gap:0.75rem;">
+              <span class="user-avatar">{{ user.initials }}</span>
+              {{ user.name }}
+            </td>
+            <td>{{ user.email }}</td>
+            <td>{{ user.role }}</td>
+            <td><span :class="['badge', user.badge]">{{ user.status }}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/templates/overlays/dashboard/vue/src/router.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Overview from './pages/Overview.vue';
+import Analytics from './pages/Analytics.vue';
+import Users from './pages/Users.vue';
+import Settings from './pages/Settings.vue';
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', component: Overview },
+    { path: '/analytics', component: Analytics },
+    { path: '/users', component: Users },
+    { path: '/settings', component: Settings },
+  ],
+});

package/templates/overlays/dashboard/vue/src/style.css

@@ -0,0 +1,447 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  color: #374151;
+  background: #f9fafb;
+  line-height: 1.6;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input, select, textarea {
+  font-family: inherit;
+}
+
+/* Dashboard Layout */
+.dashboard-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.dashboard-main {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 260px;
+  background: #111827;
+  color: #d1d5db;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  position: sticky;
+  top: 0;
+}
+
+.sidebar-brand {
+  padding: 1.5rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #ffffff;
+  border-bottom: 1px solid #1f2937;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+  gap: 0.25rem;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  color: #9ca3af;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.sidebar-link:hover {
+  background: #1f2937;
+  color: #ffffff;
+}
+
+.sidebar-link.router-link-exact-active {
+  background: #4f46e5;
+  color: #ffffff;
+}
+
+.sidebar-icon {
+  font-size: 1.2rem;
+  width: 24px;
+  text-align: center;
+}
+
+/* Page Header */
+.page-header {
+  margin-bottom: 2rem;
+}
+
+.page-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.page-subtitle {
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+/* KPI Cards */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.kpi-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.kpi-label {
+  font-size: 0.85rem;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.kpi-change {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-top: 0.25rem;
+}
+
+.kpi-change.positive {
+  color: #059669;
+}
+
+.kpi-change.negative {
+  color: #dc2626;
+}
+
+/* Chart Placeholder */
+.chart-container {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.chart-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 1rem;
+}
+
+.chart-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  height: 160px;
+  padding-top: 1rem;
+}
+
+.chart-bar {
+  flex: 1;
+  background: #4f46e5;
+  border-radius: 4px 4px 0 0;
+  min-width: 20px;
+  transition: opacity 0.2s;
+  position: relative;
+}
+
+.chart-bar:hover {
+  opacity: 0.8;
+}
+
+.chart-bar-label {
+  position: absolute;
+  bottom: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  color: #6b7280;
+  white-space: nowrap;
+}
+
+/* Data Table */
+.data-table-wrapper {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
+
+.table-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 600;
+  color: #111827;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.data-table td {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #f3f4f6;
+  font-size: 0.9rem;
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table tr:hover {
+  background: #f9fafb;
+}
+
+/* Status Badges */
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.badge-success {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.badge-warning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badge-danger {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.badge-info {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* Charts Grid */
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* Metric Row */
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.metric-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 1.25rem;
+  text-align: center;
+}
+
+.metric-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #4f46e5;
+}
+
+.metric-label {
+  font-size: 0.85rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+/* Settings Form */
+.settings-form {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 2rem;
+  max-width: 600px;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  color: #374151;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  color: #374151;
+  background: #ffffff;
+}
+
+.form-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.toggle-label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.toggle-desc {
+  font-size: 0.85rem;
+  color: #6b7280;
+}
+
+.btn-primary {
+  background: #4f46e5;
+  color: #ffffff;
+  border: none;
+  padding: 0.65rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 0.2s;
+}
+
+.btn-primary:hover {
+  background: #4338ca;
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  padding: 0.65rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.btn-secondary:hover {
+  background: #f9fafb;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+/* User avatar */
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #4f46e5;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+@media (max-width: 768px) {
+  .dashboard-layout {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+    min-height: auto;
+    position: relative;
+  }
+  .sidebar-nav {
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 0.5rem;
+  }
+  .sidebar-link {
+    padding: 0.5rem 1rem;
+  }
+  .charts-grid {
+    grid-template-columns: 1fr;
+  }
+}