NoQuantityProduct

m21102001 · Aug 5, 2023 · 9cedac7 · 9cedac7
1 parent 888ac60
commit 9cedac7
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 12 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,6 +12,7 @@ module.exports = {
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
+ "react/prop-types": "off",
  'react-refresh/only-export-components': [
  'warn',
  { allowConstantExport: true },

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="rtl">
 
 <head>
  <meta charset="UTF-8" />

diff --git a/src/App.jsx b/src/App.jsx
@@ -7,12 +7,17 @@ import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 import { db } from "./firebase";
 import Invoices from "./Pages/invoices/Invoices";
 import Invoice from "./Pages/Invoice";
-import { AiFillHome, AiOutlineSearch, AiFillHeart } from "react-icons/ai";
+
+import { AiFillHome} from "react-icons/ai";
+import { MdProductionQuantityLimits} from "react-icons/md";
 import { CgProfile } from "react-icons/cg";
-import { BsFillMapFill } from "react-icons/bs";
+import { FcSalesPerformance } from "react-icons/fc";
+import { FaFileInvoiceDollar } from "react-icons/fa";
 import { GiHamburgerMenu } from "react-icons/gi";
+import {FaProductHunt} from "react-icons/fa"
 import Home from "./Pages/Home/Home";
 import Profile from "./Pages/profile/Profile";
+import NoQuantityProduct from "./Pages/noQuantityProduct/NoQuantityProduct";
 function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
 
@@ -28,13 +33,24 @@ function App() {
  setProducts(products);
  });
  };
-
+ //get no quantity Products
+ // const getNoQuantityProducts=async () => {
+ // await getDocs(collection(db,"noQuantityProducts")).then ((noQuantityProducts)=>{
+ // const noQuantity =noQuantityProducts.docs.map((doc)=>({
+ // ...doc.data(),
+ // id:doc.id,
+ // }))
+ // setNoQuantityProducts(noQuantity);
+ // })
+ // }
  useEffect(() => {
+ // console.log(`noQuantityProducts : ${noQuantityProducts}`);
  console.log(`noQuantityProducts : ${noQuantityProducts}`);
  }, [noQuantityProducts]);
 
  useEffect(() => {
  getProducts();
+ // getNoQuantityProducts()
  }, []);
 
  return (
@@ -49,17 +65,21 @@ function App() {
  <AiFillHome /> <p>الرئيسيه</p>
  </Link>
  <Link to="/products ">
- <AiFillHeart /> <p>المنتجات</p>
+ <FaProductHunt/> <p>المنتجات</p>
  </Link>
  <Link to="/invoices">
- <BsFillMapFill /> <p>فاتوره</p>
+ < FcSalesPerformance/> <p>فاتوره</p>
  </Link>
  <Link to="/buy-products ">
- <AiOutlineSearch /> <p>بيع المنتجات</p>
+ <FaFileInvoiceDollar /> <p>بيع المنتجات</p>
+ </Link>
+ <Link to="/noQuantity-product">
+ <MdProductionQuantityLimits />
+ <p>منتجات فارغه</p>
  </Link>
  <Link to="/profile">
  <CgProfile />
- <p>Profile</p>
+ <p>ملف الشخصى</p>
  </Link>
  </div>
  <div
@@ -72,7 +92,7 @@ function App() {
  <Routes>
  <Route
  path="/"
- element={<Home/>}
+ element={<Home />}
  />
  <Route path="/invoices" element={<Invoices />} />
  <Route path="/profile" element={<Profile />} />
@@ -96,6 +116,16 @@ function App() {
  />
  }
  />
+ <Route
+ path="/noQuantity-product"
+ element={
+ <NoQuantityProduct
+ // getNoQuantityProducts={getNoQuantityProducts}
+ // noQuantityProducts={noQuantityProducts}
+ // setNoQuantityProducts={setNoQuantityProducts}
+ />
+ }
+ />
  </Routes>
  </div>
 

diff --git a/src/Pages/noQuantityProduct/NoQuantityProduct.jsx b/src/Pages/noQuantityProduct/NoQuantityProduct.jsx
@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "../../firebase";
+
+const NoQuantityProduct = () => {
+
+ const [noQuantityProducts, setNoQuantityProducts] = useState([]);
+
+ const getNoQuantityProducts = async () => {
+
+ await getDocs(collection(db, "noQuantityProducts"))
+ .then((querySnapshot) => {
+ const newData = querySnapshot.docs
+ .map((doc) => ({ ...doc.data(), id: doc.id }));
+ setNoQuantityProducts(newData);
+ console.log(noQuantityProducts, newData);
+ })
+
+ }
+
+ useEffect(() => {
+ getNoQuantityProducts();
+ }, [])
+
+ // const [products, setProducts] = useState([]);
+ // const getProducts = async () => {
+ // await getDocs(collection(db, "noQuantityProducts")).then((product) => {
+ // const products = product.docs.map((doc) => ({
+ // ...doc.data(),
+ // id: doc.id,
+ // }));
+ // setProducts(products);
+ // });
+ // };
+
+ // useEffect(()=>{
+ // console.log(products);
+ // getProducts()
+ // },[])
+ return (
+
+
+ <>
+ <div className="relative overflow-x-auto">
+ <table className="w-full text-md text-right bg-black text-gray-500 text-gray-900">
+ <thead className="text-md text-gray-700 uppercase bg-slate-900 text-gray-50">
+ <tr>
+ <th scope="col" className="px-6 py-3">اسم المنتج</th>
+ <th scope="col" className="px-6 py-3">السعر</th>
+ <th scope="col" className="px-6 py-3">الكميه المتاحه</th>
+ </tr>
+ </thead>
+ {
+ noQuantityProducts?.map((item) => (
+ <>
+ <tbody key={item.proudctId}>
+ <tr key={item.proudctId} className="bg-white border-b bg-slate-50 border-black-700">
+ <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-white">{item.name}</th>
+ <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-white">{item.price}</td>
+ <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-white">{item.quantity}</td>
+ </tr>
+ </tbody>
+ </>
+ ))
+ }
+
+ </table>
+ </div>
+ </>
+
+
+ )
+}
+
+export default NoQuantityProduct
diff --git a/src/components/DataTable/DataTable.jsx b/src/components/DataTable/DataTable.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "./dataTable.scss";
 import Typography from "@mui/material/Typography";
 import TablePagination from "./TablePagination";
@@ -31,10 +31,13 @@ export default function DataTable({
  const [startIndex, setStartIndex] = useState(1);
  const [firstOrlast, setFirstOrLast] = useState("first");
  const [searchWord, setSearchWord] = useState("");
+
+ // console.log(products.id);
 
  const visibleRows = products
- ?.filter((product) =>
+ ?.filter((product) =>{
  product.name.toLowerCase().includes(searchWord.toLowerCase())
+ }
  )
  ?.sort(function (a, b) {
  if (firstOrlast === "first") {

diff --git a/src/components/DataTable/TablePagination.jsx b/src/components/DataTable/TablePagination.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 
 const TablePagination = ({
  rowsPerPage,