fix: add test-email endpoint for SMTP diagnostics

POST /api/admin/test-email — superadmin only, returns exact SMTP
host/port/error so we can diagnose why notifications aren't delivered.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md

@@ -0,0 +1,271 @@
+# UX/UI Overhaul — Design Spec
+
+## Overview
+
+Comprehensive UX/UI improvement focused on three pillars: **consistency**, **navigation reorganization**, and **premium polish**. The biggest structural change is unifying Posts, Translations, and Artefacts into a single "Content" page with a pipeline model reflecting the real production workflow.
+
+## 1. Navigation Reorganization
+
+### Current State
+- 4 collapsible module groups (Marketing, Projects, Finance, Issues)
+- 17 clickable items, some requiring 2 clicks (expand group → click item)
+- Issues is its own module group with a single item
+
+### New Structure: Flat Nav with Dividers (9 items)
+
+```
+Dashboard
+──────────────────
+Campaigns
+Content              ← NEW (replaces Posts, Translations, Artefacts, Calendar)
+──────────────────
+Projects             ← absorbs Tasks as a tab/view
+Issues
+──────────────────
+Finance              ← absorbs Budgets as a tab
+──────────────────
+Team
+Settings             ← absorbs Brands, Assets as tabs
+```
+
+### Rules
+- No collapsible groups — every page is 1 click
+- Subtle divider lines (1px, white at 6% opacity) separate conceptual groups
+- Active state: existing `sidebar-active-glow` style
+- Collapsed sidebar: icons only, same as current behavior
+
+### What Moves Where
+| Current Location | New Location |
+|-----------------|-------------|
+| Posts (page) | Content → Posts tab |
+| Calendar (page) | Content → Posts tab → Calendar view toggle |
+| Translations (page) | Content → Copy tab + Translations tab |
+| Artefacts (page) | Content → Design tab |
+| Assets (page) | Settings → Assets tab |
+| Brands (page) | Settings → Brands tab |
+| Tasks (page) | Projects → Tasks tab inside project detail |
+| Budgets (page) | Finance → Budgets tab |
+
+## 2. Content Page — Unified Pipeline
+
+### Concept
+The content production pipeline is: **Copy → Translate → Design → Post → Publish**. Currently these are 4 separate pages with no visible connection. The Content page unifies them under one roof with tabs.
+
+### Tabs
+
+| Tab | Purpose | Views Available |
+|-----|---------|----------------|
+| **Pipeline** | Bird's-eye view of all content items by stage | Kanban (stages as columns) |
+| **Copy** | Write original copy (usually AR) | List |
+| **Translations** | Translate/review/correct copy in other languages | List, grouped by language |
+| **Design** | Create artefacts (images/videos) from approved copy | Grid, List |
+| **Posts** | Assemble final posts for publishing | Kanban, List, Calendar |
+
+### Pipeline Tab
+- Kanban columns: `Copy` → `Translate` → `Design` → `Post` → `Published`
+- Each card shows: title, stage badge, brand, assignee avatar, approval status icon (✅/⏳/❌)
+- Drag between columns advances stage (triggers approval flow if applicable)
+- Campaign grouping: cards from the same campaign share a visual group (shared top border or header)
+- "New Content" button creates a content item starting at Copy stage
+
+### Content Item — The Linking Model
+A **Content Item** is the thread connecting all stages:
+- Has a title (the post concept/idea)
+- Optionally linked to a Campaign
+- Has linked records: copy entries, translations, design artefacts, post
+- Each linked record has its own approval status
+
+### Detail Panel
+- Pipeline breadcrumb at top: `Copy ✅ → Translate ✅ → Design ⏳ → Post ○`
+- Clicking a stage in the breadcrumb scrolls to that section in the panel
+- "Advance to next stage" action button when current stage is approved
+- All linked items visible in one panel (copy text, translation list, design thumbnails, post config)
+
+### Approval Flow Per Stage
+| Stage | Approval Type |
+|-------|--------------|
+| Copy | Formal approve/reject |
+| Translate | Review & correct (lighter — suggestions, not gates) |
+| Design | Formal approve/reject |
+| Post | Formal approve/reject (final gate before publish) |
+
+### Standalone Posts
+Not every content item needs a campaign or full pipeline. Users can:
+- Create a post directly from the Posts tab (skips Copy/Translate/Design)
+- Create copy without linking to a campaign
+- The pipeline is the recommended flow, not enforced
+
+## 3. Campaign Brief Enhancement
+
+### Current State
+Campaigns exist but are mostly containers for posts. The campaign detail has a calendar timeline view.
+
+### Enhanced Campaign Brief
+Campaign detail page becomes a proper strategic document:
+
+- **Brief section**: goals (awareness/engagement/conversions), target audience, key messages
+- **Metrics targets**: reach, impressions, engagement rate, conversion targets
+- **Timeline**: keep existing calendar timeline (no changes)
+- **Budget**: link to finance/budget allocation
+- **Approval gate**: campaign must be approved before content work begins
+- **Content items**: cards showing linked content items with pipeline progress indicators
+
+### Campaign → Content Flow
+- Approved campaign shows "Create Content" button
+- Creates a content item pre-linked to the campaign
+- Campaign detail shows all its content items with stage progress
+
+## 4. Dashboard Redesign
+
+### Current Problem
+Dashboard feels messy and doesn't answer "what needs my attention?"
+
+### New Layout
+
+**Top row — 4 metric cards:**
+| Card | Content |
+|------|---------|
+| Active Campaigns | Count + pending approval count |
+| Content in Pipeline | Total + breakdown by stage |
+| Awaiting Your Approval | Items needing your review |
+| Published This Period | Week/month toggle |
+
+**Middle — Two columns:**
+- **Left: Pipeline funnel** — horizontal bar/funnel showing item count per stage. Click any stage → navigates to Content page filtered to that stage.
+- **Right: My Tasks** — items assigned to current user needing action, sorted by urgency (overdue first, then by due date)
+
+**Bottom row — Two sections:**
+- **Left: Recent Activity** — feed of actions (approvals, new content, status changes, comments). Shows avatar + action + item + timestamp.
+- **Right: Upcoming Deadlines** — content items and campaigns with approaching due dates. Color-coded by urgency (red = overdue, amber = this week, gray = later).
+
+### Principle
+Dashboard answers: **"What needs my attention right now?"** — not just display stats.
+
+## 5. Consistency Standards
+
+### Page Header Pattern
+Every page uses the same header layout:
+```
+[Page Title]                    [Search] [Filters] [View Toggle] [+ Create]
+```
+- Same order, same position on every page
+- Search: expandable icon → input field (consistent interaction)
+- Filters: always visible inline (no toggle button to show/hide)
+- View toggle: far right, before Create button
+- Create button: always primary style, always rightmost
+
+### Filter Bar
+- Always inline, always visible, consistent height
+- Same dropdown component across all pages
+- "Clear all" link appears when any filter is active
+- Active filters show as pills/badges
+
+### Detail Panels (SlidePanel)
+- Width: 480px on all pages
+- Header: `[← Back] Title [⋯ Actions]`
+- Pipeline breadcrumb at top (for content items)
+- Tab order: Details → Activity → Approval (consistent)
+- Save: always top-right in header
+- Delete: always inside ⋯ menu (never standalone button)
+
+### Cards (Kanban/Grid)
+- Single `KanbanCard` component used everywhere (already exists — enforce it)
+- Required elements: title, status badge, brand badge, assignee avatar, date
+- Hover: lift + shadow via existing `card-hover` class
+
+### Empty States
+- Always use shared `EmptyState` component
+- Always include primary action button ("Create your first X")
+- Consistent icon size, spacing, copy tone
+
+### Loading States
+- Skeleton loaders that match actual content dimensions
+- No bare full-page spinners — always skeletons
+- Skeleton shapes match the view (card skeletons for grid, row skeletons for list)
+
+## 6. Premium Polish
+
+### Transitions & Animations
+| Element | Animation |
+|---------|-----------|
+| Route changes | Fade + slide-up (150ms ease-out) |
+| Detail panel open | Spring slide-in from right (slight overshoot) |
+| Kanban drag | Card lifts with shadow + slight rotation (2deg), drop zone pulses |
+| Status badge change | Color crossfade (not instant swap) |
+| View toggle (list↔grid) | Crossfade between views |
+| Toasts | Spring slide-in from top-right, stack with spacing |
+| Tab active indicator | Slides to follow selection |
+
+### Hover & Interaction States
+| Element | Hover Effect |
+|---------|-------------|
+| Cards | Lift 2px + deeper shadow + subtle brand-color border glow (10% opacity) |
+| Buttons | Scale 1.02 on hover, 0.98 on press |
+| Nav items | Background fills from left (not instant) |
+| Avatars | Ring glow in role color |
+
+### Visual Depth & Glass Effects
+- Detail panel header: frosted glass (`backdrop-blur-xl`), stays visible while body scrolls
+- Modal backdrop: deeper blur (12px, up from current 4px)
+- Pipeline cards: layered multi-shadow for realistic depth
+- Sidebar: subtle inner glow at top edge
+- Status badges: glass morphism (translucent bg + subtle border)
+
+### Typography
+- Page titles: `text-3xl font-light tracking-tight` (up from text-2xl)
+- Consistent use of `text-text-secondary` variable (no raw gray-* classes)
+- Numbers/metrics: `tabular-nums`, slightly heavier weight
+- Tighter heading letter-spacing across the board
+
+### Empty States — Premium
+- Illustrated line-art SVG icons (matching app aesthetic) instead of plain Lucide icons
+- Subtle gradient background behind icon circle
+- Friendly, helpful copy ("No content yet — start by writing some copy")
+
+### Dashboard Widgets — Premium
+- Pipeline funnel: animated fill on first load (bars grow from left)
+- Metric cards: gradient left-border accent (stage color), number count-up animation
+- Activity feed: staggered fade-in (50ms between items)
+- Metric card hover: gentle pulse on accent border
+
+## 7. Files Impacted
+
+### Navigation
+- `client/src/components/Sidebar.jsx` — rewrite nav structure
+- `client/src/App.jsx` — update routes (remove standalone pages, add Content route)
+
+### Content Page (new)
+- `client/src/pages/Content.jsx` — new unified page with tabs
+- `client/src/components/ContentPipelineBoard.jsx` — new pipeline kanban
+- `client/src/components/ContentDetailPanel.jsx` — new detail panel with pipeline breadcrumb
+- Existing pages (`PostProduction.jsx`, `Translations.jsx`, `Artefacts.jsx`) become tab sub-components or are refactored into Content
+
+### Campaigns
+- `client/src/pages/Campaigns.jsx` — add brief fields (goals, metrics, audience)
+- `client/src/pages/CampaignDetail.jsx` — add brief section, content items list, approval gate
+- `server/server.js` — add campaign brief fields to schema, approval endpoint
+
+### Dashboard
+- `client/src/pages/Dashboard.jsx` — full redesign with new widget layout
+
+### Consistency
+- `client/src/components/SlidePanel.jsx` — standardize width, header layout
+- `client/src/components/EmptyState.jsx` — add illustrated SVG variants
+- `client/src/components/SkeletonLoader.jsx` — match actual content dimensions
+- All page files — standardize header pattern, filter bar, loading states
+
+### Polish
+- `client/src/index.css` — new animations, glass effects, spring transitions, typography updates
+- `client/src/components/KanbanBoard.jsx` — enhanced drag animations
+- `client/src/components/KanbanCard.jsx` — premium hover states
+- `client/src/components/StatusBadge.jsx` — glass morphism variant
+- `client/src/components/Modal.jsx` — deeper backdrop blur
+- `client/src/components/Toast.jsx` — spring animations
+
+### Server
+- `server/server.js` — content item model, campaign brief fields, pipeline stage tracking
+- New columns in NocoDB: content_item_id linkages, campaign brief fields (goals, metrics, audience, approval_status)
+
+### i18n
+- `client/src/i18n/en.json` — new keys for Content page, pipeline stages, dashboard widgets, campaign brief
+- `client/src/i18n/ar.json` — same keys in Arabic

