@djangocfg/ext-support 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-support",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Support ticket system extension for DjangoCFG",
   "keywords": [
     "django",
@@ -65,10 +65,10 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.125",
+    "@djangocfg/api": "^2.1.142",
     "@djangocfg/ext-base": "^1.0.19",
-    "@djangocfg/i18n": "^2.1.125",
-    "@djangocfg/ui-core": "^2.1.125",
+    "@djangocfg/i18n": "^2.1.142",
+    "@djangocfg/ui-core": "^2.1.142",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -82,11 +82,11 @@
     "zod": "^4.3.4"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.125",
+    "@djangocfg/api": "^2.1.142",
     "@djangocfg/ext-base": "^1.0.19",
-    "@djangocfg/i18n": "^2.1.125",
-    "@djangocfg/ui-core": "^2.1.125",
-    "@djangocfg/typescript-config": "^2.1.125",
+    "@djangocfg/i18n": "^2.1.142",
+    "@djangocfg/ui-core": "^2.1.142",
+    "@djangocfg/typescript-config": "^2.1.142",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     "consola": "^3.4.2",

package/src/adapters/api.ts

@@ -7,18 +7,17 @@
 
 'use client';
 
+// Initialize API
+import '../api';
+
 import { useCallback, useMemo } from 'react';
 import useSWRInfinite from 'swr/infinite';
 
 import { useAuth } from '@djangocfg/api/auth';
 
-// Initialize API
-import '../api';
-
 import * as Fetchers from '../api/generated/ext_support/_utils/fetchers';
 import {
-  useCreateSupportTicketsCreate,
-  useCreateSupportTicketsMessagesCreate,
+    useCreateSupportTicketsCreate, useCreateSupportTicketsMessagesCreate
 } from '../api/generated/ext_support/_utils/hooks';
 
 import type {

package/src/adapters/demo.ts

@@ -9,7 +9,8 @@
 
 import { useCallback, useMemo, useState } from 'react';
 
-import { type Ticket, type Message, TicketStatus } from '../contexts/types';
+import { type Message, type Ticket, TicketStatus } from '../contexts/types';
+
 import type {
   SupportAdapter,
   CreateTicketInput,

package/src/api/generated/ext_support/_utils/fetchers/ext_support__support.ts

@@ -49,10 +49,10 @@ import { getAPIInstance } from '../../api-instance'
  * @method GET
  * @path /cfg/support/tickets/
  */
-export async function getSupportTicketsList(  params?: { page?: number; page_size?: number },  client?: any
+export async function getSupportTicketsList(  params?: { ordering?: string; page?: number; page_size?: number; search?: string },  client?: any
 ): Promise<PaginatedTicketList> {
   const api = client || getAPIInstance()
-  const response = await api.ext_support_support.ticketsList(params?.page, params?.page_size)
+  const response = await api.ext_support_support.ticketsList(params?.ordering, params?.page, params?.page_size, params?.search)
   try {
     return PaginatedTicketListSchema.parse(response)
   } catch (error) {
@@ -163,10 +163,10 @@ export async function createSupportTicketsCreate(  data: TicketRequest,  client?
  * @method GET
  * @path /cfg/support/tickets/{ticket_uuid}/messages/
  */
-export async function getSupportTicketsMessagesList(  ticket_uuid: string, params?: { page?: number; page_size?: number },  client?: any
+export async function getSupportTicketsMessagesList(  ticket_uuid: string, params?: { ordering?: string; page?: number; page_size?: number; search?: string },  client?: any
 ): Promise<PaginatedMessageList> {
   const api = client || getAPIInstance()
-  const response = await api.ext_support_support.ticketsMessagesList(ticket_uuid, params?.page, params?.page_size)
+  const response = await api.ext_support_support.ticketsMessagesList(ticket_uuid, params?.ordering, params?.page, params?.page_size, params?.search)
   try {
     return PaginatedMessageListSchema.parse(response)
   } catch (error) {

package/src/api/generated/ext_support/_utils/hooks/ext_support__support.ts

@@ -38,7 +38,7 @@ import type { TicketRequest } from '../schemas/TicketRequest.schema'
  * @method GET
  * @path /cfg/support/tickets/
  */
-export function useSupportTicketsList(params?: { page?: number; page_size?: number }, client?: API): ReturnType<typeof useSWR<PaginatedTicketList>> {
+export function useSupportTicketsList(params?: { ordering?: string; page?: number; page_size?: number; search?: string }, client?: API): ReturnType<typeof useSWR<PaginatedTicketList>> {
   return useSWR<PaginatedTicketList>(
     params ? ['cfg-support-tickets', params] : 'cfg-support-tickets',
     () => Fetchers.getSupportTicketsList(params, client)
@@ -70,7 +70,7 @@ export function useCreateSupportTicketsCreate() {
  * @method GET
  * @path /cfg/support/tickets/{ticket_uuid}/messages/
  */
-export function useSupportTicketsMessagesList(ticket_uuid: string, params?: { page?: number; page_size?: number }, client?: API): ReturnType<typeof useSWR<PaginatedMessageList>> {
+export function useSupportTicketsMessagesList(ticket_uuid: string, params?: { ordering?: string; page?: number; page_size?: number; search?: string }, client?: API): ReturnType<typeof useSWR<PaginatedMessageList>> {
   return useSWR<PaginatedMessageList>(
     ['cfg-support-tickets-messages', ticket_uuid],
     () => Fetchers.getSupportTicketsMessagesList(ticket_uuid, params, client)

package/src/api/generated/ext_support/_utils/schemas/Ticket.schema.ts

@@ -10,7 +10,7 @@ export const TicketSchema = z.object({
   uuid: z.string().regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i),
   user: z.int(),
   subject: z.string().max(255),
-  status: z.nativeEnum(Enums.TicketStatus).optional(),
+  status: z.nativeEnum(Enums.PatchedTicketRequestStatus).optional(),
   created_at: z.string().datetime({ offset: true }),
   unanswered_messages_count: z.int(),
 })

package/src/api/generated/ext_support/_utils/schemas/TicketRequest.schema.ts

@@ -9,7 +9,7 @@ import * as Enums from '../../enums'
 export const TicketRequestSchema = z.object({
   user: z.int(),
   subject: z.string().min(1).max(255),
-  status: z.nativeEnum(Enums.TicketRequestStatus).optional(),
+  status: z.nativeEnum(Enums.PatchedTicketRequestStatus).optional(),
 })
 
 /**

package/src/api/generated/ext_support/enums.ts

@@ -14,33 +14,3 @@ export enum PatchedTicketRequestStatus {
   CLOSED = "closed",
 }
 
-/**
- * * `open` - Open
- * * `waiting_for_user` - Waiting for User
- * * `waiting_for_admin` - Waiting for Admin
- * * `resolved` - Resolved
- * * `closed` - Closed
- */
-export enum TicketStatus {
-  OPEN = "open",
-  WAITING_FOR_USER = "waiting_for_user",
-  WAITING_FOR_ADMIN = "waiting_for_admin",
-  RESOLVED = "resolved",
-  CLOSED = "closed",
-}
-
-/**
- * * `open` - Open
- * * `waiting_for_user` - Waiting for User
- * * `waiting_for_admin` - Waiting for Admin
- * * `resolved` - Resolved
- * * `closed` - Closed
- */
-export enum TicketRequestStatus {
-  OPEN = "open",
-  WAITING_FOR_USER = "waiting_for_user",
-  WAITING_FOR_ADMIN = "waiting_for_admin",
-  RESOLVED = "resolved",
-  CLOSED = "closed",
-}
-

package/src/api/generated/ext_support/ext_support__support/client.ts

@@ -11,8 +11,8 @@ export class ExtSupportSupport {
     this.client = client;
   }
 
-  async ticketsList(page?: number, page_size?: number): Promise<Models.PaginatedTicketList>;
-  async ticketsList(params?: { page?: number; page_size?: number }): Promise<Models.PaginatedTicketList>;
+  async ticketsList(ordering?: string, page?: number, page_size?: number, search?: string): Promise<Models.PaginatedTicketList>;
+  async ticketsList(params?: { ordering?: string; page?: number; page_size?: number; search?: string }): Promise<Models.PaginatedTicketList>;
 
   /**
    * ViewSet for managing support tickets. Requires authenticated user (JWT
@@ -26,7 +26,7 @@ export class ExtSupportSupport {
     if (isParamsObject) {
       params = args[0];
     } else {
-      params = { page: args[0], page_size: args[1] };
+      params = { ordering: args[0], page: args[1], page_size: args[2], search: args[3] };
     }
     const response = await this.client.request('GET', "/cfg/support/tickets/", { params });
     return response;
@@ -42,8 +42,8 @@ export class ExtSupportSupport {
     return response;
   }
 
-  async ticketsMessagesList(ticket_uuid: string, page?: number, page_size?: number): Promise<Models.PaginatedMessageList>;
-  async ticketsMessagesList(ticket_uuid: string, params?: { page?: number; page_size?: number }): Promise<Models.PaginatedMessageList>;
+  async ticketsMessagesList(ticket_uuid: string, ordering?: string, page?: number, page_size?: number, search?: string): Promise<Models.PaginatedMessageList>;
+  async ticketsMessagesList(ticket_uuid: string, params?: { ordering?: string; page?: number; page_size?: number; search?: string }): Promise<Models.PaginatedMessageList>;
 
   /**
    * ViewSet for managing support messages. Requires authenticated user (JWT
@@ -57,7 +57,7 @@ export class ExtSupportSupport {
     if (isParamsObject) {
       params = args[1];
     } else {
-      params = { page: args[1], page_size: args[2] };
+      params = { ordering: args[1], page: args[2], page_size: args[3], search: args[4] };
     }
     const response = await this.client.request('GET', `/cfg/support/tickets/${ticket_uuid}/messages/`, { params });
     return response;

package/src/api/generated/ext_support/ext_support__support/models.ts

@@ -38,7 +38,7 @@ export interface TicketRequest {
   * `waiting_for_admin` - Waiting for Admin
   * `resolved` - Resolved
   * `closed` - Closed */
-  status?: Enums.TicketRequestStatus;
+  status?: Enums.PatchedTicketRequestStatus;
 }
 
 /**
@@ -54,7 +54,7 @@ export interface Ticket {
   * `waiting_for_admin` - Waiting for Admin
   * `resolved` - Resolved
   * `closed` - Closed */
-  status?: Enums.TicketStatus;
+  status?: Enums.PatchedTicketRequestStatus;
   created_at: string;
   /** Get count of unanswered messages for this specific ticket. */
   unanswered_messages_count: number;

package/src/api/generated/ext_support/schema.json

@@ -19,6 +19,15 @@
         "operationId": "cfg_support_tickets_list",
         "description": "ViewSet for managing support tickets.\n\nRequires authenticated user (JWT or Session).\nStaff users can see all tickets, regular users see only their own.",
         "parameters": [
+          {
+            "name": "ordering",
+            "required": false,
+            "in": "query",
+            "description": "Which field to use when ordering the results.",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "page",
             "required": false,
@@ -36,6 +45,15 @@
             "schema": {
               "type": "integer"
             }
+          },
+          {
+            "name": "search",
+            "required": false,
+            "in": "query",
+            "description": "A search term.",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "tags": [
@@ -117,6 +135,15 @@
         "operationId": "cfg_support_tickets_messages_list",
         "description": "ViewSet for managing support messages.\n\nRequires authenticated user (JWT or Session).\nUsers can only access messages for their own tickets.",
         "parameters": [
+          {
+            "name": "ordering",
+            "required": false,
+            "in": "query",
+            "description": "Which field to use when ordering the results.",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "page",
             "required": false,
@@ -135,6 +162,15 @@
               "type": "integer"
             }
           },
+          {
+            "name": "search",
+            "required": false,
+            "in": "query",
+            "description": "A search term.",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "in": "path",
             "name": "ticket_uuid",

package/src/components/CreateTicketSheet.tsx

@@ -1,13 +1,12 @@
 /**
- * Create Ticket Sheet
+ * Create Ticket Sheet (Apple HIG)
  *
- * Responsive sheet for creating new support tickets
- * Uses ResponsiveSheet (drawer on mobile, dialog on desktop)
+ * Clean form without Plus icons
  */
 
 'use client';
 
-import { Loader2, Plus } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -109,8 +108,7 @@ export function CreateTicketSheet({ open, onOpenChange, onSuccess }: CreateTicke
     <ResponsiveSheet open={open} onOpenChange={handleClose}>
       <ResponsiveSheetContent className="sm:max-w-lg">
         <ResponsiveSheetHeader>
-          <ResponsiveSheetTitle className="flex items-center gap-2">
-            <Plus className="h-5 w-5" />
+          <ResponsiveSheetTitle>
             {labels.title}
           </ResponsiveSheetTitle>
           <ResponsiveSheetDescription>
@@ -119,7 +117,7 @@ export function CreateTicketSheet({ open, onOpenChange, onSuccess }: CreateTicke
         </ResponsiveSheetHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mt-6">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5 mt-4">
             <FormField
               control={form.control}
               name="subject"
@@ -157,7 +155,7 @@ export function CreateTicketSheet({ open, onOpenChange, onSuccess }: CreateTicke
               )}
             />
 
-            <div className="flex justify-end gap-3 pt-4">
+            <div className="flex justify-end gap-3 pt-2">
               <Button
                 type="button"
                 variant="outline"
@@ -173,10 +171,7 @@ export function CreateTicketSheet({ open, onOpenChange, onSuccess }: CreateTicke
                     {labels.creating}
                   </>
                 ) : (
-                  <>
-                    <Plus className="h-4 w-4 mr-2" />
-                    {labels.create}
-                  </>
+                  labels.create
                 )}
               </Button>
             </div>

package/src/components/SupportHero.tsx

@@ -1,14 +1,13 @@
 /**
- * Support Hero (Apple-style)
+ * Support Hero (Apple HIG)
  *
- * Header with ticket stats and create action
- * Pattern follows ext-payments BalanceHero
+ * Clean header with stats pills and create action
  */
 
 'use client';
 
 import { useMemo } from 'react';
-import { Plus, LifeBuoy, RefreshCw } from 'lucide-react';
+import { RefreshCw } from 'lucide-react';
 
 import { useSupportT } from '../i18n';
 import { Button, Skeleton } from '@djangocfg/ui-core';
@@ -36,36 +35,31 @@ export function SupportHero({ onCreateTicket, className }: SupportHeroProps) {
   const openTicketsCount = tickets.filter(t => t.status !== 'closed' && t.status !== 'resolved').length;
 
   return (
-    <div className={cn('flex flex-col items-center py-16 px-4', className)}>
-      {/* Icon & Title */}
-      <div className="text-center mb-6">
-        {isLoadingTickets ? (
-          <>
-            <Skeleton className="h-12 w-12 mx-auto mb-4 rounded-full" />
-            <Skeleton className="h-8 w-32 mx-auto mb-2" />
-            <Skeleton className="h-4 w-48 mx-auto" />
-          </>
-        ) : (
-          <>
-            <div className="h-16 w-16 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center">
-              <LifeBuoy className="h-8 w-8 text-primary" />
-            </div>
-            <h1 className="text-3xl font-bold tracking-tight">
-              {labels.title}
-            </h1>
-            <p className="text-muted-foreground mt-1">{labels.subtitle}</p>
-          </>
-        )}
-      </div>
+    <div className={cn('flex flex-col items-center py-12 px-4', className)}>
+      {/* Title */}
+      {isLoadingTickets ? (
+        <div className="text-center">
+          <Skeleton className="h-10 w-48 mx-auto mb-2" />
+          <Skeleton className="h-5 w-64 mx-auto" />
+        </div>
+      ) : (
+        <div className="text-center">
+          <h1 className="text-4xl font-bold tracking-tight">
+            {labels.title}
+          </h1>
+          <p className="text-lg text-muted-foreground mt-2">
+            {labels.subtitle}
+          </p>
+        </div>
+      )}
 
-      {/* Action Buttons */}
-      <div className="flex items-center gap-3">
+      {/* Action */}
+      <div className="flex items-center gap-3 mt-6">
         <Button
           size="lg"
           onClick={onCreateTicket}
-          className="rounded-full px-6"
+          className="rounded-full px-8 h-12 text-base"
         >
-          <Plus className="h-5 w-5 mr-2" />
           {labels.newTicket}
         </Button>
 
@@ -73,31 +67,25 @@ export function SupportHero({ onCreateTicket, className }: SupportHeroProps) {
           size="icon"
           variant="ghost"
           onClick={() => refreshTickets()}
-          className="rounded-full"
+          className="rounded-full h-10 w-10"
         >
           <RefreshCw className="h-4 w-4" />
         </Button>
       </div>
 
-      {/* Stats (subtle) */}
-      {!isLoadingTickets && (
-        <div className="flex items-center gap-6 mt-6 text-sm text-muted-foreground">
-          <div className="text-center">
-            <span className="block font-medium text-foreground text-xl tabular-nums">
-              {openTicketsCount}
+      {/* Stats as pills (only if has data) */}
+      {!isLoadingTickets && (openTicketsCount > 0 || unreadCount > 0) && (
+        <div className="flex items-center gap-2 mt-4">
+          {openTicketsCount > 0 && (
+            <span className="text-sm text-muted-foreground bg-muted px-3 py-1 rounded-full">
+              {openTicketsCount} {labels.openTickets.toLowerCase()}
             </span>
-            <span>{labels.openTickets}</span>
-          </div>
-          <div className="h-8 w-px bg-border" />
-          <div className="text-center">
-            <span className={cn(
-              'block font-medium text-xl tabular-nums',
-              unreadCount > 0 ? 'text-destructive' : 'text-foreground'
-            )}>
-              {unreadCount}
+          )}
+          {unreadCount > 0 && (
+            <span className="text-sm text-destructive bg-destructive/10 px-3 py-1 rounded-full">
+              {unreadCount} {labels.unreadMessages.toLowerCase()}
             </span>
-            <span>{labels.unreadMessages}</span>
-          </div>
+          )}
         </div>
       )}
     </div>

package/src/components/TicketItem.tsx

@@ -1,46 +1,25 @@
 /**
- * Ticket Item Component (Apple-style)
+ * Ticket Item Component (Apple HIG)
  *
- * Single ticket row in the list
- * Pattern follows ext-payments ActivityItem
+ * Clean ticket row with typography-based hierarchy
  */
 
 'use client';
 
-import { Clock, ChevronRight } from 'lucide-react';
-import moment from 'moment';
 import React, { useMemo, useCallback } from 'react';
 
 import { useSupportT } from '../i18n';
-import { Badge } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { Ticket } from '../contexts/SupportContext';
+import { getStatusConfig } from '../utils/status';
+import { formatRelativeTime } from '../utils/time';
 
 interface TicketItemProps {
   ticket: Ticket;
   onClick?: () => void;
 }
 
-const getStatusBadgeVariant = (
-  status: string
-): 'default' | 'secondary' | 'destructive' | 'outline' => {
-  switch (status) {
-    case 'open':
-      return 'default';
-    case 'waiting_for_user':
-      return 'secondary';
-    case 'waiting_for_admin':
-      return 'outline';
-    case 'resolved':
-      return 'outline';
-    case 'closed':
-      return 'secondary';
-    default:
-      return 'default';
-  }
-};
-
 export function TicketItem({ ticket, onClick }: TicketItemProps) {
   const st = useSupportT();
 
@@ -60,71 +39,46 @@ export function TicketItem({ ticket, onClick }: TicketItemProps) {
     },
   }), [st]);
 
-  const formatRelativeTime = useCallback((date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-
-    const m = moment.utc(date).local();
-    const now = moment();
-    const diffInSeconds = now.diff(m, 'seconds');
-
-    if (diffInSeconds < 60) return labels.time.justNow;
-    if (diffInSeconds < 3600) return labels.time.minutesAgo.replace('{count}', String(Math.floor(diffInSeconds / 60)));
-    if (diffInSeconds < 86400) return labels.time.hoursAgo.replace('{count}', String(Math.floor(diffInSeconds / 3600)));
-    if (diffInSeconds < 604800) return labels.time.daysAgo.replace('{count}', String(Math.floor(diffInSeconds / 86400)));
-
-    return m.format('MMM D, YYYY');
+  const getRelativeTime = useCallback((date: string | null | undefined): string => {
+    return formatRelativeTime(date, labels.time);
   }, [labels.time]);
 
   const statusLabel = labels.status[ticket.status as keyof typeof labels.status] || ticket.status || labels.status.open;
+  const statusConfig = getStatusConfig(ticket.status || 'open');
   const hasUnread = (ticket.unanswered_messages_count || 0) > 0;
 
   return (
-    <div
+    <button
+      type="button"
       className={cn(
-        'group flex items-center gap-4 p-4 rounded-xl',
-        'cursor-pointer transition-all duration-200',
-        'hover:bg-accent/50',
-        'active:scale-[0.98]',
-        hasUnread && 'bg-primary/5'
+        'w-full flex items-start gap-3 p-4 text-left',
+        'transition-colors duration-150',
+        'hover:bg-accent/50 active:bg-accent'
       )}
       onClick={onClick}
     >
-      {/* Unread indicator */}
-      <div className="w-2 flex-shrink-0">
-        {hasUnread && (
-          <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
-        )}
+      {/* Unread dot - static, no animation */}
+      <div className="w-2 pt-1.5 shrink-0">
+        {hasUnread && <div className="w-2 h-2 rounded-full bg-blue-500" />}
       </div>
 
       {/* Content */}
       <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <h3 className={cn(
-            'font-medium text-sm line-clamp-1',
-            hasUnread && 'font-semibold'
-          )}>
-            {ticket.subject}
-          </h3>
-          {hasUnread && (
-            <Badge variant="destructive" className="shrink-0 text-xs">
-              {ticket.unanswered_messages_count}
-            </Badge>
-          )}
-        </div>
-
-        <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
-          <Badge variant={getStatusBadgeVariant(ticket.status || 'open')} className="text-xs py-0">
+        <h3 className={cn(
+          'text-[15px] line-clamp-1',
+          hasUnread ? 'font-semibold' : 'font-medium'
+        )}>
+          {ticket.subject}
+        </h3>
+        <div className="flex items-center gap-2 mt-0.5">
+          <span className={cn('text-[13px]', statusConfig.color)}>
             {statusLabel}
-          </Badge>
-          <div className="flex items-center gap-1">
-            <Clock className="h-3 w-3" />
-            <span>{formatRelativeTime(ticket.created_at)}</span>
-          </div>
+          </span>
+          <span className="text-[13px] text-muted-foreground">
+            · {getRelativeTime(ticket.created_at)}
+          </span>
         </div>
       </div>
-
-      {/* Arrow */}
-      <ChevronRight className="h-5 w-5 text-muted-foreground/50 group-hover:text-muted-foreground transition-colors flex-shrink-0" />
-    </div>
+    </button>
   );
 }