import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, router } from '@inertiajs/react'; import { cn } from "@/lib/utils"; import { Shield, Plus, Pencil, Trash2, Users, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Badge } from '@/Components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { format } from 'date-fns'; import { Can } from '@/Components/Permission/Can'; import { useState } from 'react'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/Components/ui/dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/Components/ui/alert-dialog"; interface User { id: number; name: string; username: string; } interface Role { id: number; name: string; display_name: string; users_count: number; permissions_count: number; created_at: string; users?: User[]; } interface Props { roles: Role[]; filters: { sort_by?: string; sort_order?: 'asc' | 'desc'; }; } export default function RoleIndex({ roles, filters = {} }: Props) { const [selectedRole, setSelectedRole] = useState(null); const [deleteId, setDeleteId] = useState(null); const [deleteName, setDeleteName] = useState(''); const [modelOpen, setModelOpen] = useState(false); const confirmDelete = (id: number, name: string) => { setDeleteId(id); setDeleteName(name); setModelOpen(true); }; const handleDelete = () => { if (deleteId) { router.delete(route('roles.destroy', deleteId), { onSuccess: () => { setModelOpen(false); }, onFinish: () => setModelOpen(false), }); } }; 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('roles.index'), { ...filters, sort_by: newSortBy, sort_order: newSortOrder }, { preserveState: true, replace: true, preserveScroll: true } ); }; const SortIcon = ({ field }: { field: string }) => { if (filters.sort_by !== field) { return ; } if (filters.sort_order === "asc") { return ; } return ; }; return (

角色與權限

設定系統角色與功能存取權限

# 名稱代號操作 {roles.map((role, index) => ( {index + 1}

{role.display_name}

{role.name} {role.permissions_count} 項權限 {format(new Date(role.created_at), 'yyyy/MM/dd')} {role.name !== 'super-admin' && (

)} ))}

{/* 成員名單對話框 */} 確定要刪除此角色嗎？您即將刪除角色「{deleteName}」。此操作無法復原，請確認是否繼續。取消確認刪除 ); }