61 lines
3.1 KiB
TypeScript
61 lines
3.1 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Head, useForm } from '@inertiajs/react';
|
|
import React from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
export default function Index({ users }: { users: any[] }) {
|
|
const { patch, processing } = useForm();
|
|
|
|
const updateRole = (id: number, role: string) => {
|
|
patch(route('admin.users.update', id), {
|
|
data: { role: role },
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Manajemen User" />
|
|
<div className="p-4 md:p-8 w-full space-y-6">
|
|
<h2 className="text-2xl font-bold">Manajemen Akses User</h2>
|
|
<Card>
|
|
<CardHeader><CardTitle>Daftar Pengguna</CardTitle></CardHeader>
|
|
<CardContent className="p-0">
|
|
<table className="w-full text-sm text-left">
|
|
<thead className="bg-zinc-50 border-b">
|
|
<tr>
|
|
<th className="p-4">Nama</th>
|
|
<th className="p-4 text-center">Role</th>
|
|
<th className="p-4 text-right">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((user) => (
|
|
<tr key={user.id} className="border-b">
|
|
<td className="p-4 font-medium">{user.name}</td>
|
|
<td className="p-4 text-center">
|
|
<span className="bg-zinc-100 px-2 py-1 rounded text-[10px] font-bold">
|
|
{user.role.toUpperCase()}
|
|
</span>
|
|
</td>
|
|
<td className="p-4 text-right">
|
|
<Select defaultValue={user.role} onValueChange={(val) => updateRole(user.id, val)} disabled={processing}>
|
|
<SelectTrigger className="w-[120px] ml-auto"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="admin">Admin</SelectItem>
|
|
<SelectItem value="employee">Employee</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |