MCP Shipping Control Center

import React, { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';
import Shipments from '../components/Shipments';

// Mock data for shipments
const mockShipments = [
  {
    id: 'shp_1',
    order_id: 'ord_123',
    tracking_code: '9400111899221111111111',
    carrier: 'USPS',
    status: 'shipped',
    label_url: 'https://example.com/label1.pdf'
  },
  {
    id: 'shp_2',
    order_id: 'ord_456',
    tracking_code: '1Z999AA1234567890',
    carrier: 'UPS',
    status: 'delivered',
    label_url: 'https://example.com/label2.pdf'
  },
  {
    id: 'shp_3',
    order_id: 'ord_789',
    tracking_code: 'JD0123456789012345',
    carrier: 'FedEx',
    status: 'pending',
    label_url: ''
  }
];

const ShipmentsPage: React.FC = () => {
  const [shipments, setShipments] = useState(mockShipments);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [total, setTotal] = useState(mockShipments.length);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('');

  // In a real implementation, this would fetch from the API
  useEffect(() => {
    // Simulate API call
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 500);
  }, [page, rowsPerPage, searchTerm, statusFilter]);

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Shipments
      </Typography>
      <Shipments
        shipments={shipments}
        loading={loading}
        error={error}
        page={page}
        rowsPerPage={rowsPerPage}
        total={total}
        searchTerm={searchTerm}
        statusFilter={statusFilter}
        onPageChange={setPage}
        onRowsPerPageChange={setRowsPerPage}
        onSearchTermChange={setSearchTerm}
        onStatusFilterChange={setStatusFilter}
      />
    </Box>
  );
};

export default ShipmentsPage;