add bought price in form and make update

m21102001 · Aug 17, 2023 · e85032b · e85032b
1 parent ccd0016
commit e85032b
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 68 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -35,11 +35,13 @@ function App() {
  setProducts(products);
  });
  };
- const currentUser = useContext(AuthContext);
- console.log(currentUser);
- const RequireAuth = ({ children }) => {
- return currentUser ? children : <Navigate to="/login" />;
- };
+ // const currentUser = useContext(AuthContext);
+ // const currentUser = useContext();
+ // console.log(currentUser);
+ // const RequireAuth = ({ children }) => {
+ // return <>{children}</>;
+ // return currentUser ? children : <Navigate to="/login" />;
+ // };
 
  useEffect(() => {}, []);
  //get no quantity Products
@@ -99,86 +101,73 @@ function App() {
  </div>
  </div>
  <Routes>
+
  <Route
  path="/"
  element={
- <Home setSearchDate={setSearchDate} searchDate={searchDate} />
- }
- />
- <Route
- path="/invoices"
- element={
- <Invoices setSearchDate={setSearchDate} searchDate={searchDate} />
- }
- />
- <Route path="/profile" element={<Profile />} />
- <Route path="/invoices/:id" element={<Invoice />} />
- <Route
- path="/"
- element={
- <RequireAuth>
- <Home />
- </RequireAuth>
+ // <RequireAuth>
+ <Home setSearchDate={setSearchDate} searchDate={searchDate} />
+ // </RequireAuth>
  }
  />
  <Route
  path="/invoices"
  element={
- <RequireAuth>
- <Invoices />
- </RequireAuth>
+ // <RequireAuth>
+ <Invoices setSearchDate={setSearchDate} searchDate={searchDate} />
+ // </RequireAuth>
  }
  />
  <Route
  path="/profile"
  element={
- <RequireAuth>
+ // <RequireAuth>
  <Profile />
- </RequireAuth>
+ // </RequireAuth>
  }
  />
  <Route
  path="/invoices/:id"
  element={
- <RequireAuth>
+ // <RequireAuth>
  <Invoice />
- </RequireAuth>
+ // </RequireAuth>
  }
  />
  <Route
  path="/products"
  element={
- <RequireAuth>
+ // <RequireAuth>
  <HomePage
  getProducts={getProducts}
  products={products}
  setProducts={setProducts}
  />
- </RequireAuth>
+ // </RequireAuth>
  }
  />
  <Route
  path="/buy-products"
  element={
- <RequireAuth>
+ // <RequireAuth>
  <BuyPage
  setProducts={setProducts}
  setNoQuantityProducts={setNoQuantityProducts}
  products={products}
  getProducts={getProducts}
  />
- </RequireAuth>
+ // </RequireAuth>
  }
  />
  <Route
  path="/noQuantity-product"
  element={
- <RequireAuth>
+ // <RequireAuth>
  <NoQuantityProduct
  noQuantityProducts={noQuantityProducts}
  setNoQuantityProducts={setNoQuantityProducts}
  />
- </RequireAuth>
+ // </RequireAuth>
  }
  />
  <Route path="/login" element={<Login />} />

diff --git a/src/App.scss b/src/App.scss
@@ -21,10 +21,10 @@ input {
 }
 
 .container {
- max-width: 1260px;
+ // max-width: ;
  margin-inline: auto;
  padding: 20px 60px;
- // width: 95% !important;
+ width: 100% !important;
 }
 
 @mixin buttonSytle($state) {

diff --git a/src/Pages/HomePage.jsx b/src/Pages/HomePage.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Form from "../components/Form/Form";
 import {
  collection,
@@ -24,23 +24,29 @@ const HomePage = ({ getProducts, products, setProducts }) => {
  .number()
  .required("يجب ادخال هذا الحقل ويجب ان يكون رقما")
  .typeError("يجب ادخال هذا الحقل ويجب ان يكون رقما"),
+ bought: yup
+ .number()
+ .required('يجب ادخال هذا الحقل')
+ .typeError("يجب ادخال هذا الحقل ويجب ان يكون رقما"),
  quantity: yup
  .number()
  .required("يجب ادخال هذا الحقل ويجب ان يكون رقما")
  .typeError("يجب ادخال هذا الحقل ويجب ان يكون رقما"),
  });
 
- const onSubmit = async ({ name, price, quantity }, actions) => {
+ const onSubmit = async ({ name, price, bought, quantity }, actions) => {
  if (job === "add") {
  const docRef = await addDoc(collection(db, "products"), {
  name,
  price,
+ bought,
  quantity,
  });
  } else {
  const updateRef = await updateDoc(doc(db, "products", id), {
  name,
  price,
+ bought,
  quantity,
  });
  }
@@ -53,6 +59,7 @@ const HomePage = ({ getProducts, products, setProducts }) => {
  name: "",
  quantity: "",
  price: "",
+ bought: "",
  },
  validationSchema: schema,
  onSubmit,
@@ -80,7 +87,7 @@ const HomePage = ({ getProducts, products, setProducts }) => {
  setId={setId}
  setFieldValue={formik.setFieldValue}
  deleteProductHandler={deleteProductHandler}
- tableHeads={["اسم المنتج", "سعر المنتج", "كميه المنتج", "أعدادات"]}
+ tableHeads={["اسم المنتج", "سعر الشراء", "سعر البيع", "كميه المنتج", "أعدادات"]}
  />
  <Form
  setModal={setModal}
@@ -94,10 +101,15 @@ const HomePage = ({ getProducts, products, setProducts }) => {
  type: "text",
  },
  {
- title: "السعر",
+ title: "السعر الشراء",
  name: "price",
  type: "number",
  },
+ {
+ title: "السعر البيع",
+ name: "bought",
+ type: "number",
+ },
  {
  title: "الكميه",
  name: "quantity",

diff --git a/src/Pages/invoices/Invoices.jsx b/src/Pages/invoices/Invoices.jsx
@@ -21,6 +21,7 @@ const Invoices = ({ setSearchDate, searchDate }) => {
 
  return (
  <div>
+ {/* <h1 className="text-center">Invoice</h1> */}
  <DataTable
  products={invoices}
  setSearchDate={setSearchDate}

diff --git a/src/Pages/profile/Profile.jsx b/src/Pages/profile/Profile.jsx
@@ -1,10 +1,40 @@
 // import Signup from "../../components/signup/Signup"
 
+import { Fragment } from "react"
+
 const Profile = () => {
  return (
- <> profile
- {/* <Signup/> */}
- </>
+ <Fragment >
+
+ <div className="w-full ">
+ <label className="pt-6 block text-center text-gray-700 text-2xl font-bold mb-2" htmlFor="username">
+ المعلومات الشخصيه
+ </label>
+ <form className="bg-white w-2/3 m-auto shadow-md rounded px-8 pt-6 pb-8 mb-4">
+ <div className="mb-4">
+ <label className="block text-center text-gray-700 text-sm font-bold mb-2" htmlFor="username">
+ اسم المستخدم
+ </label>
+ <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" value="وائل الشافعى" disabled />
+ </div>
+ <div className="mb-4">
+ <label className="block text-center text-gray-700 text-sm font-bold mb-2" htmlFor="password">
+ الايميل الشخصى
+ </label>
+ <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="الايميل الشخصى " value="[email protected]" disabled />
+ </div>
+ <div className="mb-4">
+ <label className="block text-center text-gray-700 text-sm font-bold mb-2" htmlFor="password">
+ رقم الهاتف
+ </label>
+ <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="رقم الهاتف" value="+201011497266" disabled />
+ </div>
+ </form>
+ <p className="text-center text-gray-500 text-xs">
+ &copy;2020 Acme Corp. All rights reserved.
+ </p>
+ </div>
+ </Fragment>
  )
 }
 

diff --git a/src/components/DataTable/DataTable.jsx b/src/components/DataTable/DataTable.jsx
@@ -28,26 +28,23 @@ export default function DataTable({
 }) {
  const [order, setOrder] = useState("asc");
  const [orderBy, setOrderBy] = useState("price");
+ const [bought, setbought] = useState("bought");
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(print ? 50 : 5);
  const [startIndex, setStartIndex] = useState(1);
  const [firstOrlast, setFirstOrLast] = useState("first");
  const [searchWord, setSearchWord] = useState("");
 
  let visibleRows;
-
- console.log();
-
+ {/* ///////////////filtering //////////////////*/}
  let filteredProducts = products
  .filter((product) => {
  if (product.name) {
  return product.name.toLowerCase().includes(searchWord.toLowerCase());
- } else if (product["invoice-number"]) {
- if (
- String(product["invoice-number"])
- .toLowerCase()
- .includes(searchWord.toLowerCase())
- ) {
+ } 
+ else if (product["invoice-number"]) {
+
+ if (String(product["invoice-number"]).toLowerCase().includes(searchWord.toLowerCase())) {
  return product;
  }
  }
@@ -62,7 +59,6 @@ export default function DataTable({
  return product;
  }
  });
-
  visibleRows = filteredProducts?.sort(function (a, b) {
  if (firstOrlast === "first") {
  return a?.name?.localeCompare(b.name, ["ar"]);
@@ -80,10 +76,10 @@ export default function DataTable({
  {print
  ? "الفاتوره"
  : invoice
- ? "منتجات الفاتوره"
- : invoices
- ? "الفواتير"
- : "المنتجات"}
+  ? "منتجات الفاتوره"
+  : invoices
+  ? "الفواتير"
+  : "المنتجات"}
  </h3>
  {print || invoice || invoices || noQuntity ? null : (
  <button
@@ -147,6 +143,7 @@ export default function DataTable({
  <div className="table-container container">
  <table>
  <thead>
+ {/*///////////////////////////// sorting in column اسم المنتج ///////////////////////////*/}
  <tr>
  {tableHeads.map((head, n) => {
  return (
@@ -172,12 +169,12 @@ export default function DataTable({
  <AiOutlineArrowDown />
  )
  ) : null}
-
  {head}
  </th>
  );
  })}
  </tr>
+ {/*///////////////////////////// sorting in column اسم المنتج ///////////////////////////*/}
  </thead>
  <tbody>
  {filteredProducts?.length > 0 ? (
@@ -204,13 +201,21 @@ export default function DataTable({
  </tr>
  ) : (
  <tr key={product.id}>
+ {/* ////////////////////////on page show product////////////////////////// */}
  <td>{product.name}</td>
  <td className="flex-row-reverse gap-1">
  {product.price} <p>ج.م </p>
  </td>
+ <td className="flex-row-reverse gap-1">
+ {product.bought} <p>ج.م </p>
+ </td>
  {print || invoice ? (
  <td>{product.selectedQuantity}</td>
- ) : null}
+ )
+ : null
+ }
+ {/* ////////////////////////on page show product////////////////////////// */}
+
  {invoice ? null : <td>{product.quantity}</td>}
  {invoice ? (
  <td className="flex-row-reverse gap-1">
@@ -226,6 +231,7 @@ export default function DataTable({
  setModal(true);
  setFieldValue("name", product.name);
  setFieldValue("price", product.price);
+ setFieldValue("bought", product.bought);
  setFieldValue("quantity", product.quantity);
  setId(product.id);
  }}
@@ -252,15 +258,15 @@ export default function DataTable({
  : "لا يوجد اي منتجات"}
  </h3>
  )}
-
+ {/*////////////////////// if no quantaty//////////////////////////// */}
  {products?.length === 0 && (
  <tr className="text-3xl text-gray-400 text-center !justify-center font-bold py-10">
  <td className=" !justify-center">لا توجد منتجات</td>
  </tr>
  )}
  </tbody>
  </table>
-
+ {/* ///////////////////////////////////////pagination //////////////////// */}
  {print ? null : filteredProducts.length > 5 ? (
  <TablePagination
  rowsPerPage={rowsPerPage}