Enhance embeddable campaign editor with assets and richer templates

README.md

@@ -1,118 +1,50 @@
-# Insight Nexus CRM
+# Embeddable Campaign Editor
 
-Insight Nexus CRM is an immersive, local-first Vite + React command center for predictive revenue intelligence.
-It fuses data management, forecasting, risk analysis, AI advisory, and deep comparison workflows into one cinematic
-experience powered by your private OpenAI key.
+A no-code, ministry-grade campaign editor you can mount on any HTML page with a single element. Marketing and communications teams get drag-and-drop layout tools, a 120+ template library, workflow controls, attachments, and one-click HTML/MJML export without touching code.
 
-## Architecture
+## Quick start
 
-```
-root
-├── client   # Vite + React + Tailwind front-end (TypeScript)
-└── server   # Node/Express API broker that talks to OpenAI Responses
-```
-
-The UI runs on Vite (port 5173) and proxies API calls to the Node service (port 5001 by default). All OpenAI traffic
-is handled server-side so your key never touches the browser.
-
-## Features
-
-- **Data fabric ops** – upload CRM CSV/JSON/TXT intelligence, track freshness, and surface AI-generated coverage maps.
-- **Prediction studio** – craft multi-dimensional business scenarios, attach documents, and receive structured forecasts,
-  risk posture, CRM plays, and AI advisory in one response.
-- **Risk command** – monitor Atlas-generated risk matrices, mitigation sprints, and telemetry streams in a premium glassmorphism UI.
-- **AI advisor** – chat with Atlas, the revenue copilot, for executive-ready guidance that remembers context across turns.
-- **Collaboration hub** – upload two intelligence files for deep delta analysis with suggested actions, automation plays, and executive summaries.
-
-## Prerequisites
-
-- Node.js 18+
-- npm 9+
-- An OpenAI API key with access to the Responses API (e.g., `gpt-4.1-mini`)
-
-## Setup
-
-### Windows quick-start
-
-If you're on Windows 11, the repository includes helper scripts:
-
-1. Double-click `install.bat` to verify Node 18+/npm 9+ are available and install server/client dependencies. The installer
-   validates versions, skips modules that already exist, and aborts with a clear message if the project structure cannot be found.
-2. Copy `server/.env.example` to `server/.env` and set `OPENAI_API_KEY=<your key>`.
-3. Double-click `run.bat` to launch both the Node API broker and Vite client in separate terminals. The runner re-validates
-   Node/npm, ensures dependencies remain installed, and reminds you if the `.env` file is missing.
-
-> **Tip:** If you previously ran the legacy Flask version of this project, stop any lingering Python processes before using the
-> new Node/Vite stack to avoid port conflicts.
-
-### Manual setup
-
-1. **Install dependencies**
+1. Open `index.html` in a browser (or serve the repo with any static server).
+2. Click **Mount demo editor** to load the widget inside the demo container.
+3. Drag blocks, attach imagery, load templates, and export HTML or MJML.
 
-   ```bash
-   cd server && npm install
-   cd ../client && npm install
-   ```
+To embed in your own page:
 
-2. **Configure environment variables**
-
-   ```bash
-   cp server/.env.example server/.env
-   # edit server/.env and set OPENAI_API_KEY=<your key>
-   ```
-
-   The server respects `PORT` (default `5001`). Ensure it matches the proxy target in `client/vite.config.ts` if changed.
-
-3. **Run the Node API broker**
-
-   ```bash
-   cd server
-   npm run dev
-   ```
-
-4. **Run the Vite client**
-
-   In a second terminal:
-
-   ```bash
-   cd client
-   npm run dev
-   ```
-
-5. Navigate to [http://localhost:5173](http://localhost:5173) to experience the Insight Nexus CRM suite.
-
-### Auto-runner behaviour
-
-- `run.bat` opens two dedicated terminals named **Insight Nexus CRM - API** and **Insight Nexus CRM - Client**. Close those
-  windows (or press `CTRL+C` inside each) to stop the services.
-- The runner only calls `install.bat` when `node_modules` is missing, so you can re-launch instantly once dependencies are in place.
-- Both scripts exit early with actionable guidance if prerequisites are not met, helping diagnose Windows environment issues quickly.
-
-## Usage workflow
-
-- Start in **Command Center** to review real-time telemetry and AI advisories.
-- Head to **Data Management** to ingest supporting docs and monitor Atlas automations.
-- Launch predictions in **Predictive Strategy**; attach up to four documents to enrich outcomes.
-- Use **Risk Command** to understand threat vectors and mitigation plays.
-- Chat with **AI Advisor** for curated actions, then compare intelligence files inside **Collaboration Hub** for deep delta insights.
+```html
+<div id="campaign-editor"></div>
+<script src="/static/js/campaign-editor.js"></script>
+<script>
+  CampaignEditor.mount('#campaign-editor', {
+    apiBaseUrl: 'https://api.example.com',
+    currentUser: { id: 'u1', name: 'Alex Editor', role: 'editor' },
+    locale: 'en',
+    brandPalette: ['#0040ff', '#111827', '#f97316'],
+  });
+</script>
+```
 
-## Testing & linting
+## Features
 
-- Front-end: `cd client && npm run lint`
-- Server: `cd server && npm run lint`
+- **No-code template builder** – drag-and-drop blocks (text, headings, paragraphs, images with uploads/attachments, buttons, dividers, spacers, sections, 1–3 column layouts) with inline style controls for typography, color, padding, and alignment.
+- **Marketing template library** – 120+ categorized starter templates (events, internal news, public campaigns, holidays, newsletters, more) you can load, clone, and save as custom entries.
+- **Brand asset tray** – curated imagery cards ready to insert or attach to the selected block; upload new pictures directly inside image blocks.
+- **Campaign workflow** – metadata form (objective, channel, dates, tags), status flow (draft → in review → approved → ready), comments with optional visual attachment, and audit log.
+- **Responsive preview** – live desktop/mobile toggle while editing.
+- **HTML & MJML export** – copy to clipboard or download files generated from the block model.
 
-Both projects are TypeScript/ESM aware. Adjust scripts or integrate additional tooling as needed.
+## Customization hooks
 
-## Security
+Pass an options object to `CampaignEditor.mount` to tailor the widget:
 
-- Never expose your OpenAI key to the browser. Keep it in `server/.env` or your preferred secret manager.
-- Do not commit `.env` files. Keys listed here are placeholders only.
-- Consider adding request authentication before deploying beyond localhost.
+- `apiBaseUrl` – base URL for your backend. All CRUD actions are currently mocked client-side but can be wired to REST/GraphQL calls.
+- `currentUser` – `{ id, name, role }` controls workflow permissions (editor/reviewer/manager).
+- `locale` – language code for labels (defaults to `en`).
+- `brandPalette` – array of brand colors exposed in style pickers and swatches.
+- `campaign` – optional initial campaign payload to hydrate the form and workflow state.
 
-## Troubleshooting
+## Export output
 
-- If you encounter `Unable to generate insights` or `Unable to compare documents`, confirm the server console is running and that
-  `OPENAI_API_KEY` is valid.
-- Update the `model` in `server/src/index.js` to match the tier available to your account if `gpt-4.1-mini` is unavailable.
+- **HTML** – responsive, email-friendly markup with inline styles.
+- **MJML** – generated from the same block tree so you can compile server-side.
 
-Enjoy orchestrating a next-generation CRM experience powered by Atlas.
+Both exports are accessible from the widget toolbar (copy or download).