import React, { useState, useEffect } from 'react';
import {
Box,
Typography,
TextField,
Button,
styled,
useTheme,
MenuItem,
Radio,
RadioGroup,
FormControlLabel,
Radio as MuiRadio
} from '@mui/material';
import axios from 'axios';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TableView from './TableView';
const ProductEntry = ({ onAdd, onShowTable }) => {
const theme = useTheme();
const [profileImage, setProfileImage] = useState(null);
const [fullName, setFullName] = useState('');
const [username, setUsername] = useState('');
const [bio, setBio] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [selectedBranch, setSelectedBranch] = useState('default');
const [branches, setBranches] = useState([
{ label: 'Damascus Branch', value: 'damascus' },
{ label: 'Aleppo Branch', value: 'aleppo' },
{ label: 'Homs Branch', value: 'homs' }
]);
const [expirationDate, setExpirationDate] = useState(null);
const [consumptionStatus, setConsumptionStatus] = useState(false);
const [showTable, setShowTable] = useState(false);
const [products, setProducts] = useState([]);
// حالات جديدة للحفظ
const [stocksLevel, setStocksLevel] = useState('');
const [productCategory, setProductCategory] = useState('default');
const [supplierName, setSupplierName] = useState('');
const [supplierNumber, setSupplierNumber] = useState('');
const [productPrice, setProductPrice] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [productCost, setProductCost] = useState('');
// قائمة فئات المنتجات
const productCategories = [
{ label: 'Food', value: 'food' },
{ label: 'Beverages', value: 'beverages' },
{ label: 'Electronics', value: 'electronics' },
{ label: 'Clothing', value: 'clothing' },
];
const handleShowTable = () => {
setShowTable(true);
};
useEffect(() => {
axios.get('https://mocki.io/v1/0b9d4121-d7e7-42f4-b1d5-b14f82e35b69')
.then((response) => {
setBranches(response.data);
})
.catch((error) => {
console.error('Error fetching branches:', error);
});
const savedData = localStorage.getItem('productEntryData');
if (savedData) {
const data = JSON.parse(savedData);
setFullName(data.fullName || '');
setUsername(data.username || '');
setEmail(data.email || '');
setSelectedBranch(data.selectedBranch || 'default');
setExpirationDate(data.expirationDate ? new Date(data.expirationDate) : null);
setConsumptionStatus(data.consumptionStatus || false);
setStocksLevel(data.stocksLevel || '');
setProductCategory(data.productCategory || 'default');
setSupplierName(data.supplierName || '');
setSupplierNumber(data.supplierNumber || '');
setProductPrice(data.productPrice || '');
setPhoneNumber(data.phoneNumber || '');
}
}, []);
useEffect(() => {
const dataToSave = {
fullName,
username,
email,
selectedBranch,
expirationDate: expirationDate ? expirationDate.toISOString() : null,
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
};
localStorage.setItem('productEntryData', JSON.stringify(dataToSave));
}, [
fullName,
username,
email,
selectedBranch,
expirationDate,
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
]);
const handleImageUpload = (event) => {
if (event.target.files && event.target.files[0]) {
setProfileImage(URL.createObjectURL(event.target.files[0]));
}
};
const Input = styled('input')({
display: 'none',
});
const customInputStyle = {
'& input': { fontWeight: 500, fontSize: '15px' },
'& input::placeholder': { color: '#969BA7' },
'& .MuiOutlinedInput-root': {
borderRadius: '10px',
transition: '0.3s',
'&.Mui-focused fieldset': {
borderColor: theme.palette.primary.main,
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
},
},
'& .MuiOutlinedInput-root.Mui-focused': {
borderColor: '#3f51b5',
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
},
};
const renderField = (label, value, onChange, type = 'text', placeholder = '') => (
{label}
);
const renderSelectField = (label, value, onChange, options = []) => (
{label}
{options.map((option) => (
))}
);
const handleSave = () => {
// احصل على أكبر رقم منتج موجود في القائمة
const maxProductNumber = products.length > 0
? Math.max(...products.map(p => Number(p.username) || 0))
: 0;
const newProductNumber = maxProductNumber + 1;
const newProduct = {
fullName,
username: newProductNumber.toString(), // هنا رقم المنتج يتزاد تلقائياً
email,
selectedBranch,
expirationDate: expirationDate ? expirationDate.toISOString().split('T')[0] : '',
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
productCost,
};
// أضف المنتج الجديد لقائمة المنتجات
setProducts(prev => [...prev, newProduct]);
// استدعي دالة onAdd إن كانت موجودة
if (onAdd) {
onAdd(newProduct);
}
// إعادة تعيين الحقول (يمكنك إزالة إعادة تعيين username لأنه أصبح تلقائي)
setFullName('');
setEmail('');
setSelectedBranch('default');
setExpirationDate(null);
setConsumptionStatus(false);
setStocksLevel('');
setProductCategory('default');
setSupplierName('');
setSupplierNumber('');
setProductPrice('');
setPhoneNumber('');
setProductCost('');
};
return (
{/* الحقول النصية */}
{/* السطر الأول: Product Name + Barcode Maker */}
{renderField('Product Name', fullName, (e) => setFullName(e.target.value), 'text', 'Pizza')}
{renderField('Barcode Maker', email, (e) => setEmail(e.target.value), 'text', '12344')}
{/* السطر الثاني: Branch Select + Product Number */}
{renderField('Product Number', username, (e) => setUsername(e.target.value), 'text', '#123')}
{renderSelectField('Branch Select', selectedBranch, (e) => setSelectedBranch(e.target.value), branches)}
{/* السطر الثالث: Expiration Date + Consumption Status */}
Expiration Date
setExpirationDate(newValue)}
renderInput={(params) => (
)}
/>
Consumption Status
setConsumptionStatus(e.target.value === 'yes')}
>
}
label="Yes"
/>
}
label="No"
/>
{/* السطر الرابع: Stocks Level + Product Category */}
{renderField('Stocks Level', stocksLevel, (e) => setStocksLevel(e.target.value), 'number', 'Enter level')}
{renderSelectField('Product Category', productCategory, (e) => setProductCategory(e.target.value), productCategories)}
{/* السطر الخامس: Supplier Name + Supplier Number */}
{renderField('Supplier Name', supplierName, (e) => setSupplierName(e.target.value), 'text', 'Supplier XYZ')}
{renderField('Supplier Number', supplierNumber, (e) => setSupplierNumber(e.target.value), 'text', '0900-78601')}
{/* السطر السادس: Product Price + Phone Number */}
{renderField('Product Price', productPrice, (e) => setProductPrice(e.target.value), 'number', '$200')}
{renderField('Product Cost', productCost, (e) => setProductCost(e.target.value), 'number', '$230')}
{/* زر الحفظ */}
);
};
export default ProductEntry;