import { RidingCompanyDeleteDialog } from '@/components/core/riding-company-delete-dialog'; import { DeleteDialog } from '@/components/core/delete-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import AppLayout from '@/layouts/app-layout'; import { CoreUser } from '@/types/core'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Building2, ChevronLeft, ChevronRight, Mail, MapPin, Phone, Trash2, Users as UsersIcon, X, Plug, GitBranch, RefreshCw, Facebook, Plus, Pencil, Trash, Check, AlertCircle } from 'lucide-react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Label } from '@/components/ui/label'; import { Checkbox } from '@/components/ui/checkbox'; import { WhatsAppLinkDeviceRidingCompanyTab } from '@/components/whatsapp/whatsapp-link-device-riding-company-tab'; import { useEffect, useMemo, useRef, useState, useCallback } from 'react'; import { usePermissions } from '@/hooks/use-permissions'; import { MultiSelect } from '@/components/ui/multi-select'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; interface RidingCompany { id: number; uuid: string; name: string; slug: string; description?: string; country?: string; city?: string; logo_path?: string; contact_email?: string; contact_phone?: string; active: boolean; created_at: string; updated_at: string; creator?: { id: number; name: string; email: string; }; distribution_type?: string | null; max_drivers_per_day?: number; distribution_users?: number[]; distribution_scenarios?: Array<{ id?: string; distribution_from_users: number[]; max_drivers_per_day: number; distribution_by_lead_source_enabled: boolean; distribution_by_lead_sources: number[]; assigned_to_users: number[]; assigned_to_roles: number[]; }>; last_distribution_date?: string | null; stage_templates?: Array<{ id: number; name: string; order: number; target_value: number; target_unit: string; duration_days: number; strict_sequence: boolean; allow_cumulative: boolean; active: boolean; }>; document_requirements?: Array<{ id: number; name: string; type: string; required: boolean; active: boolean; }>; document_names?: Array<{ id: number; name: string; type: string; required: boolean; active: boolean; status: string; }>; integrations?: Array<{ id: number; type: string; active: boolean; }>; integration_settings?: Array<{ id: number; type: string; active: boolean; }>; } interface RidingCompanyShowProps { ridingCompany: RidingCompany & { default_driver_user_id?: number | null; default_driver_user?: { id: number; name: string; email: string; } | null; company?: { id: number; name: string; } | null; }; users?: CoreUser[]; availableUsers?: Array<{ id: number; name: string; email: string; }>; leadSources?: Array<{ id: number; name: string; }>; campaigns?: Array<{ id: number; name: string; }>; roles?: Array<{ id: number; name: string; }>; availableRidingCompanies?: Array<{ id: number; name: string; company_id?: number; }>; usersCount?: number; } export default function RidingCompaniesShow({ ridingCompany, users = [], availableUsers = [], leadSources = [], campaigns = [], roles = [], availableRidingCompanies = [], usersCount = 0 }: RidingCompanyShowProps) { const page = usePage(); const { can } = usePermissions(); // Preserve active tab in localStorage const [activeTab, setActiveTab] = useState<'overview' | 'users' | 'rotation' | 'integrations'>(() => { const savedTab = localStorage.getItem('ridingCompanyActiveTab'); return (savedTab as any) || 'overview'; }); // Save tab to localStorage when it changes useEffect(() => { localStorage.setItem('ridingCompanyActiveTab', activeTab); }, [activeTab]); // Distribution scenarios state interface DistributionScenario { id: string; // Temporary ID for new scenarios distribution_from_users: number[]; // Required max_drivers_per_day: number; // Default 10 distribution_by_lead_source_enabled: boolean; distribution_by_lead_sources: number[]; distribution_by_campaign_enabled: boolean; distribution_by_campaigns: number[]; assigned_to_users: number[]; assigned_to_roles: number[]; active?: boolean; // Active/Inactive status for the scenario } // Helper function to normalize scenarios for comparison const normalizeScenarios = (scenarios: DistributionScenario[]): string => { return JSON.stringify(scenarios.map(s => ({ id: s.id && !s.id.toString().startsWith('scenario-') ? s.id : null, distribution_from_users: [...s.distribution_from_users].sort(), max_drivers_per_day: s.max_drivers_per_day || 10, distribution_by_lead_source_enabled: s.distribution_by_lead_source_enabled || false, distribution_by_lead_sources: [...(s.distribution_by_lead_sources || [])].sort(), distribution_by_campaign_enabled: s.distribution_by_campaign_enabled || false, distribution_by_campaigns: [...(s.distribution_by_campaigns || [])].sort(), assigned_to_users: [...(s.assigned_to_users || [])].sort(), assigned_to_roles: [...(s.assigned_to_roles || [])].sort(), active: s.active !== undefined ? s.active : true, }))); }; const [scenarios, setScenarios] = useState(() => { // Initialize with one empty scenario if no existing data if (!ridingCompany.distribution_scenarios || (Array.isArray(ridingCompany.distribution_scenarios) && ridingCompany.distribution_scenarios.length === 0)) { return [{ id: 'scenario-1', distribution_from_users: [], max_drivers_per_day: 10, distribution_by_lead_source_enabled: false, distribution_by_lead_sources: [], distribution_by_campaign_enabled: false, distribution_by_campaigns: [], assigned_to_users: [], assigned_to_roles: [], active: true, // Default to active }]; } // Load existing scenarios from backend return (ridingCompany.distribution_scenarios as any[]).map((scenario, index) => ({ id: scenario.id || `scenario-${index + 1}`, distribution_from_users: scenario.distribution_from_users || [], max_drivers_per_day: scenario.max_drivers_per_day || 10, distribution_by_lead_source_enabled: scenario.distribution_by_lead_source_enabled || false, distribution_by_lead_sources: scenario.distribution_by_lead_sources || [], distribution_by_campaign_enabled: scenario.distribution_by_campaign_enabled || false, distribution_by_campaigns: scenario.distribution_by_campaigns || [], assigned_to_users: scenario.assigned_to_users || [], assigned_to_roles: scenario.assigned_to_roles || [], active: scenario.active !== undefined ? scenario.active : true, // Default to active if not set })); }); const [savingDistribution, setSavingDistribution] = useState(false); const [originalScenarios, setOriginalScenarios] = useState([]); const hasUnsavedChangesRef = useRef(false); // Track if there are unsaved changes const hasUnsavedChanges = useMemo(() => { if (originalScenarios.length === 0) { return false; } return normalizeScenarios(scenarios) !== normalizeScenarios(originalScenarios); }, [scenarios, originalScenarios]); // Track if we've initialized scenarios to prevent duplicate creation // Use a ref to track initialization per riding company ID const initializedRef = useRef(null); // Initialize original scenarios when riding company data loads useEffect(() => { if (!ridingCompany.distribution_scenarios || (Array.isArray(ridingCompany.distribution_scenarios) && ridingCompany.distribution_scenarios.length === 0)) { const defaultScenario = [{ id: 'scenario-1', distribution_from_users: [], max_drivers_per_day: 10, distribution_by_lead_source_enabled: false, distribution_by_lead_sources: [], distribution_by_campaign_enabled: false, distribution_by_campaigns: [], assigned_to_users: [], assigned_to_roles: [], active: true, }]; setScenarios(defaultScenario); setOriginalScenarios(JSON.parse(JSON.stringify(defaultScenario))); } else if (ridingCompany.distribution_scenarios && Array.isArray(ridingCompany.distribution_scenarios)) { const mappedScenarios = (ridingCompany.distribution_scenarios as any[]).map((scenario, index) => ({ id: scenario.id || `scenario-${index + 1}`, distribution_from_users: scenario.distribution_from_users || [], max_drivers_per_day: scenario.max_drivers_per_day || 10, distribution_by_lead_source_enabled: scenario.distribution_by_lead_source_enabled || false, distribution_by_lead_sources: scenario.distribution_by_lead_sources || [], distribution_by_campaign_enabled: scenario.distribution_by_campaign_enabled || false, distribution_by_campaigns: scenario.distribution_by_campaigns || [], assigned_to_users: scenario.assigned_to_users || [], assigned_to_roles: scenario.assigned_to_roles || [], active: scenario.active !== undefined ? scenario.active : true, })); setScenarios(mappedScenarios); setOriginalScenarios(JSON.parse(JSON.stringify(mappedScenarios))); } }, [ridingCompany.id, ridingCompany.distribution_scenarios]); // Show all users in the same company without exception (including fresh-Leads) const filteredAvailableUsers = useMemo(() => { return availableUsers; // Show all users without filtering }, [availableUsers]); // Handle adding new scenario const handleAddScenario = () => { const newScenarioId = `scenario-${Date.now()}`; // Use timestamp to ensure unique ID // Create deep copies of existing scenarios to prevent reference sharing const existingScenarios = scenarios.map(scenario => ({ ...scenario, distribution_from_users: [...scenario.distribution_from_users], distribution_by_lead_sources: [...scenario.distribution_by_lead_sources], distribution_by_campaigns: [...scenario.distribution_by_campaigns], assigned_to_users: [...scenario.assigned_to_users], assigned_to_roles: [...scenario.assigned_to_roles], })); setScenarios([...existingScenarios, { id: newScenarioId, distribution_from_users: [], max_drivers_per_day: 10, distribution_by_lead_source_enabled: false, distribution_by_lead_sources: [], distribution_by_campaign_enabled: false, distribution_by_campaigns: [], assigned_to_users: [], assigned_to_roles: [], active: true, // Default to active }]); }; // Handle updating a scenario const updateScenario = (scenarioId: string, updates: Partial) => { setScenarios(scenarios.map(scenario => { if (scenario.id === scenarioId) { // Create a deep copy of the scenario and apply updates const updatedScenario = { ...scenario, ...updates, // Deep copy arrays to prevent reference sharing distribution_from_users: updates.distribution_from_users !== undefined ? [...(updates.distribution_from_users as number[])] : [...scenario.distribution_from_users], distribution_by_lead_sources: updates.distribution_by_lead_sources !== undefined ? [...(updates.distribution_by_lead_sources as number[])] : [...scenario.distribution_by_lead_sources], distribution_by_campaigns: updates.distribution_by_campaigns !== undefined ? [...(updates.distribution_by_campaigns as number[])] : [...scenario.distribution_by_campaigns], assigned_to_users: updates.assigned_to_users !== undefined ? [...(updates.assigned_to_users as number[])] : [...scenario.assigned_to_users], assigned_to_roles: updates.assigned_to_roles !== undefined ? [...(updates.assigned_to_roles as number[])] : [...scenario.assigned_to_roles], }; return updatedScenario; } // Return a deep copy of other scenarios to prevent reference sharing return { ...scenario, distribution_from_users: [...scenario.distribution_from_users], distribution_by_lead_sources: [...scenario.distribution_by_lead_sources], distribution_by_campaigns: [...scenario.distribution_by_campaigns], assigned_to_users: [...scenario.assigned_to_users], assigned_to_roles: [...scenario.assigned_to_roles], }; })); }; // Handle removing a scenario const handleRemoveScenario = (scenarioId: string) => { setScenarios(scenarios.filter(scenario => scenario.id !== scenarioId)); }; // Handle distribution settings save (manual save with validation) const handleSaveDistribution = async () => { // Validate all scenarios const hasInvalidScenario = scenarios.some(scenario => scenario.distribution_from_users.length === 0 ); if (hasInvalidScenario) { alert('Please select at least one user in "Distribution From User" for all scenarios.'); return; } // Validate that each scenario has at least one assigned_to_users or assigned_to_roles const hasMissingAssignedTo = scenarios.some(scenario => (scenario.assigned_to_users.length === 0 && scenario.assigned_to_roles.length === 0) ); if (hasMissingAssignedTo) { alert('Please select at least one user or role in "Assigned To" for all scenarios.'); return; } setSavingDistribution(true); try { // Create a deep copy of scenarios to preserve them const scenariosToSave = JSON.parse(JSON.stringify(scenarios)); // Prepare scenarios data for backend - ensure all IDs are integers const scenariosToSend = scenarios.map(scenario => ({ id: scenario.id && !scenario.id.toString().startsWith('scenario-') ? scenario.id : null, // Only send real IDs, not temporary ones distribution_from_users: scenario.distribution_from_users.map((id: any) => typeof id === 'string' ? parseInt(id) : id), max_drivers_per_day: scenario.max_drivers_per_day || 10, distribution_by_lead_source_enabled: scenario.distribution_by_lead_source_enabled || false, distribution_by_lead_sources: (scenario.distribution_by_lead_sources || []).map((id: any) => typeof id === 'string' ? parseInt(id) : id), distribution_by_campaign_enabled: scenario.distribution_by_campaign_enabled || false, distribution_by_campaigns: (scenario.distribution_by_campaigns || []).map((id: any) => typeof id === 'string' ? parseInt(id) : id), assigned_to_users: (scenario.assigned_to_users || []).map((id: any) => typeof id === 'string' ? parseInt(id) : id), assigned_to_roles: (scenario.assigned_to_roles || []).map((id: any) => typeof id === 'string' ? parseInt(id) : id), active: scenario.active !== undefined ? scenario.active : true, })); await router.put(`/ridingcarcompanies/riding-companies/${ridingCompany.id}`, { distribution_scenarios: scenariosToSend, }, { preserveScroll: true, preserveState: false, // Reload data to get updated scenarios from backend only: ['ridingCompany'], // Only reload ridingCompany prop onSuccess: () => { // Data will be reloaded from backend automatically // Update original scenarios to mark as saved setOriginalScenarios(JSON.parse(JSON.stringify(scenarios))); hasUnsavedChangesRef.current = false; }, onError: (errors) => { console.error('Error saving distribution settings:', errors); // Show detailed error message let errorMessage = 'Error saving distribution settings.'; if (errors && typeof errors === 'object') { const errorArray = Object.values(errors).flat(); if (errorArray.length > 0) { errorMessage = Array.isArray(errorArray) ? errorArray.join('\n') : String(errorArray); } } alert(errorMessage); // Restore scenarios on error setScenarios(scenariosToSave); }, onFinish: () => { setSavingDistribution(false); }, }); } catch (error) { console.error('Error saving distribution settings:', error); setSavingDistribution(false); } }; // Track unsaved changes useEffect(() => { hasUnsavedChangesRef.current = hasUnsavedChanges; }, [hasUnsavedChanges]); // Warn user before leaving page if there are unsaved changes useEffect(() => { const handleBeforeUnload = (e: BeforeUnloadEvent) => { if (hasUnsavedChangesRef.current) { e.preventDefault(); e.returnValue = ''; return ''; } }; window.addEventListener('beforeunload', handleBeforeUnload); return () => { window.removeEventListener('beforeunload', handleBeforeUnload); }; }, []); // Handle tab change with unsaved changes warning const handleTabChange = (newTab: 'overview' | 'users' | 'rotation' | 'integrations') => { if (hasUnsavedChanges && activeTab === 'overview' && newTab !== 'overview') { if (!confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.')) { return; } } setActiveTab(newTab); }; const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; requirement: { id: number; name: string } | null }>({ open: false, requirement: null, }); const [deleteStageDialog, setDeleteStageDialog] = useState<{ open: boolean; stage: { id: number; name: string } | null }>({ open: false, stage: null, }); const [userFilters, setUserFilters] = useState>({ name: '', email: '', mobile1: '', mobile2: '', roles: '', status: '', }); const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(100); const handleDeleteRequirement = (requirement: { id: number; name: string }) => { setDeleteDialog({ open: true, requirement }); }; const confirmDeleteRequirement = () => { if (deleteDialog.requirement) { router.delete(`/ridingcarcompanies/document-requirements/${deleteDialog.requirement.id}`, { onSuccess: () => { router.reload({ only: ['ridingCompany'] }); }, }); } }; const handleDeleteStage = (stage: { id: number; name: string }) => { setDeleteStageDialog({ open: true, stage }); }; const confirmDeleteStage = () => { if (deleteStageDialog.stage) { router.delete(`/ridingcarcompanies/stage-templates/${deleteStageDialog.stage.id}`, { onSuccess: () => { router.reload({ only: ['ridingCompany'] }); }, }); } }; const [deleteRidingCompanyDialog, setDeleteRidingCompanyDialog] = useState(false); const handleDelete = () => { setDeleteRidingCompanyDialog(true); }; const handleToggleStatus = () => { router.post(`/ridingcarcompanies/riding-companies/${ridingCompany.id}/toggle-active`); }; const handleUserFilterChange = (key: string, value: string) => { setUserFilters((prev) => ({ ...prev, [key]: value === '__all__' ? '' : value, })); }; const clearUserFilter = (key: string) => { setUserFilters((prev) => ({ ...prev, [key]: '', })); }; const filteredUsers = useMemo(() => { if (!users || users.length === 0) { return []; } return users.filter((user) => { const nameMatch = !userFilters.name || user.name.toLowerCase().includes(userFilters.name.toLowerCase()); const emailMatch = !userFilters.email || user.email.toLowerCase().includes(userFilters.email.toLowerCase()); const mobile1Match = !userFilters.mobile1 || (user.mobile1 && user.mobile1.toLowerCase().includes(userFilters.mobile1.toLowerCase())); const mobile2Match = !userFilters.mobile2 || (user.mobile2 && user.mobile2.toLowerCase().includes(userFilters.mobile2.toLowerCase())); const rolesMatch = !userFilters.roles || userFilters.roles === '' || (user.roles && user.roles.length > 0 && user.roles.some((r: any) => r.id.toString() === userFilters.roles )); const statusMatch = !userFilters.status || userFilters.status === '' || (userFilters.status === 'active' && user.is_active) || (userFilters.status === 'inactive' && !user.is_active); return nameMatch && emailMatch && mobile1Match && mobile2Match && rolesMatch && statusMatch; }); }, [users, userFilters]); // Pagination const totalUsers = filteredUsers.length; const totalPages = Math.ceil(totalUsers / rowsPerPage); const startIndex = (currentPage - 1) * rowsPerPage; const endIndex = startIndex + rowsPerPage; const paginatedUsers = filteredUsers.slice(startIndex, endIndex); // Reset to page 1 when filters change useEffect(() => { setCurrentPage(1); }, [userFilters]); return (

{ridingCompany.name}

Riding Company Details

{activeTab === 'overview' && (
)}
{/* Tabs */}
{/* Tab Content */} {activeTab === 'overview' && (

Company Information

Name

{ridingCompany.name}

Slug

{ridingCompany.slug}

{ridingCompany.description && (

Description

{ridingCompany.description}

)}

Status

{ridingCompany.active ? 'Active' : 'Inactive'}

UUID

{ridingCompany.uuid}

Contact Information

{(ridingCompany.country || ridingCompany.city) && (

Location

{[ridingCompany.city, ridingCompany.country] .filter(Boolean) .join(', ') || '-'}

)} {ridingCompany.contact_email && (

Email

{ridingCompany.contact_email}

)} {ridingCompany.contact_phone && (

Phone

{ridingCompany.contact_phone}

)} {ridingCompany.creator && (

Created By

{ridingCompany.creator.name}

)}

Stage Templates

{ridingCompany.stage_templates && ridingCompany.stage_templates.length > 0 ? (
{ridingCompany.stage_templates .sort((a, b) => a.order - b.order) .map((template) => (
{template.name} {template.active ? 'Active' : 'Inactive'}
Order: {template.order}
Target: {template.target_value} {template.target_unit}
Duration: {template.duration_days} days
{template.strict_sequence && ( Strict )} {template.allow_cumulative && ( Cumulative )}
))}
) : (

No stage templates found.

)}

Document Requirements

{ridingCompany.document_requirements && ridingCompany.document_requirements.length > 0 ? (
{ridingCompany.document_requirements.map((req) => (
{req.name} {req.active ? 'Active' : 'Inactive'}
{req.type} {req.required && ( Required )} {!req.required && ( Optional )}
))}
) : (

No document requirements found.

)} {/* Document Names from document_names table */} {ridingCompany.document_names && ridingCompany.document_names.length > 0 && (
{ridingCompany.document_names.map((docName) => (
{docName.name} {docName.active ? 'Active' : 'Inactive'}
{docName.type || 'file'} {docName.required && ( Required )} {!docName.required && ( Optional )}
))}
)} {ridingCompany.integrations && ridingCompany.integrations.length > 0 && (

Integrations

{ridingCompany.integrations.map((integration) => (

{integration.type}

{integration.active ? 'Active' : 'Inactive'}
))}
)} {ridingCompany.integration_settings && ridingCompany.integration_settings.length > 0 && (

Integration Settings

{ridingCompany.integration_settings.map((setting) => (

{setting.type}

{setting.active ? 'Active' : 'Inactive'}
))}
)}

Distribution Settings

{hasUnsavedChanges && ( Unsaved changes )}

Configure how leads are distributed among team members in this riding company. Don't forget to save your changes.

{scenarios.map((scenario, index) => { // Color scheme for each scenario const colorSchemes = [ { border: 'border-blue-500', bg: 'bg-blue-50 dark:bg-blue-900/20', header: 'bg-blue-500', text: 'text-blue-700 dark:text-blue-300' }, { border: 'border-purple-500', bg: 'bg-purple-50 dark:bg-purple-900/20', header: 'bg-purple-500', text: 'text-purple-700 dark:text-purple-300' }, { border: 'border-green-500', bg: 'bg-green-50 dark:bg-green-900/20', header: 'bg-green-500', text: 'text-green-700 dark:text-green-300' }, { border: 'border-orange-500', bg: 'bg-orange-50 dark:bg-orange-900/20', header: 'bg-orange-500', text: 'text-orange-700 dark:text-orange-300' }, { border: 'border-pink-500', bg: 'bg-pink-50 dark:bg-pink-900/20', header: 'bg-pink-500', text: 'text-pink-700 dark:text-pink-300' }, { border: 'border-indigo-500', bg: 'bg-indigo-50 dark:bg-indigo-900/20', header: 'bg-indigo-500', text: 'text-indigo-700 dark:text-indigo-300' }, ]; const colorScheme = colorSchemes[index % colorSchemes.length]; return (

Scenario {index + 1}

{scenario.active !== false ? "✓ Active" : "○ Inactive"}
{/* Left Column */}
{/* Distribution From User - Required */}
({ value: user.id, label: user.name, }))} value={scenario.distribution_from_users} onChange={(value) => { const newValue = value.map(v => typeof v === 'string' ? parseInt(v) : v); updateScenario(scenario.id, { distribution_from_users: newValue }); }} placeholder="Select users..." className="w-full" searchable={true} />

Select users from whom leads will be distributed. You can select multiple users. This field is required.

{/* Distribution By Lead Source - Optional */}
{ updateScenario(scenario.id, { distribution_by_lead_source_enabled: checked === true, distribution_by_lead_sources: checked === true ? scenario.distribution_by_lead_sources : [] }); }} />
{scenario.distribution_by_lead_source_enabled && ( ({ value: source.id, label: source.name, }))} value={scenario.distribution_by_lead_sources} onChange={(value) => { const newValue = value.map(v => typeof v === 'string' ? parseInt(v) : v); updateScenario(scenario.id, { distribution_by_lead_sources: newValue }); }} placeholder="Select lead sources..." className="w-full" searchable={true} /> )}
{/* Distribution By Campaign - Optional */}
{ updateScenario(scenario.id, { distribution_by_campaign_enabled: checked === true, distribution_by_campaigns: checked === true ? scenario.distribution_by_campaigns : [] }); }} />
{scenario.distribution_by_campaign_enabled && ( ({ value: campaign.id, label: campaign.name, }))} value={scenario.distribution_by_campaigns} onChange={(value) => { const newValue = value.map(v => typeof v === 'string' ? parseInt(v) : v); updateScenario(scenario.id, { distribution_by_campaigns: newValue }); }} placeholder="Select campaigns..." className="w-full" searchable={true} /> )}
{/* Right Column */}
{/* Max drivers per day per user */}
updateScenario(scenario.id, { max_drivers_per_day: parseInt(e.target.value) || 10 })} className="w-full" />
{/* Assigned To - Full Width */}
({ value: user.id, label: user.name, }))} value={scenario.assigned_to_users} onChange={(value) => { const newValue = value.map(v => typeof v === 'string' ? parseInt(v) : v); updateScenario(scenario.id, { assigned_to_users: newValue }); }} placeholder="Select users..." className="w-full" searchable={true} />
({ value: role.id, label: role.name, }))} value={scenario.assigned_to_roles} onChange={(value) => { const newValue = value.map(v => typeof v === 'string' ? parseInt(v) : v); updateScenario(scenario.id, { assigned_to_roles: newValue }); }} placeholder="Select roles..." className="w-full" searchable={true} />

