Initial commit - restaurant dashboard

2025-09-04 01:17:15 +03:00
parent 13891b47fd
commit 7b2f8840cb
136 changed files with 16637 additions and 6032 deletions
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
+import KitchPlusAppBar from '../AppBar';
+import Sidebar from '../SideHome';
+import AccountSettings from './contect/AccountSettings';
+import MealsByCateg from './contect/MealsByCateg';
+import AllMeals from './contect/AllMeals';
+import ProductDetail from './contect/ProductDetail';
+import authService from '../../../services/authService';
+import { useRestaurant } from '../../../contexts/RestaurantContext';
+
+const drawerWidth = 230;
+
+const Meal = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+  const { restaurantId } = useRestaurant();
+
+  const [showAllPopular, setShowAllPopular] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState(null);
+  const [categoryName, setCategoryName] = useState('');
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [meals, setMeals] = useState([]);
+  const [loadingMeals, setLoadingMeals] = useState(false);
+
+  // جلب الفئات عند التحميل
+  useEffect(() => {
+    const fetchCategories = async () => {
+      if (!restaurantId) return;
+      const result = await authService.getCategoriesByRestaurant(restaurantId);
+      if (result.success) setCategories(result.data);
+      else setCategories([]);
+    };
+    fetchCategories();
+  }, [restaurantId]);
+
+  // تحديث اسم الفئة عند تغيير selectedCategoryId أو categories
+  useEffect(() => {
+    if (selectedCategoryId && categories.length > 0) {
+      const selected = categories.find(c => c.id === selectedCategoryId);
+      setCategoryName(selected ? selected.name : '');
+    } else {
+      setCategoryName('');
+    }
+  }, [selectedCategoryId, categories]);
+
+  // جلب الوجبات عند اختيار الفئة
+  useEffect(() => {
+    const fetchMeals = async () => {
+      if (selectedCategoryId && restaurantId) {
+        setLoadingMeals(true);
+        try {
+          const result = await authService.getMealsByCategory(restaurantId, selectedCategoryId);
+          if (result.success) {
+            const selectedCategory = categories.find(c => c.id === selectedCategoryId);
+            const mealsWithImages = result.data.map(meal => ({
+              id: meal.id,
+              name: meal.name,
+              price: meal.price,
+              unit: meal.unit || '/pcs',
+              image: meal.photo || '/images/default-product.png',
+              category: selectedCategory ? selectedCategory.name : '', // اسم الفئة
+              category_id: meal.category_id,
+              restaurant_id: meal.restaurant_id,
+              description: meal.description || [],
+              additions: meal.additions || []
+            }));
+            setMeals(mealsWithImages);
+          } else setMeals([]);
+        } catch (err) {
+          console.error(err);
+          setMeals([]);
+        } finally {
+          setLoadingMeals(false);
+        }
+      } else setMeals([]);
+    };
+    fetchMeals();
+  }, [selectedCategoryId, restaurantId, categories]);
+
+  const handleDrawerToggle = () => setSidebarOpen(!sidebarOpen);
+  const toggleShowAllPopular = () => setShowAllPopular(prev => !prev);
+
+  return (
+    <Box sx={{ display: 'flex', height: '100vh', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
+      <Sidebar
+        open={sidebarOpen}
+        onClose={handleDrawerToggle}
+        isMobile={isMobile}
+        drawerWidth={drawerWidth}
+      />
+
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          width: '10%',
+          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}
+          sidebarOpen={sidebarOpen}
+          isMobile={isMobile}
+        />
+
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
+            pt: { xs: 2, sm: 3 },
+            overflowY: 'auto',
+            pl: { xs: 1, sm: 2 },
+            pr: { xs: 1, sm: 2 },
+            md: 10,
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': { display: 'none' },
+          }}
+        >
+          {selectedProduct ? (
+            <ProductDetail
+              product={selectedProduct}
+              onBack={() => setSelectedProduct(null)}
+            />
+          ) : (
+            <>
+              <AccountSettings
+                selectedCategory={selectedCategoryId}
+                setSelectedCategory={setSelectedCategoryId}
+                restaurantId={restaurantId}
+              />
+
+              {selectedCategoryId ? (
+                <Box sx={{ mt: 3, md: 10, }}>
+                
+                    <MealsByCateg
+                      categoryId={selectedCategoryId}
+                      restaurantId={restaurantId}
+                      categoryName={categoryName}
+                      onBack={() => setSelectedCategoryId(null)}
+                      onProductClick={(meal) => {
+                        const category = categories.find(c => c.id === meal.category_id);
+                        setSelectedProduct({
+                          ...meal,
+                          category: category ? category.name : '',
+                          category_id: meal.category_id,
+                          restaurant_id: restaurantId
+                        });
+                      }}
+                    />
+                  
+                </Box>
+              ) : !showAllPopular ? (
+                <Box
+                  sx={{
+                    mt: 3,
+                    display: 'flex',
+                    flexDirection: { xs: 'column', md: 'row' },
+                    alignItems: 'stretch',
+                    gap: 2,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      flexBasis: { xs: '100%', md: '100%' },
+                      display: 'flex',
+                      flexDirection: 'column',
+                      pb: { xs: 4, md: 4 },
+                      pr: { xs: 1, md: 0 },
+                      mb: 5,
+                    }}
+                  >
+                    <AllMeals
+                      restaurantId={restaurantId}
+                      categories={categories}
+                      showAll={showAllPopular}
+                      onToggleShowAll={toggleShowAllPopular}
+                      onProductClick={(meal) => {
+                        const category = categories.find(c => c.id === meal.category_id);
+                        setSelectedProduct({
+                          ...meal,
+                          category: category ? category.name : '',
+                          category_id: meal.category_id,
+                          restaurant_id: restaurantId
+                        });
+                      }}
+                    />
+                  </Box>
+                </Box>
+              ) : null}
+            </>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Meal;