@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/crm/react/src/components/Sidebar.tsx

@@ -1,25 +1,31 @@
-const menuItems = [
-  { icon: '👥', label: 'Contacts', active: true },
-  { icon: '🏢', label: 'Companies', active: false },
-  { icon: '💰', label: 'Deals', active: false },
-  { icon: '📧', label: 'Emails', active: false },
-  { icon: '📅', label: 'Calendar', active: false },
-  { icon: '📊', label: 'Reports', active: false },
-  { icon: '⚙️', label: 'Settings', active: false },
+import { NavLink } from 'react-router-dom';
+
+const navItems = [
+  { to: '/', label: 'Dashboard', icon: '📊' },
+  { to: '/contacts', label: 'Contacts', icon: '👤' },
+  { to: '/deals', label: 'Deals', icon: '💼' },
+  { to: '/settings', label: 'Settings', icon: '⚙️' },
 ];
 
-export function Sidebar() {
+function Sidebar() {
   return (
     <aside className="sidebar">
-      <div className="sidebar-logo">{{projectName}}</div>
+      <div className="sidebar-logo">{'{{projectName}}'}</div>
       <nav className="sidebar-nav">
-        {menuItems.map((item, i) => (
-          <a key={i} href="#" className={`sidebar-item ${item.active ? 'active' : ''}`}>
-            <span>{item.icon}</span>
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`}
+          >
+            <span className="sidebar-icon">{item.icon}</span>
             {item.label}
-          </a>
+          </NavLink>
         ))}
       </nav>
     </aside>
   );
 }
+
+export default Sidebar;

package/templates/overlays/crm/react/src/components/StatsCards.tsx

@@ -1,17 +1,13 @@
-import type { Contact } from '../App';
+import { contacts } from '../data/contacts';
 
-interface StatsCardsProps {
-  contacts: Contact[];
-}
-
-export function StatsCards({ contacts }: StatsCardsProps) {
-  const stats = [
-    { label: 'Total Contacts', value: contacts.length, color: '#4f46e5' },
-    { label: 'Leads', value: contacts.filter((c) => c.status === 'Lead').length, color: '#f59e0b' },
-    { label: 'Customers', value: contacts.filter((c) => c.status === 'Customer').length, color: '#10b981' },
-    { label: 'Churned', value: contacts.filter((c) => c.status === 'Churned').length, color: '#ef4444' },
-  ];
+const stats = [
+  { label: 'Total Contacts', value: contacts.length, color: '#4f46e5' },
+  { label: 'Leads', value: contacts.filter((c) => c.status === 'Lead').length, color: '#f59e0b' },
+  { label: 'Customers', value: contacts.filter((c) => c.status === 'Customer').length, color: '#10b981' },
+  { label: 'Churned', value: contacts.filter((c) => c.status === 'Churned').length, color: '#ef4444' },
+];
 
+function StatsCards() {
   return (
     <div className="stats-grid">
       {stats.map((stat, i) => (
@@ -24,3 +20,5 @@ export function StatsCards({ contacts }: StatsCardsProps) {
     </div>
   );
 }
+
+export default StatsCards;

package/templates/overlays/crm/react/src/data/contacts.ts

@@ -0,0 +1,19 @@
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  company: string;
+  status: 'Lead' | 'Prospect' | 'Customer' | 'Churned';
+  phone: string;
+}
+
+export const contacts: Contact[] = [
+  { id: 1, name: 'John Smith', email: 'john@acme.com', company: 'Acme Corp', status: 'Customer', phone: '(555) 100-2000' },
+  { id: 2, name: 'Sarah Johnson', email: 'sarah@globex.com', company: 'Globex Inc', status: 'Lead', phone: '(555) 200-3000' },
+  { id: 3, name: 'Mike Davis', email: 'mike@initech.com', company: 'Initech', status: 'Prospect', phone: '(555) 300-4000' },
+  { id: 4, name: 'Emily Chen', email: 'emily@wayne.com', company: 'Wayne Enterprises', status: 'Customer', phone: '(555) 400-5000' },
+  { id: 5, name: 'Alex Turner', email: 'alex@stark.com', company: 'Stark Industries', status: 'Lead', phone: '(555) 500-6000' },
+  { id: 6, name: 'Lisa Wang', email: 'lisa@umbrella.com', company: 'Umbrella Corp', status: 'Churned', phone: '(555) 600-7000' },
+  { id: 7, name: 'David Brown', email: 'david@oscorp.com', company: 'Oscorp', status: 'Prospect', phone: '(555) 700-8000' },
+  { id: 8, name: 'Rachel Green', email: 'rachel@lexcorp.com', company: 'LexCorp', status: 'Customer', phone: '(555) 800-9000' },
+];

package/templates/overlays/crm/react/src/pages/Contacts.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import ContactsTable from '../components/ContactsTable';
+import { contacts } from '../data/contacts';
+
+function Contacts() {
+  const [search, setSearch] = useState('');
+
+  const filtered = contacts.filter(
+    (c) =>
+      c.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.email.toLowerCase().includes(search.toLowerCase()) ||
+      c.company.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div>
+      <header className="crm-header">
+        <h1>Contacts</h1>
+        <input
+          type="text"
+          className="search-input"
+          placeholder="Search contacts..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </header>
+      <ContactsTable contacts={filtered} />
+    </div>
+  );
+}
+
+export default Contacts;

package/templates/overlays/crm/react/src/pages/DashboardHome.tsx

@@ -0,0 +1,44 @@
+import StatsCards from '../components/StatsCards';
+import { contacts } from '../data/contacts';
+
+function DashboardHome() {
+  const recentContacts = contacts.slice(0, 5);
+
+  return (
+    <div>
+      <header className="crm-header">
+        <h1>Dashboard</h1>
+      </header>
+      <StatsCards />
+      <h2 className="section-title">Recent Contacts</h2>
+      <div className="table-card">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Company</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {recentContacts.map((c) => (
+              <tr key={c.id}>
+                <td className="contact-name">{c.name}</td>
+                <td className="contact-email">{c.email}</td>
+                <td>{c.company}</td>
+                <td>
+                  <span className={`status-badge status-${c.status.toLowerCase()}`}>
+                    {c.status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardHome;

package/templates/overlays/crm/react/src/pages/Deals.tsx

@@ -0,0 +1,48 @@
+interface Deal {
+  id: number;
+  company: string;
+  value: number;
+  contact: string;
+  stage: string;
+}
+
+const deals: Deal[] = [
+  { id: 1, company: 'Acme Corp', value: 25000, contact: 'John Smith', stage: 'Qualified' },
+  { id: 2, company: 'Globex Inc', value: 18000, contact: 'Sarah Johnson', stage: 'Prospect' },
+  { id: 3, company: 'Wayne Enterprises', value: 45000, contact: 'Emily Chen', stage: 'Proposal' },
+  { id: 4, company: 'Stark Industries', value: 32000, contact: 'Alex Turner', stage: 'Won' },
+  { id: 5, company: 'Initech', value: 12000, contact: 'Mike Davis', stage: 'Qualified' },
+  { id: 6, company: 'Oscorp', value: 28000, contact: 'David Brown', stage: 'Prospect' },
+  { id: 7, company: 'LexCorp', value: 55000, contact: 'Rachel Green', stage: 'Proposal' },
+  { id: 8, company: 'Umbrella Corp', value: 15000, contact: 'Lisa Wang', stage: 'Won' },
+];
+
+const stages = ['Prospect', 'Qualified', 'Proposal', 'Won'];
+
+function Deals() {
+  return (
+    <div>
+      <header className="crm-header">
+        <h1>Deals Pipeline</h1>
+      </header>
+      <div className="deals-board">
+        {stages.map((stage) => (
+          <div key={stage} className="deals-column">
+            <h3 className="column-title">{stage}</h3>
+            {deals
+              .filter((d) => d.stage === stage)
+              .map((deal) => (
+                <div key={deal.id} className="deal-card">
+                  <h4 className="deal-company">{deal.company}</h4>
+                  <p className="deal-value">${deal.value.toLocaleString()}</p>
+                  <span className="deal-contact">{deal.contact}</span>
+                </div>
+              ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Deals;

package/templates/overlays/crm/react/src/pages/Settings.tsx

@@ -0,0 +1,35 @@
+function Settings() {
+  return (
+    <div>
+      <header className="crm-header">
+        <h1>Settings</h1>
+      </header>
+      <div className="settings-card">
+        <form className="settings-form" onSubmit={(e) => e.preventDefault()}>
+          <div className="form-group">
+            <label htmlFor="companyName">Company Name</label>
+            <input type="text" id="companyName" defaultValue="My Company" />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input type="email" id="email" defaultValue="admin@company.com" />
+          </div>
+          <div className="form-group">
+            <label htmlFor="timezone">Timezone</label>
+            <select id="timezone" defaultValue="UTC-5">
+              <option value="UTC-8">Pacific Time (UTC-8)</option>
+              <option value="UTC-7">Mountain Time (UTC-7)</option>
+              <option value="UTC-6">Central Time (UTC-6)</option>
+              <option value="UTC-5">Eastern Time (UTC-5)</option>
+              <option value="UTC+0">UTC</option>
+              <option value="UTC+1">Central European (UTC+1)</option>
+            </select>
+          </div>
+          <button type="submit" className="btn-primary">Save Changes</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Settings;

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

@@ -0,0 +1,95 @@
+import { createRouter } from './router';
+import { renderDashboardHome } from './pages/dashboard-home';
+import { renderContacts } from './pages/contacts';
+import { renderDeals } from './pages/deals';
+import { renderSettings } from './pages/settings';
+import './style.css';
+
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  company: string;
+  phone: string;
+  status: 'Lead' | 'Prospect' | 'Customer' | 'Churned';
+  avatar: string;
+  lastContact: string;
+}
+
+export interface Deal {
+  id: number;
+  title: string;
+  company: string;
+  value: number;
+  stage: 'Discovery' | 'Proposal' | 'Negotiation' | 'Closed Won' | 'Closed Lost';
+  probability: number;
+  contact: string;
+  closeDate: string;
+}
+
+export const contacts: Contact[] = [
+  { id: 1, name: 'Sarah Chen', email: 'sarah@techcorp.com', company: 'TechCorp', phone: '(555) 123-4567', status: 'Customer', avatar: '👩', lastContact: '2 days ago' },
+  { id: 2, name: 'Mike Johnson', email: 'mike@innovate.io', company: 'Innovate.io', phone: '(555) 234-5678', status: 'Prospect', avatar: '👨', lastContact: '1 week ago' },
+  { id: 3, name: 'Emily Davis', email: 'emily@globalsoft.com', company: 'GlobalSoft', phone: '(555) 345-6789', status: 'Lead', avatar: '👩‍💼', lastContact: '3 days ago' },
+  { id: 4, name: 'Alex Rivera', email: 'alex@startupco.com', company: 'StartupCo', phone: '(555) 456-7890', status: 'Customer', avatar: '🧑', lastContact: '1 day ago' },
+  { id: 5, name: 'Jordan Lee', email: 'jordan@enterprise.com', company: 'Enterprise Inc', phone: '(555) 567-8901', status: 'Prospect', avatar: '👨‍💻', lastContact: '5 days ago' },
+  { id: 6, name: 'Taylor Kim', email: 'taylor@designhub.com', company: 'DesignHub', phone: '(555) 678-9012', status: 'Lead', avatar: '🧑‍🎨', lastContact: '2 weeks ago' },
+  { id: 7, name: 'Morgan Blake', email: 'morgan@cloudbase.io', company: 'CloudBase', phone: '(555) 789-0123', status: 'Churned', avatar: '👩‍🔬', lastContact: '1 month ago' },
+  { id: 8, name: 'Casey Park', email: 'casey@dataflow.co', company: 'DataFlow', phone: '(555) 890-1234', status: 'Customer', avatar: '🧑‍💼', lastContact: '3 days ago' },
+];
+
+export const deals: Deal[] = [
+  { id: 1, title: 'Enterprise License', company: 'TechCorp', value: 45000, stage: 'Negotiation', probability: 75, contact: 'Sarah Chen', closeDate: 'Mar 15, 2024' },
+  { id: 2, title: 'SaaS Implementation', company: 'Innovate.io', value: 28000, stage: 'Proposal', probability: 50, contact: 'Mike Johnson', closeDate: 'Apr 1, 2024' },
+  { id: 3, title: 'Consulting Package', company: 'GlobalSoft', value: 15000, stage: 'Discovery', probability: 25, contact: 'Emily Davis', closeDate: 'May 10, 2024' },
+  { id: 4, title: 'Annual Renewal', company: 'StartupCo', value: 12000, stage: 'Closed Won', probability: 100, contact: 'Alex Rivera', closeDate: 'Feb 28, 2024' },
+  { id: 5, title: 'Platform Migration', company: 'Enterprise Inc', value: 67000, stage: 'Proposal', probability: 40, contact: 'Jordan Lee', closeDate: 'Jun 15, 2024' },
+  { id: 6, title: 'Custom Integration', company: 'CloudBase', value: 22000, stage: 'Closed Lost', probability: 0, contact: 'Morgan Blake', closeDate: 'Feb 10, 2024' },
+  { id: 7, title: 'Support Contract', company: 'DataFlow', value: 8500, stage: 'Negotiation', probability: 80, contact: 'Casey Park', closeDate: 'Mar 30, 2024' },
+];
+
+export function withLayout(title: string, content: string): string {
+  const hash = window.location.hash.slice(1) || '/';
+  return `
+    <div class="crm-layout">
+      <aside class="sidebar">
+        <div class="sidebar-logo">💼 {{projectName}}</div>
+        <nav class="sidebar-nav">
+          <a href="#/" class="${hash === '/' ? 'active' : ''}">📊 Dashboard</a>
+          <a href="#/contacts" class="${hash === '/contacts' ? 'active' : ''}">👤 Contacts</a>
+          <a href="#/deals" class="${hash === '/deals' ? 'active' : ''}">💼 Deals</a>
+          <a href="#/settings" class="${hash === '/settings' ? 'active' : ''}">⚙️ Settings</a>
+        </nav>
+        <div class="sidebar-footer">
+          <div class="sidebar-user">
+            <span class="sidebar-user-avatar">👤</span>
+            <div>
+              <div class="sidebar-user-name">Sales Manager</div>
+              <div class="sidebar-user-email">manager@crm.com</div>
+            </div>
+          </div>
+        </div>
+      </aside>
+      <main class="crm-main">
+        <header class="crm-header">
+          <h1>${title}</h1>
+          <div class="header-actions">
+            <span class="header-date">📅 ${new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
+          </div>
+        </header>
+        <div class="crm-content">
+          ${content}
+        </div>
+      </main>
+    </div>
+  `;
+}
+
+const app = document.querySelector<HTMLElement>('#app')!;
+
+createRouter([
+  { path: '/', render: renderDashboardHome },
+  { path: '/contacts', render: renderContacts },
+  { path: '/deals', render: renderDeals },
+  { path: '/settings', render: renderSettings },
+], app);

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

@@ -0,0 +1,87 @@
+import { withLayout, contacts } from '../main';
+
+export function renderContacts(): string {
+  const statusCounts = {
+    Lead: contacts.filter(c => c.status === 'Lead').length,
+    Prospect: contacts.filter(c => c.status === 'Prospect').length,
+    Customer: contacts.filter(c => c.status === 'Customer').length,
+    Churned: contacts.filter(c => c.status === 'Churned').length,
+  };
+
+  return withLayout('Contacts', `
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon">👥</div>
+        <div class="stat-info">
+          <p class="stat-label">All Contacts</p>
+          <h3 class="stat-value">${contacts.length}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🟢</div>
+        <div class="stat-info">
+          <p class="stat-label">Leads</p>
+          <h3 class="stat-value">${statusCounts.Lead}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🔵</div>
+        <div class="stat-info">
+          <p class="stat-label">Prospects</p>
+          <h3 class="stat-value">${statusCounts.Prospect}</h3>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">⭐</div>
+        <div class="stat-info">
+          <p class="stat-label">Customers</p>
+          <h3 class="stat-value">${statusCounts.Customer}</h3>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <h3>All Contacts</h3>
+        <button class="btn-action">+ Add Contact</button>
+      </div>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Company</th>
+            <th>Phone</th>
+            <th>Status</th>
+            <th>Last Contact</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${contacts.map(c => `
+            <tr>
+              <td>
+                <div class="user-cell">
+                  <span class="user-avatar">${c.avatar}</span>
+                  <span>${c.name}</span>
+                </div>
+              </td>
+              <td>${c.email}</td>
+              <td>${c.company}</td>
+              <td>${c.phone}</td>
+              <td><span class="status-badge status-${c.status.toLowerCase()}">${c.status}</span></td>
+              <td>${c.lastContact}</td>
+              <td>
+                <div class="action-btns">
+                  <button class="btn-icon" title="Email">📧</button>
+                  <button class="btn-icon" title="Call">📞</button>
+                  <button class="btn-icon" title="Edit">✏️</button>
+                </div>
+              </td>
+            </tr>
+          `).join('')}
+        </tbody>
+      </table>
+    </div>
+  `);
+}

package/templates/overlays/crm/vanilla/src/pages/dashboard-home.ts

@@ -0,0 +1,121 @@
+import { withLayout, contacts, deals } from '../main';
+
+export function renderDashboardHome(): string {
+  const totalValue = deals.filter(d => d.stage !== 'Closed Lost').reduce((s, d) => s + d.value, 0);
+  const wonValue = deals.filter(d => d.stage === 'Closed Won').reduce((s, d) => s + d.value, 0);
+  const activeDeals = deals.filter(d => d.stage !== 'Closed Won' && d.stage !== 'Closed Lost');
+  const pipelineValue = activeDeals.reduce((s, d) => s + d.value, 0);
+
+  return withLayout('Dashboard', `
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon">👥</div>
+        <div class="stat-info">
+          <p class="stat-label">Total Contacts</p>
+          <h3 class="stat-value">${contacts.length}</h3>
+          <span class="stat-change up">+3 this month</span>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">💼</div>
+        <div class="stat-info">
+          <p class="stat-label">Active Deals</p>
+          <h3 class="stat-value">${activeDeals.length}</h3>
+          <span class="stat-change up">+2 this week</span>
+        </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">$${pipelineValue.toLocaleString()}</h3>
+          <span class="stat-change up">+18.5%</span>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🏆</div>
+        <div class="stat-info">
+          <p class="stat-label">Won Revenue</p>
+          <h3 class="stat-value">$${wonValue.toLocaleString()}</h3>
+          <span class="stat-change up">+24.3%</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="crm-grid">
+      <div class="card">
+        <h3>Deal Pipeline</h3>
+        <div class="pipeline">
+          ${['Discovery', 'Proposal', 'Negotiation', 'Closed Won'].map(stage => {
+            const stageDeals = deals.filter(d => d.stage === stage);
+            const stageValue = stageDeals.reduce((s, d) => s + d.value, 0);
+            return `
+              <div class="pipeline-stage">
+                <div class="pipeline-header">
+                  <span class="pipeline-name">${stage}</span>
+                  <span class="pipeline-count">${stageDeals.length} deals</span>
+                </div>
+                <div class="pipeline-value">$${stageValue.toLocaleString()}</div>
+                <div class="pipeline-bar">
+                  <div class="pipeline-fill" style="width: ${(stageValue / totalValue) * 100}%"></div>
+                </div>
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+
+      <div class="card">
+        <h3>Recent Contacts</h3>
+        <div class="contact-list">
+          ${contacts.slice(0, 5).map(c => `
+            <div class="contact-item">
+              <span class="contact-avatar">${c.avatar}</span>
+              <div class="contact-info">
+                <p class="contact-name">${c.name}</p>
+                <p class="contact-company">${c.company}</p>
+              </div>
+              <span class="status-badge status-${c.status.toLowerCase()}">${c.status}</span>
+            </div>
+          `).join('')}
+        </div>
+        <a href="#/contacts" class="view-all-link">View all contacts &rarr;</a>
+      </div>
+    </div>
+
+    <div class="card">
+      <h3>Upcoming Closes</h3>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Deal</th>
+            <th>Company</th>
+            <th>Value</th>
+            <th>Stage</th>
+            <th>Close Date</th>
+            <th>Probability</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${activeDeals.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.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>
+  `);
+}