251205:1500 debug backend/frontend

.vscode/extensions.json

@@ -31,7 +31,6 @@
     "chakrounanas.turbo-console-log",
     "pranaygp.vscode-css-peek",
     "alefragnani.bookmarks",
-    "wallabyjs.console-ninja",
     "pkief.material-icon-theme",
     "github.copilot",
     "bierner.markdown-mermaid"

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

@@ -1,269 +0,0 @@
-// File: app/(dashboard)/admin/users/page.tsx
-"use client";
-
-import { useState } from "react";
-import { 
-  Plus, 
-  Search, 
-  MoreHorizontal, 
-  Shield, 
-  Building2, 
-  Mail 
-} from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-// Type สำหรับข้อมูล User (Mockup)
-type User = {
-  id: string;
-  username: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  role: string;
-  organization: string;
-  status: "Active" | "Inactive" | "Locked";
-  lastLogin: string;
-};
-
-// Mock Data (อ้างอิงจาก Data Dictionary: users table)
-const mockUsers: User[] = [
-  {
-    id: "1",
-    username: "superadmin",
-    firstName: "Super",
-    lastName: "Admin",
-    email: "superadmin@example.com",
-    role: "Superadmin",
-    organization: "System",
-    status: "Active",
-    lastLogin: "2025-11-26 10:00",
-  },
-  {
-    id: "2",
-    username: "admin_pat",
-    firstName: "Admin",
-    lastName: "PAT",
-    email: "admin@pat.or.th",
-    role: "Org Admin",
-    organization: "กทท.",
-    status: "Active",
-    lastLogin: "2025-11-26 09:30",
-  },
-  {
-    id: "3",
-    username: "dc_team",
-    firstName: "DC",
-    lastName: "Team",
-    email: "dc@team.co.th",
-    role: "Document Control",
-    organization: "TEAM",
-    status: "Active",
-    lastLogin: "2025-11-25 16:45",
-  },
-  {
-    id: "4",
-    username: "viewer_en",
-    firstName: "Viewer",
-    lastName: "EN",
-    email: "view@en-consult.com",
-    role: "Viewer",
-    organization: "EN",
-    status: "Inactive",
-    lastLogin: "2025-11-20 11:00",
-  },
-];
-
-export default function UsersPage() {
-  const [searchTerm, setSearchTerm] = useState("");
-
-  // Filter logic (Client-side mockup)
-  const filteredUsers = mockUsers.filter((user) =>
-    user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  const getStatusBadgeVariant = (status: string) => {
-    switch (status) {
-      case "Active": return "success";
-      case "Inactive": return "secondary";
-      case "Locked": return "destructive";
-      default: return "default";
-    }
-  };
-
-  const getInitials = (firstName: string, lastName: string) => {
-    return `${firstName[0]}${lastName[0]}`.toUpperCase();
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Users Management</h2>
-          <p className="text-muted-foreground">
-            จัดการผู้ใช้งาน กำหนดสิทธิ์ และดูสถานะการเข้าใช้งาน
-          </p>
-        </div>
-        <Button className="w-full md:w-auto">
-          <Plus className="mr-2 h-4 w-4" /> Add New User
-        </Button>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center space-x-2">
-        <div className="relative flex-1 md:max-w-sm">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search users..."
-            className="pl-8"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
-        {/* Add more filters (Role, Org) here if needed */}
-      </div>
-
-      {/* Desktop View: Table */}
-      <div className="hidden rounded-md border bg-card md:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>User</TableHead>
-              <TableHead>Role</TableHead>
-              <TableHead>Organization</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Last Login</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredUsers.map((user) => (
-              <TableRow key={user.id}>
-                <TableCell>
-                  <div className="flex items-center gap-3">
-                    <Avatar className="h-9 w-9">
-                      <AvatarFallback>{getInitials(user.firstName, user.lastName)}</AvatarFallback>
-                    </Avatar>
-                    <div className="flex flex-col">
-                      <span className="font-medium">{user.username}</span>
-                      <span className="text-xs text-muted-foreground">{user.email}</span>
-                    </div>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center gap-2">
-                    <Shield className="h-4 w-4 text-muted-foreground" />
-                    <span>{user.role}</span>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center gap-2">
-                    <Building2 className="h-4 w-4 text-muted-foreground" />
-                    <span>{user.organization}</span>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <Badge variant={getStatusBadgeVariant(user.status)}>
-                    {user.status}
-                  </Badge>
-                </TableCell>
-                <TableCell className="text-muted-foreground">
-                  {user.lastLogin}
-                </TableCell>
-                <TableCell className="text-right">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem onClick={() => alert(`Edit user ${user.id}`)}>
-                        Edit Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => alert(`Reset password for ${user.id}`)}>
-                        Reset Password
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem className="text-destructive" onClick={() => alert(`Delete user ${user.id}`)}>
-                        Deactivate User
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Mobile View: Cards */}
-      <div className="grid gap-4 md:hidden">
-        {filteredUsers.map((user) => (
-          <Card key={user.id}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-base font-medium">
-                {user.username}
-              </CardTitle>
-              <Badge variant={getStatusBadgeVariant(user.status)}>
-                {user.status}
-              </Badge>
-            </CardHeader>
-            <CardContent className="space-y-3 pt-2">
-              <div className="flex items-center gap-3 text-sm text-muted-foreground">
-                <Mail className="h-4 w-4" />
-                {user.email}
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <div className="flex items-center gap-2">
-                  <Shield className="h-4 w-4 text-muted-foreground" />
-                  <span>{user.role}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Building2 className="h-4 w-4 text-muted-foreground" />
-                  <span>{user.organization}</span>
-                </div>
-              </div>
-              <div className="flex items-center justify-between pt-2">
-                <span className="text-xs text-muted-foreground">
-                  Last login: {user.lastLogin}
-                </span>
-                <Button variant="outline" size="sm">Edit</Button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/components/common/can.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { ReactNode } from "react";
+
+interface CanProps {
+  permission: string;
+  children: ReactNode;
+}
+
+export function Can({ permission, children }: CanProps) {
+  const { data: session } = useSession();
+
+  if (!session?.user) {
+    return null;
+  }
+
+  const userRole = session.user.role;
+
+  // Simple role-based check
+  // If the user's role matches the required permission (role), allow access.
+  if (userRole === permission) {
+    return <>{children}</>;
+  }
+
+  return null;
+}

frontend/components/layout/global-search.tsx

@@ -5,12 +5,8 @@ import { useRouter } from "next/navigation";
 import { Search, FileText, Clipboard, Image } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import {
-  Command,
+  Command, CommandEmpty, CommandGroup, CommandItem, CommandList,
-  CommandEmpty,
+ } from "@/components/ui/command";
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,

frontend/components/ui/command.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

frontend/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
@@ -28,9 +29,10 @@
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.555.0",
-    "next": "14.2.33",
+    "next": "^16.0.7",
     "next-auth": "5.0.0-beta.30",
     "react": "^18",
     "react-dom": "^18",

frontend/tsconfig.json

@@ -1,7 +1,11 @@
 // File: tsconfig.json
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -20,20 +24,51 @@
     ],
     "paths": {
       "baseUrl": "./",
-      "@/*": ["./*"],
+      "@/*": [
-      "@components": ["components/*"],
+        "./*"
-      "@config": ["config/*"],
+      ],
-      "@lib": ["lib/*"],
+      "@components": [
-      "@providers": ["providers/*"],
+        "components/*"
-      "@public": ["public/*"],
+      ],
-      "@styles": ["styles/*"],
+      "@config": [
-      "@types": ["types/*"],
+        "config/*"
-      "@api": ["app/api/*"],
+      ],
+      "@lib": [
+        "lib/*"
+      ],
+      "@providers": [
+        "providers/*"
+      ],
+      "@public": [
+        "public/*"
+      ],
+      "@styles": [
+        "styles/*"
+      ],
+      "@types": [
+        "types/*"
+      ],
+      "@api": [
+        "app/api/*"
+      ],
       // เพิ่มส่วนที่ขาดไปเพื่อให้ตรงกับ Workspace
-      "@hooks/*": ["app/hooks/*"],
+      "@hooks/*": [
-      "@utils/*": ["utils/*"]
+        "app/hooks/*"
-    }
+      ],
+      "@utils/*": [
+        "utils/*"
+      ]
     },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "target": "ES2017"
-  "exclude": ["node_modules"]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }