View in Marketplace | Documentation | GitHub

@djangocfg/ext-support

Customer support and ticketing system extension for DjangoCFG.

Part of DjangoCFG — modern Django framework for production-ready SaaS applications.

Features

• Ticket Management - Create, track, and resolve support tickets
• Real-time Messaging - Live chat within tickets
• Categories & Priority - Organize tickets efficiently
• Analytics - Track response times and resolution rates

Requirements

• Next.js 16+
• React 19+
• @djangocfg/ui-core
• @djangocfg/ext-base

Install

pnpm add @djangocfg/ext-support

Quick Start (Next.js App Router)

1. Create layout.tsx (Server Component for metadata)

// app/support/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Support',
  description: 'Help and support center',
};

export default function SupportLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return children;
}

2. Create page.tsx (Client Component)

// app/support/page.tsx
'use client';

import { SupportLayout } from '@djangocfg/ext-support';

export default function SupportPage() {
  return (
    <SupportLayout>
      {/* Optional: custom content */}
    </SupportLayout>
  );
}

That's it! SupportLayout includes everything: providers, ticket list, chat panel, and create ticket dialog.

Custom Integration

If you need more control, use individual components:

Provider Setup

// app/providers.tsx
'use client';

import { SupportProvider } from '@djangocfg/ext-support/hooks';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SupportProvider>
      {children}
    </SupportProvider>
  );
}

Using Context Hooks

'use client';

import { useSupportContext } from '@djangocfg/ext-support/hooks';

function MyTicketList() {
  const {
    tickets,
    isLoadingTickets,
    createTicket,
    refreshTickets
  } = useSupportContext();

  const handleCreate = async () => {
    await createTicket({
      subject: 'New ticket',
      message: 'Description here',
    });
    await refreshTickets();
  };

  if (isLoadingTickets) return <div>Loading...</div>;

  return (
    <div>
      <button onClick={handleCreate}>Create Ticket</button>
      {tickets?.map(ticket => (
        <div key={ticket.uuid}>
          <h3>{ticket.subject}</h3>
          <span>Status: {ticket.status}</span>
        </div>
      ))}
    </div>
  );
}

API Reference

SupportContext

interface SupportContextValue {
  // Tickets
  tickets: Ticket[] | undefined;
  isLoadingTickets: boolean;
  ticketsError: Error | undefined;
  refreshTickets: () => Promise<void>;

  // Ticket operations
  getTicket: (uuid: string) => Promise<Ticket | undefined>;
  createTicket: (data: TicketRequest) => Promise<Ticket>;
  updateTicket: (uuid: string, data: TicketRequest) => Promise<Ticket>;
  partialUpdateTicket: (uuid: string, data: PatchedTicketRequest) => Promise<Ticket>;
  deleteTicket: (uuid: string) => Promise<void>;

  // Messages
  getMessages: (ticketUuid: string) => Promise<Message[] | undefined>;
  createMessage: (ticketUuid: string, data: MessageCreateRequest) => Promise<Message>;
  updateMessage: (ticketUuid: string, messageUuid: string, data: MessageRequest) => Promise<Message>;
  deleteMessage: (ticketUuid: string, messageUuid: string) => Promise<void>;
  refreshMessages: (ticketUuid: string) => Promise<void>;
}

Ticket Type

interface Ticket {
  uuid: string;
  subject: string;
  status: 'open' | 'in_progress' | 'resolved' | 'closed';
  created_at: string;
  updated_at: string;
}

TicketRequest Type

interface TicketRequest {
  subject: string;
  message: string;
}

Exports

// Main layout (includes all UI)
import { SupportLayout } from '@djangocfg/ext-support';

// Hooks and context
import {
  SupportProvider,
  useSupportContext
} from '@djangocfg/ext-support/hooks';

// Server-safe config
import { extensionConfig } from '@djangocfg/ext-support/config';

License

MIT

Links

• DjangoCFG Documentation
• GitHub