server/server.js

@@ -640,6 +640,28 @@ app.get('/api/health', async (req, res) => {
   });
 });
 
+// ─── EMAIL TEST ─────────────────────────────────────────────────
+
+app.post('/api/admin/test-email', requireAuth, async (req, res) => {
+  if (req.session.userRole !== 'superadmin') return res.status(403).json({ error: 'Superadmin only' });
+  const to = req.body.to || req.session.userEmail;
+  if (!to) return res.status(400).json({ error: 'No recipient — pass { "to": "email@example.com" }' });
+  const { sendMail, getSmtpConfig } = require('./mail');
+  const config = getSmtpConfig();
+  if (!config) return res.status(503).json({ error: 'SMTP not configured', env: { server: !!process.env.CLOUDRON_MAIL_SMTP_SERVER || !!process.env.MAIL_SMTP_SERVER } });
+  try {
+    const info = await sendMail({
+      to,
+      subject: 'Rawaj — Test Email',
+      html: '<p>If you received this, email delivery is working correctly.</p>',
+      text: 'If you received this, email delivery is working correctly.',
+    });
+    res.json({ success: true, to, messageId: info?.messageId, smtp: { host: config.host, port: config.port, from: config.from } });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message, code: err.code, smtp: { host: config.host, port: config.port } });
+  }
+});
+
 // ─── SETUP ROUTES ───────────────────────────────────────────────
 
 app.get('/api/setup/status', async (req, res) => {