@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/dashboard/angular/src/app/app.routes.ts

@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+import { OverviewComponent } from './pages/overview.component';
+import { AnalyticsComponent } from './pages/analytics.component';
+import { UsersComponent } from './pages/users.component';
+import { SettingsComponent } from './pages/settings.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: OverviewComponent,
+  },
+  {
+    path: 'analytics',
+    component: AnalyticsComponent,
+  },
+  {
+    path: 'users',
+    component: UsersComponent,
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+  },
+];

package/templates/overlays/dashboard/angular/src/app/components/chart-placeholder.component.ts

@@ -0,0 +1,86 @@
+import { Component, Input } from '@angular/core';
+
+interface ChartBar {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: 'app-chart-placeholder',
+  standalone: true,
+  template: `
+    <div class="chart-card">
+      <h3 class="chart-card-title">{{ title }}</h3>
+      <div class="chart-card-bars">
+        @for (bar of bars; track $index) {
+          <div class="chart-card-bar-col">
+            <div
+              class="chart-card-bar"
+              [style.height.%]="bar.value"
+            ></div>
+            <span class="chart-card-bar-label">{{ bar.label }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .chart-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      border: 1px solid #e5e7eb;
+    }
+
+    .chart-card-title {
+      font-size: 1rem;
+      color: #111827;
+      margin-bottom: 1rem;
+    }
+
+    .chart-card-bars {
+      display: flex;
+      align-items: flex-end;
+      gap: 0.5rem;
+      height: 160px;
+      padding-top: 0.5rem;
+    }
+
+    .chart-card-bar-col {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      justify-content: flex-end;
+    }
+
+    .chart-card-bar {
+      width: 100%;
+      max-width: 40px;
+      background: #4f46e5;
+      border-radius: 4px 4px 0 0;
+      transition: height 0.3s;
+      min-height: 4px;
+    }
+
+    .chart-card-bar-label {
+      font-size: 0.7rem;
+      color: #6b7280;
+      margin-top: 0.35rem;
+    }
+  `]
+})
+export class ChartPlaceholderComponent {
+  @Input() title = 'Chart';
+
+  @Input() bars: ChartBar[] = [
+    { label: 'Mon', value: 65 },
+    { label: 'Tue', value: 80 },
+    { label: 'Wed', value: 45 },
+    { label: 'Thu', value: 90 },
+    { label: 'Fri', value: 70 },
+    { label: 'Sat', value: 55 },
+    { label: 'Sun', value: 40 },
+  ];
+}

package/templates/overlays/dashboard/angular/src/app/components/data-table.component.ts

