@burdenoff/microfe-support

Customer support and help desk system for the Burdenoff platform

Overview

The Support microfrontend provides a comprehensive customer support platform with ticket management, ticket-backed conversations, knowledge base, analytics, and SLA tracking. Deliver customer support with durable ticket history and operational insights.

Port: 5154 Module Type: Tenant Module API Gateway: Port 4018

Features

• Ticket Management

  • Create and manage support tickets
  • Priority levels (Low, Normal, High, Critical)
  • Status tracking (New, In Progress, Resolved, Closed)
  • Ticket assignment and escalation
  • Internal notes and customer replies
  • File attachments

• Ticket-Backed Conversations

  • Customer and agent replies on support tickets
  • Message subscriptions for ticket updates
  • Durable conversation history
  • Canned responses
  • Assignment and escalation through ticket workflows

• Knowledge Base

  • Self-service articles
  • Category organization
  • Article search
  • View tracking
  • Helpful/not helpful voting
  • Related articles

• SLA Management

  • Configure SLA policies
  • Track response times
  • Resolution time monitoring
  • SLA breach alerts
  • Business hours configuration
  • Custom SLA rules per priority

• Analytics Dashboard

  • Ticket volume trends
  • Response time metrics
  • Resolution time metrics
  • Agent performance
  • Customer satisfaction scores
  • Category breakdowns

• Settings & Configuration

  • General settings
  • Working hours
  • SLA policies
  • Canned responses
  • Email templates
  • Ticket categories

Installation

# Install dependencies
bun install

# Generate GraphQL types
bun run codegen

Development

# Start development server (port 5154)
bun run dev

# Run linter
bun run lint

# Format code
bun run format

# Type check
bun run type:check

# Build for production
bun run build

# Run all quality checks
bun run sanity

Project Structure

src/
├── dev/                      # Development harness
├── support/                  # Main module
│   ├── components/          # React components
│   │   ├── PageLayout.tsx
│   │   ├── analytics/       # Analytics components
│   │   ├── chat/           # Chat components
│   │   ├── settings/       # Settings components
│   │   ├── shared/         # Shared components
│   │   ├── tickets/        # Ticket components
│   │   └── ui.tsx          # UI components
│   ├── graphql/            # GraphQL operations
│   │   ├── client.ts
│   │   ├── generated/      # Generated types
│   │   └── operations/     # Queries/Mutations
│   ├── hooks/              # Custom React hooks
│   │   ├── useAnalyticsOperations.ts
│   │   ├── useChatOperations.ts
│   │   ├── useKnowledgeBaseOperations.ts
│   │   ├── useSettingsOperations.ts
│   │   └── useTicketOperations.ts
│   ├── pages/              # Page components
│   ├── providers/          # Context providers
│   ├── store/              # State management
│   ├── types/              # TypeScript types
│   └── utils/              # Utility functions

GraphQL Operations

Queries

• getTickets - List support tickets
• getTicketDetail - Get ticket messages and status
• mySupportTickets - List my support tickets
• getArticles - List KB articles
• getArticle - Get article details
• getSupportAnalytics - Get analytics
• getSLAPolicies - List SLA policies
• getCannedResponses - Get canned responses

Mutations

• createTicket - Create support ticket
• updateTicket - Update ticket
• addTicketMessage - Add message to ticket
• assignTicket - Assign to agent
• changeTicketStatus - Update status
• createSLAPolicy - Create SLA policy
• createCannedResponse - Create canned response

Subscriptions

• ticketUpdated - Ticket status changes (in generated code)
• ticketMessageAdded - Real-time ticket conversation updates (in generated code)

Configuration

Environment Variables

VITE_API_GATEWAY_URL=http://localhost:4018/graphql
VITE_TENANT_ID=your-tenant-id
VITE_WORKSPACE_ID=your-workspace-id

Integration with Shell

import { SupportRoot } from '@burdenoff/microfe-support';

function App() {
  return (
    <SupportRoot
      basePath="/support"
      navigate={navigate}
      apiGatewayUrl="http://localhost:4018/graphql"
      workspaceId="workspace-123"
      currentUser={{
        id: 'user-1',
        email: '[email protected]',
        displayName: 'Support Agent',
      }}
      onTicketCreated={(ticket) => {
        console.log('Ticket created:', ticket);
      }}
      onChatStarted={(session) => {
        console.log('Ticket conversation started:', session);
      }}
      onArticleViewed={(article) => {
        console.log('Article viewed:', article);
      }}
    />
  );
}

Ticket Priorities

| Priority | SLA Response | SLA Resolution | Use Case | |----------|--------------|----------------|----------| | Critical | 15 minutes | 4 hours | System down, data loss | | High | 1 hour | 8 hours | Major feature broken | | Normal | 4 hours | 24 hours | General issues | | Low | 24 hours | 72 hours | Questions, requests |

Ticket Statuses

• New - Just created, not yet assigned
• In Progress - Being worked on by agent
• Waiting on Customer - Awaiting customer response
• Resolved - Issue fixed, awaiting confirmation
• Closed - Confirmed resolved
• Reopened - Reopened after closure

SLA Breach Status

• None - On track
• Warning 50% - 50% of time elapsed
• Warning 75% - 75% of time elapsed
• Warning 90% - 90% of time elapsed
• Breached - SLA time exceeded

Knowledge Base

Article Structure

• Title and description
• Article content (Markdown)
• Category assignment
• Tags for search
• Related articles
• View count tracking
• Helpful ratings

SEO-Friendly URLs

/knowledge-base/getting-started
/knowledge-base/account-management/password-reset
/knowledge-base/billing/upgrade-plan

Available Scripts

| Script | Description | |--------|-------------| | bun run dev | Start development server | | bun run build | Build for production | | bun run lint | Run ESLint | | bun run format | Format with Prettier | | bun run type:check | TypeScript type checking | | bun run codegen | Generate GraphQL types | | bun run sanity | Run all quality checks |

Technology Stack

• Framework: React 19 with TypeScript 5.9
• Build Tool: Vite 7
• State Management: Zustand 5
• GraphQL Client: Apollo Client
• Styling: Tailwind CSS v4
• UI Components: Radix UI
• Icons: Lucide React
• Routing: React Router DOM 7
• Real-time: GraphQL Subscriptions

Known Issues

GraphQL Generated Code

There are 2 TypeScript errors in src/support/graphql/generated/operations.ts (lines 778, 787) related to Apollo Client subscription type compatibility. These are in generated code and will be resolved when the GraphQL schema is regenerated. The module is fully functional despite these errors.

Best Practices

1. Ticket Management

   • Respond within SLA times
   • Keep customers updated
   • Use internal notes for team communication
   • Close resolved tickets promptly

2. Live Chat

   • Greet customers promptly
   • Use canned responses for efficiency
   • Transfer to specialist when needed
   • End chats politely

3. Knowledge Base

   • Write clear, concise articles
   • Include screenshots/videos
   • Keep content up-to-date
   • Monitor article helpfulness

License

Proprietary - Copyright © 2025 Burdenoff Consultancy Services Pvt. Ltd.