269 lines
12 KiB
TypeScript
269 lines
12 KiB
TypeScript
import { useState } from 'react';
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
|
|
import { Button } from '@/Components/ui/button';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/Components/ui/table";
|
|
import { format } from 'date-fns';
|
|
import { toast } from 'sonner';
|
|
import { Can } from '@/Components/Permission/Can';
|
|
import { cn } from "@/lib/utils";
|
|
import Pagination from "@/Components/shared/Pagination";
|
|
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
|
|
|
interface Role {
|
|
id: number;
|
|
name: string;
|
|
display_name: string;
|
|
}
|
|
|
|
interface User {
|
|
id: number;
|
|
name: string;
|
|
email: string;
|
|
username: string | null;
|
|
created_at: string;
|
|
roles: Role[];
|
|
}
|
|
|
|
interface PaginationLinks {
|
|
url: string | null;
|
|
label: string;
|
|
active: boolean;
|
|
}
|
|
|
|
interface Props {
|
|
users: {
|
|
data: User[];
|
|
from: number;
|
|
links: PaginationLinks[];
|
|
};
|
|
filters: {
|
|
per_page?: string;
|
|
sort_by?: string;
|
|
sort_order?: 'asc' | 'desc';
|
|
};
|
|
}
|
|
|
|
export default function UserIndex({ users, filters }: Props) {
|
|
const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
|
|
|
|
const handleDelete = (id: number, name: string) => {
|
|
if (confirm(`確定要刪除使用者「${name}」嗎？此操作無法復原。`)) {
|
|
router.delete(route('users.destroy', id), {
|
|
onSuccess: () => toast.success('使用者已刪除'),
|
|
onError: () => toast.error('刪除失敗，請檢查權限'),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handlePerPageChange = (value: string) => {
|
|
setPerPage(value);
|
|
router.get(
|
|
route('users.index'),
|
|
{ ...filters, per_page: value },
|
|
{ preserveState: false, replace: true, preserveScroll: true }
|
|
);
|
|
};
|
|
|
|
const handleSort = (field: string) => {
|
|
let newSortBy: string | undefined = field;
|
|
let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
|
|
|
|
if (filters.sort_by === field) {
|
|
if (filters.sort_order === 'asc') {
|
|
newSortOrder = 'desc';
|
|
} else {
|
|
newSortBy = undefined;
|
|
newSortOrder = undefined;
|
|
}
|
|
}
|
|
|
|
router.get(
|
|
route('users.index'),
|
|
{ ...filters, sort_by: newSortBy, sort_order: newSortOrder },
|
|
{ preserveState: true, replace: true }
|
|
);
|
|
};
|
|
|
|
const SortIcon = ({ field }: { field: string }) => {
|
|
if (filters.sort_by !== field) {
|
|
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
|
|
}
|
|
if (filters.sort_order === "asc") {
|
|
return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
|
|
}
|
|
return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
breadcrumbs={[
|
|
{ label: '系統管理', href: '#' },
|
|
{ label: '使用者管理', href: route('users.index'), isPage: true },
|
|
]}
|
|
>
|
|
<Head title="使用者管理" />
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
|
<Users className="h-6 w-6 text-primary-main" />
|
|
使用者管理
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
管理系統使用者帳號與角色分配
|
|
</p>
|
|
</div>
|
|
<Can permission="users.create">
|
|
<Link href={route('users.create')}>
|
|
<Button className="button-filled-primary">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
新增使用者
|
|
</Button>
|
|
</Link>
|
|
</Can>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader className="bg-gray-50">
|
|
<TableRow>
|
|
<TableHead className="w-[50px] text-center">#</TableHead>
|
|
<TableHead>
|
|
<button
|
|
onClick={() => handleSort('name')}
|
|
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
|
|
>
|
|
使用者 <SortIcon field="name" />
|
|
</button>
|
|
</TableHead>
|
|
<TableHead>角色</TableHead>
|
|
<TableHead>
|
|
<button
|
|
onClick={() => handleSort('created_at')}
|
|
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
|
|
>
|
|
加入時間 <SortIcon field="created_at" />
|
|
</button>
|
|
</TableHead>
|
|
<TableHead className="text-center">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{users.data.map((user, index) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className="text-gray-500 font-medium text-center">
|
|
{users.from + index}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<p className="font-medium text-gray-900">{user.name}</p>
|
|
<div className="flex items-center text-xs text-gray-500">
|
|
<Mail className="h-3 w-3 mr-1" />
|
|
{user.email}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-2">
|
|
{user.roles.length > 0 ? (
|
|
user.roles.map(role => (
|
|
<div
|
|
key={role.id}
|
|
className={cn(
|
|
"inline-flex items-center px-2.5 py-1 rounded-md border",
|
|
role.name === 'super-admin'
|
|
? "bg-purple-50 border-purple-200"
|
|
: "bg-gray-50 border-gray-200"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
{role.name === 'super-admin' && <Shield className="h-3.5 w-3.5 text-purple-600" />}
|
|
<span className={cn(
|
|
"text-sm font-medium",
|
|
role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
|
|
)}>
|
|
{role.display_name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<span className="text-gray-400 text-sm italic">未分配角色</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-gray-500 text-sm">
|
|
{format(new Date(user.created_at), 'yyyy/MM/dd')}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Can permission="users.edit">
|
|
<Link href={route('users.edit', user.id)}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="button-outlined-primary"
|
|
title="編輯"
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</Can>
|
|
<Can permission="users.delete">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="button-outlined-error"
|
|
title="刪除"
|
|
onClick={() => handleDelete(user.id, user.name)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</Can>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* 分頁元件 - 統一樣式 */}
|
|
<div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<span>每頁顯示</span>
|
|
<SearchableSelect
|
|
value={perPage}
|
|
onValueChange={handlePerPageChange}
|
|
options={[
|
|
{ label: "10", value: "10" },
|
|
{ label: "20", value: "20" },
|
|
{ label: "50", value: "50" },
|
|
{ label: "100", value: "100" }
|
|
]}
|
|
className="w-[80px] h-8"
|
|
showSearch={false}
|
|
/>
|
|
<span>筆</span>
|
|
</div>
|
|
<Pagination links={users.links} />
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|