Buat Group To Do List

Setelah buat group, tambahkan item to-do di dalamnya lalu distribusikan ke siswa.

{({ processing, errors }) => (

Nama Group

Deskripsi (opsional)

<div className="grid gap-1.5">
                                <Label className="font-semibold">Target Siswa</Label>
                                <input type="hidden" name="type" value={type} />
                                <div className="grid grid-cols-2 gap-2">
                                    {(['course', 'learning_path'] as const).map((t) => (
                                        <button
                                            key={t}
                                            type="button"
                                            onClick={() => setType(t)}
                                            className={`rounded-xl border p-3 text-left text-sm transition-colors ${
                                                type === t
                                                    ? 'border-blue-400 bg-blue-50 dark:border-blue-600 dark:bg-blue-950/40'
                                                    : 'border-border hover:bg-muted/50'
                                            }`}
                                        >
                                            <p className="font-medium">{t === 'course' ? 'Per Kelas' : 'Per Paket Belajar'}</p>
                                            <p className="mt-0.5 text-xs text-muted-foreground">
                                                {t === 'course' ? 'Semua siswa di kelas tertentu' : 'Siswa di paket belajar tertentu'}
                                            </p>
                                        </button>
                                    ))}
                                </div>
                                <InputError message={errors.type} />
                            </div>

{type === 'course' && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="course_id" className="font-semibold">Pilih Kelas</Label>
                                    <Select name="course_id" required>
                                        <SelectTrigger className="rounded-xl">
                                            <SelectValue placeholder="Pilih kelas..." />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {courses.map((c) => (
                                                <SelectItem key={c.id} value={String(c.id)}>{c.title}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.course_id} />
                                </div>
                            )}

{type === 'learning_path' && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="learning_path_id" className="font-semibold">Pilih Paket Belajar</Label>
                                    <Select name="learning_path_id" required>
                                        <SelectTrigger className="rounded-xl">
                                            <SelectValue placeholder="Pilih paket belajar..." />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {learningPaths.map((lp) => (
                                                <SelectItem key={lp.id} value={String(lp.id)}>{lp.title}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.learning_path_id} />
                                </div>
                            )}

<div className="flex gap-2 pt-1">
                                <Button type="submit" disabled={processing} className="gap-1.5 bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner />}
                                    Buat Group →
                                </Button>
                                <Button type="button" variant="outline" onClick={() => history.back()}>Batal</Button>
                            </div>
                        </div>
                    )}
                </Form>
            </div>
        </>
    );
}

AdminAssignedTasksCreate.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;