@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/crm/vue/src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import CrmSidebar from './components/CrmSidebar.vue'
+</script>
+
+<template>
+  <div class="crm-layout">
+    <CrmSidebar />
+    <main class="crm-main">
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.crm-layout {
+  display: flex;
+  min-height: 100vh;
+}
+.crm-main {
+  flex: 1;
+  padding: 2rem;
+  background: #f9fafb;
+  overflow-y: auto;
+}
+</style>

package/templates/overlays/crm/vue/src/components/ContactsTable.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Contact } from '../data'
+
+defineProps<{ contacts: Contact[] }>()
+</script>
+
+<template>
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Email</th>
+          <th>Company</th>
+          <th>Phone</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="contact in contacts" :key="contact.id">
+          <td>{{ contact.name }}</td>
+          <td>{{ contact.email }}</td>
+          <td>{{ contact.company }}</td>
+          <td>{{ contact.phone }}</td>
+          <td><span class="status-badge" :class="contact.status">{{ contact.status }}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/templates/overlays/crm/vue/src/components/CrmSidebar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <aside class="crm-sidebar">
+    <div class="logo">{{projectName}}</div>
+    <nav>
+      <RouterLink to="/">📊 Dashboard</RouterLink>
+      <RouterLink to="/contacts">👤 Contacts</RouterLink>
+      <RouterLink to="/deals">💼 Deals</RouterLink>
+      <RouterLink to="/settings">⚙️ Settings</RouterLink>
+    </nav>
+  </aside>
+</template>

package/templates/overlays/crm/vue/src/components/StatsCards.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Contact } from '../data'
+
+const props = defineProps<{ contacts: Contact[] }>()
+
+const stats = computed(() => [
+  { icon: '👥', label: 'Total', value: props.contacts.length },
+  { icon: '🔵', label: 'Leads', value: props.contacts.filter(c => c.status === 'Lead').length },
+  { icon: '🟢', label: 'Customers', value: props.contacts.filter(c => c.status === 'Customer').length },
+  { icon: '🔴', label: 'Churned', value: props.contacts.filter(c => c.status === 'Churned').length },
+])
+</script>
+
+<template>
+  <div class="stats-grid">
+    <div v-for="stat in stats" :key="stat.label" class="stat-card">
+      <div class="stat-icon">{{ stat.icon }}</div>
+      <div class="stat-label">{{ stat.label }}</div>
+      <div class="stat-value">{{ stat.value }}</div>
+    </div>
+  </div>
+</template>

package/templates/overlays/crm/vue/src/data.ts

@@ -0,0 +1,38 @@
+export interface Contact {
+  id: number
+  name: string
+  email: string
+  company: string
+  status: 'Lead' | 'Prospect' | 'Customer' | 'Churned'
+  phone: string
+}
+
+export interface Deal {
+  id: number
+  name: string
+  value: number
+  company: string
+  stage: 'Prospect' | 'Qualified' | 'Proposal' | 'Won'
+}
+
+export const contacts: Contact[] = [
+  { id: 1, name: 'Alice Johnson', email: 'alice@techco.com', company: 'TechCo', status: 'Customer', phone: '555-0101' },
+  { id: 2, name: 'Bob Smith', email: 'bob@startupinc.com', company: 'StartupInc', status: 'Lead', phone: '555-0102' },
+  { id: 3, name: 'Carol Davis', email: 'carol@bigcorp.com', company: 'BigCorp', status: 'Prospect', phone: '555-0103' },
+  { id: 4, name: 'Dan Wilson', email: 'dan@webflow.io', company: 'WebFlow', status: 'Customer', phone: '555-0104' },
+  { id: 5, name: 'Eve Martinez', email: 'eve@designlab.co', company: 'DesignLab', status: 'Lead', phone: '555-0105' },
+  { id: 6, name: 'Frank Lee', email: 'frank@cloudnet.com', company: 'CloudNet', status: 'Churned', phone: '555-0106' },
+  { id: 7, name: 'Grace Kim', email: 'grace@appworks.dev', company: 'AppWorks', status: 'Customer', phone: '555-0107' },
+  { id: 8, name: 'Hank Brown', email: 'hank@datawise.io', company: 'DataWise', status: 'Prospect', phone: '555-0108' },
+]
+
+export const deals: Deal[] = [
+  { id: 1, name: 'Enterprise License', value: 45000, company: 'TechCo', stage: 'Won' },
+  { id: 2, name: 'Starter Plan', value: 5000, company: 'StartupInc', stage: 'Prospect' },
+  { id: 3, name: 'Pro Upgrade', value: 18000, company: 'BigCorp', stage: 'Qualified' },
+  { id: 4, name: 'Annual Contract', value: 32000, company: 'WebFlow', stage: 'Proposal' },
+  { id: 5, name: 'Team License', value: 12000, company: 'DesignLab', stage: 'Prospect' },
+  { id: 6, name: 'Custom Solution', value: 60000, company: 'AppWorks', stage: 'Qualified' },
+  { id: 7, name: 'Basic Plan', value: 3000, company: 'DataWise', stage: 'Proposal' },
+  { id: 8, name: 'Premium Tier', value: 25000, company: 'CloudNet', stage: 'Won' },
+]

package/templates/overlays/crm/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/crm/vue/src/pages/Contacts.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ContactsTable from '../components/ContactsTable.vue'
+import { contacts } from '../data'
+
+const search = ref('')
+
+const filtered = computed(() =>
+  contacts.filter(c =>
+    c.name.toLowerCase().includes(search.value.toLowerCase()) ||
+    c.company.toLowerCase().includes(search.value.toLowerCase())
+  )
+)
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Contacts</h1>
+      <p>Manage your contacts and leads</p>
+    </div>
+    <input v-model="search" class="search-input" placeholder="Search contacts..." />
+    <ContactsTable :contacts="filtered" />
+  </div>
+</template>

package/templates/overlays/crm/vue/src/pages/DashboardHome.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import StatsCards from '../components/StatsCards.vue'
+import ContactsTable from '../components/ContactsTable.vue'
+import { contacts } from '../data'
+
+const recentContacts = contacts.slice(0, 5)
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Dashboard</h1>
+      <p>Overview of your CRM activity</p>
+    </div>
+    <StatsCards :contacts="contacts" />
+    <h2 style="font-size: 1.1rem; color: #111827; margin-bottom: 0.75rem;">Recent Contacts</h2>
+    <ContactsTable :contacts="recentContacts" />
+  </div>
+</template>

