diff_docs.diff

diff --git a/admin/src/pages/Docs.tsx b/admin/src/pages/Docs.tsx
new file mode 100644
index 00000000..2dd45b60
--- /dev/null
+++ b/admin/src/pages/Docs.tsx
@@ -0,0 +1,379 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import ReactMarkdown from 'react-markdown';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { TextArea } from '@/components/ui/TextArea';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { Badge } from '@/components/ui/Badge';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { getDocs, runValidation } from '@/lib/api';
+import type { ValidationRequestDto, ValidationResultDto } from '@/lib/types';
+import { BookOpen, Play, RotateCcw, CheckCircle, XCircle, AlertTriangle } from 'lucide-react';
+
+type DocsTab = 'docs' | 'playground';
+
+const SAMPLE_PAYLOAD = {
+  document: {
+    creditType: 'STANDBY',
+    amount: {
+      value: 100000,
+      currency: 'USD',
+    },
+    expiryDate: '2024-12-31',
+    beneficiary: {
+      name: 'ABC Trading Company',
+      address: '123 Main St, New York, NY 10001',
+    },
+    applicant: {
+      name: 'XYZ Corporation',
+      address: '456 Oak Ave, Chicago, IL 60601',
+    },
+    terms: {
+      transferable: false,
+      partialShipmentAllowed: true,
+      transshipmentAllowed: false,
+    },
+  },
+} as const;
+
+const escapeHtml = (value: string): string =>
+  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+const highlightJson = (value: string): string =>
+  escapeHtml(value).replace(
+    /("(\u[a-fA-F0-9]{4}|\[^u]|[^\"])*"(?:\s*:)?|\\b(true|false|null)\\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    (match) => {
+      let cls = 'text-emerald-400';
+      if (match.startsWith('"')) {
+        cls = match.endsWith(':') ? 'text-orange-400' : 'text-emerald-400';
+      } else if (/true|false/.test(match)) {
+        cls = 'text-purple-400';
+      } else if (/null/.test(match)) {
+        cls = 'text-gray-400';
+      } else {
+        cls = 'text-sky-400';
+      }
+      return `<span class="${cls}">${match}</span>`;
+    }
+  );
+
+const JsonSyntaxPreview: React.FC<{ value: string }> = ({ value }) => {
+  const highlighted = useMemo(() => highlightJson(value), [value]);
+  return (
+    <pre
+      className="max-h-[300px] overflow-auto whitespace-pre-wrap break-words rounded-b-md bg-background px-3 py-3 font-mono text-xs"
+      dangerouslySetInnerHTML={{ __html: highlighted }}
+    />
+  );
+};
+
+const isValidationPayload = (value: unknown): value is ValidationRequestDto =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const Docs: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<DocsTab>('docs');
+  const [playgroundPayload, setPlaygroundPayload] = useState<string>(
+    JSON.stringify(SAMPLE_PAYLOAD, null, 2)
+  );
+  const [syntaxError, setSyntaxError] = useState<string | null>(null);
+
+  const {
+    data: docsContent,
+    isLoading: docsLoading,
+    isError: docsIsError,
+    error: docsError,
+  } = useQuery<string, Error>({
+    queryKey: ['docs'],
+    queryFn: getDocs,
+    retry: 1,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const validationMutation = useMutation<ValidationResultDto, Error, ValidationRequestDto>({
+    mutationFn: runValidation,
+  });
+
+  const {
+    mutate: triggerValidation,
+    reset: resetValidation,
+    data: validationResult,
+    error: validationError,
+    isError: validationHasError,
+    isPending: isValidating,
+  } = validationMutation;
+
+  const handlePayloadChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPlaygroundPayload(event.target.value);
+  }, []);
+
+  const handleTabChange = useCallback((tab: DocsTab) => {
+    setActiveTab(tab);
+  }, []);
+
+  const handleValidatePayload = useCallback(() => {
+    setSyntaxError(null);
+    resetValidation();
+
+    const trimmed = playgroundPayload.trim();
+    if (!trimmed) {
+      setSyntaxError('Payload cannot be empty.');
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(trimmed) as unknown;
+      if (!isValidationPayload(parsed)) {
+        setSyntaxError('Validation payload must be a JSON object.');
+        return;
+      }
+
+      triggerValidation(parsed);
+    } catch {
+      setSyntaxError('Invalid JSON format. Please check your payload syntax.');
+    }
+  }, [playgroundPayload, resetValidation, triggerValidation]);
+
+  const handleResetPayload = useCallback(() => {
+    setPlaygroundPayload(JSON.stringify(SAMPLE_PAYLOAD, null, 2));
+    setSyntaxError(null);
+    resetValidation();
+  }, [resetValidation]);
+
+  const handleFormatJson = useCallback(() => {
+    try {
+      const parsed = JSON.parse(playgroundPayload);
+      setPlaygroundPayload(JSON.stringify(parsed, null, 2));
+      setSyntaxError(null);
+    } catch {
+      setSyntaxError('Invalid JSON format. Unable to format.');
+    }
+  }, [playgroundPayload]);
+
+  const trimmedDocsContent = docsContent?.trim() ?? '';
+  const hasDocsContent = trimmedDocsContent.length > 0;
+
+  const renderValidationFeedback = () => {
+    if (syntaxError) {
+      return (
+        <Alert variant="destructive" className="mt-4" data-testid="validation-syntax-error">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Validation Error</AlertTitle>
+          <AlertDescription>{syntaxError}</AlertDescription>
+        </Alert>
+      );
+    }
+
+    if (validationHasError) {
+      const errorMessage = validationError?.message ?? 'Please try again later.';
+      return (
+        <Alert variant="destructive" className="mt-4" data-testid="validation-api-error">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Validation Error</AlertTitle>
+          <AlertDescription>{`Validation failed: ${errorMessage}`}</AlertDescription>
+        </Alert>
+      );
+    }
+
+    if (!validationResult) {
+      return null;
+    }
+
+    const { id, status, errors } = validationResult;
+    const isPass = status === 'pass';
+
+    return (
+      <div className="mt-4 space-y-4" data-testid="validation-result">
+        <div className="flex flex-wrap items-center gap-2">
+          {isPass ? (
+            <CheckCircle className="h-5 w-5 text-emerald-500" aria-hidden />
+          ) : (
+            <XCircle className="h-5 w-5 text-destructive" aria-hidden />
+          )}
+          <span className="text-base font-semibold">Validation Result</span>
+          <Badge variant={isPass ? 'success' : 'destructive'}>{isPass ? 'Pass' : 'Fail'}</Badge>
+        </div>
+
+        <div className="text-xs text-muted-foreground">
+          Validation ID:
+          <span className="ml-1 font-mono text-foreground">{id}</span>
+        </div>
+
+        {errors.length > 0 ? (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-destructive">Errors ({errors.length})</h4>
+            <ul className="list-disc space-y-1 pl-5 text-sm text-destructive">
+              {errors.map((error) => (
+                <li key={error}>{error}</li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            No validation issues detected. Your payload passed all configured rules.
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Documentation & Playground</h1>
+          <p className="text-muted-foreground">
+            Explore the API documentation and test validation rules with the interactive playground.
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-lg border bg-card shadow-sm">
+        <nav className="flex">
+          <button
+            type="button"
+            onClick={() => handleTabChange('docs')}
+            className={`flex-1 rounded-l-lg px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'docs'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+            }`}
+          >
+            Documentation
+          </button>
+          <button
+            type="button"
+            onClick={() => handleTabChange('playground')}
+            className={`flex-1 rounded-r-lg px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'playground'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+            }`}
+          >
+            Interactive Playground
+          </button>
+        </nav>
+      </div>
+
+      {activeTab === 'docs' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>API Documentation</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {docsLoading && (
+              <div className="flex items-center justify-center py-8" data-testid="docs-loading">
+                <LoadingSpinner size="md" />
+              </div>
+            )}
+
+            {docsIsError && (
+              <Alert variant="destructive" data-testid="docs-error">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>Failed to load documentation</AlertTitle>
+                <AlertDescription>
+                  {docsError?.message ?? 'Please try again later.'}
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {!docsLoading && !docsIsError && !hasDocsContent && (
+              <EmptyState
+                icon={BookOpen}
+                title="Documentation unavailable"
+                description="The documentation content is not available right now. Please check back soon."
+              />
+            )}
+
+            {hasDocsContent && (
+              <div className="prose prose-sm max-w-none">
+                <ReactMarkdown>{trimmedDocsContent}</ReactMarkdown>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {activeTab === 'playground' && (
+        <div className="grid gap-6 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>JSON Payload</CardTitle>
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm" onClick={handleFormatJson} className="text-xs">
+                    Format JSON
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleResetPayload} className="text-xs">
+                    <RotateCcw className="mr-1 h-3 w-3" />
+                    Reset
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="rounded-md border">
+                <TextArea
+                  value={playgroundPayload}
+                  onChange={handlePayloadChange}
+                  className="min-h-[280px] rounded-t-md border-0 border-b border-border font-mono text-sm"
+                  placeholder="Enter your JSON payload here..."
+                />
+                <JsonSyntaxPreview value={playgroundPayload} />
+              </div>
+
+              <Button
+                onClick={handleValidatePayload}
+                disabled={isValidating}
+                className="w-full"
+                data-testid="run-validation"
+              >
+                {isValidating ? (
+                  <>
+                    <LoadingSpinner size="sm" className="mr-2" />
+                    Validating...
+                  </>
+                ) : (
+                  <>
+                    <Play className="mr-2 h-4 w-4" />
+                    Run Validation
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Validation Results</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {!validationResult && !syntaxError && !validationHasError && !isValidating && (
+                <div className="flex items-center justify-center py-12 text-muted-foreground" data-testid="validation-empty-state">
+                  <div className="text-center space-y-2">
+                    <Play className="mx-auto h-8 w-8 opacity-50" />
+                    <p>Click "Run Validation" to test your payload.</p>
+                  </div>
+                </div>
+              )}
+
+              {isValidating && (
+                <div className="flex items-center justify-center py-12" data-testid="validation-loading">
+                  <div className="text-center space-y-3">
+                    <LoadingSpinner size="lg" />
+                    <p className="text-sm text-muted-foreground">Running validation...</p>
+                  </div>
+                </div>
+              )}
+
+              {!isValidating && renderValidationFeedback()}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Docs;