Wian Drs
208 lines
11 KiB
TypeScript
208 lines
11 KiB
TypeScript
import { Head, Link, router, usePage } from '@inertiajs/react';
|
|
import { Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
type Assignment = {
|
|
id: number;
|
|
group_name: string;
|
|
sync_status: string;
|
|
error_code?: string;
|
|
message?: string;
|
|
device: { id: number; name: string };
|
|
};
|
|
type DeviceUser = {
|
|
id: number;
|
|
display_name: string;
|
|
username: string;
|
|
is_enabled: boolean;
|
|
assignments: Assignment[];
|
|
};
|
|
type Props = {
|
|
deviceUsers: { data: DeviceUser[] };
|
|
devices: { id: number; name: string }[];
|
|
filters: { search?: string; device_id?: string };
|
|
};
|
|
const colors: Record<string, string> = {
|
|
synced: 'bg-emerald-100 text-emerald-800',
|
|
pending: 'bg-amber-100 text-amber-800',
|
|
queued: 'bg-blue-100 text-blue-800',
|
|
processing: 'bg-blue-100 text-blue-800',
|
|
failed: 'bg-red-100 text-red-800',
|
|
unsupported: 'bg-slate-200 text-slate-800',
|
|
};
|
|
export default function DeviceUsers({ deviceUsers, devices, filters }: Props) {
|
|
const { auth } = usePage().props;
|
|
const search = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
router.get(
|
|
'/device-users',
|
|
Object.fromEntries(new FormData(e.currentTarget)),
|
|
{ preserveState: true },
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head title="Users Perangkat" />
|
|
<div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">
|
|
Users Perangkat
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Kelola satu akun pada banyak perangkat dan pantau
|
|
status sinkronisasinya.
|
|
</p>
|
|
</div>
|
|
{auth.permissions.includes('device.user.create') && (
|
|
<Button asChild>
|
|
<Link href="/device-users/create">
|
|
<Plus className="size-4" />
|
|
Tambah User Perangkat
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<form
|
|
onSubmit={search}
|
|
className="mb-5 grid gap-3 md:grid-cols-3"
|
|
>
|
|
<Input
|
|
name="search"
|
|
defaultValue={filters.search}
|
|
placeholder="Cari nama atau username..."
|
|
/>
|
|
<select
|
|
name="device_id"
|
|
defaultValue={filters.device_id ?? ''}
|
|
className="h-10 rounded-md border bg-background px-3"
|
|
>
|
|
<option value="">Semua perangkat</option>
|
|
{devices.map((d) => (
|
|
<option key={d.id} value={d.id}>
|
|
{d.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<Button variant="outline">Filter</Button>
|
|
</form>
|
|
<div className="space-y-4">
|
|
{deviceUsers.data.map((user) => (
|
|
<div
|
|
key={user.id}
|
|
className="rounded-lg border p-4"
|
|
>
|
|
<div className="flex flex-wrap justify-between gap-3">
|
|
<div>
|
|
<div className="font-semibold">
|
|
{user.display_name}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{user.username} ·{' '}
|
|
{user.is_enabled
|
|
? 'Aktif'
|
|
: 'Nonaktif'}{' '}
|
|
· password terenkripsi
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{auth.permissions.includes(
|
|
'device.user.update',
|
|
) && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
asChild
|
|
>
|
|
<Link
|
|
href={`/device-users/${user.id}/edit`}
|
|
>
|
|
<Pencil className="size-4" />
|
|
Edit
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{auth.permissions.includes(
|
|
'device.user.delete',
|
|
) && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() =>
|
|
confirm(
|
|
'Hapus user dari seluruh perangkat?',
|
|
) &&
|
|
router.delete(
|
|
`/device-users/${user.id}`,
|
|
)
|
|
}
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 grid gap-2 md:grid-cols-2 xl:grid-cols-3">
|
|
{user.assignments.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="rounded border p-3 text-sm"
|
|
>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="font-medium">
|
|
{item.device.name}
|
|
</span>
|
|
<span
|
|
className={`rounded-full px-2 py-1 text-xs ${colors[item.sync_status] ?? 'bg-muted'}`}
|
|
>
|
|
{item.sync_status}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{item.group_name}
|
|
{item.error_code
|
|
? ` · ${item.error_code}`
|
|
: ''}
|
|
</div>
|
|
{['pending', 'failed'].includes(
|
|
item.sync_status,
|
|
) &&
|
|
auth.permissions.includes(
|
|
'device.user.update',
|
|
) && (
|
|
<Button
|
|
className="mt-2"
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() =>
|
|
router.post(
|
|
`/device-user-assignments/${item.id}/sync`,
|
|
)
|
|
}
|
|
>
|
|
<RefreshCw className="size-3" />
|
|
Coba Lagi
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{deviceUsers.data.length === 0 && (
|
|
<div className="py-12 text-center text-muted-foreground">
|
|
Belum ada user perangkat.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|