package/templates/overlays/crm/vue/src/pages/Deals.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { deals } from '../data'
+
+const stages = ['Prospect', 'Qualified', 'Proposal', 'Won'] as const
+
+const columns = computed(() =>
+  stages.map(stage => ({
+    stage,
+    deals: deals.filter(d => d.stage === stage),
+  }))
+)
+
+const formatValue = (v: number) => `$${v.toLocaleString()}`
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Deals</h1>
+      <p>Track your sales pipeline</p>
+    </div>
+    <div class="deals-board">
+      <div v-for="col in columns" :key="col.stage" class="deal-column">
+        <h3>{{ col.stage }}</h3>
+        <div v-for="deal in col.deals" :key="deal.id" class="deal-card">
+          <div class="deal-name">{{ deal.name }}</div>
+          <div class="deal-company">{{ deal.company }}</div>
+          <div class="deal-value">{{ formatValue(deal.value) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const companyName = ref('My Company')
+const email = ref('admin@company.com')
+const saved = ref(false)
+
+const save = () => {
+  saved.value = true
+  setTimeout(() => (saved.value = false), 2000)
+}
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Settings</h1>
+      <p>Manage your CRM preferences</p>
+    </div>
+    <div class="settings-form">
+      <div class="form-group">
+        <label>Company Name</label>
+        <input v-model="companyName" type="text" />
+      </div>
+      <div class="form-group">
+        <label>Email Address</label>
+        <input v-model="email" type="email" />
+      </div>
+      <button class="btn-primary" @click="save">Save Changes</button>
+      <p v-if="saved" style="color: #059669; margin-top: 0.75rem; font-size: 0.85rem;">Settings saved successfully!</p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DashboardHome from './pages/DashboardHome.vue'
+import Contacts from './pages/Contacts.vue'
+import Deals from './pages/Deals.vue'
+import Settings from './pages/Settings.vue'
+
+const routes = [
+  { path: '/', component: DashboardHome },
+  { path: '/contacts', component: Contacts },
+  { path: '/deals', component: Deals },
+  { path: '/settings', component: Settings },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

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

@@ -0,0 +1,272 @@
+/* CRM Global Styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #374151;
+  background: #f9fafb;
+  line-height: 1.6;
+}
+
+/* Sidebar */
+.crm-sidebar {
+  width: 240px;
+  background: #111827;
+  color: #fff;
+  padding: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.crm-sidebar .logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 0 1.5rem 1.5rem;
+  border-bottom: 1px solid #1f2937;
+  color: #fff;
+}
+
+.crm-sidebar nav {
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.crm-sidebar nav a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  color: #9ca3af;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background 0.2s, color 0.2s;
+}
+
+.crm-sidebar nav a:hover,
+.crm-sidebar nav a.router-link-exact-active {
+  background: #1f2937;
+  color: #fff;
+}
+
+.crm-sidebar nav a.router-link-exact-active {
+  border-left: 3px solid #4f46e5;
+}
+
+/* Stats Cards */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.stat-card .stat-label {
+  font-size: 0.8rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat-card .stat-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #111827;
+  margin-top: 0.25rem;
+}
+
+.stat-card .stat-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Tables */
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.table-container table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-container th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.table-container td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f3f4f6;
+  font-size: 0.9rem;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.status-badge.Lead { background: #dbeafe; color: #1e40af; }
+.status-badge.Prospect { background: #fef3c7; color: #92400e; }
+.status-badge.Customer { background: #d1fae5; color: #065f46; }
+.status-badge.Churned { background: #fee2e2; color: #991b1b; }
+
+/* Search */
+.search-input {
+  width: 100%;
+  max-width: 320px;
+  padding: 0.6rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #4f46e5;
+}
+
+/* Deals Kanban */
+.deals-board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+.deal-column {
+  background: #fff;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.deal-column h3 {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid #4f46e5;
+}
+
+.deal-card {
+  background: #f9fafb;
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid #e5e7eb;
+}
+
+.deal-card .deal-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: #111827;
+}
+
+.deal-card .deal-value {
+  color: #4f46e5;
+  font-weight: 700;
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+}
+
+.deal-card .deal-company {
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+/* Settings Form */
+.settings-form {
+  background: #fff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  max-width: 500px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.4rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  outline: none;
+}
+
+.form-group input:focus {
+  border-color: #4f46e5;
+}
+
+.btn-primary {
+  background: #4f46e5;
+  color: #fff;
+  border: none;
+  padding: 0.6rem 1.5rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-primary:hover {
+  background: #4338ca;
+}
+
+/* Page Headers */
+.page-header {
+  margin-bottom: 1.5rem;
+}
+
+.page-header h1 {
+  font-size: 1.5rem;
+  color: #111827;
+  font-weight: 700;
+}
+
+.page-header p {
+  color: #6b7280;
+  font-size: 0.9rem;
+}

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

@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  template: `
+    <div class="dashboard-layout">
+      <aside class="dashboard-sidebar">
+        <div class="dashboard-sidebar-logo">{{ projectName }}</div>
+        <nav class="dashboard-sidebar-nav">
+          <a
+            routerLink="/"
+            routerLinkActive="active"
+            [routerLinkActiveOptions]="{ exact: true }"
+          >
+            📊 Overview
+          </a>
+          <a routerLink="/analytics" routerLinkActive="active">
+            📈 Analytics
+          </a>
+          <a routerLink="/users" routerLinkActive="active">
+            👥 Users
+          </a>
+          <a routerLink="/settings" routerLinkActive="active">
+            ⚙️ Settings
+          </a>
+        </nav>
+      </aside>
+      <main class="dashboard-main">
+        <router-outlet />
+      </main>
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      height: 100vh;
+      font-family: system-ui, sans-serif;
+      color: #374151;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .dashboard-layout {
+      display: flex;
+      height: 100%;
+    }
+
+    .dashboard-sidebar {
+      width: 240px;
+      background: #111827;
+      color: #fff;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+    }
+
+    .dashboard-sidebar-logo {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid #374151;
+    }
+
+    .dashboard-sidebar-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .dashboard-sidebar-nav a {
+      color: #9ca3af;
+      text-decoration: none;
+      padding: 0.75rem 1rem;
+      border-radius: 8px;
+      font-weight: 500;
+      transition: all 0.2s;
+    }
+
+    .dashboard-sidebar-nav a:hover {
+      color: #fff;
+      background: #1f2937;
+    }
+
+    .dashboard-sidebar-nav a.active {
+      color: #fff;
+      background: #4f46e5;
+    }
+
+    .dashboard-main {
+      flex: 1;
+      padding: 2rem;
+      background: #f9fafb;
+      overflow-y: auto;
+    }
+
+    @media (max-width: 768px) {
+      .dashboard-layout {
+        flex-direction: column;
+      }
+
+      .dashboard-sidebar {
+        width: 100%;
+        padding: 1rem;
+      }
+
+      .dashboard-sidebar-nav {
+        flex-direction: row;
+        overflow-x: auto;
+        gap: 0.5rem;
+      }
+
+      .dashboard-sidebar-nav a {
+        white-space: nowrap;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.85rem;
+      }
+
+      .dashboard-main {
+        padding: 1rem;
+      }
+    }
+  `]
+})
+export class AppComponent {
+  projectName = '{{projectName}}';
+}