initial commit

2026-05-06 15:08:57 +03:00
commit 1ccca905f3
215 changed files with 61375 additions and 0 deletions
@@ -0,0 +1,230 @@
+import React, { useState, useEffect } from "react";
+import { Box, useTheme, useMediaQuery } from "@mui/material";
+import KitchPlusAppBar from "../AppBar";
+import Sidebar from "../SideHome";
+
+
+import AccountSettings from "./contect/AccountSettings";
+import AllProducts from "./contect/AllProducts";
+import PopularProductSection from "./contect/PopularProductSection";
+import ProductDetail from "./contect/ProductDetail";
+
+import api from "../../../services/authService";
+
+const IMAGE_URL = "http://127.0.0.1:8000/storage/";
+const drawerWidth = 230;
+
+const Supplier = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  const [categories, setCategories] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [selectedCategoryName, setSelectedCategoryName] = useState(null);
+
+  const [selectedProduct, setSelectedProduct] = useState(null);
+
+  const [showAllPopular, setShowAllPopular] = useState(false);
+  const [showAllTopItems, setShowAllTopItems] = useState(false);
+
+  useEffect(() => {
+    setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
+  }, [theme.breakpoints.values.md]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [theme.breakpoints.values.md]);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const res = await api.getAllCategory();
+        if (res.success) {
+          const formatted = res.data.map((category) => ({
+            id: category.id,
+            name: category.name,
+            icon: category.image
+              ? IMAGE_URL + category.image
+              : "/images/default-product.png",
+          }));
+          setCategories(formatted);
+        }
+      } catch (err) {
+        console.error("❌ Error fetching categories:", err);
+      }
+    };
+
+    fetchCategories();
+  }, []);
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      if (!selectedCategory) return;
+
+      try {
+        const res = await api.getProductsByCategory(selectedCategory, 1);
+        if (res.success) {
+          const formatted = res.data.map((product) => ({
+            id: product.id,
+            name: product.name,
+            category: product.supplier_category_id,
+            price: product.price,
+            unit: "Kg",
+            image: product.image
+              ? IMAGE_URL + product.image
+              : "/images/default-product.png",
+          }));
+          setProducts(formatted);
+
+          const categoryName = categories.find(
+            (cat) => cat.id === selectedCategory
+          )?.name;
+          setSelectedCategoryName(categoryName || "");
+        }
+      } catch (err) {
+        console.error("Error fetching products:", err);
+      }
+    };
+
+    fetchProducts();
+  }, [selectedCategory, categories]);
+
+  const handleDrawerToggle = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
+
+  const toggleShowAllPopular = () => {
+    setShowAllPopular((prev) => !prev);
+  };
+
+  const toggleShowAllTopItems = () => {
+    setShowAllTopItems((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 },
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": { display: "none" },
+          }}
+        >
+          {selectedProduct ? (
+            <ProductDetail
+              product={selectedProduct}
+              onBack={() => setSelectedProduct(null)}
+            />
+          ) : (
+            <>
+              <AccountSettings
+                selectedCategory={selectedCategory}
+                setSelectedCategory={setSelectedCategory}
+                categories={categories}
+              />
+
+              {selectedCategory ? (
+                <Box sx={{ mt: 3 }}>
+                  <AllProducts
+                    products={products}
+                    showAll={true}
+                    onToggleShowAll={() => setSelectedCategory(null)}
+                    onProductClick={setSelectedProduct}
+                    categoryName={selectedCategoryName}
+                  />
+                </Box>
+              ) : !showAllPopular && !showAllTopItems ? (
+                <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: 10,
+                    }}
+                  >
+                    <PopularProductSection
+                      products={products}
+                      showAll={showAllPopular}
+                      onToggleShowAll={toggleShowAllPopular}
+                      onProductClick={setSelectedProduct}
+                    />
+                  </Box>
+                </Box>
+              ) : showAllPopular ? (
+                <Box sx={{ mt: 3, width: "100%" }}>
+                  <PopularProductSection
+                    products={products}
+                    showAll={showAllPopular}
+                    onToggleShowAll={toggleShowAllPopular}
+                    onProductClick={setSelectedProduct}
+                  />
+                </Box>
+              ) : showAllTopItems ? (
+                <Box sx={{ mt: 3, width: "100%" }}>
+                </Box>
+              ) : null}
+            </>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Supplier;