690615:1449 237 #01

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>
   );