MCP Shipping Control Center

import React, { useState, useEffect } from 'react';
import {
  Box,
  Button,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TablePagination,
  Chip,
  IconButton,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  MenuItem,
  Select,
  FormControl,
  InputLabel,
  CircularProgress,
  Alert,
  Typography
} from '@mui/material';
import {
  Search,
  Add,
  Edit,
  Delete,
  Check,
  LocalShipping,
  Label
} from '@mui/icons-material';
import apiService from '../services/api';

interface Shipment {
  id: string;
  order_id: string;
  tracking_code: string;
  carrier: string;
  status: string;
  label_url: string;
}

interface ShipmentsProps {
  shipments: Shipment[];
  loading: boolean;
  error: string | null;
  page: number;
  rowsPerPage: number;
  total: number;
  searchTerm: string;
  statusFilter: string;
  onPageChange: (newPage: number) => void;
  onRowsPerPageChange: (newRowsPerPage: number) => void;
  onSearchTermChange: (term: string) => void;
  onStatusFilterChange: (status: string) => void;
}

const Shipments: React.FC<ShipmentsProps> = ({
  shipments,
  loading,
  error,
  page,
  rowsPerPage,
  total,
  searchTerm,
  statusFilter,
  onPageChange,
  onRowsPerPageChange,
  onSearchTermChange,
  onStatusFilterChange
}) => {
  const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null);
  const [openDialog, setOpenDialog] = useState(false);

  const handleChangePage = (event: unknown, newPage: number) => {
    onPageChange(newPage);
  };

  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    onRowsPerPageChange(parseInt(event.target.value, 10));
  };

  const handleViewLabel = (shipment: Shipment) => {
    if (shipment.label_url) {
      window.open(shipment.label_url, '_blank');
    }
  };

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'pending': return 'default';
      case 'purchased': return 'primary';
      case 'shipped': return 'secondary';
      case 'delivered': return 'success';
      case 'cancelled': return 'error';
      default: return 'default';
    }
  };

  if (loading) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" height="400px">
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return <Alert severity="error">{error}</Alert>;
  }

  return (
    <Box>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
        <Box display="flex" alignItems="center">
          <TextField
            variant="outlined"
            placeholder="Search shipments..."
            value={searchTerm}
            onChange={(e) => onSearchTermChange(e.target.value)}
            InputProps={{
              startAdornment: <Search />,
            }}
            size="small"
            style={{ marginRight: 16 }}
          />
          <FormControl size="small" style={{ minWidth: 120 }}>
            <InputLabel>Status</InputLabel>
            <Select
              value={statusFilter}
              onChange={(e) => onStatusFilterChange(e.target.value as string)}
              label="Status"
            >
              <MenuItem value="">All</MenuItem>
              <MenuItem value="pending">Pending</MenuItem>
              <MenuItem value="purchased">Purchased</MenuItem>
              <MenuItem value="shipped">Shipped</MenuItem>
              <MenuItem value="delivered">Delivered</MenuItem>
              <MenuItem value="cancelled">Cancelled</MenuItem>
            </Select>
          </FormControl>
        </Box>
        <Button
          variant="contained"
          color="primary"
          startIcon={<Add />}
        >
          New Shipment
        </Button>
      </Box>

      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Shipment ID</TableCell>
              <TableCell>Order ID</TableCell>
              <TableCell>Tracking Code</TableCell>
              <TableCell>Carrier</TableCell>
              <TableCell>Status</TableCell>
              <TableCell>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {shipments.map((shipment) => (
              <TableRow key={shipment.id}>
                <TableCell>{shipment.id}</TableCell>
                <TableCell>{shipment.order_id}</TableCell>
                <TableCell>{shipment.tracking_code || 'N/A'}</TableCell>
                <TableCell>{shipment.carrier}</TableCell>
                <TableCell>
                  <Chip 
                    label={shipment.status} 
                    color={getStatusColor(shipment.status)} 
                    size="small" 
                  />
                </TableCell>
                <TableCell>
                  <IconButton onClick={() => handleViewLabel(shipment)} disabled={!shipment.label_url}>
                    <Label />
                  </IconButton>
                  <IconButton>
                    <Edit />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        component="div"
        count={total}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />

      {/* Shipment Dialog */}
      <Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="md" fullWidth>
        <DialogTitle>
          {selectedShipment ? 'Edit Shipment' : 'Create New Shipment'}
        </DialogTitle>
        <DialogContent>
          <p>Shipment form would go here</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
          <Button variant="contained" color="primary" startIcon={<Check />}>
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default Shipments;