Select team members who will receive distributed drivers. You can select multiple users and/or roles. The fresh-Leads user is automatically excluded.

When a role is selected, all users in that role will be included in the distribution, each with the maximum drivers per day limit.

); })} {/* Add Scenario Button */} {/* Save Button - only shown when there are unsaved changes */} {hasUnsavedChanges && ( )}
)} {activeTab === 'users' && (

Riding Company Users

{users && users.length > 0 ? (
{/* Pagination */} {totalUsers > 0 && (
Showing {startIndex + 1} to {Math.min(endIndex, totalUsers)} of {totalUsers}
Rows per page:
Page {currentPage} of {totalPages || 1}
Total: {totalUsers} user(s)
)}
{paginatedUsers.length === 0 ? ( ) : ( paginatedUsers.map((user, index) => ( )) )}
Name Email Mobile 1 Mobile 2 Company Roles Status Actions
handleUserFilterChange('name', e.target.value)} className="w-full text-xs h-8 pr-8" /> {userFilters.name && ( )}
handleUserFilterChange('email', e.target.value)} className="w-full text-xs h-8 pr-8" /> {userFilters.email && ( )}
handleUserFilterChange('mobile1', e.target.value)} className="w-full text-xs h-8 pr-8" /> {userFilters.mobile1 && ( )}
handleUserFilterChange('mobile2', e.target.value)} className="w-full text-xs h-8 pr-8" /> {userFilters.mobile2 && ( )}
handleUserFilterChange('status', e.target.value)} className="w-full text-xs h-8 pr-8" /> {userFilters.status && ( )}
No users found
{user.name} {user.email} {user.mobile1 || '-'} {user.mobile2 || '-'} {user.company?.name || '-'} {user.roles && user.roles.length > 0 ? user.roles.map((r: any) => r.name).join(', ') : 'No roles'} {user.is_active ? 'Active' : 'Inactive'}
{can('core', 'users', 'read') && user.company_id && ( )} {can('core', 'users', 'update') && user.company_id && ( )}
) : (

No users found for this riding company.

)} )} {activeTab === 'rotation' && (

Rotation Settings

Configure lead rotation rules and schedules for this riding company.

Rotation settings coming soon...

 )} {activeTab === 'integrations' && (

WhatsApp Integration

Connect WhatsApp to this riding company. Each riding company has its own WhatsApp session. Users in this riding company will see chats only for phone numbers they have access to.

{ router.put(`/ridingcarcompanies/riding-companies/${ridingCompany.id}`, { default_driver_user_id: userId, }, { preserveScroll: true, preserveState: false, onSuccess: (page) => { // The page will be reloaded automatically by Inertia::render() in the controller // No need for manual reload }, onError: (errors) => { console.error('Error updating user:', errors); }, }); }} />

Facebook Integration

Connect your Facebook account. Any user can login with their Facebook account and access their own pages and leads.

)}
setDeleteDialog({ open, requirement: null })} onConfirm={confirmDeleteRequirement} title="Delete Document Requirement" description={`Are you sure you want to delete "${deleteDialog.requirement?.name}"? This action cannot be undone.`} /> setDeleteStageDialog({ open, stage: null })} onConfirm={confirmDeleteStage} title="Delete Stage Template" description={`Are you sure you want to delete "${deleteStageDialog.stage?.name}"? This action cannot be undone.`} /> ); }