import React, { useState } 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,
AssignmentReturn
} from '@mui/icons-material';
import apiService from '../services/api';
interface ReturnRequest {
id: string;
order_id: string;
status: string;
reason: string;
created_at: string;
tracking_code?: string;
}
interface ReturnsProps {
returns: ReturnRequest[];
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 Returns: React.FC<ReturnsProps> = ({
returns,
loading,
error,
page,
rowsPerPage,
total,
searchTerm,
statusFilter,
onPageChange,
onRowsPerPageChange,
onSearchTermChange,
onStatusFilterChange
}) => {
const [selectedReturn, setSelectedReturn] = useState<ReturnRequest | 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 handleProcessReturn = (returnRequest: ReturnRequest) => {
setSelectedReturn(returnRequest);
setOpenDialog(true);
};
const getStatusColor = (status: string) => {
switch (status.toLowerCase()) {
case 'requested': return 'default';
case 'processing': return 'primary';
case 'shipped': return 'secondary';
case 'completed': 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 returns..."
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="requested">Requested</MenuItem>
<MenuItem value="processing">Processing</MenuItem>
<MenuItem value="shipped">Shipped</MenuItem>
<MenuItem value="completed">Completed</MenuItem>
<MenuItem value="cancelled">Cancelled</MenuItem>
</Select>
</FormControl>
</Box>
<Button
variant="contained"
color="primary"
startIcon={<Add />}
>
New Return
</Button>
</Box>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Return ID</TableCell>
<TableCell>Order ID</TableCell>
<TableCell>Reason</TableCell>
<TableCell>Date</TableCell>
<TableCell>Status</TableCell>
<TableCell>Tracking</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{returns.map((returnRequest) => (
<TableRow key={returnRequest.id}>
<TableCell>{returnRequest.id}</TableCell>
<TableCell>{returnRequest.order_id}</TableCell>
<TableCell>{returnRequest.reason}</TableCell>
<TableCell>{new Date(returnRequest.created_at).toLocaleDateString()}</TableCell>
<TableCell>
<Chip
label={returnRequest.status}
color={getStatusColor(returnRequest.status)}
size="small"
/>
</TableCell>
<TableCell>{returnRequest.tracking_code || 'N/A'}</TableCell>
<TableCell>
<IconButton onClick={() => handleProcessReturn(returnRequest)}>
<AssignmentReturn />
</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}
/>
{/* Return Dialog */}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="md" fullWidth>
<DialogTitle>
Process Return Request
</DialogTitle>
<DialogContent>
{selectedReturn && (
<Box>
<Typography variant="h6" gutterBottom>
Return ID: {selectedReturn.id}
</Typography>
<Typography variant="subtitle1" gutterBottom>
Order ID: {selectedReturn.order_id}
</Typography>
<Typography variant="subtitle1" gutterBottom>
Reason: {selectedReturn.reason}
</Typography>
<Typography variant="subtitle1" gutterBottom>
Status: {selectedReturn.status}
</Typography>
<TextField
fullWidth
label="Tracking Code"
margin="normal"
defaultValue={selectedReturn.tracking_code || ''}
/>
<TextField
fullWidth
label="Notes"
multiline
rows={3}
margin="normal"
/>
</Box>
)}
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenDialog(false)}>Cancel</Button>
<Button variant="contained" color="primary" startIcon={<Check />}>
Process Return
</Button>
</DialogActions>
</Dialog>
</Box>
);
};
export default Returns;
