251127:1700 Frontend Start Build
This commit is contained in:
admin
269
frontend/app/(dashboard)/admin/users/page.tsx
Normal file
269
frontend/app/(dashboard)/admin/users/page.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user