import React, { useState } from 'react';
import {
Box,
Button,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
CircularProgress,
Alert,
Typography,
Accordion,
AccordionSummary,
AccordionDetails,
Divider
} from '@mui/material';
import {
Search,
ExpandMore,
LocationOn,
CheckCircle,
Pending,
Error
} from '@mui/icons-material';
import { TrackingInfo } from '../types';
import apiService from '../services/api';
interface TrackingProps {
trackingInfo: TrackingInfo | null;
loading: boolean;
error: string | null;
onTrack: (trackingCode: string) => void;
}
const Tracking: React.FC<TrackingProps> = ({ trackingInfo, loading, error, onTrack }) => {
const [trackingCode, setTrackingCode] = useState('');
const handleTrack = () => {
if (trackingCode.trim()) {
onTrack(trackingCode.trim());
}
};
const getStatusIcon = (status: string) => {
switch (status.toLowerCase()) {
case 'delivered':
return <CheckCircle color="success" />;
case 'in_transit':
return <Pending color="primary" />;
default:
return <Pending color="disabled" />;
}
};
const getStatusColor = (status: string) => {
switch (status.toLowerCase()) {
case 'delivered':
return 'success';
case 'in_transit':
return 'primary';
case 'failure':
return 'error';
default:
return 'default';
}
};
return (
<Box>
<Box display="flex" alignItems="center" mb={3}>
<TextField
variant="outlined"
placeholder="Enter tracking code"
value={trackingCode}
onChange={(e) => setTrackingCode(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleTrack()}
style={{ flexGrow: 1, marginRight: 16 }}
/>
<Button
variant="contained"
color="primary"
onClick={handleTrack}
disabled={loading || !trackingCode.trim()}
startIcon={<Search />}
>
Track
</Button>
</Box>
{loading && (
<Box display="flex" justifyContent="center" my={4}>
<CircularProgress />
</Box>
)}
{error && <Alert severity="error">{error}</Alert>}
{trackingInfo && (
<Paper elevation={3} sx={{ p: 3 }}>
<Typography variant="h6" gutterBottom>
Tracking Information
</Typography>
<Box sx={{ mb: 3 }}>
<Typography variant="subtitle1">
<strong>Tracking Code:</strong> {trackingInfo.tracking_code}
</Typography>
<Typography variant="subtitle1">
<strong>Carrier:</strong> {trackingInfo.carrier}
</Typography>
<Typography variant="subtitle1">
<strong>Status:</strong>
<Chip
label={trackingInfo.status}
color={getStatusColor(trackingInfo.status)}
size="small"
sx={{ ml: 1 }}
/>
</Typography>
{trackingInfo.signed_by && (
<Typography variant="subtitle1">
<strong>Signed By:</strong> {trackingInfo.signed_by}
</Typography>
)}
{trackingInfo.est_delivery_date && (
<Typography variant="subtitle1">
<strong>Estimated Delivery:</strong> {new Date(trackingInfo.est_delivery_date).toLocaleDateString()}
</Typography>
)}
</Box>
<Divider sx={{ my: 2 }} />
<Typography variant="h6" gutterBottom>
Tracking History
</Typography>
{trackingInfo.tracking_details && trackingInfo.tracking_details.length > 0 ? (
<Box>
{trackingInfo.tracking_details.map((event, index) => (
<Accordion key={index} defaultExpanded={index === trackingInfo.tracking_details.length - 1}>
<AccordionSummary expandIcon={<ExpandMore />}>
<Box display="flex" alignItems="center">
{getStatusIcon(event.status || '')}
<Typography sx={{ ml: 1 }}>
{event.description || 'Event'}
</Typography>
<Typography sx={{ ml: 'auto', color: 'text.secondary' }}>
{event.datetime ? new Date(event.datetime).toLocaleString() : 'N/A'}
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
<Typography>
<strong>Location:</strong> {event.location || 'N/A'}
</Typography>
{event.status && (
<Typography>
<strong>Status:</strong> {event.status}
</Typography>
)}
</AccordionDetails>
</Accordion>
))}
</Box>
) : (
<Typography>No tracking history available</Typography>
)}
</Paper>
)}
{!trackingInfo && !loading && !error && (
<Box textAlign="center" py={8}>
<LocationOn sx={{ fontSize: 60, color: 'text.secondary', mb: 2 }} />
<Typography variant="h6" color="text.secondary">
Enter a tracking code to view shipment details
</Typography>
</Box>
)}
</Box>
);
};
export default Tracking;
