@djangocfg/ext-support 1.0.0

package/src/index.ts

@@ -0,0 +1,39 @@
+/**
+ * @djangocfg/ext-support
+ *
+ * Support ticket system extension.
+ * This entry point is server-safe (no SWR/React hooks).
+ *
+ * For React hooks, import from '@djangocfg/ext-support/hooks'
+ */
+
+// API client (server-safe)
+export * from './api/generated/ext_support';
+export { API } from './api/generated/ext_support';
+export { apiSupport } from './api';
+
+// Layout components
+export { SupportLayout } from './layouts/SupportLayout';
+export type { SupportLayoutProps } from './layouts/SupportLayout/SupportLayout';
+
+// Events
+export * from './layouts/SupportLayout/events';
+
+// Types
+export type { SupportUIState, TicketFormData } from './layouts/SupportLayout/types';
+
+// Re-export API types for convenience
+export type {
+  Ticket,
+  TicketRequest,
+  PatchedTicketRequest,
+  Message,
+  MessageRequest,
+  MessageCreateRequest,
+  PatchedMessageRequest,
+  PaginatedTicketList,
+  PaginatedMessageList,
+} from './api/generated/ext_support/_utils/schemas';
+
+// Note: Hooks are NOT exported here to keep this bundle server-safe
+// Use: import { useSupportTicketsList } from '@djangocfg/ext-support/hooks'

package/src/layouts/SupportLayout/README.md

