@lego-box/shell 1.0.5 → 1.0.7

package/src/pages/ContactSupportPage.tsx

@@ -0,0 +1,610 @@
+import * as React from 'react';
+import {
+  QuickActionCard,
+  TicketStatsCard,
+  TicketFormDialog,
+  TicketFormData,
+  DataTable,
+  DataTableColumn,
+  SearchInput,
+  FilterChip,
+  Button,
+  DeleteConfirmationDialog,
+  Pagination,
+  Badge,
+} from '@lego-box/ui-kit';
+import { useTickets } from '../hooks/useTickets';
+import { useDebounce } from '../hooks';
+import { Ticket, TicketCategory, TicketPriority, TicketStatus } from '../types';
+import { 
+  Bug, 
+  Lightbulb, 
+  MessageCircle, 
+  Ticket as TicketIcon, 
+  Timer, 
+  CircleCheck, 
+  Clock, 
+  TrendingUp, 
+  AlertCircle, 
+  Check, 
+  Zap, 
+  Plus, 
+  Search,
+  Loader2
+} from 'lucide-react';
+
+/**
+ * Get badge variant based on ticket status
+ */
+function getStatusBadgeVariant(status: TicketStatus) {
+  switch (status) {
+    case 'open':
+      return 'default';
+    case 'in_progress':
+      return 'warning';
+    case 'resolved':
+      return 'success';
+    case 'closed':
+      return 'secondary';
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * Get badge variant based on ticket priority
+ */
+function getPriorityBadgeVariant(priority: TicketPriority) {
+  switch (priority) {
+    case 'high':
+      return 'destructive';
+    case 'medium':
+      return 'warning';
+    case 'low':
+      return 'secondary';
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * Get badge variant based on ticket category
+ */
+function getCategoryBadgeVariant(category: TicketCategory) {
+  switch (category) {
+    case 'bug':
+      return 'destructive';
+    case 'feature':
+      return 'info';
+    case 'inquiry':
+      return 'secondary';
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * Format date to human-readable format
+ */
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+/**
+ * Contact Support Page
+ *
+ * Features:
+ * - Quick action cards for creating tickets
+ * - Stats overview cards
+ * - Search and filter functionality
+ * - Data table with ticket information
+ * - CRUD operations with shared PocketBase
+ */
+export function ContactSupportPage() {
+  // Search and filter state
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [statusFilter, setStatusFilter] = React.useState<TicketStatus | 'all'>('all');
+  const [categoryFilter, setCategoryFilter] = React.useState<TicketCategory | 'all'>('all');
+  const [priorityFilter, setPriorityFilter] = React.useState<TicketPriority | 'all'>('all');
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(25);
+
+  // Dialog state
+  const [ticketFormOpen, setTicketFormOpen] = React.useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [selectedTicket, setSelectedTicket] = React.useState<Ticket | null>(null);
+  const [initialCategory, setInitialCategory] = React.useState<TicketCategory | undefined>(undefined);
+  const [formLoading, setFormLoading] = React.useState(false);
+
+  // Debounced search query
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
+
+  // Fetch tickets with filters
+  const {
+    tickets,
+    loading,
+    error,
+    pagination,
+    refetch,
+    createTicket,
+    updateTicket,
+    deleteTicket,
+  } = useTickets({
+    page,
+    perPage,
+    searchQuery: debouncedSearchQuery,
+    statusFilter,
+    categoryFilter,
+    priorityFilter,
+  });
+
+  // Calculate stats
+  const stats = React.useMemo(() => {
+    const total = pagination?.totalItems || 0;
+    const open = tickets.filter((t) => t.status === 'open').length;
+    const resolved = tickets.filter((t) => t.status === 'resolved').length;
+    const inProgress = tickets.filter((t) => t.status === 'in_progress').length;
+    
+    return { total, open, resolved, inProgress };
+  }, [tickets, pagination?.totalItems]);
+
+  // Handle quick action click
+  const handleQuickActionClick = (category: TicketCategory) => {
+    setInitialCategory(category);
+    setSelectedTicket(null);
+    setTicketFormOpen(true);
+  };
+
+  // Handle create ticket
+  const handleCreateTicket = async (formData: TicketFormData) => {
+    setFormLoading(true);
+    try {
+      await createTicket({
+        title: formData.title,
+        description: formData.description,
+        category: formData.category,
+        priority: formData.priority,
+        status: formData.status,
+      });
+      setTicketFormOpen(false);
+      refetch();
+    } catch (err: any) {
+      throw err;
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  // Handle update ticket
+  const handleUpdateTicket = async (formData: TicketFormData) => {
+    if (!selectedTicket) return;
+    setFormLoading(true);
+    try {
+      await updateTicket(selectedTicket.id, {
+        title: formData.title,
+        description: formData.description,
+        category: formData.category,
+        priority: formData.priority,
+        status: formData.status,
+      });
+      setTicketFormOpen(false);
+      setSelectedTicket(null);
+      refetch();
+    } catch (err: any) {
+      throw err;
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  // Handle delete ticket
+  const handleDeleteTicket = async () => {
+    if (!selectedTicket) return;
+    setFormLoading(true);
+    try {
+      await deleteTicket(selectedTicket.id);
+      setDeleteDialogOpen(false);
+      setSelectedTicket(null);
+      refetch();
+    } catch (err: any) {
+      throw err;
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  // Handle edit click
+  const handleEditClick = (ticket: Ticket) => {
+    setSelectedTicket(ticket);
+    setInitialCategory(undefined);
+    setTicketFormOpen(true);
+  };
+
+  // Handle delete click
+  const handleDeleteClick = (ticket: Ticket) => {
+    setSelectedTicket(ticket);
+    setDeleteDialogOpen(true);
+  };
+
+  // Ticket table columns - matching Pencil design
+  const ticketColumns: DataTableColumn<Ticket>[] = [
+    {
+      key: 'id',
+      header: 'ID',
+      width: '8%',
+      cell: (ticket: Ticket) => (
+        <span className="text-xs font-medium text-blue-600">#{ticket.id.slice(-6).toUpperCase()}</span>
+      ),
+    },
+    {
+      key: 'subject',
+      header: 'Subject',
+      width: '32%',
+      cell: (ticket: Ticket) => (
+        <div className="flex items-center gap-2">
+          {ticket.category === 'bug' && <Bug className="w-4 h-4 text-red-500" />}
+          {ticket.category === 'feature' && <Lightbulb className="w-4 h-4 text-blue-500" />}
+          {ticket.category === 'inquiry' && <MessageCircle className="w-4 h-4 text-purple-500" />}
+          <span className="text-sm text-foreground truncate">{ticket.title}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'category',
+      header: 'Category',
+      width: '12%',
+      cell: (ticket: Ticket) => (
+        <Badge variant={getCategoryBadgeVariant(ticket.category)}>
+          {ticket.category.charAt(0).toUpperCase() + ticket.category.slice(1)}
+        </Badge>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      width: '12%',
+      cell: (ticket: Ticket) => (
+        <Badge variant={getStatusBadgeVariant(ticket.status)}>
+          {ticket.status.replace('_', ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+        </Badge>
+      ),
+    },
+    {
+      key: 'priority',
+      header: 'Priority',
+      width: '10%',
+      cell: (ticket: Ticket) => (
+        <Badge variant={getPriorityBadgeVariant(ticket.priority)}>
+          {ticket.priority.charAt(0).toUpperCase() + ticket.priority.slice(1)}
+        </Badge>
+      ),
+    },
+    {
+      key: 'created',
+      header: 'Created',
+      width: '14%',
+      cell: (ticket: Ticket) => (
+        <span className="text-sm text-muted-foreground">{formatDate(ticket.created)}</span>
+      ),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      width: '12%',
+      cell: (ticket: Ticket) => (
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => handleEditClick(ticket)}
+            className="text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors"
+          >
+            Edit
+          </button>
+          <button
+            onClick={() => handleDeleteClick(ticket)}
+            className="text-sm font-medium text-red-500 hover:text-red-600 transition-colors"
+          >
+            Delete
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="p-6 space-y-6">
+        {/* Page Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">Contact Support</h1>
+            <p className="text-sm text-muted-foreground mt-1">
+              Get help with bug reports, feature requests, and general inquiries
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search Tickets"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="h-10 pl-10 pr-4 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-48"
+              />
+            </div>
+            <Button
+              className="gap-2 bg-blue-600 hover:bg-blue-700"
+              onClick={() => {
+                setInitialCategory(undefined);
+                setSelectedTicket(null);
+                setTicketFormOpen(true);
+              }}
+            >
+              <Plus className="w-4 h-4" />
+              New Ticket
+            </Button>
+          </div>
+        </div>
+
+        {/* Quick Actions - Horizontal layout matching Pencil */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <QuickActionCard
+            title="Report a Bug"
+            description="Found an issue? Let us know."
+            icon={<Bug className="w-full h-full" />}
+            variant="bug"
+            onClick={() => handleQuickActionClick('bug')}
+          />
+          <QuickActionCard
+            title="Request a Feature"
+            description="Share your ideas with us."
+            icon={<Lightbulb className="w-full h-full" />}
+            variant="feature"
+            onClick={() => handleQuickActionClick('feature')}
+          />
+          <QuickActionCard
+            title="General Inquiry"
+            description="Have questions? We're here."
+            icon={<MessageCircle className="w-full h-full" />}
+            variant="inquiry"
+            onClick={() => handleQuickActionClick('inquiry')}
+          />
+        </div>
+
+        {/* Stats Grid - Compact horizontal layout matching Pencil */}
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
+          <TicketStatsCard
+            value={stats.total}
+            label="Total Tickets"
+            icon={<TicketIcon className="w-full h-full" />}
+            iconBgColor="bg-blue-50"
+            iconColor="text-blue-600"
+            badge={{
+              icon: <TrendingUp className="w-3 h-3" />,
+              text: '+8%',
+              bgColor: 'bg-green-50',
+              textColor: 'text-green-600',
+            }}
+          />
+          <TicketStatsCard
+            value={stats.open}
+            label="Open Tickets"
+            icon={<Timer className="w-full h-full" />}
+            iconBgColor="bg-amber-50"
+            iconColor="text-amber-600"
+            badge={{
+              icon: <AlertCircle className="w-3 h-3" />,
+              text: `${stats.inProgress} in progress`,
+              bgColor: 'bg-amber-50',
+              textColor: 'text-amber-600',
+            }}
+          />
+          <TicketStatsCard
+            value={stats.resolved}
+            label="Resolved"
+            icon={<CircleCheck className="w-full h-full" />}
+            iconBgColor="bg-green-50"
+            iconColor="text-green-600"
+            badge={{
+              icon: <Check className="w-3 h-3" />,
+              text: '94% rate',
+              bgColor: 'bg-green-50',
+              textColor: 'text-green-600',
+            }}
+          />
+          <TicketStatsCard
+            value="4h 32m"
+            label="Avg Response Time"
+            icon={<Clock className="w-full h-full" />}
+            iconBgColor="bg-purple-50"
+            iconColor="text-purple-600"
+            badge={{
+              icon: <Zap className="w-3 h-3" />,
+              text: 'Fast',
+              bgColor: 'bg-purple-50',
+              textColor: 'text-purple-600',
+            }}
+          />
+        </div>
+
+        {/* Filters and Search - Dropdown style matching Pencil */}
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+          <div className="flex flex-wrap gap-3">
+            {/* Status Filter Dropdown */}
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">Status:</label>
+              <div className="relative">
+                <select
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value as TicketStatus | 'all')}
+                  className="h-9 px-3 pr-8 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 appearance-none cursor-pointer min-w-[120px] w-full"
+                >
+                  <option value="all">All Tickets</option>
+                  <option value="open">Open</option>
+                  <option value="in_progress">In Progress</option>
+                  <option value="resolved">Resolved</option>
+                  <option value="closed">Closed</option>
+                </select>
+                <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
+                  <svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            {/* Category Filter Dropdown */}
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">Category:</label>
+              <div className="relative">
+                <select
+                  value={categoryFilter}
+                  onChange={(e) => setCategoryFilter(e.target.value as TicketCategory | 'all')}
+                  className="h-9 px-3 pr-8 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 appearance-none cursor-pointer min-w-[120px] w-full"
+                >
+                  <option value="all">All Categories</option>
+                  <option value="bug">Bug Report</option>
+                  <option value="feature">Feature Request</option>
+                  <option value="inquiry">General Inquiry</option>
+                </select>
+                <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
+                  <svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tickets Table */}
+        <div className="bg-card rounded-lg border border-border shadow-sm">
+          {loading ? (
+            <div className="flex items-center justify-center p-12">
+              <Loader2 className="w-8 h-8 animate-spin text-primary" />
+              <span className="ml-2 text-muted-foreground">Loading tickets...</span>
+            </div>
+          ) : tickets.length === 0 ? (
+            <div className="flex flex-col items-center justify-center min-h-[360px] py-24 px-16 text-center">
+              <TicketIcon className="w-12 h-12 text-muted-foreground mb-6" />
+              <h3 className="text-lg font-medium text-foreground mb-3">No tickets found</h3>
+              <p className="text-sm text-muted-foreground mb-6 max-w-sm">
+                Create your first ticket to get started with support.
+              </p>
+              <Button
+                onClick={() => {
+                  setInitialCategory(undefined);
+                  setSelectedTicket(null);
+                  setTicketFormOpen(true);
+                }}
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                Create Ticket
+              </Button>
+            </div>
+          ) : (
+            <>
+              <DataTable
+                data={tickets}
+                columns={ticketColumns}
+                keyExtractor={(ticket) => ticket.id}
+                variant="inline"
+              />
+              
+              {/* Pagination - Matching Pencil design */}
+              {pagination && (
+                <div className="p-4 border-t flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">
+                    Showing {((pagination.page - 1) * pagination.perPage) + 1}-{Math.min(pagination.page * pagination.perPage, pagination.totalItems)} of {pagination.totalItems} tickets
+                  </span>
+                  
+                  {pagination.totalPages > 1 && (
+                    <div className="flex items-center gap-1">
+                      {/* Page size selector */}
+                      <select
+                        value={perPage}
+                        onChange={(e) => setPerPage(Number(e.target.value))}
+                        className="h-8 px-2 rounded border border-border text-sm mr-4"
+                      >
+                        <option value={10}>10 / page</option>
+                        <option value={25}>25 / page</option>
+                        <option value={50}>50 / page</option>
+                      </select>
+                      
+                      {/* Page numbers */}
+                      {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
+                        const pageNum = i + 1;
+                        return (
+                          <button
+                            key={pageNum}
+                            onClick={() => setPage(pageNum)}
+                            className={`w-8 h-8 rounded text-sm font-medium transition-colors ${
+                              page === pageNum
+                                ? 'bg-blue-600 text-white'
+                                : 'text-muted-foreground hover:bg-muted'
+                            }`}
+                          >
+                            {pageNum}
+                          </button>
+                        );
+                      })}
+                      
+                      {pagination.totalPages > 5 && (
+                        <>
+                          <span className="text-muted-foreground px-1">...</span>
+                          <button
+                            onClick={() => setPage(pagination.totalPages)}
+                            className={`w-8 h-8 rounded text-sm font-medium transition-colors ${
+                              page === pagination.totalPages
+                                ? 'bg-blue-600 text-white'
+                                : 'text-muted-foreground hover:bg-muted'
+                            }`}
+                          >
+                            {pagination.totalPages}
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Ticket Form Dialog */}
+        <TicketFormDialog
+          isOpen={ticketFormOpen}
+          onClose={() => {
+            setTicketFormOpen(false);
+            setSelectedTicket(null);
+            setInitialCategory(undefined);
+          }}
+          onSubmit={selectedTicket ? handleUpdateTicket : handleCreateTicket}
+          ticket={selectedTicket}
+          loading={formLoading}
+          initialCategory={initialCategory}
+        />
+
+        {/* Delete Confirmation Dialog */}
+        <DeleteConfirmationDialog
+          isOpen={deleteDialogOpen}
+          onClose={() => {
+            setDeleteDialogOpen(false);
+            setSelectedTicket(null);
+          }}
+          onConfirm={handleDeleteTicket}
+          title="Delete Ticket"
+          description={`Are you sure you want to delete the ticket "${selectedTicket?.title}"? This action cannot be undone.`}
+          itemName={selectedTicket?.title || ''}
+          loading={formLoading}
+        />
+      </div>
+    </div>
+  );
+}