# @burdenoff/microfe-support > Customer support and help desk system for the Burdenoff platform [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-19-61dafb.svg)](https://reactjs.org/) [![Vite](https://img.shields.io/badge/Vite-7-646cff.svg)](https://vitejs.dev/) ## 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 ```bash # Install dependencies bun install # Generate GraphQL types bun run codegen ``` ## Development ```bash # 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 ```env VITE_API_GATEWAY_URL=http://localhost:4018/graphql VITE_TENANT_ID=your-tenant-id VITE_WORKSPACE_ID=your-workspace-id ``` ### Integration with Shell ```tsx import { SupportRoot } from '@burdenoff/microfe-support'; function App() { return ( { 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.