Keperluan

<InputError message={errors.purpose} />
            </div>
            <div className="grid gap-2">
                <Label>Status</Label>
                <input type="hidden" name="status" />
                <Select
                    name="status"
                    defaultValue={editing?.status ?? 'submitted'}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue placeholder="Pilih status" />
                    </SelectTrigger>
                    <SelectContent>
                        {LetterStatuses.map((status) => (
                            <SelectItem key={status} value={status}>
                                {LetterStatusLabels[status]}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                <InputError message={errors.status} />
            </div>
            <FileUploadField
                key={resetKey}
                name="result"
                label="Dokumen Hasil"
                existingFileName={editing?.result_name}
                existingFileUrl={editing?.result_url}
                error={errors.result}
            />
        </>
    );
}

function CreateForm({
    open,
    onOpenChange,
    students,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    students: LetterRequestStudent[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Tambah Surat Permohonan"
            action={store()}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) => (
                <div className="grid gap-4">
                    <LetterRequestFields
                        errors={errors}
                        students={students}
                        resetKey={open ? 'open' : 'closed'}
                    />
                </div>
            )}
        </FormDialog>
    );
}

function EditForm({
    open,
    onOpenChange,
    editing,
    students,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    editing: LetterRequest | null;
    students: LetterRequestStudent[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Edit Surat Permohonan"
            action={editing ? update(editing.id) : ''}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) =>
                editing && (
                    <div className="grid gap-4">
                        <LetterRequestFields
                            errors={errors}
                            editing={editing}
                            students={students}
                        />
                    </div>
                )
            }
        </FormDialog>
    );
}