Initial commit - restaurant dashboard

src/components/Home/Meal/contect/AddCategory.js

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Button, TextField, Typography } from '@mui/material';
+import { useRestaurant } from '../../../../contexts/RestaurantContext';
+
+const AddCategory = ({ onAdd, editingCategory }) => {
+  const { restaurantId } = useRestaurant();
+  const [productName, setProductName] = useState('');
+  const [description, setDescription] = useState('');
+  const [price, setPrice] = useState('');
+  const [discount, setDiscount] = useState('');
+  const [productImage, setProductImage] = useState(null);
+
+  useEffect(() => {
+    if (editingCategory) {
+      setProductName(editingCategory.name || '');
+      setDescription(editingCategory.description || '');
+      setPrice(editingCategory.price || '');
+      setDiscount(editingCategory.discount || '');
+      setProductImage(editingCategory.icon || null);
+    }
+  }, [editingCategory]);
+
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => setProductImage(reader.result);
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!productName) {
+      alert("Please enter category name");
+      return;
+    }
+
+    if (!restaurantId) {
+      alert("Restaurant ID not set");
+      return;
+    }
+
+    const payload = {
+      name: productName,
+      restaurant_id: restaurantId,
+      description,
+      price,
+      discount,
+      icon: productImage,
+    };
+
+    // فقط أرسل البيانات للمكون الأب
+    if (onAdd) onAdd(payload);
+  };
+
+  return (
+    <Box p={2} maxWidth={400} mx="auto">
+      <Typography variant="body2" color="black" sx={{ fontWeight: 600, fontSize: '24px' }}>
+        Category Name
+      </Typography>
+      <TextField
+        fullWidth
+        placeholder="Enter category name"
+        value={productName}
+        onChange={(e) => setProductName(e.target.value)}
+        margin="normal"
+        sx={{
+          '& input': { fontWeight: 500, fontSize: '15px' },
+          '& input::placeholder': { color: '#969BA7' },
+          '& .MuiOutlinedInput-root': {
+            borderRadius: '10px',
+            transition: '0.3s',
+            '&.Mui-focused fieldset': {
+              borderColor: '#FF914D',
+              boxShadow: '0 0 0 2px rgba(255,145,77,0.2)',
+            },
+          },
+        }}
+      />
+
+      <Button
+        variant="contained"
+        fullWidth
+        sx={{
+          mt: 2,
+          backgroundColor: '#FF914D',
+          '&:hover': { backgroundColor: '#e57f3c' },
+          borderRadius: 2,
+          color: '#fff',
+          textTransform: 'none',
+          fontWeight: 600,
+          fontSize: '16px',
+        }}
+        onClick={handleSubmit}
+      >
+        {editingCategory ? 'Update Category' : 'Add Category'}
+      </Button>
+    </Box>
+  );
+};
+
+export default AddCategory;