The Category component is "import React, { useState, useEffect } from 'react';
import { Container, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import { getAllCategory, deleteCategory, updateCategory, addCategory } from '../services/productService';

const Category = () => {
  const [categories, setCategories] = useState([]);
  const [name, setName] = useState('');
  const [newCategoryName, setNewCategoryName] = useState('');

  useEffect(() => {
    fetchCategories();
  }, []);

  const fetchCategories = async () => {
    try {
      const data = await getAllCategory();
      console.log('AAA',data);
      setCategories(data);
    } catch (error) {
      console.error('Failed to fetch categories:', error);
    }
  };

  const handleUpdate = (categoryId) => {
    const updatedName = prompt('Enter new name for the category:', name);
    const updatedData = {
      category_Name: updatedName,
    };
    if (updatedName) {
      updateCategory(categoryId, updatedData);
      fetchCategories();  // Refresh the categories list after update
    }
  };

  const handleDelete = async (categoryId) => {
    try {
      await deleteCategory(categoryId);
      fetchCategories();  // Refresh the categories list after deletion
    } catch (error) {
      console.error(`Failed to delete category ${categoryId}:`, error);
    }
  };

  const handleAdd = async () => {
    if (newCategoryName.trim()) {
        const newData = {
          category_Name: newCategoryName,
        };
      try {
        await addCategory(newData);
        setNewCategoryName('');
        fetchCategories();  // Refresh the categories list after addition
      } catch (error) {
        console.error('Failed to add category:', error);
      }
    } else {
      alert('Category name cannot be empty!');
    }
  };

  return (
    <Container>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Name</TableCell>
              <TableCell>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {categories.map((category) => (
              <TableRow key={category.catrgort_id}>
                <TableCell>{category.catrgort_id}</TableCell>
                <TableCell>{category.category_Name}</TableCell>
                <TableCell>
                  <Button 
                    variant="contained" 
                    color="primary" 
                    onClick={() => handleUpdate(category.catrgort_id)}>
                    Update
                  </Button>
                  <Button 
                    variant="contained" 
                    color="secondary" 
                    onClick={() => handleDelete(category.catrgort_id)} 
                    style={{ marginLeft: '8px' }}>
                    Delete
                  </Button>
                </TableCell>
              </TableRow>
            ))}
            <TableRow>
              <TableCell colSpan={2}>
                <input 
                  type="text" 
                  value={newCategoryName} 
                  onChange={(e) => setNewCategoryName(e.target.value)} 
                  placeholder="New category name" 
                  style={{
                    width: '100%',
                    padding: '8px',
                    boxSizing: 'border-box'
                  }}
                />
              </TableCell>
              <TableCell>
                <Button 
                  variant="contained" 
                  color="primary" 
                  onClick={handleAdd}>
                  Add
                </Button>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
    </Container>
  );
};

export default Category;" the update and delete button are too big, please maken them much smaller