@ebowwa/crm 0.1.0

package/src/web/api/deals.ts

@@ -0,0 +1,108 @@
+import type { Deal } from '../types';
+import { generateId } from './contacts';
+
+// In-memory storage (would be replaced with database in production)
+export const dealsStore = new Map<string, Deal>();
+
+// List deals with optional filters
+export async function listDeals(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const stage = url.searchParams.get('stage') || '';
+  const contactId = url.searchParams.get('contactId') || '';
+
+  let results = Array.from(dealsStore.values());
+
+  if (stage) {
+    results = results.filter(d => d.stage === stage);
+  }
+
+  if (contactId) {
+    results = results.filter(d => d.contactId === contactId);
+  }
+
+  // Sort by value descending
+  results.sort((a, b) => b.value - a.value);
+
+  return Response.json({ success: true, data: results });
+}
+
+// Create a new deal
+export async function createDeal(request: Request): Promise<Response> {
+  try {
+    const body = await request.json();
+    const id = generateId();
+    const now = new Date().toISOString();
+
+    const deal: Deal = {
+      id,
+      contactId: body.contactId,
+      title: body.title,
+      value: body.value,
+      currency: body.currency || 'USD',
+      stage: body.stage || 'discovery',
+      probability: body.probability || 10,
+      expectedCloseDate: body.expectedCloseDate,
+      description: body.description,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    dealsStore.set(id, deal);
+
+    return Response.json({ success: true, data: deal });
+  } catch (error) {
+    return Response.json(
+      { success: false, error: 'Invalid request body' },
+      { status: 400 }
+    );
+  }
+}
+
+// Get a single deal
+export async function getDeal(request: Request, params: Record<string, string>): Promise<Response> {
+  const deal = dealsStore.get(params.id);
+  if (!deal) {
+    return Response.json({ success: false, error: 'Deal not found' }, { status: 404 });
+  }
+  return Response.json({ success: true, data: deal });
+}
+
+// Update a deal
+export async function updateDeal(request: Request, params: Record<string, string>): Promise<Response> {
+  const deal = dealsStore.get(params.id);
+  if (!deal) {
+    return Response.json({ success: false, error: 'Deal not found' }, { status: 404 });
+  }
+
+  try {
+    const body = await request.json();
+    const updated: Deal = {
+      ...deal,
+      ...body,
+      id: deal.id,
+      createdAt: deal.createdAt,
+      updatedAt: new Date().toISOString(),
+    };
+
+    dealsStore.set(params.id, updated);
+
+    return Response.json({ success: true, data: updated });
+  } catch (error) {
+    return Response.json(
+      { success: false, error: 'Invalid request body' },
+      { status: 400 }
+    );
+  }
+}
+
+// Delete a deal
+export async function deleteDeal(request: Request, params: Record<string, string>): Promise<Response> {
+  const deal = dealsStore.get(params.id);
+  if (!deal) {
+    return Response.json({ success: false, error: 'Deal not found' }, { status: 404 });
+  }
+
+  dealsStore.delete(params.id);
+
+  return Response.json({ success: true });
+}

package/src/web/api/media.ts

@@ -0,0 +1,98 @@
+import type { Media } from '../types';
+import { generateId } from './contacts';
+
+// In-memory storage (would be replaced with database/S3 in production)
+export const mediaStore = new Map<string, Media>();
+
+// Upload media file
+export async function uploadMedia(request: Request): Promise<Response> {
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+
+    if (!file) {
+      return Response.json({ success: false, error: 'No file provided' }, { status: 400 });
+    }
+
+    const id = generateId();
+    const now = new Date().toISOString();
+
+    // Store file
+    const uploadsDir = './uploads';
+    const buffer = await file.arrayBuffer();
+    await Bun.write(`${uploadsDir}/${id}-${file.name}`, buffer);
+
+    const media: Media = {
+      id,
+      filename: file.name,
+      mimetype: file.type,
+      size: file.size,
+      url: `/media/${id}-${file.name}`,
+      thumbnailUrl: undefined,
+      contactId: formData.get('contactId') as string || undefined,
+      dealId: formData.get('dealId') as string || undefined,
+      uploadedBy: formData.get('userId') as string || 'system',
+      uploadedAt: now,
+    };
+
+    // Generate thumbnail for images
+    if (file.type.startsWith('image/')) {
+      media.thumbnailUrl = media.url;
+    }
+
+    mediaStore.set(id, media);
+
+    return Response.json({ success: true, data: media });
+  } catch (error) {
+    console.error('Upload error:', error);
+    return Response.json(
+      { success: false, error: 'Failed to upload file' },
+      { status: 500 }
+    );
+  }
+}
+
+// List media files
+export async function listMedia(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const contactId = url.searchParams.get('contactId');
+  const dealId = url.searchParams.get('dealId');
+  const type = url.searchParams.get('type');
+
+  let results = Array.from(mediaStore.values());
+
+  if (contactId) {
+    results = results.filter(m => m.contactId === contactId);
+  }
+
+  if (dealId) {
+    results = results.filter(m => m.dealId === dealId);
+  }
+
+  if (type) {
+    results = results.filter(m => m.mimetype.startsWith(type));
+  }
+
+  return Response.json({ success: true, data: results });
+}
+
+// Delete media file
+export async function deleteMedia(request: Request, params: Record<string, string>): Promise<Response> {
+  const media = mediaStore.get(params.id);
+  if (!media) {
+    return Response.json({ success: false, error: 'Media not found' }, { status: 404 });
+  }
+
+  // Delete file from disk
+  try {
+    const filePath = `./uploads/${params.id}-${media.filename}`;
+    await Bun.write(filePath, ''); // Overwrite with empty
+    // Note: In production, you'd use proper file deletion
+  } catch (error) {
+    console.error('Failed to delete file:', error);
+  }
+
+  mediaStore.delete(params.id);
+
+  return Response.json({ success: true });
+}

package/src/web/app.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import Dashboard from './components/Dashboard';
+import ContactList from './components/ContactList';
+import DealPipeline from './components/DealPipeline';
+import ActivityFeed from './components/ActivityFeed';
+import MediaGallery from './components/MediaGallery';
+import type { WSMessage } from './types';
+
+type Tab = 'dashboard' | 'contacts' | 'deals' | 'activity' | 'media';
+
+function App() {
+  const [activeTab, setActiveTab] = useState<Tab>('dashboard');
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [notifications, setNotifications] = useState<string[]>([]);
+
+  // WebSocket connection
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws`;
+    const websocket = new WebSocket(wsUrl);
+
+    websocket.onopen = () => {
+      setIsConnected(true);
+      console.log('WebSocket connected');
+    };
+
+    websocket.onmessage = (event) => {
+      const message: WSMessage = JSON.parse(event.data);
+      console.log('WebSocket message:', message);
+
+      if (message.type === 'activity') {
+        addNotification('New activity update');
+      } else if (message.type === 'deal_update') {
+        addNotification('Deal updated');
+      } else if (message.type === 'contact_update') {
+        addNotification('Contact updated');
+      }
+    };
+
+    websocket.onclose = () => {
+      setIsConnected(false);
+      console.log('WebSocket disconnected');
+    };
+
+    websocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    setWs(websocket);
+
+    return () => {
+      websocket.close();
+    };
+  }, []);
+
+  const addNotification = useCallback((message: string) => {
+    setNotifications(prev => [...prev, message]);
+    setTimeout(() => {
+      setNotifications(prev => prev.slice(1));
+    }, 3000);
+  }, []);
+
+  const tabs: { id: Tab; label: string; icon: string }[] = [
+    { id: 'dashboard', label: 'Dashboard', icon: '📊' },
+    { id: 'contacts', label: 'Contacts', icon: '👥' },
+    { id: 'deals', label: 'Deals', icon: '💼' },
+    { id: 'activity', label: 'Activity', icon: '📝' },
+    { id: 'media', label: 'Media', icon: '🖼️' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-100">
+      {/* Header */}
+      <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <h1 className="text-2xl font-bold text-indigo-400">CRM Dashboard</h1>
+            <div className="flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
+              <span className="text-sm text-gray-400">
+                {isConnected ? 'Connected' : 'Disconnected'}
+              </span>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <button className="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors">
+              Settings
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Navigation */}
+      <nav className="bg-gray-800 border-b border-gray-700">
+        <div className="flex px-6">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-6 py-4 flex items-center gap-2 border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-indigo-500 text-indigo-400'
+                  : 'border-transparent text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              <span>{tab.icon}</span>
+              <span>{tab.label}</span>
+            </button>
+          ))}
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <main className="p-6">
+        {activeTab === 'dashboard' && <Dashboard />}
+        {activeTab === 'contacts' && <ContactList />}
+        {activeTab === 'deals' && <DealPipeline />}
+        {activeTab === 'activity' && <ActivityFeed />}
+        {activeTab === 'media' && <MediaGallery />}
+      </main>
+
+      {/* Notifications */}
+      <div className="fixed bottom-4 right-4 space-y-2 z-50">
+        {notifications.map((notification, index) => (
+          <div
+            key={index}
+            className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 shadow-lg animate-slide-in"
+          >
+            <p className="text-sm">{notification}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}

package/src/web/components/ActivityFeed.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react';
+import type { Activity, APIResponse } from '../types';
+
+const activityIcons: Record<Activity['type'], string> = {
+  call: '📞',
+  email: '📧',
+  meeting: '🗓️',
+  note: '📝',
+  deal: '💼',
+  contact: '👤',
+};
+
+const activityColors: Record<Activity['type'], string> = {
+  call: 'bg-blue-500',
+  email: 'bg-purple-500',
+  meeting: 'bg-orange-500',
+  note: 'bg-gray-500',
+  deal: 'bg-green-500',
+  contact: 'bg-cyan-500',
+};
+
+export default function ActivityFeed() {
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<string>('');
+
+  useEffect(() => {
+    fetchActivities();
+  }, []);
+
+  const fetchActivities = async () => {
+    try {
+      const response = await fetch('/api/activities?limit=100');
+      const data: APIResponse<Activity[]> = await response.json();
+
+      if (data.success) {
+        setActivities(data.data || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch activities:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredActivities = filter
+    ? activities.filter(a => a.type === filter)
+    : activities;
+
+  const groupedActivities = filteredActivities.reduce((groups, activity) => {
+    const date = new Date(activity.timestamp).toDateString();
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(activity);
+    return groups;
+  }, {} as Record<string, Activity[]>);
+
+  const formatTime = (timestamp: string) => {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    if (date.toDateString() === today.toDateString()) {
+      return 'Today';
+    } else if (date.toDateString() === yesterday.toDateString()) {
+      return 'Yesterday';
+    } else {
+      return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+      });
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="crm-spinner" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">Activity Feed</h2>
+          <p className="text-gray-400">{activities.length} total activities</p>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-2 flex-wrap">
+        <button
+          onClick={() => setFilter('')}
+          className={`px-4 py-2 rounded-lg text-sm transition-colors ${
+            filter === '' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+          }`}
+        >
+          All
+        </button>
+        {Object.entries(activityIcons).map(([type, icon]) => (
+          <button
+            key={type}
+            onClick={() => setFilter(type)}
+            className={`px-4 py-2 rounded-lg text-sm transition-colors flex items-center gap-2 ${
+              filter === type ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            <span>{icon}</span>
+            <span className="capitalize">{type}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Activity List */}
+      <div className="space-y-6">
+        {Object.entries(groupedActivities).map(([date, dateActivities]) => (
+          <div key={date}>
+            {/* Date Header */}
+            <div className="flex items-center gap-4 mb-4">
+              <h3 className="text-lg font-semibold text-gray-300">
+                {formatDate(date)}
+              </h3>
+              <div className="flex-1 h-px bg-gray-700" />
+              <span className="text-sm text-gray-500">
+                {dateActivities.length} activities
+              </span>
+            </div>
+
+            {/* Activities for this date */}
+            <div className="space-y-3">
+              {dateActivities.map(activity => (
+                <div
+                  key={activity.id}
+                  className="activity-item bg-gray-800/50 rounded-lg border border-gray-700/50"
+                >
+                  {/* Icon */}
+                  <div className={`w-10 h-10 rounded-full ${activityColors[activity.type]} flex items-center justify-center text-lg flex-shrink-0`}>
+                    {activityIcons[activity.type]}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div>
+                        <p className="font-medium">{activity.description}</p>
+                        <div className="flex items-center gap-2 mt-1 text-sm text-gray-400">
+                          <span className="capitalize">{activity.type}</span>
+                          {activity.contactId && (
+                            <>
+                              <span className="text-gray-600">•</span>
+                              <span>Contact: {activity.contactId}</span>
+                            </>
+                          )}
+                          {activity.dealId && (
+                            <>
+                              <span className="text-gray-600">•</span>
+                              <span>Deal: {activity.dealId}</span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <span className="text-sm text-gray-500 flex-shrink-0">
+                        {formatTime(activity.timestamp)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {filteredActivities.length === 0 && (
+          <div className="text-center py-12 text-gray-400">
+            <p className="text-lg">No activities found</p>
+            <p className="text-sm mt-2">Activities will appear here as you interact with contacts and deals</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}