The ProductList.js is "import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts, deleteProductById } from '../features/products/productSlice'; // Adjust the path as needed
import { Box, Card, CardContent, CardMedia, Grid, Typography, Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
import { useState } from 'react';

const backendURL = 'http://localhost:8000';

const ProductList = () => {
  const dispatch = useDispatch();
  const { products, loading, error } = useSelector((state) => state.products);
  
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [productToDelete, setProductToDelete] = useState(null);
    
  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  const handleDeleteClick = (productId) => {
    setProductToDelete(productId);
    setDeleteDialogOpen(true);
  };

  const handleDeleteConfirm = () => {
    if (productToDelete !== null) {
      dispatch(deleteProductById(productToDelete));
      setDeleteDialogOpen(false);
    }
  };

  const handleDeleteCancel = () => {
    setDeleteDialogOpen(false);
    setProductToDelete(null);
  };

  if (loading) {
    return <div>Loading…</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <Box sx={{ flexGrow: 1, padding: 2 }}>
      <Grid container spacing={3}>
        {products.map((product) => (
          <Grid item xs={12} sm={6} md={4} lg={3} key={product.product_Id}>
            <Card>
              <CardMedia
                component="img"
                height="200"
                image={`${backendURL}${product.imageGallery?.image1}` || ""}
                alt={product.product_Name}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {product.product_Name}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {product.product_Description}
                </Typography>
                <Typography variant="h6" color="text.primary" sx={{ marginTop: 2 }}>
                  ${product.product_Price}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Stock: {product.product_Stock}
                </Typography>
                <Typography variant="body2" color={product.product_isSale === "Yes" ? "green" : "red"}>
                  {product.product_isSale === "Yes" ? "On Sale" : "Not on Sale"}
                </Typography>
                <Button variant="outlined" color="primary" sx={{ marginTop: 2 }} onClick={() => handleEditClick(product.product_Id)}>
                  Edit
                </Button>
                <Button variant="outlined" color="secondary" sx={{ marginTop: 2, marginLeft: 1 }} onClick={() => handleDeleteClick(product.product_Id)}>
                  Delete
                </Button>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
      <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Are you sure you want to delete this product?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDeleteCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDeleteConfirm} color="secondary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default ProductList;" the productSlice is "import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import productService from '../../services/productService'; 

// Async thunk to fetch products
export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
  const data = await productService();
  return data;
});

// Initial state
const initialState = {
  products: [],
  loading: false,
  error: null,
};

// Create the slice
const productSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.loading = false;
        state.products = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default productSlice.reducer;
" the handleEditClick is not defined in the ProductList and productSlice, please add the logic to them