@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/crm/vanilla/src/pages/deals.ts

@@ -0,0 +1,116 @@
+import { withLayout, deals } from '../main';
+
+export function renderDeals(): string {
+  const stages = ['Discovery', 'Proposal', 'Negotiation', 'Closed Won', 'Closed Lost'] as const;
+  const totalPipeline = deals.filter(d => d.stage !== 'Closed Won' && d.stage !== 'Closed Lost').reduce((s, d) => s + d.value, 0);
+  const wonDeals = deals.filter(d => d.stage === 'Closed Won');
+  const lostDeals = deals.filter(d => d.stage === 'Closed Lost');
+  const winRate = wonDeals.length + lostDeals.length > 0
+    ? Math.round((wonDeals.length / (wonDeals.length + lostDeals.length)) * 100)
+    : 0;
+
+  return withLayout('Deals', `
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon">💼</div>
+        <div class="stat-info">
+          <p class="stat-label">Total Deals</p>
+          <h3 class="stat-value">${deals.length}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">📊</div>
+        <div class="stat-info">
+          <p class="stat-label">Pipeline Value</p>
+          <h3 class="stat-value">$${totalPipeline.toLocaleString()}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🏆</div>
+        <div class="stat-info">
+          <p class="stat-label">Won Deals</p>
+          <h3 class="stat-value">${wonDeals.length}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">📈</div>
+        <div class="stat-info">
+          <p class="stat-label">Win Rate</p>
+          <h3 class="stat-value">${winRate}%</h3>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Deal Pipeline Board</h3>
+        <button class="btn-action">+ New Deal</button>
+      </div>
+      <div class="pipeline-board">
+        ${stages.filter(s => s !== 'Closed Lost').map(stage => {
+          const stageDeals = deals.filter(d => d.stage === stage);
+          const stageValue = stageDeals.reduce((s, d) => s + d.value, 0);
+          return `
+            <div class="pipeline-column">
+              <div class="pipeline-col-header">
+                <span class="pipeline-col-title">${stage}</span>
+                <span class="pipeline-col-count">${stageDeals.length}</span>
+              </div>
+              <div class="pipeline-col-value">$${stageValue.toLocaleString()}</div>
+              <div class="pipeline-cards">
+                ${stageDeals.map(d => `
+                  <div class="deal-card">
+                    <h4>${d.title}</h4>
+                    <p class="deal-company">${d.company}</p>
+                    <p class="deal-value">$${d.value.toLocaleString()}</p>
+                    <div class="deal-footer">
+                      <span class="deal-contact">👤 ${d.contact}</span>
+                      <span class="deal-date">📅 ${d.closeDate}</span>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    </div>
+
+    <div class="card">
+      <h3>All Deals</h3>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Deal</th>
+            <th>Company</th>
+            <th>Value</th>
+            <th>Stage</th>
+            <th>Contact</th>
+            <th>Close Date</th>
+            <th>Probability</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${deals.map(d => `
+            <tr>
+              <td><strong>${d.title}</strong></td>
+              <td>${d.company}</td>
+              <td class="deal-value">$${d.value.toLocaleString()}</td>
+              <td><span class="stage-badge stage-${d.stage.toLowerCase().replace(' ', '-')}">${d.stage}</span></td>
+              <td>${d.contact}</td>
+              <td>${d.closeDate}</td>
+              <td>
+                <div class="probability">
+                  <div class="probability-bar">
+                    <div class="probability-fill" style="width: ${d.probability}%"></div>
+                  </div>
+                  <span>${d.probability}%</span>
+                </div>
+              </td>
+            </tr>
+          `).join('')}
+        </tbody>
+      </table>
+    </div>
+  `);
+}

package/templates/overlays/crm/vanilla/src/pages/settings.ts

@@ -0,0 +1,129 @@
+import { withLayout } from '../main';
+
+export function renderSettings(): string {
+  return withLayout('Settings', `
+    <div class="settings-grid">
+      <div class="card">
+        <h3>Company Profile</h3>
+        <div class="form-group">
+          <label>Company Name</label>
+          <input type="text" class="form-input" value="{{projectName}}" />
+        </div>
+        <div class="form-group">
+          <label>Industry</label>
+          <select class="form-input">
+            <option selected>Technology</option>
+            <option>Healthcare</option>
+            <option>Finance</option>
+            <option>Manufacturing</option>
+            <option>Retail</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Company Size</label>
+          <select class="form-input">
+            <option>1-10 employees</option>
+            <option selected>11-50 employees</option>
+            <option>51-200 employees</option>
+            <option>201-1000 employees</option>
+            <option>1000+ employees</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Website</label>
+          <input type="url" class="form-input" placeholder="https://yourcompany.com" />
+        </div>
+        <button class="btn-action">Save Profile</button>
+      </div>
+
+      <div class="card">
+        <h3>Sales Pipeline Settings</h3>
+        <div class="toggle-group">
+          <div class="toggle-item">
+            <div>
+              <p class="toggle-label">Auto-assign Leads</p>
+              <p class="toggle-desc">Automatically assign new leads to sales reps</p>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" checked />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <div class="toggle-item">
+            <div>
+              <p class="toggle-label">Deal Reminders</p>
+              <p class="toggle-desc">Send reminders for deals approaching close date</p>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" checked />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <div class="toggle-item">
+            <div>
+              <p class="toggle-label">Activity Tracking</p>
+              <p class="toggle-desc">Track email opens and link clicks</p>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" checked />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <div class="toggle-item">
+            <div>
+              <p class="toggle-label">Weekly Reports</p>
+              <p class="toggle-desc">Receive weekly sales performance reports</p>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <h3>Email Integration</h3>
+        <div class="form-group">
+          <label>SMTP Server</label>
+          <input type="text" class="form-input" placeholder="smtp.example.com" />
+        </div>
+        <div class="form-group">
+          <label>Port</label>
+          <input type="number" class="form-input" value="587" />
+        </div>
+        <div class="form-group">
+          <label>Email Address</label>
+          <input type="email" class="form-input" placeholder="sales@company.com" />
+        </div>
+        <div class="form-group">
+          <label>Password</label>
+          <input type="password" class="form-input" placeholder="Enter password" />
+        </div>
+        <button class="btn-action">Connect Email</button>
+      </div>
+
+      <div class="card">
+        <h3>Data Management</h3>
+        <div class="danger-zone">
+          <div class="danger-item">
+            <div>
+              <p class="toggle-label">Export Data</p>
+              <p class="toggle-desc">Download all contacts and deals as CSV</p>
+            </div>
+            <button class="btn-action">Export</button>
+          </div>
+        </div>
+        <div class="danger-zone" style="margin-top: 1rem;">
+          <div class="danger-item">
+            <div>
+              <p class="toggle-label">Delete All Data</p>
+              <p class="toggle-desc">Permanently remove all contacts and deals</p>
+            </div>
+            <button class="btn-danger-action">Delete All</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+}

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

@@ -0,0 +1,33 @@
+interface Route {
+  path: string;
+  render: (params?: Record<string, string>) => string;
+}
+
+export function createRouter(routes: Route[], container: HTMLElement): void {
+  function matchRoute(): void {
+    const hash = window.location.hash.slice(1) || '/';
+    for (const route of routes) {
+      if (route.path.includes(':')) {
+        const paramNames: string[] = [];
+        const pattern = route.path.replace(/:(\w+)/g, (_, name) => {
+          paramNames.push(name);
+          return '([^/]+)';
+        });
+        const match = hash.match(new RegExp('^' + pattern + '$'));
+        if (match) {
+          const params: Record<string, string> = {};
+          paramNames.forEach((name, i) => params[name] = match[i + 1]);
+          container.innerHTML = route.render(params);
+          return;
+        }
+      } else if (route.path === hash) {
+        container.innerHTML = route.render();
+        return;
+      }
+    }
+    container.innerHTML = routes[0].render();
+  }
+
+  window.addEventListener('hashchange', matchRoute);
+  matchRoute();
+}