import { FormField } from '@/components/core/form-field'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { MultiSelect } from '@/components/ui/multi-select'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { type SharedData } from '@/types'; import axios from 'axios'; import { useEffect, useState } from 'react'; interface RidingCompany { id: number; name: string; } interface LeadStagesCreateProps { ridingCompanies?: RidingCompany[]; } export default function LeadStagesCreate({ ridingCompanies: initialRidingCompanies = [] }: LeadStagesCreateProps) { const page = usePage(); const { selectedCompany } = page.props; const [ridingCompanies, setRidingCompanies] = useState(initialRidingCompanies); const [loadingRidingCompanies, setLoadingRidingCompanies] = useState(false); // Initialize riding companies from props on mount useEffect(() => { if (initialRidingCompanies && initialRidingCompanies.length > 0) { setRidingCompanies(initialRidingCompanies); } }, []); const { data, setData, post, processing, errors } = useForm({ riding_company_ids: [] as string[], name: '', slug: '', description: '', color: '#3b82f6', order: 0, active: true, requires_all_documents_approved: false, }); // Load riding companies when selectedCompany changes useEffect(() => { setLoadingRidingCompanies(true); // If "All Companies" is selected (selectedCompany is null) and user is super admin, load all riding companies if (!selectedCompany && page.props.auth?.user?.is_super_admin) { axios .get('/api/drivers/riding-companies/all') .then((response) => { setRidingCompanies(response.data); setData('riding_company_id', ''); }) .catch((error) => { console.error('Error fetching all riding companies:', error); setRidingCompanies([]); }) .finally(() => { setLoadingRidingCompanies(false); }); } else if (selectedCompany?.id) { axios .get(`/api/drivers/companies/${selectedCompany.id}/riding-companies`) .then((response) => { setRidingCompanies(response.data); setData('riding_company_id', ''); }) .catch((error) => { console.error('Error fetching riding companies:', error); setRidingCompanies([]); }) .finally(() => { setLoadingRidingCompanies(false); }); } else { // If no selectedCompany or user is not super admin, use initial riding companies from controller setRidingCompanies(initialRidingCompanies); setLoadingRidingCompanies(false); } }, [selectedCompany?.id, initialRidingCompanies]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/drivers/lead-stages'); }; return (

Create Lead Stage

Add a new lead stage for tracking driver progress by riding company

{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

    {Object.entries(errors).map(([field, message]) => (
  • {message}
    • ))}
)}

Basic Information

setData('name', e.target.value)} error={errors.name} required placeholder="Enter lead stage name" />
({ 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. This stage will be available for all drivers in the selected companies.

setData('slug', e.target.value)} error={errors.slug} placeholder="auto-generated if left empty" />