@ebowwa/crm 0.1.0

package/src/web/styles/main.css

@@ -0,0 +1,180 @@
+/* CRM Custom Styles */
+
+/* Base */
+:root {
+  --color-primary: #6366f1;
+  --color-secondary: #8b5cf6;
+  --color-accent: #06b6d4;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
+  50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s infinite;
+}
+
+/* Cards */
+.crm-card {
+  @apply bg-gray-800 rounded-xl border border-gray-700 p-4 transition-all duration-200;
+}
+
+.crm-card:hover {
+  @apply border-gray-600 shadow-lg;
+}
+
+/* Pipeline */
+.pipeline-column {
+  @apply bg-gray-800/50 rounded-lg p-3 min-h-[400px];
+}
+
+.pipeline-card {
+  @apply bg-gray-800 rounded-lg border border-gray-700 p-3 mb-2 cursor-pointer transition-all;
+}
+
+.pipeline-card:hover {
+  @apply border-indigo-500 shadow-md transform: translateY(-2px);
+}
+
+.pipeline-card.dragging {
+  @apply opacity-50 border-indigo-400;
+}
+
+/* Activity Feed */
+.activity-item {
+  @apply flex items-start gap-3 p-3 rounded-lg hover:bg-gray-800/50 transition-colors;
+}
+
+.activity-dot {
+  @apply w-2 h-2 rounded-full mt-2;
+}
+
+/* Media Gallery */
+.media-grid {
+  @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
+}
+
+.media-item {
+  @apply aspect-square bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-indigo-500 transition-all cursor-pointer;
+}
+
+.media-item:hover {
+  @apply transform scale-105 shadow-lg;
+}
+
+/* Forms */
+.crm-input {
+  @apply w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 placeholder-gray-500 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all;
+}
+
+.crm-btn {
+  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.crm-btn-primary {
+  @apply bg-indigo-600 hover:bg-indigo-500 text-white;
+}
+
+.crm-btn-secondary {
+  @apply bg-gray-700 hover:bg-gray-600 text-gray-100;
+}
+
+.crm-btn-danger {
+  @apply bg-red-600 hover:bg-red-500 text-white;
+}
+
+/* Tags */
+.crm-tag {
+  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
+}
+
+.crm-tag-success {
+  @apply bg-green-900/50 text-green-400;
+}
+
+.crm-tag-warning {
+  @apply bg-yellow-900/50 text-yellow-400;
+}
+
+.crm-tag-danger {
+  @apply bg-red-900/50 text-red-400;
+}
+
+.crm-tag-info {
+  @apply bg-blue-900/50 text-blue-400;
+}
+
+/* Modal */
+.crm-modal-backdrop {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center;
+}
+
+.crm-modal {
+  @apply bg-gray-800 rounded-xl border border-gray-700 p-6 max-w-lg w-full mx-4 animate-fade-in;
+}
+
+/* Toast */
+.crm-toast {
+  @apply fixed bottom-4 right-4 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 shadow-lg animate-slide-in z-50;
+}
+
+/* Status indicators */
+.status-active {
+  @apply bg-green-500;
+}
+
+.status-inactive {
+  @apply bg-gray-500;
+}
+
+.status-pending {
+  @apply bg-yellow-500;
+}
+
+/* Loading spinner */
+.crm-spinner {
+  @apply w-6 h-6 border-2 border-gray-600 border-t-indigo-500 rounded-full animate-spin;
+}

package/src/web/types.ts

@@ -0,0 +1,311 @@
+/**
+ * Web API Types for CRM System
+ *
+ * Re-exports from core types and provides API-specific wrappers.
+ * These types align with src/core/types.ts to ensure contract integrity.
+ */
+
+// ============================================================================
+// Re-export Core Types (Canonical Source of Truth)
+// ============================================================================
+
+export type {
+  UUID,
+  Timestamp,
+  Metadata,
+  BaseEntity,
+  // Contact types
+  Contact,
+  PhoneNumber,
+  EmailAddress,
+  Address,
+  SocialProfile,
+  CustomField,
+  ContactSource,
+  ContactStatus,
+  // Deal types
+  Deal,
+  DealStage,
+  DealPriority,
+  Currency,
+  DealLineItem,
+  Competitor,
+  // Activity types
+  Activity,
+  ActivityType,
+  CallOutcome,
+  MeetingOutcome,
+  EmailStatus,
+  CallMetadata,
+  MeetingMetadata,
+  EmailMetadata,
+  TaskMetadata,
+  // Media types
+  Media,
+  MediaType,
+  MimeType,
+  ImageMetadata,
+  VideoMetadata,
+  AudioMetadata,
+  DocumentMetadata,
+  // Note types
+  Note,
+  NoteVisibility,
+  // Tag types
+  Tag,
+  TagCategory,
+  // Company types
+  Company,
+  CompanySize,
+  Industry,
+  // Pipeline types
+  Pipeline,
+  PipelineStage,
+  // Filter types
+  SortDirection,
+  SortOptions,
+  PaginationOptions,
+  PaginatedResponse as CorePaginatedResponse,
+  DateRange,
+  ContactFilter,
+  DealFilter,
+  ActivityFilter,
+} from '../core/types.js';
+
+// ============================================================================
+// API-Specific Types
+// ============================================================================
+
+/**
+ * Flat contact representation for simple API use cases.
+ * Use this for backward compatibility with legacy API consumers.
+ * For full contact data, use Contact from core types.
+ */
+export interface FlatContact {
+  id: string;
+  name: string;
+  email: string; // Primary email (flattened from emails[0].email)
+  phone?: string; // Primary phone (flattened from phones[0].number)
+  company?: string;
+  title?: string;
+  status: 'lead' | 'prospect' | 'qualified' | 'customer' | 'churned' | 'archived';
+  tags: string[];
+  notes?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * Flat deal representation for simple API use cases.
+ * Use this for backward compatibility with legacy API consumers.
+ * For full deal data, use Deal from core types.
+ */
+export interface FlatDeal {
+  id: string;
+  contactId: string;
+  title: string;
+  value: number;
+  currency: string;
+  stage: 'prospecting' | 'qualification' | 'needs_analysis' | 'proposal' | 'negotiation' | 'closed_won' | 'closed_lost';
+  probability: number;
+  expectedCloseDate?: string; // Maps to expectedClose in core Deal
+  description?: string; // Maps to notes in core Deal
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * Flat activity representation for simple API use cases.
+ * Use this for backward compatibility with legacy API consumers.
+ * For full activity data, use Activity from core types.
+ */
+export interface FlatActivity {
+  id: string;
+  type: 'call' | 'email' | 'meeting' | 'task' | 'note' | 'sms' | 'video_call' | 'demo' | 'proposal_sent' | 'contract_sent' | 'follow_up' | 'social_media' | 'event' | 'other';
+  description: string;
+  contactId?: string;
+  dealId?: string;
+  userId: string; // Maps to createdBy in core Activity
+  timestamp: string;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Flat media representation for simple API use cases.
+ */
+export interface FlatMedia {
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  url: string;
+  thumbnailUrl?: string;
+  contactId?: string;
+  dealId?: string;
+  uploadedBy: string;
+  uploadedAt: string;
+}
+
+// ============================================================================
+// Dashboard Types
+// ============================================================================
+
+export interface DashboardStats {
+  totalContacts: number;
+  activeDeals: number;
+  pipelineValue: number;
+  wonThisMonth: number;
+  activitiesToday: number;
+  conversionRate: number;
+}
+
+// ============================================================================
+// WebSocket Types
+// ============================================================================
+
+export interface WSMessage {
+  type: 'connected' | 'activity' | 'deal_update' | 'contact_update' | 'media_upload';
+  payload?: unknown;
+  timestamp: string;
+}
+
+// ============================================================================
+// API Response Types
+// ============================================================================
+
+export interface APIResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+/**
+ * Paginated response for web API.
+ * Note: Core types have CorePaginatedResponse with different field names.
+ */
+export interface PaginatedResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  hasMore: boolean;
+}
+
+// ============================================================================
+// Type Conversion Utilities
+// ============================================================================
+
+/**
+ * Convert a full Contact to a flat representation for legacy API compatibility.
+ */
+export function toFlatContact(contact: import('../core/types.js').Contact): FlatContact {
+  const primaryEmail = contact.emails.find(e => e.primary) || contact.emails[0];
+  const primaryPhone = contact.phones.find(p => p.primary) || contact.phones[0];
+
+  return {
+    id: contact.id,
+    name: contact.name,
+    email: primaryEmail?.email || '',
+    phone: primaryPhone?.number,
+    company: contact.company,
+    title: contact.title,
+    status: contact.status,
+    tags: contact.tags,
+    notes: contact.preferences, // Map preferences to notes for flat view
+    createdAt: contact.createdAt,
+    updatedAt: contact.updatedAt,
+  };
+}
+
+/**
+ * Convert a flat contact input to a full Contact structure.
+ */
+export function fromFlatContactInput(input: Partial<FlatContact> & { name: string }): Partial<import('../core/types.js').Contact> {
+  return {
+    name: input.name,
+    firstName: input.name?.split(' ')[0],
+    lastName: input.name?.split(' ').slice(1).join(' '),
+    emails: input.email ? [{ email: input.email, type: 'personal', primary: true }] : [],
+    phones: input.phone ? [{ number: input.phone, type: 'mobile', primary: true }] : [],
+    company: input.company,
+    title: input.title,
+    status: input.status || 'lead',
+    tags: input.tags || [],
+    preferences: input.notes,
+  };
+}
+
+/**
+ * Convert a full Deal to a flat representation for legacy API compatibility.
+ */
+export function toFlatDeal(deal: import('../core/types.js').Deal): FlatDeal {
+  return {
+    id: deal.id,
+    contactId: deal.contactId,
+    title: deal.title,
+    value: deal.value,
+    currency: deal.currency,
+    stage: deal.stage,
+    probability: deal.probability,
+    expectedCloseDate: deal.expectedClose,
+    description: deal.notes,
+    createdAt: deal.createdAt,
+    updatedAt: deal.updatedAt,
+  };
+}
+
+/**
+ * Convert a flat deal input to a full Deal structure.
+ */
+export function fromFlatDealInput(input: Partial<FlatDeal> & { contactId: string; title: string; value: number }): Partial<import('../core/types.js').Deal> {
+  return {
+    contactId: input.contactId,
+    title: input.title,
+    value: input.value,
+    currency: input.currency || 'USD',
+    stage: input.stage || 'prospecting',
+    probability: input.probability || 10,
+    expectedClose: input.expectedCloseDate || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+    notes: input.description || '',
+    totalValue: input.value,
+    lineItems: [],
+    competitors: [],
+    tags: [],
+    customFields: [],
+    priority: 'medium',
+  };
+}
+
+/**
+ * Convert a full Activity to a flat representation for legacy API compatibility.
+ */
+export function toFlatActivity(activity: import('../core/types.js').Activity): FlatActivity {
+  return {
+    id: activity.id,
+    type: activity.type,
+    description: activity.description,
+    contactId: activity.contactId,
+    dealId: activity.dealId,
+    userId: activity.createdBy || 'system',
+    timestamp: activity.timestamp,
+    metadata: activity.metadata as Record<string, unknown>,
+  };
+}
+
+/**
+ * Convert a flat activity input to a full Activity structure.
+ */
+export function fromFlatActivityInput(input: Partial<FlatActivity> & { type: import('../core/types.js').ActivityType; description: string }): Partial<import('../core/types.js').Activity> {
+  return {
+    type: input.type,
+    title: input.description.slice(0, 100), // Use first 100 chars as title
+    description: input.description,
+    contactId: input.contactId,
+    dealId: input.dealId,
+    createdBy: input.userId,
+    timestamp: input.timestamp || new Date().toISOString(),
+    tags: [],
+    customFields: [],
+    metadata: input.metadata || {},
+  };
+}