@@ -0,0 +1,91 @@
+# Support Layout
+
+Modern support ticket system layout with resizable panels and mobile-optimized interface.
+
+## Features
+
+- ✅ **Desktop**: Resizable split-panel view (ticket list | conversation)
+- ✅ **Mobile**: Single-column navigation with back/forward flow
+- ✅ **Real-time**: Auto-refresh messages after sending
+- ✅ **Event-driven**: Dialog management via custom events
+- ✅ **Type-safe**: Full TypeScript support with generated API types
+- ✅ **Smart UI**: Unread counters, status badges, relative timestamps
+
+## Architecture
+
+```
+SupportLayout
+├── SupportLayoutProvider (UI state + events wrapper)
+│   └── SupportProvider (API context from @djangocfg/api)
+│       └── AccountsProvider (for user.id in ticket creation)
+└── Components
+    ├── TicketList (scrollable ticket cards)
+    ├── MessageList (conversation bubbles)
+    ├── MessageInput (with keyboard shortcuts)
+    └── CreateTicketDialog (event-driven)
+```
+
+## Usage
+
+```tsx
+import { SupportLayout } from '@djangocfg/layouts';
+
+export default function SupportPage() {
+  return <SupportLayout />;
+}
+```
+
+## Event-based Dialog Opening
+
+```tsx
+import { openCreateTicketDialog } from '@djangocfg/layouts';
+
+function MyComponent() {
+  return (
+    <Button onClick={openCreateTicketDialog}>
+      Create Ticket
+    </Button>
+  );
+}
+```
+
+## API Integration
+
+Uses generated SWR hooks from `@djangocfg/api/cfg/contexts`:
+- `useSupportContext()` - Tickets CRUD, messages CRUD
+- Automatic cache revalidation after mutations
+- Type-safe request/response handling
+
+## Mobile Optimization
+
+- Auto-detects screen width (≤768px)
+- Single-column navigation when mobile
+- Back button to return to ticket list
+- Optimized touch targets
+
+## Key Components
+
+### TicketCard
+- Status badges with color-coding
+- Unread message counters
+- Relative timestamps
+- Click to select
+
+### MessageList
+- Auto-scroll to latest message
+- User vs. Admin message styling
+- Avatar placeholders
+- Timestamp formatting
+
+### MessageInput
+- Multi-line support (Shift+Enter)
+- Submit on Enter
+- Disabled when ticket closed
+- Loading states
+
+### CreateTicketDialog
+- Subject + initial message
+- Zod validation
+- Auto-selects created ticket
+- Toast notifications
+

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -0,0 +1,179 @@
+// @ts-nocheck
+/**
+ * Support Layout
+ * Modern support layout with resizable panels for desktop and mobile-optimized view
+ */
+
+'use client';
+
+import React from 'react';
+import { SupportProvider } from '../../contexts/SupportContext';
+import { SupportLayoutProvider, useSupportLayoutContext } from './context';
+import {
+  TicketList,
+  MessageList,
+  MessageInput,
+  CreateTicketDialog,
+} from './components';
+import {
+  Button,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@djangocfg/ui-nextjs';
+import { Plus, LifeBuoy, ArrowLeft } from 'lucide-react';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Support Layout Content (with context)
+// ─────────────────────────────────────────────────────────────────────────
+
+const SupportLayoutContent: React.FC = () => {
+  const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } =
+    useSupportLayoutContext();
+  const [isMobile, setIsMobile] = React.useState(false);
+  
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const unreadCount = getUnreadCount();
+
+  if (isMobile) {
+    // Mobile layout - single column with navigation
+    return (
+      <div className="h-screen flex flex-col overflow-hidden">
+        {/* Mobile Header */}
+        <div className="flex items-center justify-between p-4 border-b bg-background flex-shrink-0">
+          <div className="flex items-center gap-2">
+            {selectedTicket ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => selectTicket(null)}
+                className="p-1"
+              >
+                <ArrowLeft className="h-5 w-5" />
+              </Button>
+            ) : (
+              <LifeBuoy className="h-6 w-6 text-primary" />
+            )}
+            <h1 className="text-xl font-semibold">
+              {selectedTicket ? selectedTicket.subject : 'Support'}
+            </h1>
+            {unreadCount > 0 && !selectedTicket && (
+              <div className="h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
+                {unreadCount}
+              </div>
+            )}
+          </div>
+          {!selectedTicket && (
+            <Button onClick={openCreateDialog} size="sm">
+              <Plus className="h-4 w-4 mr-2" />
+              New Ticket
+            </Button>
+          )}
+        </div>
+
+        {/* Mobile Content */}
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {selectedTicket ? (
+            // Show messages when ticket is selected
+            <div className="h-full flex flex-col">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <MessageList />
+              </div>
+              <div className="flex-shrink-0">
+                <MessageInput />
+              </div>
+            </div>
+          ) : (
+            // Show ticket list when no ticket is selected
+            <TicketList />
+          )}
+        </div>
+
+        {/* Dialog */}
+        <CreateTicketDialog />
+      </div>
+    );
+  }
+
+  // Desktop layout - resizable panels
+  return (
+    <div className="h-screen flex flex-col overflow-hidden">
+      {/* Desktop Header */}
+      <div className="flex items-center justify-between p-6 border-b bg-background flex-shrink-0">
+        <div className="flex items-center gap-3">
+          <LifeBuoy className="h-7 w-7 text-primary" />
+          <div>
+            <h1 className="text-2xl font-bold">Support Center</h1>
+            <p className="text-sm text-muted-foreground">Get help from our support team</p>
+          </div>
+          {unreadCount > 0 && (
+            <div className="h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center">
+              {unreadCount}
+            </div>
+          )}
+        </div>
+
+        <Button onClick={openCreateDialog}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Ticket
+        </Button>
+      </div>
+
+      {/* Desktop Content */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* Ticket List Panel */}
+          <ResizablePanel defaultSize={35} minSize={25} maxSize={50}>
+            <div className="h-full border-r overflow-hidden">
+              <TicketList />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle className="hover:bg-accent transition-colors" />
+
+          {/* Messages Panel */}
+          <ResizablePanel defaultSize={65} minSize={50}>
+            <div className="h-full flex flex-col overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <MessageList />
+              </div>
+              <div className="flex-shrink-0">
+                <MessageInput />
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Dialog */}
+      <CreateTicketDialog />
+    </div>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Support Layout (with providers)
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface SupportLayoutProps {
+  children?: React.ReactNode;
+}
+
+export const SupportLayout: React.FC<SupportLayoutProps> = () => {
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <SupportProvider>
+        <SupportLayoutProvider>
+          <SupportLayoutContent />
+        </SupportLayoutProvider>
+      </SupportProvider>
+    </div>
+  );
+};
+

package/src/layouts/SupportLayout/components/CreateTicketDialog.tsx

