Work on Create your restaurant and Inventory

src/components/Home/Inventory/Inventory.js

@@ -1,105 +1,142 @@
 import React, { useState, useEffect } from 'react';
-import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
+import { Box, useTheme, useMediaQuery } from '@mui/material';
 import KitchPlusAppBar from '../AppBar';
 import Sidebar from '../SideHome';
+import ProductEntry from './ProductEntry';
+import TableView from './TableView';
 
 const drawerWidth = 230;
 
+const initialProducts = [
+  {
+    product: 'Apple Watch',
+    sales: 150,
+    amount: 45000,
+    price: 299,
+    status: 'Published',
+    expiration: '30 Days Left',
+  },
+  {
+    product: 'Samsung Galaxy',
+    sales: 90,
+    amount: 36000,
+    price: 400,
+    status: 'Low Stock',
+    expiration: '12 Days Left',
+  },
+  {
+    product: 'Sony Headphones',
+    sales: 60,
+    amount: 18000,
+    price: 299,
+    status: 'Draft',
+    expiration: '5 Days Left',
+  },
+];
+
 const Inventory = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
 
-  // محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي)
-  useEffect(() => {
-    // هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
-    // مثلاً استدعاء API أو التحقق من state
-    const checkProducts = async () => {
-      // محاكاة لاستدعاء API
-      const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
-      setHasProducts(productsExist);
+  const [products, setProducts] = useState(initialProducts);
+  const [showProductEntry, setShowProductEntry] = useState(true);
+
+  const addProduct = (newProduct) => {
+    const formattedProduct = {
+      product: newProduct.fullName || 'Unnamed Product',
+      sales: newProduct.stocksLevel ? Number(newProduct.stocksLevel) : 0,
+      amount: newProduct.productPrice
+        ? Number(newProduct.productPrice) * (newProduct.stocksLevel || 1)
+        : 0,
+      price: newProduct.productPrice ? Number(newProduct.productPrice) : 0,
+      status: newProduct.consumptionStatus ? 'Published' : 'Draft',
+      expiration: newProduct.expirationDate
+        ? `${Math.ceil(
+            (new Date(newProduct.expirationDate) - new Date()) /
+              (1000 * 60 * 60 * 24)
+          )} Days Left`
+        : 'N/A',
     };
 
-    checkProducts();
-  }, []);
+    setProducts((prev) => [...prev, formattedProduct]);
 
-  // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
-  const checkIfProductsExist = async () => {
-    // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
-    //  return true;
-    return false; // غير هذه القيمة حسب منطقك
+    setShowProductEntry(false);
   };
 
-  useEffect(() => {
-    if (window.innerWidth >= theme.breakpoints.values.md) {
-      setSidebarOpen(true);
-    } else {
-      setSidebarOpen(false);
-    }
-  }, [theme.breakpoints.values.md]);
+  const handleAddNewProduct = () => {
+    setShowProductEntry(true);
+  };
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= theme.breakpoints.values.md) {
-        setSidebarOpen(true);
-      } else {
-        setSidebarOpen(false);
-      }
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, [theme.breakpoints.values.md]);
-
-  const handleDrawerToggle = () => {
-    setSidebarOpen(!sidebarOpen);
+  const handleShowTable = () => {
+    setShowProductEntry(false);
   };
 
   return (
-    <Box sx={{
-      display: 'flex',
-      height: '100vh',
-      backgroundColor: '#F6F6F6',
-      overflow: 'hidden',
-    }}>
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100vh',
+        backgroundColor: '#F6F6F6',
+        overflow: 'hidden',
+      }}
+    >
       <Sidebar
         open={sidebarOpen}
-        onClose={handleDrawerToggle}
+        onClose={() => setSidebarOpen(!sidebarOpen)}
         isMobile={isMobile}
         drawerWidth={drawerWidth}
       />
 
-      <Box sx={{
-        flexGrow: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        width: {
-          xs: '100%',
-          sm: '100%',
-          md: '100%'
-        },
-        marginLeft: {
-          xs: 0,
-          sm: sidebarOpen ? `${drawerWidth}px` : 0,
-          md: 0
-        },
-        transition: theme.transitions.create(['width'], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-      }}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          marginLeft: {
+            xs: 0,
+            sm: sidebarOpen ? `${drawerWidth}px` : 0,
+            md: 0,
+          },
+          transition: theme.transitions.create(['width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}
+      >
         <KitchPlusAppBar
-          onDrawerToggle={handleDrawerToggle}
+          onDrawerToggle={() => setSidebarOpen(!sidebarOpen)}
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>Inventory</Typography>
+
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
+            pt: { xs: 2, sm: 3 },
+            overflowY: 'auto',
+            pl: { xs: 2, sm: 3 },
+            pb: { xs: 2, sm: 4 },
+            pr: { xs: 2, sm: 3 },
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': { display: 'none' },
+            transition: theme.transitions.create(['margin'], {
+              easing: theme.transitions.easing.sharp,
+              duration: theme.transitions.duration.leavingScreen,
+            }),
+          }}
+        >
+          {showProductEntry ? (
+            <ProductEntry onAdd={addProduct} onShowTable={handleShowTable} />
+          ) : (
+            <TableView data={products} onAddNewProduct={handleAddNewProduct} />
+          )}
+        </Box>
       </Box>
     </Box>
   );
 };
 
-export default Inventory;
+export default Inventory;