@nextsparkjs/theme-crm 0.1.0-beta.1

package/lib/crm-utils.ts

@@ -0,0 +1,185 @@
+/**
+ * CRM Theme Utilities
+ * Helper functions for the CRM theme
+ */
+
+/**
+ * Format currency with proper symbol and decimals
+ */
+export function formatCurrency(
+    amount: number,
+    currency: string = 'USD',
+    locale: string = 'en-US'
+): string {
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }).format(amount)
+}
+
+/**
+ * Format large numbers with K, M, B suffixes
+ */
+export function formatCompactNumber(num: number): string {
+    if (num >= 1_000_000_000) {
+        return `${(num / 1_000_000_000).toFixed(1)}B`
+    }
+    if (num >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`
+    }
+    if (num >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`
+    }
+    return num.toString()
+}
+
+/**
+ * Calculate percentage change between two values
+ */
+export function calculatePercentageChange(
+    current: number,
+    previous: number
+): { value: number; isPositive: boolean } {
+    if (previous === 0) {
+        return { value: 100, isPositive: current > 0 }
+    }
+
+    const change = ((current - previous) / previous) * 100
+    return {
+        value: Math.abs(change),
+        isPositive: change >= 0,
+    }
+}
+
+/**
+ * Get initials from a name
+ */
+export function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .map(part => part[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+}
+
+/**
+ * Calculate days between two dates
+ */
+export function daysBetween(date1: Date, date2: Date): number {
+    const diffTime = Math.abs(date2.getTime() - date1.getTime())
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+}
+
+/**
+ * Check if a deal is rotten (stale) based on last update
+ */
+export function isDealRotten(
+    updatedAt: Date | string,
+    rottenDays: number = 30
+): boolean {
+    const lastUpdate = typeof updatedAt === 'string' ? new Date(updatedAt) : updatedAt
+    const daysSinceUpdate = daysBetween(new Date(), lastUpdate)
+    return daysSinceUpdate > rottenDays
+}
+
+/**
+ * Format date relative to now (e.g., "2 hours ago", "yesterday")
+ */
+export function formatRelativeDate(date: Date | string | null | undefined): string {
+    if (!date) {
+        return '-'
+    }
+    const d = typeof date === 'string' ? new Date(date) : date
+    const now = new Date()
+    const diffInSeconds = Math.floor((now.getTime() - d.getTime()) / 1000)
+
+    if (diffInSeconds < 60) {
+        return 'just now'
+    }
+
+    const diffInMinutes = Math.floor(diffInSeconds / 60)
+    if (diffInMinutes < 60) {
+        return `${diffInMinutes}m ago`
+    }
+
+    const diffInHours = Math.floor(diffInMinutes / 60)
+    if (diffInHours < 24) {
+        return `${diffInHours}h ago`
+    }
+
+    const diffInDays = Math.floor(diffInHours / 24)
+    if (diffInDays === 1) {
+        return 'yesterday'
+    }
+    if (diffInDays < 7) {
+        return `${diffInDays}d ago`
+    }
+
+    return d.toLocaleDateString()
+}
+
+/**
+ * Get badge variant based on status
+ */
+export function getStatusVariant(
+    status: string
+): 'success' | 'warning' | 'danger' | 'info' | 'neutral' {
+    const lowerStatus = status.toLowerCase()
+
+    if (['won', 'completed', 'active', 'converted', 'success'].includes(lowerStatus)) {
+        return 'success'
+    }
+
+    if (['pending', 'in_progress', 'scheduled', 'proposal', 'negotiation'].includes(lowerStatus)) {
+        return 'warning'
+    }
+
+    if (['lost', 'cancelled', 'overdue', 'failed'].includes(lowerStatus)) {
+        return 'danger'
+    }
+
+    if (['new', 'open', 'qualification'].includes(lowerStatus)) {
+        return 'info'
+    }
+
+    return 'neutral'
+}
+
+/**
+ * Calculate expected revenue from amount and probability
+ */
+export function calculateExpectedRevenue(amount: number, probability: number): number {
+    return (amount * probability) / 100
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncate(text: string, maxLength: number): string {
+    if (text.length <= maxLength) {
+        return text
+    }
+    return text.slice(0, maxLength) + '...'
+}
+
+/**
+ * Format phone number to international format
+ */
+export function formatPhoneNumber(phone: string): string {
+    // Remove all non-numeric characters
+    const cleaned = phone.replace(/\D/g, '')
+
+    // Format based on length
+    if (cleaned.length === 10) {
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
+    }
+
+    if (cleaned.length === 11 && cleaned[0] === '1') {
+        return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`
+    }
+
+    return phone // Return original if format is unknown
+}

package/lib/selectors.ts

@@ -0,0 +1,333 @@
+/**
+ * CRM Theme - Block Selectors
+ *
+ * This file defines selectors for block components in the theme.
+ * It's placed in lib/ instead of tests/ so TypeScript can resolve imports.
+ *
+ * Used by:
+ * - Block components (for data-cy attributes)
+ * - Cypress tests (via tests/cypress/src/selectors.ts)
+ */
+
+import { createSelectorHelpers } from '@nextsparkjs/core/lib/test/selector-factory'
+import { CORE_SELECTORS } from '@nextsparkjs/core/lib/test/core-selectors'
+
+// =============================================================================
+// BLOCK SELECTORS
+// =============================================================================
+
+/**
+ * Block-specific selectors for the CRM theme.
+ * Each block has at minimum a 'container' selector.
+ * Dynamic selectors use {index} placeholder.
+ */
+export const BLOCK_SELECTORS = {
+  // CRM theme currently has no custom blocks
+  // Add block selectors here when blocks are created
+} as const
+
+// =============================================================================
+// ENTITY SELECTORS
+// =============================================================================
+
+/**
+ * Entity-specific selectors for the CRM theme.
+ */
+export const ENTITY_SELECTORS = {
+  leads: {
+    list: 'leads-list',
+    listItem: 'lead-item-{index}',
+    card: 'lead-card-{id}',
+    name: 'lead-name',
+    email: 'lead-email',
+    phone: 'lead-phone',
+    company: 'lead-company',
+    status: 'lead-status',
+    source: 'lead-source',
+    createButton: 'lead-create-button',
+    editButton: 'lead-edit-button',
+    deleteButton: 'lead-delete-button',
+    convertButton: 'lead-convert-button',
+    form: {
+      container: 'lead-form',
+      name: 'lead-form-name',
+      email: 'lead-form-email',
+      phone: 'lead-form-phone',
+      company: 'lead-form-company',
+      status: 'lead-form-status',
+      source: 'lead-form-source',
+      submit: 'lead-form-submit',
+      cancel: 'lead-form-cancel',
+    },
+  },
+  contacts: {
+    list: 'contacts-list',
+    listItem: 'contact-item-{index}',
+    card: 'contact-card-{id}',
+    name: 'contact-name',
+    email: 'contact-email',
+    phone: 'contact-phone',
+    company: 'contact-company',
+    createButton: 'contact-create-button',
+    editButton: 'contact-edit-button',
+    deleteButton: 'contact-delete-button',
+    form: {
+      container: 'contact-form',
+      firstName: 'contact-form-first-name',
+      lastName: 'contact-form-last-name',
+      email: 'contact-form-email',
+      phone: 'contact-form-phone',
+      company: 'contact-form-company',
+      submit: 'contact-form-submit',
+      cancel: 'contact-form-cancel',
+    },
+  },
+  companies: {
+    list: 'companies-list',
+    listItem: 'company-item-{index}',
+    card: 'company-card-{id}',
+    name: 'company-name',
+    website: 'company-website',
+    industry: 'company-industry',
+    size: 'company-size',
+    createButton: 'company-create-button',
+    editButton: 'company-edit-button',
+    deleteButton: 'company-delete-button',
+    form: {
+      container: 'company-form',
+      name: 'company-form-name',
+      website: 'company-form-website',
+      industry: 'company-form-industry',
+      size: 'company-form-size',
+      submit: 'company-form-submit',
+      cancel: 'company-form-cancel',
+    },
+  },
+  opportunities: {
+    list: 'opportunities-list',
+    listItem: 'opportunity-item-{index}',
+    card: 'opportunity-card-{id}',
+    name: 'opportunity-name',
+    value: 'opportunity-value',
+    stage: 'opportunity-stage',
+    probability: 'opportunity-probability',
+    closeDate: 'opportunity-close-date',
+    createButton: 'opportunity-create-button',
+    editButton: 'opportunity-edit-button',
+    deleteButton: 'opportunity-delete-button',
+    form: {
+      container: 'opportunity-form',
+      name: 'opportunity-form-name',
+      value: 'opportunity-form-value',
+      stage: 'opportunity-form-stage',
+      probability: 'opportunity-form-probability',
+      closeDate: 'opportunity-form-close-date',
+      submit: 'opportunity-form-submit',
+      cancel: 'opportunity-form-cancel',
+    },
+  },
+  activities: {
+    list: 'activities-list',
+    listItem: 'activity-item-{index}',
+    card: 'activity-card-{id}',
+    type: 'activity-type',
+    subject: 'activity-subject',
+    dueDate: 'activity-due-date',
+    status: 'activity-status',
+    createButton: 'activity-create-button',
+    editButton: 'activity-edit-button',
+    deleteButton: 'activity-delete-button',
+    completeButton: 'activity-complete-button',
+    form: {
+      container: 'activity-form',
+      type: 'activity-form-type',
+      subject: 'activity-form-subject',
+      description: 'activity-form-description',
+      dueDate: 'activity-form-due-date',
+      submit: 'activity-form-submit',
+      cancel: 'activity-form-cancel',
+    },
+  },
+  notes: {
+    list: 'notes-list',
+    listItem: 'note-item-{index}',
+    card: 'note-card-{id}',
+    title: 'note-title',
+    content: 'note-content',
+    createButton: 'note-create-button',
+    editButton: 'note-edit-button',
+    deleteButton: 'note-delete-button',
+    form: {
+      container: 'note-form',
+      title: 'note-form-title',
+      content: 'note-form-content',
+      submit: 'note-form-submit',
+      cancel: 'note-form-cancel',
+    },
+  },
+  campaigns: {
+    list: 'campaigns-list',
+    listItem: 'campaign-item-{index}',
+    card: 'campaign-card-{id}',
+    name: 'campaign-name',
+    type: 'campaign-type',
+    status: 'campaign-status',
+    budget: 'campaign-budget',
+    createButton: 'campaign-create-button',
+    editButton: 'campaign-edit-button',
+    deleteButton: 'campaign-delete-button',
+    form: {
+      container: 'campaign-form',
+      name: 'campaign-form-name',
+      type: 'campaign-form-type',
+      status: 'campaign-form-status',
+      budget: 'campaign-form-budget',
+      startDate: 'campaign-form-start-date',
+      endDate: 'campaign-form-end-date',
+      submit: 'campaign-form-submit',
+      cancel: 'campaign-form-cancel',
+    },
+  },
+  products: {
+    list: 'products-list',
+    listItem: 'product-item-{index}',
+    card: 'product-card-{id}',
+    name: 'product-name',
+    sku: 'product-sku',
+    price: 'product-price',
+    category: 'product-category',
+    createButton: 'product-create-button',
+    editButton: 'product-edit-button',
+    deleteButton: 'product-delete-button',
+    form: {
+      container: 'product-form',
+      name: 'product-form-name',
+      sku: 'product-form-sku',
+      price: 'product-form-price',
+      description: 'product-form-description',
+      category: 'product-form-category',
+      submit: 'product-form-submit',
+      cancel: 'product-form-cancel',
+    },
+  },
+  pipelines: {
+    list: 'pipelines-list',
+    listItem: 'pipeline-item-{index}',
+    card: 'pipeline-card-{id}',
+    name: 'pipeline-name',
+    stages: 'pipeline-stages',
+    createButton: 'pipeline-create-button',
+    editButton: 'pipeline-edit-button',
+    deleteButton: 'pipeline-delete-button',
+    form: {
+      container: 'pipeline-form',
+      name: 'pipeline-form-name',
+      description: 'pipeline-form-description',
+      stages: 'pipeline-form-stages',
+      submit: 'pipeline-form-submit',
+      cancel: 'pipeline-form-cancel',
+    },
+  },
+} as const
+
+// =============================================================================
+// CRM-SPECIFIC SELECTORS
+// =============================================================================
+
+/**
+ * CRM-specific UI selectors.
+ */
+export const CRM_SELECTORS = {
+  dashboard: {
+    container: 'crm-dashboard',
+    statsCards: 'dashboard-stats-cards',
+    recentActivities: 'dashboard-recent-activities',
+    pipeline: 'dashboard-pipeline',
+    charts: 'dashboard-charts',
+  },
+  pipelineView: {
+    container: 'pipeline-view',
+    stage: 'pipeline-stage-{index}',
+    stageHeader: 'pipeline-stage-header-{index}',
+    opportunityCard: 'pipeline-opportunity-{id}',
+    dropZone: 'pipeline-drop-zone-{index}',
+  },
+  reporting: {
+    container: 'crm-reporting',
+    dateRange: 'report-date-range',
+    filters: 'report-filters',
+    exportButton: 'report-export-button',
+    chart: 'report-chart',
+  },
+} as const
+
+// =============================================================================
+// THEME SELECTORS (CORE + BLOCKS + ENTITIES + CRM)
+// =============================================================================
+
+/**
+ * Complete theme selectors merging core, blocks, and entities.
+ */
+export const THEME_SELECTORS = {
+  ...CORE_SELECTORS,
+  blocks: BLOCK_SELECTORS,
+  entities: ENTITY_SELECTORS,
+  crm: CRM_SELECTORS,
+} as const
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+/**
+ * Create helpers bound to theme selectors
+ */
+const helpers = createSelectorHelpers(THEME_SELECTORS)
+
+/**
+ * Full selectors object (core + theme extensions)
+ */
+export const SELECTORS = helpers.SELECTORS
+
+/**
+ * Get a selector value by path
+ *
+ * @example
+ * sel('auth.login.form') // 'login-form'
+ * sel('entities.leads.list') // 'leads-list'
+ * sel('entities.leads.listItem', { index: '0' }) // 'lead-item-0'
+ */
+export const sel = helpers.sel
+
+/**
+ * Alias for sel
+ */
+export const s = helpers.s
+
+/**
+ * Get selector only in dev/test environments
+ */
+export const selDev = helpers.selDev
+
+/**
+ * Get Cypress selector string [data-cy="..."]
+ *
+ * @example
+ * cySelector('entities.leads.list') // '[data-cy="leads-list"]'
+ */
+export const cySelector = helpers.cySelector
+
+/**
+ * Create entity-specific selector helpers
+ */
+export const entitySelectors = helpers.entitySelectors
+
+/**
+ * Type exports
+ */
+export type ThemeSelectorsType = typeof THEME_SELECTORS
+export type BlockSelectorsType = typeof BLOCK_SELECTORS
+export type EntitySelectorsType = typeof ENTITY_SELECTORS
+export type CRMSelectorsType = typeof CRM_SELECTORS
+export type { Replacements } from '@nextsparkjs/core/lib/test/selector-factory'
+export { CORE_SELECTORS }

package/messages/en.json

@@ -0,0 +1,131 @@
+{
+  "crm": {
+    "name": "CRM Enterprise",
+    "description": "Complete CRM solution for sales and marketing teams",
+    "tagline": "Close more deals, grow your business",
+
+    "navigation": {
+      "leads": "Leads",
+      "contacts": "Contacts",
+      "companies": "Companies",
+      "opportunities": "Opportunities",
+      "activities": "Activities",
+      "campaigns": "Campaigns",
+      "reports": "Reports",
+      "settings": "Settings"
+    },
+
+    "quickActions": {
+      "newLead": "New Lead",
+      "newContact": "New Contact",
+      "newCompany": "New Company",
+      "newOpportunity": "New Opportunity",
+      "scheduleActivity": "Schedule Activity",
+      "createCampaign": "Create Campaign"
+    },
+
+    "dashboard": {
+      "welcome": "Welcome back!",
+      "welcomeWithName": "Welcome back, {name}!",
+      "overview": "Sales Overview",
+      "pipelineValue": "Pipeline Value",
+      "openDeals": "Open Deals",
+      "wonThisMonth": "Won This Month",
+      "conversionRate": "Conversion Rate",
+      "upcomingActivities": "Upcoming Activities",
+      "recentLeads": "Recent Leads",
+      "topOpportunities": "Top Opportunities"
+    },
+
+    "pipeline": {
+      "title": "Sales Pipeline",
+      "totalValue": "Total Value",
+      "dealCount": "Deals",
+      "stages": {
+        "qualification": "Qualification",
+        "needsAnalysis": "Needs Analysis",
+        "proposal": "Proposal",
+        "negotiation": "Negotiation",
+        "closedWon": "Closed Won",
+        "closedLost": "Closed Lost"
+      }
+    },
+
+    "reports": {
+      "title": "Reports",
+      "sales": "Sales Report",
+      "marketing": "Marketing Report",
+      "pipeline": "Pipeline Report",
+      "activity": "Activity Report",
+      "forecast": "Sales Forecast"
+    },
+
+    "features": {
+      "convert": {
+        "title": "Convert Lead",
+        "description": "Convert this lead to a contact and company",
+        "createContact": "Create Contact",
+        "createCompany": "Create Company",
+        "success": "Lead converted successfully",
+        "alreadyConverted": "This lead has already been converted"
+      },
+      "bulkImport": {
+        "title": "Import Data",
+        "description": "Import data from CSV or Excel file",
+        "selectFile": "Select file",
+        "mapping": "Map columns",
+        "preview": "Preview",
+        "import": "Import"
+      },
+      "bulkExport": {
+        "title": "Export Data",
+        "description": "Export data to CSV or Excel file",
+        "allRecords": "All records",
+        "selectedRecords": "Selected records",
+        "filteredRecords": "Filtered records"
+      }
+    },
+
+    "roles": {
+      "owner": "Administrator",
+      "admin": "Manager",
+      "member": "Representative",
+      "viewer": "Viewer",
+      "descriptions": {
+        "owner": "Full access to all CRM features and settings",
+        "admin": "Can manage team, view reports, and perform bulk operations",
+        "member": "Can manage leads, contacts, opportunities and activities",
+        "viewer": "Read-only access to CRM data"
+      }
+    },
+
+    "stats": {
+      "totalLeads": "Total Leads",
+      "qualifiedLeads": "Qualified Leads",
+      "totalOpportunities": "Total Opportunities",
+      "wonOpportunities": "Won Opportunities",
+      "pipelineValue": "Pipeline Value",
+      "avgDealSize": "Avg Deal Size",
+      "winRate": "Win Rate",
+      "activeCampaigns": "Active Campaigns"
+    },
+
+    "empty": {
+      "noLeads": {
+        "title": "No leads yet",
+        "description": "Start capturing leads to grow your pipeline.",
+        "action": "Add your first lead"
+      },
+      "noOpportunities": {
+        "title": "No opportunities yet",
+        "description": "Create opportunities from qualified leads.",
+        "action": "Create opportunity"
+      },
+      "noActivities": {
+        "title": "No activities scheduled",
+        "description": "Schedule calls, meetings, and tasks.",
+        "action": "Schedule activity"
+      }
+    }
+  }
+}