@@ -0,0 +1,140 @@
+import { Component } from '@angular/core';
+
+interface OrderItem {
+  id: number;
+  customer: string;
+  amount: string;
+  status: 'Completed' | 'Shipped' | 'Pending' | 'Cancelled';
+}
+
+@Component({
+  selector: 'app-data-table',
+  standalone: true,
+  template: `
+    <div class="orders-table-card">
+      <h3 class="orders-table-title">Recent Orders</h3>
+      <table class="orders-table">
+        <thead>
+          <tr>
+            <th>Order</th>
+            <th>Customer</th>
+            <th>Amount</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (order of orders; track order.id) {
+            <tr>
+              <td>#{{ order.id }}</td>
+              <td>{{ order.customer }}</td>
+              <td>{{ order.amount }}</td>
+              <td>
+                <span
+                  class="orders-table-badge"
+                  [class]="order.status.toLowerCase()"
+                >
+                  {{ order.status }}
+                </span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+  styles: [`
+    .orders-table-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      border: 1px solid #e5e7eb;
+    }
+
+    .orders-table-title {
+      font-size: 1rem;
+      color: #111827;
+      margin-bottom: 1rem;
+    }
+
+    .orders-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .orders-table th {
+      text-align: left;
+      padding: 0.6rem;
+      font-size: 0.75rem;
+      color: #6b7280;
+      text-transform: uppercase;
+      border-bottom: 2px solid #e5e7eb;
+    }
+
+    .orders-table td {
+      padding: 0.75rem 0.6rem;
+      border-bottom: 1px solid #f3f4f6;
+      font-size: 0.875rem;
+    }
+
+    .orders-table-badge {
+      padding: 0.2rem 0.6rem;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .completed {
+      background: #d1fae5;
+      color: #059669;
+    }
+
+    .pending {
+      background: #fef3c7;
+      color: #d97706;
+    }
+
+    .shipped {
+      background: #dbeafe;
+      color: #2563eb;
+    }
+
+    .cancelled {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+  `]
+})
+export class DataTableComponent {
+  orders: OrderItem[] = [
+    {
+      id: 1041,
+      customer: 'Alice Johnson',
+      amount: '$125.00',
+      status: 'Completed',
+    },
+    {
+      id: 1040,
+      customer: 'Bob Smith',
+      amount: '$89.50',
+      status: 'Shipped',
+    },
+    {
+      id: 1039,
+      customer: 'Carol Davis',
+      amount: '$245.00',
+      status: 'Pending',
+    },
+    {
+      id: 1038,
+      customer: 'Dan Wilson',
+      amount: '$67.25',
+      status: 'Completed',
+    },
+    {
+      id: 1037,
+      customer: 'Eve Martinez',
+      amount: '$312.00',
+      status: 'Cancelled',
+    },
+  ];
+}

package/templates/overlays/dashboard/angular/src/app/components/kpi-cards.component.ts

@@ -0,0 +1,120 @@
+import { Component } from '@angular/core';
+
+interface KpiItem {
+  icon: string;
+  label: string;
+  value: string;
+  change: string;
+  positive: boolean;
+}
+
+@Component({
+  selector: 'app-kpi-cards',
+  standalone: true,
+  template: `
+    <div class="kpi-grid">
+      @for (kpi of kpis; track kpi.label) {
+        <div class="kpi-grid-card">
+          <span class="kpi-grid-icon">{{ kpi.icon }}</span>
+          <div class="kpi-grid-info">
+            <p class="kpi-grid-label">{{ kpi.label }}</p>
+            <p class="kpi-grid-value">{{ kpi.value }}</p>
+            <p
+              class="kpi-grid-change"
+              [class.positive]="kpi.positive"
+              [class.negative]="!kpi.positive"
+            >
+              {{ kpi.change }}
+            </p>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    .kpi-grid-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      border: 1px solid #e5e7eb;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .kpi-grid-icon {
+      font-size: 2rem;
+    }
+
+    .kpi-grid-label {
+      font-size: 0.8rem;
+      color: #6b7280;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    .kpi-grid-value {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #111827;
+    }
+
+    .kpi-grid-change {
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    .positive {
+      color: #059669;
+    }
+
+    .negative {
+      color: #dc2626;
+    }
+
+    @media (max-width: 768px) {
+      .kpi-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `]
+})
+export class KpiCardsComponent {
+  kpis: KpiItem[] = [
+    {
+      icon: '💰',
+      label: 'Total Revenue',
+      value: '$48,250',
+      change: '+12%',
+      positive: true,
+    },
+    {
+      icon: '👤',
+      label: 'Active Users',
+      value: '2,420',
+      change: '+8%',
+      positive: true,
+    },
+    {
+      icon: '📦',
+      label: 'Orders',
+      value: '1,210',
+      change: '-3%',
+      positive: false,
+    },
+    {
+      icon: '📊',
+      label: 'Conversion',
+      value: '3.2%',
+      change: '+0.5%',
+      positive: true,
+    },
+  ];
+}

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

@@ -0,0 +1,138 @@
+import { Component } from '@angular/core';
+import { ChartPlaceholderComponent } from '../components/chart-placeholder.component';
+
+interface AnalyticsMetric {
+  label: string;
+  value: string;
+}
+
+interface ChartBar {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: 'app-analytics',
+  standalone: true,
+  imports: [ChartPlaceholderComponent],
+  template: `
+    <h1 class="analytics-heading">Analytics</h1>
+    <div class="analytics-metrics-grid">
+      @for (metric of metrics; track metric.label) {
+        <div class="analytics-metric-card">
+          <p class="analytics-metric-label">{{ metric.label }}</p>
+          <p class="analytics-metric-value">{{ metric.value }}</p>
+        </div>
+      }
+    </div>
+    <div class="analytics-charts-grid">
+      <app-chart-placeholder title="Page Views" [bars]="pageViews" />
+      <app-chart-placeholder title="Bounce Rate (%)" [bars]="bounceRate" />
+      <app-chart-placeholder
+        title="Session Duration (min)"
+        [bars]="sessionDuration"
+      />
+      <app-chart-placeholder title="Conversions" [bars]="conversions" />
+    </div>
+  `,
+  styles: [`
+    .analytics-heading {
+      font-size: 1.5rem;
+      color: #111827;
+      margin-bottom: 1.5rem;
+    }
+
+    .analytics-metrics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .analytics-metric-card {
+      background: #fff;
+      padding: 1rem;
+      border-radius: 12px;
+      border: 1px solid #e5e7eb;
+      text-align: center;
+    }
+
+    .analytics-metric-label {
+      font-size: 0.8rem;
+      color: #6b7280;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    .analytics-metric-value {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #4f46e5;
+      margin-top: 0.25rem;
+    }
+
+    .analytics-charts-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+
+    @media (max-width: 768px) {
+      .analytics-metrics-grid {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .analytics-charts-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `]
+})
+export class AnalyticsComponent {
+  metrics: AnalyticsMetric[] = [
+    { label: 'Avg. Session', value: '4m 32s' },
+    { label: 'Bounce Rate', value: '38.2%' },
+    { label: 'Page Views', value: '18,420' },
+    { label: 'New Users', value: '1,205' },
+  ];
+
+  pageViews: ChartBar[] = [
+    { label: 'Mon', value: 70 },
+    { label: 'Tue', value: 85 },
+    { label: 'Wed', value: 60 },
+    { label: 'Thu', value: 90 },
+    { label: 'Fri', value: 75 },
+    { label: 'Sat', value: 50 },
+    { label: 'Sun', value: 35 },
+  ];
+
+  bounceRate: ChartBar[] = [
+    { label: 'Mon', value: 40 },
+    { label: 'Tue', value: 35 },
+    { label: 'Wed', value: 50 },
+    { label: 'Thu', value: 30 },
+    { label: 'Fri', value: 45 },
+    { label: 'Sat', value: 55 },
+    { label: 'Sun', value: 60 },
+  ];
+
+  sessionDuration: ChartBar[] = [
+    { label: 'Mon', value: 55 },
+    { label: 'Tue', value: 70 },
+    { label: 'Wed', value: 45 },
+    { label: 'Thu', value: 80 },
+    { label: 'Fri', value: 65 },
+    { label: 'Sat', value: 40 },
+    { label: 'Sun', value: 30 },
+  ];
+
+  conversions: ChartBar[] = [
+    { label: 'Mon', value: 45 },
+    { label: 'Tue', value: 60 },
+    { label: 'Wed', value: 55 },
+    { label: 'Thu', value: 75 },
+    { label: 'Fri', value: 80 },
+    { label: 'Sat', value: 35 },
+    { label: 'Sun', value: 25 },
+  ];
+}

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

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { KpiCardsComponent } from '../components/kpi-cards.component';
+import { ChartPlaceholderComponent } from '../components/chart-placeholder.component';
+import { DataTableComponent } from '../components/data-table.component';
+
+interface ChartBar {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: 'app-overview',
+  standalone: true,
+  imports: [KpiCardsComponent, ChartPlaceholderComponent, DataTableComponent],
+  template: `
+    <h1 class="overview-heading">Overview</h1>
+    <app-kpi-cards />
+    <div class="overview-charts-row">
+      <app-chart-placeholder title="Revenue (Last 7 Days)" />
+      <app-chart-placeholder
+        title="Orders (Last 7 Days)"
+        [bars]="orderBars"
+      />
+    </div>
+    <app-data-table />
+  `,
+  styles: [`
+    .overview-heading {
+      font-size: 1.5rem;
+      color: #111827;
+      margin-bottom: 1.5rem;
+    }
+
+    .overview-charts-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+      .overview-charts-row {
+        grid-template-columns: 1fr;
+      }
+    }
+  `]
+})
+export class OverviewComponent {
+  orderBars: ChartBar[] = [
+    { label: 'Mon', value: 50 },
+    { label: 'Tue', value: 75 },
+    { label: 'Wed', value: 60 },
+    { label: 'Thu', value: 85 },
+    { label: 'Fri', value: 95 },
+    { label: 'Sat', value: 40 },
+    { label: 'Sun', value: 30 },
+  ];
+}

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

@@ -0,0 +1,128 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  template: `
+    <h1 class="settings-heading">Settings</h1>
+    <div class="settings-card">
+      <h2 class="settings-section-title">Profile</h2>
+      <div class="settings-form-group">
+        <label class="settings-label">Display Name</label>
+        <input type="text" value="Admin User" />
+      </div>
+      <div class="settings-form-group">
+        <label class="settings-label">Email</label>
+        <input type="email" value="admin@example.com" />
+      </div>
+      <h2 class="settings-section-title">Preferences</h2>
+      <div class="settings-form-group settings-toggle-row">
+        <label class="settings-label">Email Notifications</label>
+        <input type="checkbox" checked />
+      </div>
+      <div class="settings-form-group settings-toggle-row">
+        <label class="settings-label">Dark Mode</label>
+        <input type="checkbox" />
+      </div>
+      <div class="settings-form-group">
+        <label class="settings-label">Language</label>
+        <select>
+          <option>English</option>
+          <option>Spanish</option>
+          <option>French</option>
+        </select>
+      </div>
+      <button class="settings-save-btn">Save Changes</button>
+    </div>
+  `,
+  styles: [`
+    .settings-heading {
+      font-size: 1.5rem;
+      color: #111827;
+      margin-bottom: 1.5rem;
+    }
+
+    .settings-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.5rem;
+      border: 1px solid #e5e7eb;
+      max-width: 600px;
+    }
+
+    .settings-section-title {
+      font-size: 1.1rem;
+      color: #111827;
+      margin: 1.25rem 0 0.75rem;
+      padding-top: 0.75rem;
+      border-top: 1px solid #f3f4f6;
+    }
+
+    .settings-section-title:first-of-type {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+
+    .settings-form-group {
+      margin-bottom: 1rem;
+    }
+
+    .settings-label {
+      display: block;
+      font-size: 0.85rem;
+      color: #374151;
+      font-weight: 500;
+      margin-bottom: 0.35rem;
+    }
+
+    .settings-card input[type="text"],
+    .settings-card input[type="email"],
+    .settings-card select {
+      width: 100%;
+      padding: 0.6rem 0.75rem;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 0.9rem;
+    }
+
+    .settings-card input:focus,
+    .settings-card select:focus {
+      outline: none;
+      border-color: #4f46e5;
+      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
+    }
+
+    .settings-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .settings-toggle-row .settings-label {
+      margin-bottom: 0;
+    }
+
+    .settings-toggle-row input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: #4f46e5;
+    }
+
+    .settings-save-btn {
+      margin-top: 1rem;
+      padding: 0.7rem 1.5rem;
+      background: #4f46e5;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .settings-save-btn:hover {
+      background: #4338ca;
+    }
+  `]
+})
+export class SettingsComponent {}