MCP Shipping Control Center

import React, { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';
import Orders from '../components/Orders';
import { Order } from '../types';
import apiService from '../services/api';

const OrdersPage: React.FC = () => {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [total, setTotal] = useState(0);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('');

  useEffect(() => {
    fetchOrders();
  }, [page, rowsPerPage, searchTerm, statusFilter]);

  const fetchOrders = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await apiService.getOrders(
        page + 1, 
        rowsPerPage, 
        searchTerm, 
        statusFilter
      );
      setOrders(result.orders);
      setTotal(result.pagination.total);
    } catch (err) {
      setError('Failed to fetch orders');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Orders
      </Typography>
      <Orders
        orders={orders}
        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 OrdersPage;