diff-support-test.patch

diff --git a/admin/src/pages/__tests__/Support.test.tsx b/admin/src/pages/__tests__/Support.test.tsx
new file mode 100644
index 00000000..df460ed9
--- /dev/null
+++ b/admin/src/pages/__tests__/Support.test.tsx
@@ -0,0 +1,346 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Support from '../Support';
+import { getSystemStatus, getFaq, submitTicket } from '@/lib/api';
+import type {
+  SystemStatusDto,
+  FaqDto,
+  TicketRequestDto,
+  TicketResponseDto,
+} from '@/lib/types';
+
+vi.mock('@/lib/api');
+vi.mock('@/components/ui/LoadingSpinner', () => ({
+  LoadingSpinner: ({ size }: { size?: string }) => (
+    <div data-testid={`spinner-${size ?? 'md'}`} role="status">
+      Loading
+    </div>
+  ),
+}));
+
+const mockGetSystemStatus = vi.mocked(getSystemStatus);
+const mockGetFaq = vi.mocked(getFaq);
+const mockSubmitTicket = vi.mocked(submitTicket);
+
+const addToast = vi.fn();
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ addToast }),
+}));
+
+const baseSystemStatus: SystemStatusDto = {
+  status: 'ok',
+  updated_at: '2024-01-15T10:30:00Z',
+  message: 'All systems are healthy.',
+  services: [
+    {
+      id: 'api',
+      name: 'Core API',
+      status: 'operational',
+      description: 'Primary API cluster operational.',
+      updated_at: '2024-01-15T10:00:00Z',
+    },
+    {
+      id: 'webhooks',
+      name: 'Webhooks',
+      status: 'degraded',
+      description: 'Elevated latency in webhook deliveries.',
+    },
+  ],
+};
+
+const degradedSystemStatus: SystemStatusDto = {
+  status: 'degraded',
+  updated_at: '2024-01-15T10:30:00Z',
+};
+
+const downSystemStatus: SystemStatusDto = {
+  status: 'down',
+  updated_at: '2024-01-15T10:30:00Z',
+};
+
+const faqItems: FaqDto[] = [
+  {
+    id: 'faq-auth',
+    question: 'How do I authenticate with the API?',
+    answer: 'Include your API key in the Authorization header of your requests.',
+  },
+  {
+    id: 'faq-rate-limits',
+    question: 'What are the API rate limits?',
+    answer: 'Rate limits vary by plan: Free tier allows 100 requests/hour.',
+  },
+];
+
+const ticketResponse: TicketResponseDto = {
+  id: 'TICKET-123',
+  status: 'open',
+  created_at: '2024-01-15T10:45:00Z',
+};
+
+const renderSupport = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+
+  const user = userEvent.setup();
+
+  const utils = render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <Support />
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+
+  return { user, unmount: utils.unmount };
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockGetSystemStatus.mockResolvedValue(baseSystemStatus);
+  mockGetFaq.mockResolvedValue(faqItems);
+  mockSubmitTicket.mockResolvedValue(ticketResponse);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe('Support page', () => {
+  describe('initial rendering', () => {
+    it('renders header and key sections', () => {
+      renderSupport();
+
+      expect(screen.getByText('Support')).toBeInTheDocument();
+      expect(
+        screen.getByText('Get help with your account, view system status, and contact our support team.')
+      ).toBeInTheDocument();
+      expect(screen.getByText('System Status')).toBeInTheDocument();
+      expect(screen.getByText('Frequently Asked Questions')).toBeInTheDocument();
+      expect(screen.getByText('Contact Support')).toBeInTheDocument();
+    });
+  });
+
+  describe('system status', () => {
+    it('displays overall status, message, and services', async () => {
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('All systems operational')).toBeInTheDocument();
+        expect(screen.getByText('All systems are healthy.')).toBeInTheDocument();
+        expect(screen.getByText(/Last updated:/)).toBeInTheDocument();
+        expect(screen.getByText('Core API')).toBeInTheDocument();
+        expect(screen.getByText('Webhooks')).toBeInTheDocument();
+      });
+    });
+
+    it('shows skeleton while loading status', () => {
+      mockGetSystemStatus.mockImplementation(() => new Promise(() => {}));
+      renderSupport();
+
+      expect(screen.getByTestId('system-status-loading')).toBeInTheDocument();
+    });
+
+    it('shows error alert when status fetch fails', async () => {
+      mockGetSystemStatus.mockRejectedValue(new Error('Status unavailable'));
+
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('Unable to load status')).toBeInTheDocument();
+        expect(screen.getByText('Status unavailable')).toBeInTheDocument();
+      });
+    });
+
+    it('falls back to default status error message when none provided', async () => {
+      mockGetSystemStatus.mockRejectedValue(new Error(''));
+
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('Unable to load status')).toBeInTheDocument();
+        expect(
+          screen.getByText('Failed to load system status. Please try again later.')
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('renders different status badges', async () => {
+      mockGetSystemStatus.mockResolvedValueOnce(degradedSystemStatus);
+      const { unmount } = renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('Some systems experiencing issues')).toBeInTheDocument();
+      });
+
+      unmount();
+      mockGetSystemStatus.mockResolvedValueOnce(downSystemStatus);
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('System outage detected')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('FAQ section', () => {
+    it('renders FAQs and toggles answers', async () => {
+      const { user } = renderSupport();
+
+      await screen.findByText('How do I authenticate with the API?');
+
+      const toggle = screen.getByRole('button', { name: /How do I authenticate with the API\\?/ });
+      expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+      await user.click(toggle);
+
+      expect(toggle).toHaveAttribute('aria-expanded', 'true');
+      expect(screen.getByText('Include your API key in the Authorization header of your requests.')).toBeVisible();
+    });
+
+    it('shows error when FAQ fetch fails', async () => {
+      mockGetFaq.mockRejectedValue(new Error('FAQ down'));
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('Unable to load FAQ')).toBeInTheDocument();
+        expect(screen.getByText('FAQ down')).toBeInTheDocument();
+      });
+    });
+
+    it('falls back to default FAQ error message when none provided', async () => {
+      mockGetFaq.mockRejectedValue(new Error(''));
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('Unable to load FAQ')).toBeInTheDocument();
+        expect(screen.getByText('Failed to load FAQ. Please try again later.')).toBeInTheDocument();
+      });
+    });
+
+    it('shows empty state when no FAQ items', async () => {
+      mockGetFaq.mockResolvedValue([]);
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('No FAQ items available at the moment.')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('ticket form', () => {
+    it('submits ticket and shows success alert', async () => {
+      const { user } = renderSupport();
+
+      await user.type(screen.getByLabelText(/Subject/), 'Need help');
+      await user.type(screen.getByLabelText(/Message/), 'We cannot access the API.');
+      await user.click(screen.getByRole('button', { name: /submit ticket/i }));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ticket-success-alert')).toBeInTheDocument();
+        expect(screen.getByText(/#TICKET-123/)).toBeInTheDocument();
+        expect(addToast).toHaveBeenCalledWith({
+          title: 'Support ticket submitted',
+          description: expect.stringContaining('Ticket #TICKET-123 created successfully.'),
+          variant: 'success',
+        });
+      });
+
+      expect((screen.getByLabelText(/Subject/) as HTMLInputElement).value).toBe('');
+      expect((screen.getByLabelText(/Message/) as HTMLTextAreaElement).value).toBe('');
+      const payload = mockSubmitTicket.mock.calls.at(-1)?.[0] as TicketRequestDto | undefined;
+      expect(payload).toBeDefined();
+      expect(payload).toMatchObject({
+        subject: 'Need help',
+        message: 'We cannot access the API.',
+      });
+    });
+
+    it('prevents submission with missing fields', async () => {
+      const { user } = renderSupport();
+
+      await user.click(screen.getByRole('button', { name: /submit ticket/i }));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ticket-error-alert')).toBeInTheDocument();
+        expect(addToast).toHaveBeenCalledWith({
+          title: 'Invalid form',
+          description: 'Please fill in all required fields.',
+          variant: 'destructive',
+        });
+        expect(mockSubmitTicket).not.toHaveBeenCalled();
+      });
+    });
+
+    it('handles submission errors', async () => {
+      mockSubmitTicket.mockRejectedValue(new Error('Network error'));
+      const { user } = renderSupport();
+
+      await user.type(screen.getByLabelText(/Subject/), 'Need assistance');
+      await user.type(screen.getByLabelText(/Message/), 'System unavailable');
+      await user.click(screen.getByRole('button', { name: /submit ticket/i }));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('ticket-error-alert')).toBeInTheDocument();
+        expect(screen.getByText('Network error')).toBeInTheDocument();
+        expect(addToast).toHaveBeenCalledWith({
+          title: 'Failed to submit ticket',
+          description: 'Network error',
+          variant: 'destructive',
+        });
+      });
+    });
+
+    it('shows loading state while submitting', async () => {
+      mockSubmitTicket.mockImplementation(() => new Promise<TicketResponseDto>(() => {}));
+      const { user } = renderSupport();
+
+      await user.type(screen.getByLabelText(/Subject/), 'Need help');
+      await user.type(screen.getByLabelText(/Message/), 'Please assist');
+      await user.click(screen.getByRole('button', { name: /submit ticket/i }));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('spinner-sm')).toBeInTheDocument();
+        expect(screen.getByText('Submitting...')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Submitting.../ })).toBeDisabled();
+      });
+    });
+  });
+
+  describe('integration', () => {
+    it('renders all sections with successful data loads', async () => {
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('All systems operational')).toBeInTheDocument();
+        expect(screen.getByText('How do I authenticate with the API?')).toBeInTheDocument();
+        expect(screen.getByLabelText(/Subject/)).toBeInTheDocument();
+      });
+    });
+
+    it('handles mixed fetch success and failure', async () => {
+      mockGetSystemStatus.mockResolvedValue(baseSystemStatus);
+      mockGetFaq.mockRejectedValue(new Error('FAQ error'));
+
+      renderSupport();
+
+      await waitFor(() => {
+        expect(screen.getByText('All systems operational')).toBeInTheDocument();
+        expect(screen.getByText('Unable to load FAQ')).toBeInTheDocument();
+        expect(screen.getByLabelText(/Subject/)).toBeInTheDocument();
+      });
+    });
+  });
+});
+
+
+
+
+