Skip to main content

Communication Queue System - Quick Start 🚀

Get your queue monitoring dashboard running in 10 minutes!

✅ What's Already Done​

✅ Backend API (9 endpoints) - Ready
✅ Frontend Dashboard (7 components) - Ready
✅ Custom hooks (2 hooks) - Ready
✅ Service layer - Ready
✅ Type definitions - Ready
✅ Documentation (7 guides) - Ready

Everything compiles with ZERO errors!

🚀 10-Minute Integration​

Step 1: Add the Route (2 minutes)​

Find your router file and add:

// apps/frontend-pwa/src/App.tsx or your router config

import QueueMonitoringPage from "@/components/queue/QueueMonitoringPage";

// Add this route:
{
  path: "/admin/queue",
  element: <QueueMonitoringPage />,
}

Add to your sidebar/admin menu:

import { Activity } from "lucide-react";

<Link to="/admin/queue" className="nav-link">
  <Activity className="w-5 h-5" />
  Queue Monitoring
</Link>

Step 3: Test (6 minutes)​

# 1. Ensure backend is running
# Should already be running in your terminal

# 2. Open browser and navigate to:
http://localhost:5173/admin/queue

# 3. You should see:
✅ Stats cards (Total, Pending, Processing, etc.)
✅ Jobs list (or "No jobs found" if queue is empty)
✅ Filter tabs (All, Pending, Failed, etc.)
✅ Action buttons (Refresh, Process Now)

# 4. Test an action:
✅ Click "Refresh" - Data reloads
✅ Click "Process Now" - Queue processes manually
✅ If you have jobs, click "View" - Modal opens

That's it! You're done! 🎉

🎯 Quick Feature Test​

Create a Test Job (Optional)​

If your queue is empty and you want to see data:

-- Run in your database
INSERT INTO communication_queue (
  communication_id,
  priority,
  scheduled_at,
  status,
  attempts,
  max_attempts,
  payload,
  created_at
) VALUES (
  uuid_generate_v4(),
  'normal',
  NOW(),
  'pending',
  0,
  3,
  '{"test": "Sample job for dashboard testing"}',
  NOW()
);

Refresh the dashboard - you'll see the job appear!

📊 What You'll See​

Dashboard Components​

  1. Stats Cards (Top Section)

    • 6 color-coded cards showing queue health
    • Auto-refreshes every 30 seconds
    • Alert banners if thresholds exceeded

  2. Filter Tabs (Middle)

    • Click to filter jobs by status
    • Instant client-side filtering

  3. Jobs Table (Main Content)

    • Desktop: Full table with all details
    • Mobile: Card layout
    • Action buttons on each row

  4. Details Modal (On Click)

    • Opens when you click "View"
    • Shows complete job information
    • JSON payload viewer

🎨 Customization (Optional)​

Change Auto-Refresh Interval​

// In QueueMonitoringPage.tsx
const { stats } = useQueueStats(60000); // 60 seconds instead of 30

Change Alert Thresholds​

// In QueueStatsCards.tsx
alert={stats.pending > 200}  // Change from 100 to 200

Change Jobs Limit​

// In QueueMonitoringPage.tsx
const { jobs } = useQueueJobs(filterStatus, 100); // 100 instead of 50

🐛 Troubleshooting​

Dashboard Shows "No jobs found"​

This is normal if:

  • Queue is empty
  • No communications have been sent
  • All jobs completed

To populate:

  • Send a test communication
  • Or insert test data (SQL above)

Stats Show All Zeros​

Check:

  • Backend is running
  • API URL is correct
  • Authentication token is valid
  • Business ID is set

"Failed to load" Error​

Solutions:

  1. Check browser console for detailed error
  2. Verify backend endpoint: http://localhost:3000/api/businesses/{id}/communication-queue/stats
  3. Test with curl to verify API works
  4. Check authentication token

📚 Documentation Reference​

Need more details?

  • Integration: QUEUE-DASHBOARD-INTEGRATION-GUIDE.md
  • API Reference: COMMUNICATION-QUEUE-API.md
  • Complete Overview: COMPLETE-QUEUE-IMPLEMENTATION-SUMMARY.md
  • Visual Guide: QUEUE-SYSTEM-VISUAL-OVERVIEW.md

✅ Success Checklist​

After integration, verify:

  • Dashboard accessible at /admin/queue
  • Stats cards display (even if zeros)
  • Filter tabs are clickable
  • Refresh button works
  • Mobile view is responsive
  • No console errors
  • Authentication works
  • Business context is set

🎉 That's It!​

You now have a production-ready Communication Queue Monitoring Dashboard!

Total setup time: ~10 minutes

Navigate to: http://localhost:5173/admin/queue

Enjoy your new operational superpower! 🚀