690615:1449 237 #01

frontend/components/admin/ai/ContextConfigEditor.tsx

@@ -1,16 +1,19 @@
 // File: frontend/components/admin/ai/ContextConfigEditor.tsx
 // Change Log:
 // - 2026-06-14: Created ContextConfigEditor component with project/contract loaders and selectors (conforming to task T028)
+// - 2026-06-15: Added field validation UI with error messages (T069)
 
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { CheckCircle2, Settings } from 'lucide-react';
+import { CheckCircle2, Settings, AlertCircle } from 'lucide-react';
 import { ContextConfig } from '@/lib/types/ai-prompts';
 import { projectService } from '@/lib/services/project.service';
 import { contractService } from '@/lib/services/contract.service';
+import { cn } from '@/lib/utils';
 
 interface ContextConfigEditorProps {
   initialConfig: ContextConfig | null;
@@ -40,6 +43,7 @@ export default function ContextConfigEditor({
   onSave,
   isSaving,
 }: ContextConfigEditorProps) {
+  const { t } = useTranslation('ai');
   const [projects, setProjects] = useState<ProjectOption[]>([]);
   const [contracts, setContracts] = useState<ContractOption[]>([]);
   const [filteredContracts, setFilteredContracts] = useState<ContractOption[]>([]);
@@ -51,6 +55,31 @@ export default function ContextConfigEditor({
   const [language, setLanguage] = useState<string>('th');
   const [outputLanguage, setOutputLanguage] = useState<string>('th');
 
+  // Validation errors (T069)
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    // Validate pageSize
+    if (pageSize < 1 || pageSize > 1000) {
+      newErrors.pageSize = t('prompt_management.pageSize_invalid');
+    }
+
+    // Validate language
+    if (!language || language.trim().length === 0) {
+      newErrors.language = t('prompt_management.language_required');
+    }
+
+    // Validate outputLanguage
+    if (!outputLanguage || outputLanguage.trim().length === 0) {
+      newErrors.outputLanguage = t('prompt_management.output_language_required');
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
   useEffect(() => {
     const loadData = async () => {
       try {
@@ -117,6 +146,9 @@ export default function ContextConfigEditor({
   }, [projectId, contracts, contractId]);
 
   const handleSave = () => {
+    if (!validate()) {
+      return;
+    }
     const config: ContextConfig = {
       filter: {
         projectId: projectId === 'all' ? null : projectId,
@@ -182,24 +214,36 @@ export default function ContextConfigEditor({
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-muted-foreground">
-              ประวัติอ้างอิง (Page Size)
+              {t('prompt_management.page_size')}
             </label>
             <Input
               type="number"
               min={1}
-              max={20}
+              max={1000}
               value={pageSize}
-              onChange={(e) => setPageSize(Math.max(1, Number(e.target.value)))}
-              className="bg-background/50 border-border/50 text-sm focus-visible:ring-primary/30"
+              onChange={(e) => {
+                setPageSize(Math.max(1, Number(e.target.value)));
+                setErrors((prev) => ({ ...prev, pageSize: '' }));
+              }}
+              className={cn(
+                'bg-background/50 border-border/50 text-sm focus-visible:ring-primary/30',
+                errors.pageSize && 'border-destructive'
+              )}
             />
+            {errors.pageSize && (
+              <div className="flex items-center gap-1 text-[10px] text-destructive">
+                <AlertCircle className="h-3 w-3" />
+                {errors.pageSize}
+              </div>
+            )}
           </div>
 
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-muted-foreground">
-              ภาษาต้นทาง (Language)
+              {t('prompt_management.language')}
             </label>
-            <Select value={language} onValueChange={setLanguage}>
-              <SelectTrigger className="bg-background/50 border-border/50 backdrop-blur-sm">
+            <Select value={language} onValueChange={(val) => { setLanguage(val); setErrors((prev) => ({ ...prev, language: '' })); }}>
+              <SelectTrigger className={cn('bg-background/50 border-border/50 backdrop-blur-sm', errors.language && 'border-destructive')}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -207,14 +251,20 @@ export default function ContextConfigEditor({
                 <SelectItem value="en">English (EN)</SelectItem>
               </SelectContent>
             </Select>
+            {errors.language && (
+              <div className="flex items-center gap-1 text-[10px] text-destructive">
+                <AlertCircle className="h-3 w-3" />
+                {errors.language}
+              </div>
+            )}
           </div>
 
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-muted-foreground">
-              ภาษาปลายทาง (Output)
+              {t('prompt_management.output_language')}
             </label>
-            <Select value={outputLanguage} onValueChange={setOutputLanguage}>
-              <SelectTrigger className="bg-background/50 border-border/50 backdrop-blur-sm">
+            <Select value={outputLanguage} onValueChange={(val) => { setOutputLanguage(val); setErrors((prev) => ({ ...prev, outputLanguage: '' })); }}>
+              <SelectTrigger className={cn('bg-background/50 border-border/50 backdrop-blur-sm', errors.outputLanguage && 'border-destructive')}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -222,6 +272,12 @@ export default function ContextConfigEditor({
                 <SelectItem value="en">English (EN)</SelectItem>
               </SelectContent>
             </Select>
+            {errors.outputLanguage && (
+              <div className="flex items-center gap-1 text-[10px] text-destructive">
+                <AlertCircle className="h-3 w-3" />
+                {errors.outputLanguage}
+              </div>
+            )}
           </div>
         </div>
       </CardContent>

frontend/components/admin/ai/PromptTypeDropdown.tsx

@@ -1,40 +1,52 @@
 // File: frontend/components/admin/ai/PromptTypeDropdown.tsx
 // Change Log:
 // - 2026-06-14: Created PromptTypeDropdown component (conforming to task T016)
+// - 2026-06-15: Added "All Types" option (T064)
 
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { PromptType } from '@/lib/types/ai-prompts';
 
 interface PromptTypeDropdownProps {
-  value: PromptType;
-  onChange: (value: PromptType) => void;
+  value: PromptType | 'all';
+  onChange: (value: PromptType | 'all') => void;
   disabled?: boolean;
+  showAllOption?: boolean;
 }
 
 /**
  * คอมโพเนนต์ Dropdown สำหรับเลือกประเภทของ AI Prompt
  * รองรับ: OCR Extraction, RAG Query, RAG Prep, และ Document Classification
+ * และ "All Types" สำหรับดูทุกประเภท (T064)
  */
 export default function PromptTypeDropdown({
   value,
   onChange,
   disabled = false,
+  showAllOption = false,
 }: PromptTypeDropdownProps) {
+  const { t } = useTranslation('ai');
+
   return (
     <div className="flex flex-col gap-1.5 w-full">
       <label className="text-xs font-medium text-muted-foreground">
-        ประเภทของพรอมต์ (Prompt Type)
+        {t('prompt_management.prompt_type')}
       </label>
       <Select
         value={value}
-        onValueChange={(val) => onChange(val as PromptType)}
+        onValueChange={(val) => onChange(val as PromptType | 'all')}
         disabled={disabled}
       >
         <SelectTrigger className="w-full bg-background/50 border-border/50 backdrop-blur-sm">
-          <SelectValue placeholder="เลือกประเภทพรอมต์..." />
+          <SelectValue placeholder={t('prompt_management.prompt_type')} />
         </SelectTrigger>
         <SelectContent>
+          {showAllOption && (
+            <SelectItem value="all">
+              {t('prompt_management.all_types')}
+            </SelectItem>
+          )}
           <SelectItem value="ocr_extraction">
             สกัดข้อความ OCR (OCR Extraction)
           </SelectItem>

frontend/components/admin/ai/RuntimeParametersPanel.tsx

@@ -1,8 +1,10 @@
 // File: frontend/components/admin/ai/RuntimeParametersPanel.tsx
 // Change Log:
 // - 2026-06-14: Created RuntimeParametersPanel component for managing sandbox parameters (conforming to task T048)
+// - 2026-06-15: Added i18n support for Runtime Parameters label (T072)
 
 import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -26,6 +28,7 @@ const PROFILE_OPTIONS = [
 ];
 
 export default function RuntimeParametersPanel({ onProfileChange }: RuntimeParametersPanelProps) {
+  const { t } = useTranslation('ai');
   const [selectedProfile, setSelectedProfile] = useState<string>('standard');
   const [params, setParams] = useState<SandboxProfileParams | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -132,7 +135,7 @@ export default function RuntimeParametersPanel({ onProfileChange }: RuntimeParam
           <div className="space-y-1">
             <CardTitle className="flex items-center gap-2 text-sm font-semibold tracking-wide text-foreground">
               <Sliders className="h-4 w-4 text-primary" />
-              จัดการพารามิเตอร์รันไทม์ (Runtime Parameters)
+              {t('sandbox_test.runtime_parameters')}
             </CardTitle>
             <CardDescription className="text-xs">
               ปรับเปลี่ยนพารามิเตอร์การทำงานของโมเดล AI ในระบบทดสอบ Sandbox

frontend/components/admin/ai/SandboxTestArea.tsx

@@ -0,0 +1,478 @@
+// File: frontend/components/admin/ai/SandboxTestArea.tsx
+// Change Log:
+// - 2026-06-15: Created SandboxTestArea component with UI elements for 3-step sandbox testing (T038)
+
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { adminAiService } from '@/lib/services/admin-ai.service';
+import { useProjects, useContracts } from '@/hooks/use-master-data';
+import { toast } from 'sonner';
+import {
+  Upload,
+  Play,
+  FileText,
+  FileJson,
+  Database,
+  ArrowRight,
+  Loader2,
+  CheckCircle,
+} from 'lucide-react';
+
+interface SandboxTestAreaProps {
+  promptType: string;
+  selectedVersionNumber?: number;
+  onActivateVersion?: (versionNumber: number) => void;
+}
+
+interface ProjectOption {
+  publicId: string;
+  projectCode: string;
+  projectName: string;
+}
+
+interface ContractOption {
+  publicId: string;
+  contractCode: string;
+  contractName: string;
+}
+
+interface SandboxJobResult {
+  ocrText?: string;
+  answer?: string;
+  status?: string;
+  errorMessage?: string;
+  ragChunks?: Array<{ text: string; summary: string }>;
+  ragVectors?: unknown[];
+}
+
+export default function SandboxTestArea({
+  promptType: _promptType,
+  selectedVersionNumber,
+  onActivateVersion,
+}: SandboxTestAreaProps) {
+  // Master data state
+  const [selectedProject, setSelectedProject] = useState<string>('');
+  const [selectedContract, setSelectedContract] = useState<string>('');
+  const { data: projectsData } = useProjects();
+  const projects = Array.isArray(projectsData) ? (projectsData as ProjectOption[]) : [];
+  const { data: contractsData } = useContracts(selectedProject);
+  const contracts = Array.isArray(contractsData) ? (contractsData as ContractOption[]) : [];
+
+  // Sandbox states
+  const [file, setFile] = useState<File | null>(null);
+  const [ocrEngine, setOcrEngine] = useState<string>('auto');
+  const [currentStep, setCurrentStep] = useState<number>(1);
+  const [jobStatus, setJobStatus] = useState<'idle' | 'running' | 'completed' | 'failed'>('idle');
+  const [progress, setProgress] = useState<number>(0);
+  const [statusText, setStatusText] = useState<string>('');
+
+  // Results cache
+  const [requestPublicId, setRequestPublicId] = useState<string | null>(null);
+  const [ocrText, setOcrText] = useState<string>('');
+  const [extractedMetadata, setExtractedMetadata] = useState<Record<string, unknown> | null>(null);
+  const [ragChunks, setRagChunks] = useState<Array<{ text: string; summary: string }> | null>(null);
+  const [ragVectorsCount, setRagVectorsCount] = useState<number>(0);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+      setOcrText('');
+      setExtractedMetadata(null);
+      setRagChunks(null);
+      setRequestPublicId(null);
+      setCurrentStep(1);
+      setJobStatus('idle');
+      setProgress(0);
+    }
+  };
+
+  const pollJobStatus = (id: string, step: number, onSuccess: (result: SandboxJobResult) => void) => {
+    let interval = setInterval(async () => {
+      try {
+        const res = await adminAiService.getSandboxJobStatus(id);
+        if (res.status === 'completed') {
+          clearInterval(interval);
+          setJobStatus('completed');
+          setProgress(100);
+          onSuccess(res as SandboxJobResult);
+        } else if (res.status === 'failed') {
+          clearInterval(interval);
+          setJobStatus('failed');
+          setProgress(0);
+          toast.error(res.errorMessage || 'การประมวลผลล้มเหลว');
+        } else if (res.status === 'processing') {
+          setProgress(step === 1 ? 50 : 60);
+          setStatusText('กำลังประมวลผล...');
+        }
+      } catch (_err) {
+        clearInterval(interval);
+        setJobStatus('failed');
+        setProgress(0);
+        toast.error('ไม่สามารถดึงสถานะงานได้');
+      }
+    }, 2000);
+  };
+
+  const handleRunOcr = async () => {
+    if (!file) {
+      toast.error('กรุณาเลือกไฟล์ PDF สำหรับทดสอบ');
+      return;
+    }
+    setJobStatus('running');
+    setProgress(15);
+    setStatusText('กำลังอัปโหลดและส่งเอกสารเข้าคิว OCR...');
+    try {
+      const res = await adminAiService.submitSandboxOcr(file, ocrEngine);
+      setRequestPublicId(res.requestPublicId);
+      pollJobStatus(res.requestPublicId, 1, (result) => {
+        setOcrText(result.ocrText || '');
+        setCurrentStep(2);
+        toast.success('ทำ OCR สำเร็จแล้ว สามารถทำการสกัดข้อมูลต่อได้');
+      });
+    } catch (_err) {
+      setJobStatus('failed');
+      toast.error('เกิดข้อผิดพลาดในการรัน OCR');
+    }
+  };
+
+  const handleRunExtract = async () => {
+    if (!requestPublicId) {
+      toast.error('กรุณาทำ OCR ก่อน');
+      return;
+    }
+    if (!selectedProject) {
+      toast.error('กรุณาเลือกโครงการสำหรับทดสอบ');
+      return;
+    }
+    setJobStatus('running');
+    setProgress(20);
+    setStatusText('กำลังประมวลผลการสกัดข้อมูลเมตาดาต้า...');
+    try {
+      const res = await adminAiService.submitSandboxAiExtract(
+        requestPublicId,
+        selectedVersionNumber,
+        selectedProject,
+        selectedContract || undefined
+      );
+      pollJobStatus(res.requestPublicId, 2, (result) => {
+        let parsed = null;
+        try {
+          parsed = result.answer ? JSON.parse(result.answer) : null;
+        } catch {
+          parsed = { error: 'ผลลัพธ์ไม่ใช่ JSON ที่ถูกต้อง', raw: result.answer };
+        }
+        setExtractedMetadata(parsed);
+        setCurrentStep(3);
+        toast.success('สกัดข้อมูลเมตาดาต้าสำเร็จ สามารถทดสอบ RAG Prep ต่อได้');
+      });
+    } catch (_err) {
+      setJobStatus('failed');
+      toast.error('เกิดข้อผิดพลาดในการสกัดข้อมูล');
+    }
+  };
+
+  const handleRunRagPrep = async () => {
+    if (!ocrText) {
+      toast.error('ไม่มีข้อความ OCR สำหรับทดสอบ');
+      return;
+    }
+    setJobStatus('running');
+    setProgress(30);
+    setStatusText('กำลังประมวลผลการทำ Semantic Chunking และสร้างเวกเตอร์ RAG...');
+    try {
+      const res = await adminAiService.submitSandboxRagPrep(ocrText);
+      pollJobStatus(res.jobId, 3, (result) => {
+        setRagChunks(result.ragChunks || []);
+        setRagVectorsCount(result.ragVectors ? result.ragVectors.length : 0);
+        toast.success('วิเคราะห์การเตรียมข้อมูล RAG สำเร็จ');
+      });
+    } catch (_err) {
+      setJobStatus('failed');
+      toast.error('เกิดข้อผิดพลาดในการทำ RAG Prep');
+    }
+  };
+
+  const handleActivate = () => {
+    if (selectedVersionNumber && onActivateVersion) {
+      onActivateVersion(selectedVersionNumber);
+    }
+  };
+
+  return (
+    <Card className="border border-border/50 bg-background/30 backdrop-blur-md transition-all duration-300 hover:shadow-md">
+      <CardHeader className="pb-3 border-b border-border/10">
+        <CardTitle className="flex items-center gap-2 text-sm font-semibold tracking-wide text-foreground">
+          <Play className="h-4 w-4 text-primary" />
+          รันบอร์ดทดลองการทำงาน (3-Step Sandbox Testing)
+        </CardTitle>
+        <CardDescription className="text-xs">
+          ทดสอบความถูกต้องของเวอร์ชันพรอมต์จำลองกระบวนการจริง (OCR → AI Extract → RAG Prep)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pt-5 space-y-6">
+        <div className="flex flex-wrap items-center gap-4 border-b border-border/10 pb-4">
+          <div className="flex-1 min-w-[200px] space-y-1">
+            <Label className="text-[11px] font-semibold text-muted-foreground">โครงการสำหรับสกัดบริบท</Label>
+            <Select value={selectedProject} onValueChange={setSelectedProject}>
+              <SelectTrigger className="h-8 text-xs bg-background/50 border-border/50">
+                <SelectValue placeholder="เลือกโครงการ..." />
+              </SelectTrigger>
+              <SelectContent>
+                {projects.map((p) => (
+                  <SelectItem key={p.publicId} value={p.publicId} className="text-xs">
+                    {p.projectName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex-1 min-w-[200px] space-y-1">
+            <Label className="text-[11px] font-semibold text-muted-foreground">สัญญา (ถ้ามี)</Label>
+            <Select value={selectedContract} onValueChange={setSelectedContract} disabled={!selectedProject}>
+              <SelectTrigger className="h-8 text-xs bg-background/50 border-border/50">
+                <SelectValue placeholder="เลือกสัญญา..." />
+              </SelectTrigger>
+              <SelectContent>
+                {contracts.map((c) => (
+                  <SelectItem key={c.publicId} value={c.publicId} className="text-xs">
+                    {c.contractName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="w-[150px] space-y-1">
+            <Label className="text-[11px] font-semibold text-muted-foreground">OCR Engine</Label>
+            <Select value={ocrEngine} onValueChange={setOcrEngine}>
+              <SelectTrigger className="h-8 text-xs bg-background/50 border-border/50">
+                <SelectValue placeholder="เลือกเอนจิน..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="auto" className="text-xs">Auto (Baseline)</SelectItem>
+                <SelectItem value="tesseract" className="text-xs">Tesseract (CPU)</SelectItem>
+                <SelectItem value="np-dms-ocr" className="text-xs">Typhoon OCR (GPU)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="flex flex-col sm:flex-row items-center gap-4 bg-background/40 p-4 border border-border/30 rounded-lg">
+          <div className="flex items-center gap-3 flex-1">
+            <div className="p-2 bg-primary/10 rounded">
+              <Upload className="h-5 w-5 text-primary" />
+            </div>
+            <div className="space-y-0.5">
+              <Label className="text-xs font-bold text-foreground">อัปโหลดไฟล์สำหรับทดสอบ Sandbox</Label>
+              <p className="text-[10px] text-muted-foreground">เลือกไฟล์ PDF วิศวกรรม/ก่อสร้าง ขนาดไม่เกิน 50MB</p>
+            </div>
+          </div>
+          <div className="relative overflow-hidden cursor-pointer bg-primary/90 hover:bg-primary/95 text-primary-foreground font-semibold px-4 py-2 rounded text-xs select-none flex items-center gap-2">
+            <span>เลือกไฟล์เอกสาร...</span>
+            <input
+              type="file"
+              accept=".pdf"
+              onChange={handleFileChange}
+              className="absolute inset-0 opacity-0 cursor-pointer"
+            />
+          </div>
+        </div>
+
+        {file && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono bg-secondary/20 border border-border/50 px-3 py-1.5 rounded">
+            <FileText className="h-4 w-4 text-primary shrink-0" />
+            <span className="truncate flex-1">{file.name}</span>
+            <span>({(file.size / (1024 * 1024)).toFixed(2)} MB)</span>
+          </div>
+        )}
+
+        {/* Status indicator */}
+        {jobStatus === 'running' && (
+          <div className="space-y-2.5 p-4 border border-primary/20 bg-primary/[0.02] rounded-lg">
+            <div className="flex justify-between items-center text-xs">
+              <span className="flex items-center font-semibold text-primary">
+                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                {statusText}
+              </span>
+              <span className="font-mono font-bold text-primary">{progress}%</span>
+            </div>
+            <Progress value={progress} className="h-1.5" />
+          </div>
+        )}
+
+        {/* Steps navigation and panels */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 pt-2">
+          {/* Step buttons */}
+          <div className="lg:col-span-3 flex lg:flex-col gap-2.5">
+            <Button
+              variant={currentStep === 1 ? 'default' : 'outline'}
+              disabled={jobStatus === 'running' || !file}
+              onClick={() => setCurrentStep(1)}
+              className="w-full h-9 justify-start text-xs font-semibold"
+            >
+              <Badge className="mr-2 h-4 min-w-4 px-1 flex items-center justify-center text-[9px] bg-secondary text-secondary-foreground select-none">1</Badge>
+              Step 1: Run OCR
+            </Button>
+            <Button
+              variant={currentStep === 2 ? 'default' : 'outline'}
+              disabled={jobStatus === 'running' || !ocrText}
+              onClick={() => setCurrentStep(2)}
+              className="w-full h-9 justify-start text-xs font-semibold"
+            >
+              <Badge className="mr-2 h-4 min-w-4 px-1 flex items-center justify-center text-[9px] bg-secondary text-secondary-foreground select-none">2</Badge>
+              Step 2: AI Extract
+            </Button>
+            <Button
+              variant={currentStep === 3 ? 'default' : 'outline'}
+              disabled={jobStatus === 'running' || !extractedMetadata}
+              onClick={() => setCurrentStep(3)}
+              className="w-full h-9 justify-start text-xs font-semibold"
+            >
+              <Badge className="mr-2 h-4 min-w-4 px-1 flex items-center justify-center text-[9px] bg-secondary text-secondary-foreground select-none">3</Badge>
+              Step 3: RAG Prep
+            </Button>
+          </div>
+
+          {/* Step detail views */}
+          <div className="lg:col-span-9 border border-border/30 rounded-lg p-4 bg-background/50 min-h-[300px] flex flex-col justify-between">
+            {currentStep === 1 && (
+              <div className="space-y-4 flex-1 flex flex-col justify-between">
+                <div className="space-y-2">
+                  <h4 className="text-xs font-bold text-foreground flex items-center gap-1.5">
+                    <FileText className="h-4 w-4 text-primary" />
+                    Step 1: สกัดข้อความ OCR (OCR Extraction)
+                  </h4>
+                  <p className="text-[11px] text-muted-foreground leading-normal">
+                    รันเอนจินสกัดข้อความเพื่อดึงตัวหนังสือดิบออกมาจากหน้าไฟล์ PDF ที่ส่งขึ้นไป สามารถดูผลลัพธ์ข้อความดิบเพื่อประเมินความคมชัดของ OCR
+                  </p>
+                </div>
+                {ocrText ? (
+                  <div className="flex-1 min-h-[150px] max-h-[250px] overflow-y-auto rounded bg-secondary/30 border border-border/50 p-3 font-mono text-[10px] whitespace-pre-wrap select-text leading-relaxed mt-3">
+                    {ocrText}
+                  </div>
+                ) : (
+                  <div className="flex-1 min-h-[150px] flex items-center justify-center border border-dashed border-border/70 rounded mt-3 text-xs text-muted-foreground italic">
+                    ยังไม่มีข้อมูล OCR คลิก "เริ่มรัน OCR" ด้านล่าง
+                  </div>
+                )}
+                <div className="flex justify-end pt-4 border-t border-border/10 mt-4">
+                  <Button
+                    size="sm"
+                    onClick={handleRunOcr}
+                    disabled={jobStatus === 'running' || !file}
+                    className="h-8 text-xs"
+                  >
+                    เริ่มรัน OCR (Run OCR)
+                    <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {currentStep === 2 && (
+              <div className="space-y-4 flex-1 flex flex-col justify-between">
+                <div className="space-y-2">
+                  <h4 className="text-xs font-bold text-foreground flex items-center gap-1.5">
+                    <FileJson className="h-4 w-4 text-primary" />
+                    Step 2: สกัดข้อมูลอัจฉริยะ (AI Metadata Extraction)
+                  </h4>
+                  <p className="text-[11px] text-muted-foreground leading-normal">
+                    ส่งข้อความ OCR พร้อมบริบท Master data (โครงการ/สัญญา) เข้าไปประมวลผลร่วมกับโมเดลหลักและเวอร์ชันพรอมต์ที่เลือก เพื่อแปลงเป็นโครงสร้างข้อมูล JSON อัจฉริยะ
+                  </p>
+                </div>
+                {extractedMetadata ? (
+                  <div className="flex-1 min-h-[150px] max-h-[250px] overflow-y-auto rounded bg-secondary/30 border border-border/50 p-3 font-mono text-[10px] text-emerald-400 select-text leading-relaxed mt-3">
+                    <pre>{JSON.stringify(extractedMetadata, null, 2)}</pre>
+                  </div>
+                ) : (
+                  <div className="flex-1 min-h-[150px] flex items-center justify-center border border-dashed border-border/70 rounded mt-3 text-xs text-muted-foreground italic">
+                    ยังไม่มีผลลัพธ์การสกัดข้อมูล คลิก "เริ่มรันสกัดข้อมูล" ด้านล่าง
+                  </div>
+                )}
+                <div className="flex justify-between items-center pt-4 border-t border-border/10 mt-4">
+                  {selectedVersionNumber && onActivateVersion && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleActivate}
+                      className="h-8 text-xs border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/10"
+                    >
+                      <CheckCircle className="mr-1.5 h-3.5 w-3.5" />
+                      เปิดใช้งานเวอร์ชัน v{selectedVersionNumber} ทันที
+                    </Button>
+                  )}
+                  <div className="flex-1 text-right">
+                    <Button
+                      size="sm"
+                      onClick={handleRunExtract}
+                      disabled={jobStatus === 'running' || !ocrText}
+                      className="h-8 text-xs bg-primary hover:bg-primary/95 text-primary-foreground"
+                    >
+                      เริ่มรันสกัดข้อมูล (Run AI Extract)
+                      <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {currentStep === 3 && (
+              <div className="space-y-4 flex-1 flex flex-col justify-between">
+                <div className="space-y-2">
+                  <h4 className="text-xs font-bold text-foreground flex items-center gap-1.5">
+                    <Database className="h-4 w-4 text-primary" />
+                    Step 3: เตรียมฐานข้อมูลค้นหา (RAG Prep Sandbox)
+                  </h4>
+                  <p className="text-[11px] text-muted-foreground leading-normal">
+                    จำลองกระบวนการแบ่งข้อความออกเป็นส่วนๆ (Semantic Chunking) ตามความเหมาะสมทางภาษาและความหมายของเอกสาร พร้อมแสดงขนาดเวกเตอร์ Dense/Sparse ที่สกัดสำหรับใช้ใน Qdrant
+                  </p>
+                </div>
+                {ragChunks ? (
+                  <div className="flex-1 flex flex-col gap-3 mt-3 overflow-hidden">
+                    <div className="flex justify-between items-center bg-secondary/40 border border-border/50 px-3 py-2 rounded text-xs select-none">
+                      <span className="font-semibold text-foreground flex items-center gap-1">
+                        <CheckCircle className="h-4 w-4 text-emerald-500" />
+                        ทำเวกเตอร์สำเร็จ: {ragVectorsCount} เวกเตอร์
+                      </span>
+                      <Badge variant="outline" className="text-[10px] border-border/50"> chunks: {ragChunks.length}</Badge>
+                    </div>
+                    <div className="flex-1 min-h-[120px] max-h-[200px] overflow-y-auto space-y-2 mt-1">
+                      {ragChunks.map((chunk, idx) => (
+                        <div key={idx} className="bg-background/80 border border-border/30 rounded p-2.5 text-[10px] space-y-1 hover:border-primary/20 transition-all select-text">
+                          <div className="flex justify-between items-center text-primary font-bold">
+                            <span>#Chunk {idx + 1}</span>
+                            <Badge className="text-[8px] py-0 px-1 select-none">{chunk.summary || 'หัวข้อหลัก'}</Badge>
+                          </div>
+                          <p className="leading-relaxed text-muted-foreground">{chunk.text}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex-1 min-h-[150px] flex items-center justify-center border border-dashed border-border/70 rounded mt-3 text-xs text-muted-foreground italic">
+                    ยังไม่มีผลลัพธ์ RAG Prep คลิก "เริ่มทดสอบ RAG Prep" ด้านล่าง
+                  </div>
+                )}
+                <div className="flex justify-end pt-4 border-t border-border/10 mt-4">
+                  <Button
+                    size="sm"
+                    onClick={handleRunRagPrep}
+                    disabled={jobStatus === 'running' || !ocrText}
+                    className="h-8 text-xs bg-emerald-500 hover:bg-emerald-600 text-white"
+                  >
+                    เริ่มทดสอบ RAG Prep (Test RAG Prep)
+                    <CheckCircle className="ml-1.5 h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/components/admin/ai/VersionHistory.tsx

@@ -1,12 +1,15 @@
 // File: frontend/components/admin/ai/VersionHistory.tsx
 // Change Log:
 // - 2026-06-14: Created VersionHistory component with type filtering and nice badges (conforming to task T017)
+// - 2026-06-15: Added All Types view grouped by prompt type (T065)
+// - 2026-06-15: Added pagination (20 versions/page) (T075)
 
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { CheckCircle2, Trash2, BookOpen, Clock, StickyNote } from 'lucide-react';
+import { CheckCircle2, Trash2, BookOpen, Clock, StickyNote, Folder, ChevronLeft, ChevronRight } from 'lucide-react';
 import { PromptVersion } from '@/lib/types/ai-prompts';
 import { cn } from '@/lib/utils';
 
@@ -18,10 +21,12 @@ interface VersionHistoryProps {
   onDeleteVersion: (versionNumber: number) => void;
   isActivating: boolean;
   isDeleting: boolean;
+  showAllTypes?: boolean;
 }
 
 /**
  * คอมโพเนนต์แสดงประวัติเวอร์ชันของพรอมต์ตามประเภทที่กรองไว้
+ * หรือแสดงทุกประเภทแบบจัดกลุ่ม (T065)
  * แสดงรายการเวอร์ชันพร้อมปุ่มพรีโหลด เปิดใช้งาน และลบเวอร์ชันที่ไม่ต้องการ
  */
 export default function VersionHistory({
@@ -32,31 +37,162 @@ export default function VersionHistory({
   onDeleteVersion,
   isActivating,
   isDeleting,
+  showAllTypes = false,
 }: VersionHistoryProps) {
+  const { t } = useTranslation('ai');
+  const [currentPage, setCurrentPage] = useState(1);
+  const PAGE_SIZE = 20; // T075: 20 versions per page
+
   if (isLoading) {
     return (
       <div className="flex h-[300px] items-center justify-center text-sm text-muted-foreground">
         <Clock className="mr-2 h-4 w-4 animate-spin text-primary" />
-        กำลังโหลดประวัติเวอร์ชัน...
+        {t('prompt_management.version_history')}...
       </div>
     );
   }
 
+  // Group versions by prompt type when showing all types
+  const groupedVersions = showAllTypes
+    ? versions.reduce((acc, version) => {
+        const type = version.promptType;
+        if (!acc[type]) {
+          acc[type] = [];
+        }
+        acc[type].push(version);
+        return acc;
+      }, {} as Record<string, PromptVersion[]>)
+    : null;
+
+  const getPromptTypeLabel = (type: string): string => {
+    const labels: Record<string, string> = {
+      ocr_extraction: 'สกัดข้อความ OCR (OCR Extraction)',
+      rag_query_prompt: 'ค้นหาข้อมูล RAG (RAG Query)',
+      rag_prep_prompt: 'เตรียมข้อมูล RAG (RAG Prep)',
+      classification_prompt: 'จำแนกประเภทเอกสาร (Classification)',
+    };
+    return labels[type] || type;
+  };
+
+  // Pagination logic (T075)
+  const totalPages = Math.ceil(versions.length / PAGE_SIZE);
+  const startIndex = (currentPage - 1) * PAGE_SIZE;
+  const endIndex = startIndex + PAGE_SIZE;
+  const paginatedVersions = versions.slice(startIndex, endIndex);
+
+  const handlePreviousPage = () => {
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  };
+
+  const handleNextPage = () => {
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+  };
+
   return (
     <Card className="border border-border/50 bg-background/30 backdrop-blur-md transition-all duration-300 hover:shadow-md">
       <CardHeader className="pb-3 border-b border-border/10">
         <CardTitle className="flex items-center gap-2 text-sm font-semibold tracking-wide text-foreground">
           <BookOpen className="h-4 w-4 text-primary" />
-          ประวัติเวอร์ชัน (Version History)
+          {showAllTypes ? `${t('prompt_management.version_history')} (${t('prompt_management.all_types')})` : t('prompt_management.version_history')}
         </CardTitle>
       </CardHeader>
       <CardContent className="pt-4 px-3 sm:px-4 max-h-[500px] overflow-y-auto space-y-3">
         {versions.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-10 text-center text-xs text-muted-foreground italic">
-            ไม่พบเวอร์ชันอื่นในระบบสำหรับประเภทนี้
+            {t('prompt_management.no_versions')}
           </div>
+        ) : showAllTypes && groupedVersions ? (
+          // Grouped view by prompt type (with pagination applied to each group)
+          Object.entries(groupedVersions).map(([promptType, typeVersions]) => {
+            const paginatedGroupVersions = typeVersions.slice(startIndex, endIndex);
+            return (
+              <div key={promptType} className="space-y-2">
+                <div className="flex items-center gap-2 text-xs font-semibold text-foreground/80 bg-muted/30 px-2 py-1.5 rounded">
+                  <Folder className="h-3.5 w-3.5 text-primary" />
+                  {getPromptTypeLabel(promptType)}
+                </div>
+                {paginatedGroupVersions.map((version) => {
+                  const isActive = version.isActive === true;
+                  return (
+                    <div
+                      key={version.versionNumber}
+                      className={cn(
+                        'group relative rounded-lg border border-border/30 bg-background/50 p-3.5 transition-all duration-200 hover:border-primary/30 hover:bg-background/80',
+                        isActive && 'border-emerald-500/20 bg-emerald-500/[0.02]'
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2">
+                            <span className="font-mono text-sm font-bold text-foreground">
+                              v{version.versionNumber}
+                            </span>
+                            {isActive ? (
+                              <Badge className="border-emerald-500/20 bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20 text-[10px] py-0 px-1.5 flex items-center gap-1 select-none">
+                                <CheckCircle2 className="h-3 w-3" />
+                                {t('prompt_management.is_active')}
+                              </Badge>
+                            ) : (
+                              <Badge variant="outline" className="text-[10px] text-muted-foreground border-border/50 bg-background/40 select-none">
+                                ร่าง (Inactive)
+                              </Badge>
+                            )}
+                          </div>
+                          <div className="flex flex-col gap-1 text-[11px] text-muted-foreground">
+                            <span className="flex items-center gap-1">
+                              <Clock className="h-3 w-3" />
+                              สร้าง: {new Date(version.createdAt).toLocaleString('th-TH')}
+                            </span>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-1.5 opacity-90 sm:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-[10px] text-muted-foreground hover:bg-secondary"
+                            onClick={() => onLoadTemplate(version)}
+                          >
+                            โหลด (Load)
+                          </Button>
+                          {!isActive && (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                disabled={isActivating}
+                                className="h-7 text-[10px] text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10"
+                                onClick={() => onActivateVersion(version.versionNumber)}
+                              >
+                                {t('prompt_management.activate_version')}
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                disabled={isDeleting}
+                                className="h-7 w-7 text-destructive hover:bg-destructive/10"
+                                onClick={() => onDeleteVersion(version.versionNumber)}
+                              >
+                                <Trash2 className="h-3.5 w-3.5" />
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      {version.manualNote && (
+                        <div className="mt-2.5 rounded bg-muted/30 p-2 border border-border/10 flex gap-1.5 items-start text-[11px] text-muted-foreground select-text">
+                          <StickyNote className="h-3.5 w-3.5 text-amber-500 shrink-0 mt-0.5" />
+                          <p className="leading-relaxed whitespace-pre-wrap">{version.manualNote}</p>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })
         ) : (
-          versions.map((version) => {
+          // Single type view with pagination (T075)
+          paginatedVersions.map((version) => {
             const isActive = version.isActive === true;
             return (
               <div
@@ -75,7 +211,7 @@ export default function VersionHistory({
                       {isActive ? (
                         <Badge className="border-emerald-500/20 bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20 text-[10px] py-0 px-1.5 flex items-center gap-1 select-none">
                           <CheckCircle2 className="h-3 w-3" />
-                          ใช้งานจริง (Active)
+                          {t('prompt_management.is_active')}
                         </Badge>
                       ) : (
                         <Badge variant="outline" className="text-[10px] text-muted-foreground border-border/50 bg-background/40 select-none">
@@ -108,7 +244,7 @@ export default function VersionHistory({
                           className="h-7 text-[10px] text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10"
                           onClick={() => onActivateVersion(version.versionNumber)}
                         >
-                          ใช้งาน (Activate)
+                          {t('prompt_management.activate_version')}
                         </Button>
                         <Button
                           variant="ghost"
@@ -133,6 +269,34 @@ export default function VersionHistory({
             );
           })
         )}
+        {/* Pagination controls (T075) */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between pt-3 border-t border-border/10 mt-3">
+            <div className="text-[10px] text-muted-foreground">
+              หน้า {currentPage} จาก {totalPages} ({versions.length} เวอร์ชัน)
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handlePreviousPage}
+                disabled={currentPage === 1}
+                className="h-7 px-2 text-[10px] border-border/50 bg-background/50"
+              >
+                <ChevronLeft className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleNextPage}
+                disabled={currentPage === totalPages}
+                className="h-7 px-2 text-[10px] border-border/50 bg-background/50"
+              >
+                <ChevronRight className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        )}
       </CardContent>
     </Card>
   );