@djangocfg/layouts 2.1.10 → 2.1.15

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

@@ -1,155 +0,0 @@
-// @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

@@ -1,92 +0,0 @@
-/**
- * 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>
-  );
-};
-

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

@@ -1,314 +0,0 @@
-/**
- * Message List Component
- * Displays messages in a ticket conversation with infinite scroll
- */
-
-'use client';
-
-import React, { useEffect, useRef, useCallback } from 'react';
-import { ScrollArea, Skeleton, Avatar, AvatarFallback, AvatarImage, Card, CardContent, Button } from '@djangocfg/ui-nextjs';
-import { MessageSquare, Loader2, User, Headphones } from 'lucide-react';
-import { useSupportLayoutContext } from '../context';
-import { useInfiniteMessages } from '../hooks';
-import { useAuth } from '../../../auth';
-import { CfgSupportTypes } from '@djangocfg/api';
-
-type Message = CfgSupportTypes.Message;
-
-const formatTime = (date: string | null | undefined): string => {
-  if (!date) return '';
-  return new Date(date).toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-};
-
-const formatDate = (date: string | null | undefined): string => {
-  if (!date) return '';
-  return new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
-interface MessageBubbleProps {
-  message: Message;
-  isFromUser: boolean;
-  currentUser: any;
-}
-
-const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, currentUser }) => {
-  const sender = message.sender;
-
-  return (
-    <div
-      className={`flex gap-3 ${isFromUser ? 'justify-end' : 'justify-start'}
-                 animate-in fade-in slide-in-from-bottom-2 duration-300`}
-    >
-      {/* Support Avatar (left side) */}
-      {!isFromUser && (
-        <Avatar className="h-8 w-8 shrink-0">
-          {sender?.avatar ? (
-            <AvatarImage src={sender.avatar} alt={sender.display_username || 'Support'} />
-          ) : (
-            <AvatarFallback className="bg-primary text-primary-foreground">
-              {sender?.is_staff ? (
-                <Headphones className="h-4 w-4" />
-              ) : (
-                sender?.display_username?.charAt(0)?.toUpperCase() ||
-                sender?.initials ||
-                'S'
-              )}
-            </AvatarFallback>
-          )}
-        </Avatar>
-      )}
-
-      {/* Message Content */}
-      <div className={`flex flex-col gap-1 flex-1 max-w-[80%] ${
-        isFromUser ? 'items-end' : 'items-start'
-      }`}>
-        {/* Sender name (for support messages) */}
-        {!isFromUser && sender && (
-          <span className="text-xs text-muted-foreground px-1">
-            {sender.display_username || sender.email || 'Support Team'}
-            {sender.is_staff && ' (Staff)'}
-          </span>
-        )}
-
-        {/* Message Bubble */}
-        <Card
-          className={`${
-            isFromUser
-              ? 'bg-primary text-primary-foreground'
-              : 'bg-muted'
-          } transition-all duration-200 hover:shadow-md`}
-        >
-          <CardContent className="p-3">
-            <p className="text-sm whitespace-pre-wrap break-words">{message.text}</p>
-          </CardContent>
-        </Card>
-
-        {/* Timestamp */}
-        <span className="text-xs text-muted-foreground px-1">
-          {formatTime(message.created_at)}
-        </span>
-      </div>
-
-      {/* User Avatar (right side) */}
-      {isFromUser && (
-        <Avatar className="h-8 w-8 shrink-0">
-          {currentUser?.avatar ? (
-            <AvatarImage src={currentUser.avatar} alt={currentUser.display_username || currentUser.email || 'You'} />
-          ) : (
-            <AvatarFallback className="bg-primary/10 text-primary font-semibold">
-              {currentUser?.display_username?.charAt(0)?.toUpperCase() ||
-               currentUser?.email?.charAt(0)?.toUpperCase() ||
-               currentUser?.initials ||
-               <User className="h-4 w-4" />}
-            </AvatarFallback>
-          )}
-        </Avatar>
-      )}
-    </div>
-  );
-};
-
-export const MessageList: React.FC = () => {
-  const { selectedTicket } = useSupportLayoutContext();
-  const { user } = useAuth();
-
-  const {
-    messages,
-    isLoading,
-    isLoadingMore,
-    hasMore,
-    totalCount,
-    loadMore,
-  } = useInfiniteMessages(selectedTicket?.uuid || null);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const loadMoreRef = useRef<HTMLDivElement>(null);
-  const firstRender = useRef(true);
-
-  // Set up intersection observer for infinite scroll at the top
-  useEffect(() => {
-    if (observerRef.current) {
-      observerRef.current.disconnect();
-    }
-
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting && hasMore && !isLoadingMore) {
-          loadMore();
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    if (loadMoreRef.current) {
-      observerRef.current.observe(loadMoreRef.current);
-    }
-
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [hasMore, isLoadingMore, loadMore]);
-
-  // Auto-scroll to bottom on first load and new messages
-  useEffect(() => {
-    if (firstRender.current && messages.length > 0) {
-      // Scroll to bottom on first render
-      const scrollContainer = scrollAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]');
-      if (scrollContainer) {
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      }
-      firstRender.current = false;
-    }
-  }, [messages]);
-
-  // Handle scroll position when loading older messages
-  const handleLoadMore = useCallback(() => {
-    const scrollContainer = scrollAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]');
-    const previousHeight = scrollContainer?.scrollHeight || 0;
-
-    loadMore();
-
-    // Restore scroll position after loading
-    setTimeout(() => {
-      if (scrollContainer) {
-        const newHeight = scrollContainer.scrollHeight;
-        scrollContainer.scrollTop = newHeight - previousHeight;
-      }
-    }, 100);
-  }, [loadMore]);
-
-  if (!selectedTicket) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
-        <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
-        <h3 className="text-lg font-semibold mb-2">No ticket selected</h3>
-        <p className="text-sm text-muted-foreground max-w-sm">
-          Select a ticket from the list to view the conversation
-        </p>
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="p-6 space-y-4">
-        {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="flex gap-3 animate-pulse"
-            style={{ animationDelay: `${i * 100}ms` }}
-          >
-            <Skeleton className="h-8 w-8 rounded-full" />
-            <Skeleton className="h-16 flex-1 max-w-[70%]" />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (!messages || messages.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
-        <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
-        <h3 className="text-lg font-semibold mb-2">No messages yet</h3>
-        <p className="text-sm text-muted-foreground max-w-sm">
-          Start the conversation by sending a message below
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <ScrollArea className="h-full bg-muted/50" viewportRef={scrollAreaRef}>
-      <div className="p-6 space-y-4" ref={scrollRef}>
-        {/* Load more trigger at the top */}
-        <div ref={loadMoreRef} className="h-2" />
-
-        {/* Loading indicator at the top */}
-        {isLoadingMore && (
-          <div className="flex justify-center py-4">
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Loading older messages...</span>
-            </div>
-          </div>
-        )}
-
-        {/* Manual load button if needed */}
-        {hasMore && !isLoadingMore && (
-          <div className="flex justify-center pt-2 pb-4">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleLoadMore}
-              className="text-xs"
-            >
-              Load older messages ({totalCount > 0 ? `${messages.length}/${totalCount}` : ''})
-            </Button>
-          </div>
-        )}
-
-        {/* Date separator for first message group */}
-        {messages.length > 0 && (
-          <div className="flex items-center gap-3 my-4">
-            <div className="flex-1 h-px bg-border" />
-            <span className="text-xs text-muted-foreground">
-              {formatDate(messages[0]?.created_at)}
-            </span>
-            <div className="flex-1 h-px bg-border" />
-          </div>
-        )}
-
-        {/* Messages */}
-        {messages.map((message, index) => {
-          // Check if message is from the current user
-          // Convert IDs to strings for consistent comparison
-          // Also check is_from_author flag when sender is the ticket creator
-          const isFromUser =
-            (message.sender?.id && user?.id && String(message.sender.id) === String(user.id)) ||
-            (message.sender?.email && user?.email && message.sender.email === user.email) ||
-            (message.is_from_author && selectedTicket?.user && user?.id &&
-             String(selectedTicket.user) === String(user.id));
-
-          // Show date separator if date changes
-          const previousMessage = index > 0 ? messages[index - 1] : null;
-          const showDateSeparator = previousMessage &&
-            new Date(previousMessage.created_at || '').toDateString() !==
-            new Date(message.created_at || '').toDateString();
-
-          return (
-            <React.Fragment key={message.uuid}>
-              {showDateSeparator && (
-                <div className="flex items-center gap-3 my-4">
-                  <div className="flex-1 h-px bg-border" />
-                  <span className="text-xs text-muted-foreground">
-                    {formatDate(message.created_at)}
-                  </span>
-                  <div className="flex-1 h-px bg-border" />
-                </div>
-              )}
-              <div style={{ animationDelay: `${Math.min(index, 10) * 50}ms` }}>
-                <MessageBubble
-                  message={message}
-                  isFromUser={!!isFromUser}
-                  currentUser={user}
-                />
-              </div>
-            </React.Fragment>
-          );
-        })}
-      </div>
-    </ScrollArea>
-  );
-};

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

