1- import React , { useEffect , useState , useRef } from 'react'
1+ import React , { useEffect , useState } from 'react'
22import {
33 CCard ,
44 CCardBody ,
@@ -11,110 +11,81 @@ import {
1111 CTableRow ,
1212 CTableDataCell ,
1313 CSpinner ,
14+ CFormInput ,
1415} from '@coreui/react'
1516
1617const DriverManagement = ( ) => {
17- const [ shipments , setShipments ] = useState ( [ ] )
18+ const [ drivers , setDrivers ] = useState ( [ ] )
1819 const [ loading , setLoading ] = useState ( true )
19- const socketRef = useRef ( null )
20+ const [ filterTerm , setFilterTerm ] = useState ( '' )
2021
2122 useEffect ( ( ) => {
22- const fetchShipments = async ( ) => {
23+ const fetchDrivers = async ( ) => {
2324 try {
24- const res = await fetch ( 'https: //backend-core2.axleshift.com/driver/shipments ' )
25+ const res = await fetch ( 'https//backend-core2.axleshift.com/api/drivers ' )
2526 const data = await res . json ( )
26- setShipments ( data )
27+ setDrivers ( data )
2728 } catch ( error ) {
28- console . error ( 'Failed to fetch shipments :' , error )
29+ console . error ( 'Failed to fetch drivers :' , error )
2930 } finally {
3031 setLoading ( false )
3132 }
3233 }
3334
34- fetchShipments ( )
35+ fetchDrivers ( )
36+ const intervalId = setInterval ( fetchDrivers , 2000 )
3537
36- // Connect to WebSocket
37- socketRef . current = new WebSocket ( 'wss://backend-core2.axleshift.com' )
38-
39- socketRef . current . onopen = ( ) => {
40- console . log ( 'WebSocket connected (DriverManagement)' )
41- }
42-
43- socketRef . current . onmessage = ( event ) => {
44- const message = JSON . parse ( event . data )
45-
46- if ( message . type === 'shipmentLocationUpdate' ) {
47- const { trackingNumber, latitude, longitude, updated_at, driverUsername } = message . data
48-
49- setShipments ( ( prevShipments ) =>
50- prevShipments . map ( ( shipment ) =>
51- shipment . trackingNumber === trackingNumber
52- ? {
53- ...shipment ,
54- latitude,
55- longitude,
56- updated_at,
57- driverUsername,
58- }
59- : shipment ,
60- ) ,
61- )
62- }
63- }
64-
65- socketRef . current . onerror = ( error ) => {
66- console . error ( 'WebSocket error:' , error )
67- }
38+ return ( ) => clearInterval ( intervalId )
39+ } , [ ] )
40+ const filteredDrivers = drivers . filter ( ( d ) => {
41+ const term = filterTerm . toLowerCase ( )
6842
69- socketRef . current . onclose = ( ) => {
70- console . log ( 'WebSocket disconnected' )
71- }
43+ const matchesName = d . name . toLowerCase ( ) . includes ( term )
44+ const matchesPlate = d . vehicle ?. number ?. toLowerCase ( ) . includes ( term )
45+ const matchesLicense = d . licenseNumber ?. toLowerCase ( ) . includes ( term )
46+ const matchesVehicleType = d . vehicle ?. type ?. toLowerCase ( ) . includes ( term )
47+ const matchesOnDuty = ( d . onDuty ? 'Yes' : 'No' ) . includes ( term )
7248
73- // Cleanup
74- return ( ) => {
75- socketRef . current ?. close ( )
76- }
77- } , [ ] )
49+ return matchesName || matchesPlate || matchesLicense || matchesVehicleType || matchesOnDuty
50+ } )
7851
7952 return (
8053 < CRow >
8154 < CCol >
8255 < CCard className = "mb-4 shadow-sm" >
8356 < CCardBody >
84- < h4 className = "mb-3" > Active Shipments</ h4 >
57+ < div className = "d-flex justify-content-between align-items-center mb-3" >
58+ < h4 > Driver Management</ h4 >
59+ < CFormInput
60+ type = "text"
61+ placeholder = "Search name, plate, or license"
62+ value = { filterTerm }
63+ onChange = { ( e ) => setFilterTerm ( e . target . value ) }
64+ className = "form-control"
65+ style = { { maxWidth : '250px' } }
66+ />
67+ </ div >
8568 { loading ? (
8669 < CSpinner color = "primary" />
8770 ) : (
8871 < CTable striped responsive bordered hover >
8972 < CTableHead >
9073 < CTableRow >
91- < CTableHeaderCell > Tracking Number </ CTableHeaderCell >
92- < CTableHeaderCell > Status </ CTableHeaderCell >
93- < CTableHeaderCell > Driver </ CTableHeaderCell >
94- < CTableHeaderCell > Delivery Address </ CTableHeaderCell >
95- < CTableHeaderCell > Live Location </ CTableHeaderCell >
74+ < CTableHeaderCell > Name </ CTableHeaderCell >
75+ < CTableHeaderCell > Vehicle Type </ CTableHeaderCell >
76+ < CTableHeaderCell > On Duty </ CTableHeaderCell >
77+ < CTableHeaderCell > Plate Number </ CTableHeaderCell >
78+ < CTableHeaderCell > License Number </ CTableHeaderCell >
9679 </ CTableRow >
9780 </ CTableHead >
9881 < CTableBody >
99- { shipments . map ( ( s ) => (
100- < CTableRow key = { s . trackingNumber } >
101- < CTableDataCell > { s . trackingNumber } </ CTableDataCell >
102- < CTableDataCell > { s . status || 'Unknown' } </ CTableDataCell >
103- < CTableDataCell > { s . driverUsername || 'Unassigned' } </ CTableDataCell >
104- < CTableDataCell > { s . deliveryAddress } </ CTableDataCell >
105- < CTableDataCell >
106- { s . latitude && s . longitude ? (
107- < a
108- href = { `https://www.google.com/maps?q=${ s . latitude } ,${ s . longitude } ` }
109- target = "_blank"
110- rel = "noopener noreferrer"
111- >
112- View on Map
113- </ a >
114- ) : (
115- 'Not Available'
116- ) }
117- </ CTableDataCell >
82+ { filteredDrivers . map ( ( d ) => (
83+ < CTableRow key = { d . _id } >
84+ < CTableDataCell > { d . name } </ CTableDataCell >
85+ < CTableDataCell > { d . vehicle ?. type } </ CTableDataCell >
86+ < CTableDataCell > { d . onDuty ? 'Yes' : 'No' } </ CTableDataCell >
87+ < CTableDataCell > { d . vehicle ?. number || 'Unassigned' } </ CTableDataCell >
88+ < CTableDataCell > { d . licenseNumber } </ CTableDataCell >
11889 </ CTableRow >
11990 ) ) }
12091 </ CTableBody >
0 commit comments