@@ -0,0 +1,155 @@
+// @ts-nocheck
+/**
+ * Create Ticket Dialog
+ * Dialog for creating new support tickets
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  Button,
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  Input,
+  Textarea,
+} from '@djangocfg/ui-nextjs';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Plus, Loader2 } from 'lucide-react';
+import { supportLogger } from '../../../utils/logger';
+import { useSupportLayoutContext } from '../context';
+import { useToast } from '@djangocfg/ui-nextjs';
+import type { TicketFormData } from '../types';
+
+const createTicketSchema = z.object({
+  subject: z.string().min(1, 'Subject is required').max(200, 'Subject too long'),
+  message: z.string().min(1, 'Message is required').max(5000, 'Message too long'),
+});
+
+export const CreateTicketDialog: React.FC = () => {
+  const { uiState, createTicket, closeCreateDialog } = useSupportLayoutContext();
+  const { toast } = useToast();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const form = useForm<TicketFormData>({
+    resolver: zodResolver(createTicketSchema),
+    defaultValues: {
+      subject: '',
+      message: '',
+    },
+  });
+
+  const onSubmit = async (data: TicketFormData) => {
+    setIsSubmitting(true);
+    try {
+      await createTicket(data);
+      form.reset();
+      toast({
+        title: 'Success',
+        description: 'Support ticket created successfully',
+      });
+    } catch (error) {
+      supportLogger.error('Failed to create ticket:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to create ticket. Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    closeCreateDialog();
+  };
+
+  return (
+    <Dialog open={uiState.isCreateDialogOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="sm:max-w-[600px] animate-in fade-in slide-in-from-bottom-4 duration-300">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Plus className="h-5 w-5" />
+            Create Support Ticket
+          </DialogTitle>
+          <DialogDescription>
+            Describe your issue and we'll help you resolve it as quickly as possible.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Subject</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Brief description of your issue..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Message</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Describe your issue in detail. Include any error messages, steps to reproduce, or relevant information..."
+                      className="min-h-[120px]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleClose}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4 mr-2" />
+                    Create Ticket
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

package/src/layouts/SupportLayout/components/MessageInput.tsx

@@ -0,0 +1,92 @@
+/**
+ * Message Input Component
+ * Input field for sending messages
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Button, Textarea, useToast } from '@djangocfg/ui-nextjs';
+import { Send } from 'lucide-react';
+import { supportLogger } from '../../../utils/logger';
+import { useSupportLayoutContext } from '../context';
+
+export const MessageInput: React.FC = () => {
+  const { selectedTicket, sendMessage } = useSupportLayoutContext();
+  const { toast } = useToast();
+  const [message, setMessage] = useState('');
+  const [isSending, setIsSending] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!message.trim() || !selectedTicket) return;
+
+    setIsSending(true);
+    try {
+      await sendMessage(message.trim());
+      setMessage('');
+      toast({
+        title: 'Success',
+        description: 'Message sent successfully',
+      });
+    } catch (error) {
+      supportLogger.error('Failed to send message:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to send message',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  if (!selectedTicket) {
+    return null;
+  }
+
+  const canSendMessage = selectedTicket.status !== 'closed';
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4 border-t bg-background/50 backdrop-blur-sm flex-shrink-0">
+      <div className="flex gap-2">
+        <Textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            canSendMessage
+              ? 'Type your message... (Shift+Enter for new line)'
+              : 'This ticket is closed'
+          }
+          className="min-h-[60px] max-h-[200px] transition-all duration-200 
+                     focus:ring-2 focus:ring-primary/20"
+          disabled={!canSendMessage || isSending}
+        />
+        <Button
+          type="submit"
+          size="icon"
+          disabled={!message.trim() || !canSendMessage || isSending}
+          className="shrink-0 transition-all duration-200 
+                     hover:scale-110 active:scale-95 disabled:scale-100"
+        >
+          <Send className="h-4 w-4" />
+        </Button>
+      </div>
+      {!canSendMessage && (
+        <p className="text-xs text-muted-foreground mt-2 animate-in fade-in slide-in-from-top-1 duration-200">
+          This ticket is closed. You cannot send new messages.
+        </p>
+      )}
+    </form>
+  );
+};
+