@@ -1,96 +0,0 @@
-/**
- * Ticket Card Component
- * Card for displaying a single ticket
- */
-
-'use client';
-
-import React from 'react';
-import { Badge, Card, CardContent, cn } from '@djangocfg/ui-nextjs';
-import { Clock, MessageSquare } from 'lucide-react';
-import type { Ticket } from '@djangocfg/layouts/contexts';
-
-interface TicketCardProps {
-  ticket: Ticket;
-  isSelected: boolean;
-  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';
-  }
-};
-
-const formatRelativeTime = (date: string | null | undefined): string => {
-  if (!date) return 'N/A';
-
-  const now = new Date();
-  const messageDate = new Date(date);
-  const diffInSeconds = Math.floor((now.getTime() - messageDate.getTime()) / 1000);
-
-  if (diffInSeconds < 60) return 'Just now';
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
-
-  return new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
-export const TicketCard: React.FC<TicketCardProps> = ({ ticket, isSelected, onClick }) => {
-  return (
-    <Card
-      className={cn(
-        'cursor-pointer transition-all duration-200 ease-out',
-        'hover:bg-accent/50 hover:shadow-md hover:scale-[1.02]',
-        'active:scale-[0.98]',
-        isSelected && 'bg-accent border-primary shadow-sm'
-      )}
-      onClick={onClick}
-    >
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between mb-2">
-          <h3 className="font-semibold text-sm line-clamp-2 flex-1">{ticket.subject}</h3>
-          {(ticket.unanswered_messages_count || 0) > 0 && (
-            <Badge 
-              variant="destructive" 
-              className="ml-2 shrink-0 animate-pulse"
-            >
-              {ticket.unanswered_messages_count}
-            </Badge>
-          )}
-        </div>
-
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
-          <div className="flex items-center gap-3">
-            <Badge variant={getStatusBadgeVariant(ticket.status || 'open')} className="text-xs">
-              {ticket.status || 'open'}
-            </Badge>
-            <div className="flex items-center gap-1">
-              <Clock className="h-3 w-3" />
-              <span>{formatRelativeTime(ticket.created_at)}</span>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-