Edit Document Requirement

Update document requirement for {ridingCompany.name}

{Object.keys(errors).length > 0 && (

There {Object.keys(errors).length === 1 ? 'is' : 'are'}{' '} {Object.keys(errors).length} error {Object.keys(errors).length === 1 ? '' : 's'} with your submission

{message}

)}

Requirement Information

setData('name', e.target.value)} error={errors.name} required />

{ridingCompanies.length > 0 && (

Riding Companies * ({ value: company.id.toString(), label: company.name, }))} value={data.riding_company_ids} onChange={(value) => setData('riding_company_ids', value)} placeholder="Select riding companies..." className="w-full" searchable={true} /> {errors.riding_company_ids && (

{errors.riding_company_ids}

)}

Select one or more riding companies for this requirement.

)}

Document Type * {errors.type &&

{errors.type}

}

Default Status * {errors.default_status && (

{errors.default_status}

)}

Default status for documents created from this requirement.

Instructions

setData('instructions', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2"
                                    rows={3}
                                />
                                {errors.instructions && (
                                    <p className="text-sm text-red-500">{errors.instructions}</p>
                                )}
                            </div>

<div>
                                <Label htmlFor="required" className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="required"
                                        name="required"
                                        checked={data.required}
                                        onChange={(e) => setData('required', e.target.checked)}
                                        className="rounded border-gray-300"
                                    />
                                    <span>Required (Mandatory)</span>
                                </Label>
                                {errors.required && (
                                    <p className="text-sm text-red-500">{errors.required}</p>
                                )}
                            </div>

<div>
                                <Label htmlFor="active" className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="active"
                                        name="active"
                                        checked={data.active}
                                        onChange={(e) => setData('active', e.target.checked)}
                                        className="rounded border-gray-300"
                                    />
                                    <span>Active</span>
                                </Label>
                                {errors.active && (
                                    <p className="text-sm text-red-500">{errors.active}</p>
                                )}
                            </div>
                        </div>
                    </Card>

<div className="flex justify-end gap-4">
                        <Link
                            href={`/ridingcarcompanies/riding-companies/${ridingCompany.id}/document-requirements`}
                        >
                            <Button type="button" variant="outline">
                                Cancel
                            </Button>
                        </Link>
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Updating...' : 'Update Document Requirement'}
                        </Button>
                    </div>
                </form>

{/* Drivers Table with Document Requirements */}
                {drivers.length > 0 && allDocumentRequirements.length > 0 && (
                    <Card className="p-6 mt-6">
                        <h2 className="mb-4 text-lg font-semibold">Drivers & Document Status</h2>
                        <DataTable
                            data={drivers}
                            columns={[
                                {
                                    header: 'Driver Name',
                                    accessor: (row) => row.full_name,
                                },
                                {
                                    header: 'Phone',
                                    accessor: (row) => row.phone,
                                },
                                ...allDocumentRequirements.map((req) => ({
                                    header: req.name,
                                    accessor: (row: Driver) => {
                                        const doc = row.documents[req.name];
                                        if (!doc || doc.status === 'not_required') {
                                            return (
                                                <span className="text-sm text-neutral-500 italic">
                                                    Not Required
                                                </span>
                                            );
                                        }
                                        return (
                                            <Badge 
                                                variant={
                                                    doc.status === 'approved' ? 'default' :
                                                    doc.status === 'rejected' ? 'destructive' :
                                                    'secondary'
                                                }
                                            >
                                                {doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}
                                            </Badge>
                                        );
                                    },
                                })),
                            ]}
                        />
                    </Card>
                )}
            </div>
        </AppLayout>
    );
}