diff-support-page.patch

diff --git a/admin/src/pages/Support.tsx b/admin/src/pages/Support.tsx
new file mode 100644
index 00000000..567759bc
--- /dev/null
+++ b/admin/src/pages/Support.tsx
@@ -0,0 +1,408 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { getSystemStatus, getFaq, submitTicket } from '@/lib/api';
+import type {
+  SystemStatusDto,
+  SystemStatusServiceDto,
+  FaqDto,
+  TicketRequestDto,
+  TicketResponseDto,
+} from '@/lib/types';
+import { useToast } from '@/components/ui/Toast';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { TextArea } from '@/components/ui/TextArea';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import {
+  HelpCircle,
+  Send,
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  ChevronDown,
+  ChevronRight,
+  Info,
+} from 'lucide-react';
+
+interface TicketFormState {
+  subject: string;
+  message: string;
+}
+
+type OverallStatus = SystemStatusDto['status'];
+type ServiceStatus = SystemStatusServiceDto['status'];
+
+const STATUS_CONFIG: Record<OverallStatus, { label: string; badgeClass: string; icon: React.ReactNode }> = {
+  ok: {
+    label: 'All systems operational',
+    badgeClass: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+    icon: <CheckCircle className="h-5 w-5" />,
+  },
+  degraded: {
+    label: 'Some systems experiencing issues',
+    badgeClass: 'border-amber-200 bg-amber-50 text-amber-700',
+    icon: <AlertTriangle className="h-5 w-5" />,
+  },
+  down: {
+    label: 'System outage detected',
+    badgeClass: 'border-red-200 bg-red-50 text-red-700',
+    icon: <XCircle className="h-5 w-5" />,
+  },
+};
+
+const SERVICE_STATUS_CONFIG: Record<ServiceStatus, { label: string; dotClass: string }> = {
+  operational: {
+    label: 'Operational',
+    dotClass: 'bg-emerald-500',
+  },
+  degraded: {
+    label: 'Degraded',
+    dotClass: 'bg-amber-500',
+  },
+  outage: {
+    label: 'Outage',
+    dotClass: 'bg-red-500',
+  },
+};
+
+const VALIDATION_ERROR_MESSAGE = 'Please fill in all required fields.';
+
+const formatTimestamp = (iso: string): string =>
+  new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(iso));
+
+const Support: React.FC = () => {
+  const [expandedFaqId, setExpandedFaqId] = useState<string | null>(null);
+  const [ticketForm, setTicketForm] = useState<TicketFormState>({ subject: '', message: '' });
+  const [formError, setFormError] = useState<string | null>(null);
+  const [ticketSuccess, setTicketSuccess] = useState<TicketResponseDto | null>(null);
+  const { addToast } = useToast();
+
+  const {
+    data: systemStatus,
+    isLoading: statusLoading,
+    error: statusError,
+  } = useQuery<SystemStatusDto, Error>({
+    queryKey: ['systemStatus'],
+    queryFn: getSystemStatus,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const {
+    data: faqData,
+    isLoading: faqLoading,
+    error: faqError,
+  } = useQuery<FaqDto[], Error>({
+    queryKey: ['faq'],
+    queryFn: getFaq,
+    staleTime: 10 * 60 * 1000,
+  });
+
+  const submitTicketMutation = useMutation<TicketResponseDto, Error, TicketRequestDto>({
+    mutationFn: submitTicket,
+    onSuccess: (data) => {
+      setFormError(null);
+      setTicketSuccess(data);
+      setTicketForm({ subject: '', message: '' });
+      addToast({
+        title: 'Support ticket submitted',
+        description: `Ticket #${data.id} created successfully. We'll get back to you soon.`,
+        variant: 'success',
+      });
+    },
+    onError: (error) => {
+      const description = error instanceof Error ? error.message : 'Please try again later.';
+      setTicketSuccess(null);
+      setFormError(description);
+      addToast({
+        title: 'Failed to submit ticket',
+        description,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const formIsSubmitting = submitTicketMutation.isPending;
+  const faqItems = faqData ?? [];
+  const statusErrorMessage =
+    statusError?.message?.trim() ? statusError.message : 'Failed to load system status. Please try again later.';
+  const faqErrorMessage =
+    faqError?.message?.trim() ? faqError.message : 'Failed to load FAQ. Please try again later.';
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const trimmedSubject = ticketForm.subject.trim();
+    const trimmedMessage = ticketForm.message.trim();
+
+    if (!trimmedSubject || !trimmedMessage) {
+      setFormError(VALIDATION_ERROR_MESSAGE);
+      addToast({
+        title: 'Invalid form',
+        description: VALIDATION_ERROR_MESSAGE,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setFormError(null);
+    setTicketSuccess(null);
+
+    const payload: TicketRequestDto = {
+      subject: trimmedSubject,
+      message: trimmedMessage,
+    };
+
+    submitTicketMutation.mutate(payload);
+  };
+
+  const updateForm = (field: keyof TicketFormState, value: string) => {
+    setTicketForm((prev) => ({ ...prev, [field]: value }));
+    setFormError(null);
+    setTicketSuccess(null);
+  };
+
+  const statusBadge = useMemo(() => {
+    if (!systemStatus) {
+      return null;
+    }
+
+    const config = STATUS_CONFIG[systemStatus.status];
+    return (
+      <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg border text-sm font-medium ${config.badgeClass}`}>
+        {config.icon}
+        {config.label}
+      </div>
+    );
+  }, [systemStatus]);
+
+  const renderServices = useCallback(
+    (services: ReadonlyArray<SystemStatusServiceDto>) => (
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-foreground">Service health</h4>
+        <ul className="space-y-2">
+          {services.map((service) => {
+            const config = SERVICE_STATUS_CONFIG[service.status];
+            return (
+              <li key={service.id} className="flex flex-col gap-1 rounded-md border border-border/60 p-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-semibold text-foreground">{service.name}</span>
+                  <span className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+                    <span className={`h-2 w-2 rounded-full ${config.dotClass}`} aria-hidden />
+                    {config.label}
+                  </span>
+                </div>
+                {service.description ? (
+                  <p className="text-xs text-muted-foreground">{service.description}</p>
+                ) : null}
+                {service.updated_at ? (
+                  <p className="text-[11px] text-muted-foreground">
+                    Updated {formatTimestamp(service.updated_at)}
+                  </p>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    ),
+    [],
+  );
+
+  const formattedUpdatedAt = useMemo(() => {
+    if (!systemStatus) {
+      return null;
+    }
+    try {
+      return formatTimestamp(systemStatus.updated_at);
+    } catch {
+      return systemStatus.updated_at;
+    }
+  }, [systemStatus]);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold text-foreground">Support</h1>
+        <p className="text-muted-foreground">
+          Get help with your account, view system status, and contact our support team.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Info className="h-5 w-5" />
+            System Status
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {statusLoading ? (
+            <div className="space-y-3" data-testid="system-status-loading">
+              <div className="h-10 w-56 animate-pulse rounded-lg bg-muted" />
+              <div className="h-4 w-40 animate-pulse rounded bg-muted" />
+            </div>
+          ) : statusError ? (
+            <Alert variant="destructive">
+              <AlertTitle>Unable to load status</AlertTitle>
+              <AlertDescription>
+                {statusErrorMessage}
+              </AlertDescription>
+            </Alert>
+          ) : systemStatus ? (
+            <div className="space-y-4">
+              {statusBadge}
+              {formattedUpdatedAt ? (
+                <p className="text-xs text-muted-foreground">Last updated: {formattedUpdatedAt}</p>
+              ) : null}
+              {systemStatus.message ? (
+                <p className="text-sm text-muted-foreground">{systemStatus.message}</p>
+              ) : null}
+              {systemStatus.services && systemStatus.services.length > 0
+                ? renderServices(systemStatus.services)
+                : null}
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <HelpCircle className="h-5 w-5" />
+              Frequently Asked Questions
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {faqLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <LoadingSpinner size="md" />
+              </div>
+            ) : faqError ? (
+              <Alert variant="destructive">
+                <AlertTitle>Unable to load FAQ</AlertTitle>
+                <AlertDescription>
+                  {faqErrorMessage}
+                </AlertDescription>
+              </Alert>
+            ) : faqItems.length > 0 ? (
+              <div className="space-y-2">
+                {faqItems.map((faq) => {
+                  const isExpanded = expandedFaqId === faq.id;
+                  const panelId = `faq-panel-${faq.id}`;
+                  const buttonId = `faq-trigger-${faq.id}`;
+                  return (
+                    <div key={faq.id} className="overflow-hidden rounded-lg border border-border/60">
+                      <button
+                        id={buttonId}
+                        type="button"
+                        aria-expanded={isExpanded}
+                        aria-controls={panelId}
+                        className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium transition-colors hover:bg-accent"
+                        onClick={() => setExpandedFaqId(isExpanded ? null : faq.id)}
+                      >
+                        <span className="flex-1 text-left">{faq.question}</span>
+                        {isExpanded ? (
+                          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </button>
+                      <div
+                        id={panelId}
+                        role="region"
+                        aria-labelledby={buttonId}
+                        hidden={!isExpanded}
+                        className="border-t border-border/60 bg-muted/40"
+                      >
+                        {isExpanded ? (
+                          <div className="px-4 py-3 text-sm leading-relaxed text-muted-foreground">
+                            {faq.answer}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                No FAQ items available at the moment.
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Send className="h-5 w-5" />
+              Contact Support
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {ticketSuccess ? (
+              <Alert className="mb-4 border-emerald-200 bg-emerald-50 text-emerald-700" data-testid="ticket-success-alert">
+                <AlertTitle>Ticket submitted</AlertTitle>
+                <AlertDescription>
+                  We created ticket <span className="font-semibold">#{ticketSuccess.id}</span>. Our team will respond soon.
+                </AlertDescription>
+              </Alert>
+            ) : null}
+            {formError ? (
+              <Alert variant="destructive" className="mb-4" data-testid="ticket-error-alert">
+                <AlertTitle>Unable to submit</AlertTitle>
+                <AlertDescription>{formError}</AlertDescription>
+              </Alert>
+            ) : null}
+            <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+              <div className="space-y-2">
+                <Label htmlFor="support-subject">Subject<span className="ml-1 text-red-500">*</span></Label>
+                <Input
+                  id="support-subject"
+                  value={ticketForm.subject}
+                  onChange={(event) => updateForm('subject', event.target.value)}
+                  placeholder="Brief description of your issue"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="support-message">Message<span className="ml-1 text-red-500">*</span></Label>
+                <TextArea
+                  id="support-message"
+                  value={ticketForm.message}
+                  onChange={(event) => updateForm('message', event.target.value)}
+                  placeholder="Please provide detailed information about your issue..."
+                  rows={6}
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full" disabled={formIsSubmitting}>
+                {formIsSubmitting ? (
+                  <>
+                    <LoadingSpinner size="sm" className="mr-2" />
+                    Submitting...
+                  </>
+                ) : (
+                  <>
+                    <Send className="mr-2 h-4 w-4" />
+                    Submit Ticket
+                  </>
+                )}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Support;