Wian Drs
@@ -0,0 +1,199 @@
|
||||
import { Form, Head, Link } from '@inertiajs/react';
|
||||
import InputError from '@/components/input-error';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
type Device = {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
activation_status: string;
|
||||
vendor: { name: string };
|
||||
};
|
||||
type Assignment = { device_id: number; group_name: string };
|
||||
type DeviceUser = {
|
||||
id: number;
|
||||
display_name: string;
|
||||
username: string;
|
||||
is_enabled: boolean;
|
||||
notes?: string;
|
||||
assignments: Assignment[];
|
||||
};
|
||||
type Props = { deviceUser: DeviceUser | null; devices: Device[] };
|
||||
export default function DeviceUserForm({ deviceUser, devices }: Props) {
|
||||
const edit = !!deviceUser;
|
||||
const selected = deviceUser?.assignments.map((a) => a.device_id) ?? [];
|
||||
const group = deviceUser?.assignments[0]?.group_name ?? 'RADIQ-NOC';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head
|
||||
title={edit ? 'Edit User Perangkat' : 'Tambah User Perangkat'}
|
||||
/>
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 p-4 md:p-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">
|
||||
{edit ? 'Edit' : 'Tambah'} User Perangkat
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Perubahan dikirim melalui queue. Perangkat offline akan
|
||||
berstatus pending.
|
||||
</p>
|
||||
</div>
|
||||
<Form
|
||||
action={
|
||||
edit
|
||||
? `/device-users/${deviceUser.id}`
|
||||
: '/device-users'
|
||||
}
|
||||
method={edit ? 'put' : 'post'}
|
||||
>
|
||||
{({ processing, errors }) => (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Identitas dan Target</CardTitle>
|
||||
<CardDescription>
|
||||
Password tidak pernah ditampilkan kembali
|
||||
atau dimasukkan dalam payload queue.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-5 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label>Nama</Label>
|
||||
<Input
|
||||
name="display_name"
|
||||
defaultValue={deviceUser?.display_name}
|
||||
required
|
||||
/>
|
||||
<InputError message={errors.display_name} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Username Perangkat</Label>
|
||||
<Input
|
||||
name="username"
|
||||
defaultValue={deviceUser?.username}
|
||||
required
|
||||
/>
|
||||
<InputError message={errors.username} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
{edit
|
||||
? 'Password Baru (kosongkan jika tetap)'
|
||||
: 'Password'}
|
||||
</Label>
|
||||
<Input
|
||||
name="password"
|
||||
type="password"
|
||||
required={!edit}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<InputError message={errors.password} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Konfirmasi Password</Label>
|
||||
<Input
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
required={!edit}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Group</Label>
|
||||
<select
|
||||
name="group_name"
|
||||
defaultValue={group}
|
||||
className="h-10 rounded-md border bg-background px-3"
|
||||
>
|
||||
<option value="RADIQ-READ">
|
||||
RADIQ-READ
|
||||
</option>
|
||||
<option value="RADIQ-WRITE">
|
||||
RADIQ-WRITE
|
||||
</option>
|
||||
<option value="RADIQ-NOC">
|
||||
RADIQ-NOC
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 self-end pb-2">
|
||||
<input
|
||||
type="hidden"
|
||||
name="is_enabled"
|
||||
value="0"
|
||||
/>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_enabled"
|
||||
value="1"
|
||||
defaultChecked={
|
||||
deviceUser?.is_enabled ?? true
|
||||
}
|
||||
/>
|
||||
User aktif di perangkat
|
||||
</label>
|
||||
<div className="md:col-span-2">
|
||||
<Label>Pilih Perangkat</Label>
|
||||
<div className="mt-2 grid max-h-80 gap-2 overflow-y-auto rounded-lg border p-3 md:grid-cols-2">
|
||||
{devices.map((device) => (
|
||||
<label
|
||||
key={device.id}
|
||||
className="flex items-center gap-3 rounded border p-3"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="device_ids[]"
|
||||
value={device.id}
|
||||
defaultChecked={selected.includes(
|
||||
device.id,
|
||||
)}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">
|
||||
{device.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{device.vendor.name} ·{' '}
|
||||
{device.status} ·{' '}
|
||||
{
|
||||
device.activation_status
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<InputError message={errors.device_ids} />
|
||||
</div>
|
||||
<div className="grid gap-2 md:col-span-2">
|
||||
<Label>Catatan</Label>
|
||||
<textarea
|
||||
name="notes"
|
||||
defaultValue={deviceUser?.notes}
|
||||
className="min-h-20 rounded-md border bg-background p-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 md:col-span-2">
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/device-users">Batal</Link>
|
||||
</Button>
|
||||
<Button disabled={processing}>
|
||||
Simpan & Sinkronkan
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user