@ebowwa/crm 0.1.0

package/src/web/components/MediaGallery.tsx

@@ -0,0 +1,334 @@
+import React, { useState, useRef } from 'react';
+import type { Media, APIResponse } from '../types';
+
+const mediaTypeIcons: Record<string, string> = {
+  'image': '🖼️',
+  'video': '🎬',
+  'audio': '🎵',
+  'application': '📄',
+};
+
+const getMediaType = (mimetype: string): string => {
+  return mimetype.split('/')[0];
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+};
+
+export default function MediaGallery() {
+  const [mediaFiles, setMediaFiles] = useState<Media[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
+  const [filter, setFilter] = useState<string>('all');
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const fetchMedia = async () => {
+    setLoading(true);
+    try {
+      // In a real implementation, this would fetch from /api/media
+      // For now, we'll use mock data
+      setMediaFiles([]);
+    } catch (error) {
+      console.error('Failed to fetch media:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFileSelect = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', files[0]);
+
+      const response = await fetch('/api/media', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data: APIResponse<Media> = await response.json();
+
+      if (data.success && data.data) {
+        setMediaFiles([data.data, ...mediaFiles]);
+      }
+    } catch (error) {
+      console.error('Failed to upload media:', error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    handleFileSelect(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragOver(false);
+  };
+
+  const filteredMedia = filter === 'all'
+    ? mediaFiles
+    : mediaFiles.filter(m => getMediaType(m.mimetype) === filter);
+
+  const renderMediaPreview = (media: Media) => {
+    const type = getMediaType(media.mimetype);
+
+    if (type === 'image') {
+      return (
+        <img
+          src={media.url}
+          alt={media.filename}
+          className="w-full h-full object-cover"
+        />
+      );
+    }
+
+    if (type === 'video') {
+      return (
+        <div className="w-full h-full flex items-center justify-center bg-gray-900">
+          <video
+            src={media.url}
+            className="max-w-full max-h-full"
+            controls={false}
+          />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-4xl">{mediaTypeIcons.video}</span>
+          </div>
+        </div>
+      );
+    }
+
+    if (type === 'audio') {
+      return (
+        <div className="w-full h-full flex items-center justify-center bg-gray-900">
+          <span className="text-4xl">{mediaTypeIcons.audio}</span>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-gray-900">
+        <span className="text-4xl">{mediaTypeIcons.application}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">Media Gallery</h2>
+          <p className="text-gray-400">{mediaFiles.length} files</p>
+        </div>
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="crm-btn crm-btn-primary"
+        >
+          + Upload
+        </button>
+      </div>
+
+      {/* Upload Area */}
+      <div
+        className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+          dragOver
+            ? 'border-indigo-500 bg-indigo-500/10'
+            : 'border-gray-700 bg-gray-800/50'
+        }`}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          onChange={(e) => handleFileSelect(e.target.files)}
+          accept="image/*,video/*,audio/*,.pdf,.doc,.docx"
+        />
+
+        {uploading ? (
+          <div className="flex items-center justify-center gap-3">
+            <div className="crm-spinner" />
+            <span>Uploading...</span>
+          </div>
+        ) : (
+          <>
+            <div className="text-4xl mb-4">📁</div>
+            <p className="text-lg font-medium mb-2">Drop files here or click to upload</p>
+            <p className="text-sm text-gray-400">
+              Supports images, videos, audio, and documents
+            </p>
+          </>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-2">
+        {['all', 'image', 'video', 'audio', 'application'].map(type => (
+          <button
+            key={type}
+            onClick={() => setFilter(type)}
+            className={`px-4 py-2 rounded-lg text-sm transition-colors ${
+              filter === type
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            {type === 'all' ? 'All' : (
+              <span className="flex items-center gap-2">
+                <span>{mediaTypeIcons[type] || '📄'}</span>
+                <span className="capitalize">{type}</span>
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Media Grid */}
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <div className="crm-spinner" />
+        </div>
+      ) : filteredMedia.length === 0 ? (
+        <div className="text-center py-12 text-gray-400">
+          <div className="text-6xl mb-4">📭</div>
+          <p className="text-lg">No media files</p>
+          <p className="text-sm mt-2">Upload files to see them here</p>
+        </div>
+      ) : (
+        <div className="media-grid">
+          {filteredMedia.map(media => (
+            <div
+              key={media.id}
+              onClick={() => setSelectedMedia(media)}
+              className="media-item aspect-square overflow-hidden relative group"
+            >
+              {renderMediaPreview(media)}
+
+              {/* Overlay */}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="absolute bottom-0 left-0 right-0 p-3">
+                  <p className="text-sm font-medium truncate">{media.filename}</p>
+                  <p className="text-xs text-gray-400">{formatFileSize(media.size)}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Preview Modal */}
+      {selectedMedia && (
+        <div
+          className="crm-modal-backdrop"
+          onClick={() => setSelectedMedia(null)}
+        >
+          <div
+            className="bg-gray-800 rounded-xl border border-gray-700 max-w-4xl w-full mx-4 overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal Header */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-700">
+              <div>
+                <h3 className="font-medium">{selectedMedia.filename}</h3>
+                <p className="text-sm text-gray-400">
+                  {formatFileSize(selectedMedia.size)} • {selectedMedia.mimetype}
+                </p>
+              </div>
+              <button
+                onClick={() => setSelectedMedia(null)}
+                className="text-gray-400 hover:text-white transition-colors"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-4">
+              {getMediaType(selectedMedia.mimetype) === 'image' && (
+                <img
+                  src={selectedMedia.url}
+                  alt={selectedMedia.filename}
+                  className="max-w-full max-h-[60vh] mx-auto rounded-lg"
+                />
+              )}
+
+              {getMediaType(selectedMedia.mimetype) === 'video' && (
+                <video
+                  src={selectedMedia.url}
+                  controls
+                  className="max-w-full max-h-[60vh] mx-auto rounded-lg"
+                />
+              )}
+
+              {getMediaType(selectedMedia.mimetype) === 'audio' && (
+                <audio
+                  src={selectedMedia.url}
+                  controls
+                  className="w-full"
+                />
+              )}
+
+              {getMediaType(selectedMedia.mimetype) === 'application' && (
+                <div className="text-center py-12">
+                  <div className="text-6xl mb-4">{mediaTypeIcons.application}</div>
+                  <p className="text-lg">{selectedMedia.filename}</p>
+                  <a
+                    href={selectedMedia.url}
+                    download
+                    className="crm-btn crm-btn-primary inline-block mt-4"
+                  >
+                    Download
+                  </a>
+                </div>
+              )}
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex items-center justify-between p-4 border-t border-gray-700 bg-gray-800/50">
+              <div className="text-sm text-gray-400">
+                Uploaded: {new Date(selectedMedia.uploadedAt).toLocaleString()}
+              </div>
+              <div className="flex gap-2">
+                <a
+                  href={selectedMedia.url}
+                  download
+                  className="crm-btn crm-btn-secondary"
+                >
+                  Download
+                </a>
+                <button
+                  onClick={() => {
+                    // Delete logic would go here
+                    setSelectedMedia(null);
+                  }}
+                  className="crm-btn crm-btn-danger"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CRM Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="./styles/main.css">
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+  <div id="root"></div>
+  <script type="module" src="./app.tsx"></script>
+</body>
+</html>

package/src/web/index.ts

@@ -0,0 +1,326 @@
+import index from "./index.html";
+import type { ServerWebSocket } from "bun";
+import type { Contact, Deal, Activity, Media, WSMessage } from "./types";
+import { CRMStorageClient } from "../mcp/storage/client.js";
+
+// Persistent storage client
+let storage: CRMStorageClient | null = null;
+
+// Connected WebSocket clients
+const connectedClients: Set<ServerWebSocket> = new Set();
+
+/**
+ * Initialize storage and return when ready
+ */
+async function getStorage(): Promise<CRMStorageClient> {
+  if (!storage) {
+    storage = new CRMStorageClient({
+      path: process.env.CRM_DB_PATH || "./data/crm-web",
+      mapSize: 512 * 1024 * 1024, // 512MB
+      maxDbs: 20,
+    });
+    await storage.initialize();
+    console.log("CRM storage initialized at", process.env.CRM_DB_PATH || "./data/crm-web");
+  }
+  return storage;
+}
+
+// WebSocket message broadcasting
+function broadcast(message: WSMessage) {
+  const payload = JSON.stringify({ ...message, timestamp: new Date().toISOString() });
+  for (const client of connectedClients) {
+    client.send(payload);
+  }
+}
+
+// Helper to generate IDs
+function generateId(): string {
+  return crypto.randomUUID();
+}
+
+// API Handlers
+async function listContacts(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const search = url.searchParams.get('search') || '';
+  const status = url.searchParams.get('status') || '';
+
+  const store = await getStorage();
+  let results = store.list('contacts');
+
+  if (search) {
+    const searchLower = search.toLowerCase();
+    results = results.filter((c: { name?: string; email?: string; company?: string }) =>
+      (c.name?.toLowerCase() ?? '').includes(searchLower) ||
+      (c.email?.toLowerCase() ?? '').includes(searchLower) ||
+      (c.company?.toLowerCase() ?? '').includes(searchLower)
+    );
+  }
+
+  if (status) {
+    results = results.filter((c: { status?: string }) => c.status === status);
+  }
+
+  return Response.json({ success: true, data: results });
+}
+
+async function createContact(request: Request): Promise<Response> {
+  const body = await request.json();
+  const store = await getStorage();
+
+  const contact = await store.insert('contacts', {
+    name: body.name,
+    email: body.email,
+    phone: body.phone,
+    company: body.company,
+    title: body.title,
+    status: body.status || 'lead',
+    tags: body.tags || [],
+    notes: body.notes,
+  });
+
+  // Create activity
+  await store.insert('activities', {
+    type: 'contact',
+    description: `New contact created: ${contact.name}`,
+    contactId: contact.id,
+    userId: 'system',
+  });
+
+  broadcast({ type: 'contact_update', payload: contact });
+
+  return Response.json({ success: true, data: contact });
+}
+
+async function getContact(request: Request, params: Record<string, string>): Promise<Response> {
+  const store = await getStorage();
+  const contact = store.get('contacts', params.id);
+  if (!contact) {
+    return Response.json({ success: false, error: 'Contact not found' }, { status: 404 });
+  }
+  return Response.json({ success: true, data: contact });
+}
+
+async function updateContact(request: Request, params: Record<string, string>): Promise<Response> {
+  const store = await getStorage();
+  const existing = store.get('contacts', params.id);
+  if (!existing) {
+    return Response.json({ success: false, error: 'Contact not found' }, { status: 404 });
+  }
+
+  const body = await request.json();
+  const updated = await store.update('contacts', params.id, body);
+
+  // Create activity
+  await store.insert('activities', {
+    type: 'contact',
+    description: `Contact updated: ${updated.name}`,
+    contactId: updated.id,
+    userId: 'system',
+  });
+
+  broadcast({ type: 'contact_update', payload: updated });
+
+  return Response.json({ success: true, data: updated });
+}
+
+async function deleteContact(request: Request, params: Record<string, string>): Promise<Response> {
+  const store = await getStorage();
+  const existing = store.get('contacts', params.id);
+  if (!existing) {
+    return Response.json({ success: false, error: 'Contact not found' }, { status: 404 });
+  }
+
+  await store.delete('contacts', params.id);
+
+  broadcast({ type: 'contact_update', payload: { id: params.id, deleted: true } });
+
+  return Response.json({ success: true });
+}
+
+async function listDeals(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const stage = url.searchParams.get('stage') || '';
+
+  const store = await getStorage();
+  let results = store.list('deals');
+
+  if (stage) {
+    results = results.filter((d: { stage?: string }) => d.stage === stage);
+  }
+
+  return Response.json({ success: true, data: results });
+}
+
+async function createDeal(request: Request): Promise<Response> {
+  const body = await request.json();
+  const store = await getStorage();
+
+  const deal = await store.insert('deals', {
+    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,
+  });
+
+  // Create activity
+  await store.insert('activities', {
+    type: 'deal',
+    description: `New deal created: ${deal.title}`,
+    dealId: deal.id,
+    userId: 'system',
+  });
+
+  broadcast({ type: 'deal_update', payload: deal });
+
+  return Response.json({ success: true, data: deal });
+}
+
+async function listActivities(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const limit = parseInt(url.searchParams.get('limit') || '50');
+
+  const store = await getStorage();
+  const activities = store.list('activities', { limit });
+
+  return Response.json({
+    success: true,
+    data: activities
+  });
+}
+
+async function uploadMedia(request: Request): Promise<Response> {
+  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 store = await getStorage();
+
+  // Store file (in production, this would go to S3, etc.)
+  const buffer = await file.arrayBuffer();
+  const uploadsDir = './uploads';
+  await Bun.write(`${uploadsDir}/${crypto.randomUUID()}-${file.name}`, buffer);
+
+  const media = await store.insert('media', {
+    filename: file.name,
+    mimetype: file.type,
+    size: file.size,
+    url: `/media/${crypto.randomUUID()}`,
+    contactId: formData.get('contactId') as string || undefined,
+    dealId: formData.get('dealId') as string || undefined,
+    uploadedBy: 'system',
+  });
+
+  broadcast({ type: 'media_upload', payload: media });
+
+  return Response.json({ success: true, data: media });
+}
+
+async function getDashboardStats(): Promise<Response> {
+  const store = await getStorage();
+  const stats = store.getStats();
+  const deals = store.list('deals');
+  const activities = store.list('activities', { limit: 1000 });
+
+  const activeDeals = deals.filter((d: { stage?: string }) =>
+    !d.stage?.startsWith('closed_')
+  ).length;
+
+  const pipelineValue = deals
+    .filter((d: { stage?: string }) => !d.stage?.startsWith('closed_'))
+    .reduce((sum: number, d: { value?: number }) => sum + (d.value || 0), 0);
+
+  const wonThisMonth = deals
+    .filter((d: { stage?: string }) => d.stage === 'closed_won')
+    .reduce((sum: number, d: { value?: number }) => sum + (d.value || 0), 0);
+
+  const activitiesToday = activities.filter((a: { timestamp?: string }) =>
+    a.timestamp && new Date(a.timestamp).toDateString() === new Date().toDateString()
+  ).length;
+
+  return Response.json({
+    success: true,
+    data: {
+      totalContacts: stats.contacts,
+      activeDeals,
+      pipelineValue,
+      wonThisMonth,
+      activitiesToday,
+      conversionRate: stats.contacts > 0 ? (activeDeals / stats.contacts) * 100 : 0,
+    }
+  });
+}
+
+// WebSocket handler
+const websocketHandler = {
+  open(ws: ServerWebSocket) {
+    connectedClients.add(ws);
+    ws.send(JSON.stringify({ type: 'connected', timestamp: new Date().toISOString() }));
+    console.log('WebSocket client connected');
+  },
+  message(ws: ServerWebSocket, message: string | Buffer) {
+    // Handle incoming WebSocket messages
+    try {
+      const data = JSON.parse(message.toString());
+      console.log('WebSocket message:', data);
+      // Echo back or broadcast as needed
+    } catch (e) {
+      console.error('Invalid WebSocket message:', e);
+    }
+  },
+  close(ws: ServerWebSocket) {
+    connectedClients.delete(ws);
+    console.log('WebSocket client disconnected');
+  },
+};
+
+// Server
+const server = Bun.serve({
+  port: 3001,
+  routes: {
+    "/": index,
+    "/api/contacts": {
+      GET: listContacts,
+      POST: createContact,
+    },
+    "/api/contacts/:id": {
+      GET: getContact,
+      PUT: updateContact,
+      DELETE: deleteContact,
+    },
+    "/api/deals": {
+      GET: listDeals,
+      POST: createDeal,
+    },
+    "/api/activities": {
+      GET: listActivities,
+    },
+    "/api/media": {
+      POST: uploadMedia,
+    },
+    "/api/dashboard/stats": {
+      GET: getDashboardStats,
+    },
+  },
+  websocket: websocketHandler,
+  development: {
+    hmr: true,
+    console: true,
+  },
+});
+
+// Ensure uploads directory exists
+Bun.file('./uploads').exists().then(async (exists) => {
+  if (!exists) {
+    await Bun.write('./uploads/.gitkeep', '');
+  }
+});
+
+console.log(`CRM Web Interface running at http://localhost:${server.port}`);
+console.log('WebSocket endpoint: ws://localhost:3001/ws');