690522:1227 ปรับปรุง Admin Panl #01

frontend/app/(admin)/admin/page.tsx

@@ -3,7 +3,7 @@
 import { useOrganizations } from '@/hooks/use-master-data';
 import { useUsers } from '@/hooks/use-users';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Users, Building2, FileText, Settings, Shield, Activity, ArrowRight, FileStack } from 'lucide-react';
+import { Users, Building2, Activity, ArrowRight, Shield, FolderOpen, BookOpen, Ruler, Brain } from 'lucide-react';
 import Link from 'next/link';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
@@ -14,67 +14,91 @@ export default function AdminPage() {
 
   const stats = [
     {
-      title: 'Total Users',
+      title: 'ผู้ใช้งานทั้งหมด',
+      subtitle: 'Total Users',
       value: users?.length || 0,
       icon: Users,
       loading: usersLoading,
       href: '/admin/access-control/users',
       color: 'text-blue-600',
+      bg: 'bg-blue-50 dark:bg-blue-950/30',
     },
     {
-      title: 'Organizations',
+      title: 'องค์กร',
+      subtitle: 'Organizations',
       value: organizations?.length || 0,
       icon: Building2,
       loading: orgsLoading,
       href: '/admin/access-control/organizations',
-      color: 'text-green-600',
+      color: 'text-emerald-600',
+      bg: 'bg-emerald-50 dark:bg-emerald-950/30',
     },
     {
-      title: 'System Logs',
-      value: 'View',
+      title: 'บันทึกการปฏิบัติการ',
+      subtitle: 'Operations Log',
+      value: 'ดูทั้งหมด',
       icon: Activity,
       loading: false,
-      href: '/admin/monitoring/system-logs',
+      href: '/admin/monitoring/audit-logs',
       color: 'text-orange-600',
+      bg: 'bg-orange-50 dark:bg-orange-950/30',
     },
   ];
 
-  const quickLinks = [
+  const groups = [
     {
-      title: 'User Management',
-      description: 'Manage system users, roles, and permissions',
+      label: 'ผู้ใช้งาน & การเข้าถึง',
+      sublabel: 'Identity & Access',
       href: '/admin/access-control/users',
-      icon: Users,
-    },
-    {
-      title: 'Organizations',
-      description: 'Manage project organizations and companies',
-      href: '/admin/access-control/organizations',
-      icon: Building2,
-    },
-    {
-      title: 'Workflow Config',
-      description: 'Configure document approval workflows',
-      href: '/admin/doc-control/workflows',
-      icon: FileText,
-    },
-    {
-      title: 'Security & RBAC',
-      description: 'Configure roles, permissions, and security settings',
-      href: '/admin/access-control/roles',
       icon: Shield,
+      color: 'text-blue-600',
+      hoverBorder: 'hover:border-l-blue-500',
+      description: 'จัดการผู้ใช้, บทบาท, สิทธิ์ และองค์กรในระบบ',
     },
     {
-      title: 'Numbering System',
-      description: 'Setup document numbering templates',
-      href: '/admin/doc-control/numbering',
-      icon: Settings,
+      label: 'ตั้งค่าโครงการ',
+      sublabel: 'Project Setup',
+      href: '/admin/doc-control/projects',
+      icon: FolderOpen,
+      color: 'text-violet-600',
+      hoverBorder: 'hover:border-l-violet-500',
+      description: 'โครงการ, สัญญา, รูปแบบเลขที่เอกสาร และ Workflow',
     },
     {
-      title: 'Drawing Master Data',
-      description: 'Manage drawing categories, volumes, and classifications',
-      href: '/admin/doc-control/drawings',
-      icon: FileStack,
+      label: 'ข้อมูลอ้างอิง',
+      sublabel: 'Reference Data',
+      href: '/admin/doc-control/reference/disciplines',
+      icon: BookOpen,
+      color: 'text-teal-600',
+      hoverBorder: 'hover:border-l-teal-500',
+      description: 'สาขาวิชาชีพ, ประเภท RFA, ประเภทหนังสือ และแท็ก',
+    },
+    {
+      label: 'ข้อมูลแบบ Drawing',
+      sublabel: 'Drawing Master',
+      href: '/admin/doc-control/drawings/contract/volumes',
+      icon: Ruler,
+      color: 'text-amber-600',
+      hoverBorder: 'hover:border-l-amber-500',
+      description: 'Volume, หมวดหมู่ และหมวดหมู่ย่อย สำหรับ Contract & Shop Drawing',
+    },
+    {
+      label: 'การปฏิบัติการ',
+      sublabel: 'Operations',
+      href: '/admin/monitoring/audit-logs',
+      icon: Activity,
+      color: 'text-rose-600',
+      hoverBorder: 'hover:border-l-rose-500',
+      description: 'Audit Log, System Log, Active Sessions และ Migration Queue',
+    },
+    {
+      label: 'AI Console',
+      sublabel: 'AI Intelligence',
+      href: '/admin/ai',
+      icon: Brain,
+      color: 'text-purple-600',
+      hoverBorder: 'hover:border-l-purple-500',
+      description: 'ตรวจสอบ AI Queue, Analytics และ Threshold Recalibration',
     },
   ];
 
@@ -82,15 +106,20 @@ export default function AdminPage() {
     <div className="space-y-8 p-8">
       <div>
         <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
-        <p className="text-muted-foreground mt-2">System overview and quick access to administrative functions.</p>
+        <p className="text-muted-foreground mt-1">ภาพรวมระบบและเมนูลัดสำหรับงานบริหารจัดการ</p>
       </div>
 
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {stats.map((stat) => (
           <Card key={stat.title} className="hover:shadow-md transition-shadow">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
-              <stat.icon className={`h-4 w-4 ${stat.color}`} />
+              <div>
+                <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+                <p className="text-xs text-muted-foreground">{stat.subtitle}</p>
+              </div>
+              <div className={`p-2 rounded-lg ${stat.bg}`}>
+                <stat.icon className={`h-4 w-4 ${stat.color}`} />
+              </div>
             </CardHeader>
             <CardContent>
               {stat.loading ? (
@@ -100,7 +129,7 @@ export default function AdminPage() {
               )}
               {stat.href && (
                 <Link href={stat.href} className="text-xs text-muted-foreground hover:underline mt-1 inline-block">
-                  View details
+                  ดูรายละเอียด
                 </Link>
               )}
             </CardContent>
@@ -109,21 +138,25 @@ export default function AdminPage() {
       </div>
 
       <div>
-        <h2 className="text-xl font-semibold mb-4">Quick Access</h2>
+        <h2 className="text-xl font-semibold mb-1">เมนูหลัก</h2>
+        <p className="text-sm text-muted-foreground mb-4">เลือกกลุ่มงานที่ต้องการจัดการ</p>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {quickLinks.map((link) => (
-            <Link key={link.href} href={link.href}>
-              <Card className="h-full hover:bg-muted/50 transition-colors cursor-pointer border-l-4 border-l-transparent hover:border-l-primary">
-                <CardHeader>
-                  <CardTitle className="flex items-center text-lg">
-                    <link.icon className="mr-2 h-5 w-5 text-primary" />
-                    {link.title}
+          {groups.map((group) => (
+            <Link key={group.href} href={group.href}>
+              <Card className={`h-full hover:bg-muted/50 transition-colors cursor-pointer border-l-4 border-l-transparent ${group.hoverBorder}`}>
+                <CardHeader className="pb-2">
+                  <CardTitle className="flex items-center gap-2">
+                    <group.icon className={`h-5 w-5 ${group.color}`} />
+                    <span className="flex flex-col">
+                      <span className="text-base font-semibold leading-tight">{group.label}</span>
+                      <span className="text-xs font-normal text-muted-foreground leading-tight">{group.sublabel}</span>
+                    </span>
                   </CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-sm text-muted-foreground">{link.description}</p>
-                  <Button variant="ghost" className="mt-4 p-0 h-auto font-normal text-primary hover:no-underline group">
-                    Go to module <ArrowRight className="ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" />
+                  <p className="text-sm text-muted-foreground">{group.description}</p>
+                  <Button variant="ghost" className="mt-3 p-0 h-auto font-normal text-primary hover:no-underline group/btn">
+                    เข้าสู่เมนู <ArrowRight className="ml-1 h-3 w-3 group-hover/btn:translate-x-1 transition-transform" />
                   </Button>
                 </CardContent>
               </Card>

frontend/components/admin/sidebar.tsx

@@ -4,66 +4,90 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
-import { Settings, Activity, Shield, FileStack, ChevronDown, ChevronRight, Database, Brain } from 'lucide-react';
+import {
+  Settings,
+  Activity,
+  Shield,
+  ChevronDown,
+  ChevronRight,
+  Brain,
+  FolderOpen,
+  BookOpen,
+  Ruler,
+} from 'lucide-react';
+
+interface MenuChild {
+  href: string;
+  label: string;
+}
 
 interface MenuItem {
   href?: string;
   label: string;
+  sublabel?: string;
   icon: React.ComponentType<{ className?: string }>;
-  children?: { href: string; label: string }[];
+  children?: MenuChild[];
 }
 
 export const menuItems: MenuItem[] = [
   {
-    label: 'Access Control',
+    label: 'ผู้ใช้งาน & การเข้าถึง',
+    sublabel: 'Identity & Access',
     icon: Shield,
     children: [
-      { href: '/admin/access-control/users', label: 'Users' },
-      { href: '/admin/access-control/roles', label: 'Roles' },
-      { href: '/admin/access-control/organizations', label: 'Organizations' },
+      { href: '/admin/access-control/users', label: 'ผู้ใช้งาน' },
+      { href: '/admin/access-control/roles', label: 'บทบาท & สิทธิ์' },
+      { href: '/admin/access-control/organizations', label: 'องค์กร' },
     ],
   },
   {
-    label: 'Document Control',
-    icon: FileStack,
+    label: 'ตั้งค่าโครงการ',
+    sublabel: 'Project Setup',
+    icon: FolderOpen,
     children: [
-      { href: '/admin/doc-control/projects', label: 'Projects' },
-      { href: '/admin/doc-control/contracts', label: 'Contracts' },
-      { href: '/admin/doc-control/numbering', label: 'Numbering' },
-      { href: '/admin/doc-control/reference', label: 'Reference Data' },
-      { href: '/admin/doc-control/workflows', label: 'Workflows' },
+      { href: '/admin/doc-control/projects', label: 'โครงการ' },
+      { href: '/admin/doc-control/contracts', label: 'สัญญา' },
+      { href: '/admin/doc-control/numbering', label: 'รูปแบบเลขที่' },
+      { href: '/admin/doc-control/workflows', label: 'เวิร์กโฟลว์' },
     ],
   },
   {
-    label: 'Drawing Master',
-    icon: FileStack, // Or another icon
+    label: 'ข้อมูลอ้างอิง',
+    sublabel: 'Reference Data',
+    icon: BookOpen,
     children: [
-      { href: '/admin/doc-control/drawings/contract/volumes', label: 'Contract: Volumes' },
-      { href: '/admin/doc-control/drawings/contract/categories', label: 'Contract: Categories' },
-      { href: '/admin/doc-control/drawings/contract/sub-categories', label: 'Contract: Sub-categories' },
-      { href: '/admin/doc-control/drawings/shop/main-categories', label: 'Shop: Main Categories' },
-      { href: '/admin/doc-control/drawings/shop/sub-categories', label: 'Shop: Sub-categories' },
+      { href: '/admin/doc-control/reference/disciplines', label: 'สาขาวิชาชีพ' },
+      { href: '/admin/doc-control/reference/rfa-types', label: 'ประเภท RFA' },
+      { href: '/admin/doc-control/reference/correspondence-types', label: 'ประเภทหนังสือ' },
+      { href: '/admin/doc-control/reference/tags', label: 'แท็ก' },
     ],
   },
   {
-    label: 'Monitoring',
+    label: 'ข้อมูลแบบ Drawing',
+    sublabel: 'Drawing Master',
+    icon: Ruler,
+    children: [
+      { href: '/admin/doc-control/drawings/contract/volumes', label: 'สัญญา: Volume' },
+      { href: '/admin/doc-control/drawings/contract/categories', label: 'สัญญา: หมวดหมู่' },
+      { href: '/admin/doc-control/drawings/contract/sub-categories', label: 'สัญญา: หมวดหมู่ย่อย' },
+      { href: '/admin/doc-control/drawings/shop/main-categories', label: 'Shop: หมวดหมู่หลัก' },
+      { href: '/admin/doc-control/drawings/shop/sub-categories', label: 'Shop: หมวดหมู่ย่อย' },
+    ],
+  },
+  {
+    label: 'การปฏิบัติการ',
+    sublabel: 'Operations',
     icon: Activity,
     children: [
-      { href: '/admin/monitoring/audit-logs', label: 'Audit Logs' },
-      { href: '/admin/monitoring/system-logs/numbering', label: 'System Logs' },
-      { href: '/admin/monitoring/sessions', label: 'Active Sessions' },
-    ],
-  },
-  {
-    label: 'Migration',
-    icon: Database,
-    children: [
-      { href: '/admin/migration', label: 'Review Queue' },
-      { href: '/admin/migration/errors', label: 'Error Logs' },
+      { href: '/admin/monitoring/audit-logs', label: 'บันทึกการตรวจสอบ' },
+      { href: '/admin/monitoring/system-logs/numbering', label: 'บันทึกระบบ' },
+      { href: '/admin/monitoring/sessions', label: 'เซสชันที่ใช้งาน' },
+      { href: '/admin/migration', label: 'คิวนำเข้าข้อมูล' },
+      { href: '/admin/migration/errors', label: 'บันทึกข้อผิดพลาด' },
     ],
   },
   { href: '/admin/ai', label: 'AI Console', icon: Brain },
-  { href: '/admin/settings', label: 'Settings', icon: Settings },
+  { href: '/admin/settings', label: 'ตั้งค่าระบบ', sublabel: 'Settings', icon: Settings },
 ];
 
 export function AdminSidebar() {
@@ -100,21 +124,26 @@ export function AdminSidebar() {
                 <button
                   onClick={() => toggleMenu(item.label)}
                   className={cn(
-                    'w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
+                    'w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg transition-colors',
                     hasActiveChild
                       ? 'bg-primary/10 text-primary'
                       : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                   )}
                 >
-                  <span className="flex items-center gap-3">
-                    <Icon className="h-4 w-4" />
-                    <span>{item.label}</span>
+                  <span className="flex items-center gap-3 min-w-0">
+                    <Icon className="h-4 w-4 shrink-0" />
+                    <span className="flex flex-col items-start text-left min-w-0">
+                      <span className="text-sm font-medium leading-tight truncate">{item.label}</span>
+                      {item.sublabel && (
+                        <span className="text-[10px] font-normal leading-tight opacity-60">{item.sublabel}</span>
+                      )}
+                    </span>
                   </span>
-                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                  {isExpanded ? <ChevronDown className="h-3.5 w-3.5 shrink-0" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0" />}
                 </button>
 
                 {isExpanded && (
-                  <div className="ml-4 mt-1 space-y-1 border-l pl-4">
+                  <div className="ml-4 mt-1 space-y-0.5 border-l pl-4">
                     {item.children.map((child) => {
                       const isActive = pathname === child.href;
                       return (
@@ -145,14 +174,19 @@ export function AdminSidebar() {
               key={item.href}
               href={item.href!}
               className={cn(
-                'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
+                'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors',
                 isActive
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'text-muted-foreground hover:bg-muted hover:text-foreground'
               )}
             >
-              <Icon className="h-4 w-4" />
-              <span>{item.label}</span>
+              <Icon className="h-4 w-4 shrink-0" />
+              <span className="flex flex-col items-start min-w-0">
+                <span className="text-sm font-medium leading-tight truncate">{item.label}</span>
+                {item.sublabel && (
+                  <span className="text-[10px] font-normal leading-tight opacity-60">{item.sublabel}</span>
+                )}
+              </span>
             </Link>
           );
         })}
@@ -212,21 +246,26 @@ export function AdminMobileSidebar() {
                     <button
                       onClick={() => toggleMenu(item.label)}
                       className={cn(
-                        'w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
+                        'w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg transition-colors',
                         hasActiveChild
                           ? 'bg-primary/10 text-primary'
                           : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                       )}
                     >
-                      <span className="flex items-center gap-3">
-                        <Icon className="h-4 w-4" />
-                        <span>{item.label}</span>
+                      <span className="flex items-center gap-3 min-w-0">
+                        <Icon className="h-4 w-4 shrink-0" />
+                        <span className="flex flex-col items-start text-left min-w-0">
+                          <span className="text-sm font-medium leading-tight truncate">{item.label}</span>
+                          {item.sublabel && (
+                            <span className="text-[10px] font-normal leading-tight opacity-60">{item.sublabel}</span>
+                          )}
+                        </span>
                       </span>
-                      {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                      {isExpanded ? <ChevronDown className="h-3.5 w-3.5 shrink-0" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0" />}
                     </button>
 
                     {isExpanded && (
-                      <div className="ml-4 mt-1 space-y-1 border-l pl-4">
+                      <div className="ml-4 mt-1 space-y-0.5 border-l pl-4">
                         {item.children.map((child) => {
                           const isActive = pathname === child.href;
                           return (
@@ -258,14 +297,19 @@ export function AdminMobileSidebar() {
                   href={item.href!}
                   onClick={() => setOpen(false)}
                   className={cn(
-                    'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
+                    'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors',
                     isActive
                       ? 'bg-primary text-primary-foreground shadow-sm'
                       : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                   )}
                 >
-                  <Icon className="h-4 w-4" />
-                  <span>{item.label}</span>
+                  <Icon className="h-4 w-4 shrink-0" />
+                  <span className="flex flex-col items-start min-w-0">
+                    <span className="text-sm font-medium leading-tight truncate">{item.label}</span>
+                    {item.sublabel && (
+                      <span className="text-[10px] font-normal leading-tight opacity-60">{item.sublabel}</span>
+                    )}
+                  </span>
                 </Link>
               );
             })}