Development (#74)

* ogwa-58 (#72)

* bug fixing

* fix search bar bug

* Update index.js

* add continue button

* Update UserLoginPage.jsx

* Ogwa 39 (#73)

* create api for send, cancel, confirm payment, and reject payment

* add frontend send button

* add sweetalert

* add cancel, confirm, and reject button

* add user auth guard

* add logic to hide/show login/logout button

* edit desktop navbar

* add alt

* update desktop navbar

* fix bug product card

* add profile on account menu

* fix seeder bug

* disabled add to cart if not logged

* add stock increment

* add order list

* fix bug product

* fix bug rajaongkir

* add order detail page

* add order detail

* add action button

* add delete alert

* add cancel order handler

* fix product card bug

* fix search bar

* update account icon

* refactor

* finish backend for addProduct to Carts models

* commit test

* fix bug order detail

* add seeders

* working ogwa-42

* new works on ogwa-42

* working on CartPage

* finish ogwa-42 and ogwa-43 but need cleansing log and // again

* finish early OGWA-42 and OGWA-43

* finish early OGWA-42 and OGWA-43 new

* finish OGWA-49 and OGWA-22

* working on OGWA-39 Sales report

* checkpoint backend and frontend ogwa-39

* finish OGWA-39

* fix bug

---------

Co-authored-by: Muhamad Danang Priambodo <68808411+mcdanang@users.noreply.github.com>

* fix for deployment

---------

Co-authored-by: Muhamad Danang Priambodo <68808411+mcdanang@users.noreply.github.com>
Co-authored-by: farrez30 <59773413+farrez30@users.noreply.github.com>

.github/workflows/deploy.yaml

@@ -40,4 +40,4 @@ jobs:
           script: |
             cd ${{ secrets.SSH_FOLDER }}
             npm install
-            pm2 start deploy.config.js
+            pm2 start deploy.config.js

projects/client/src/App.jsx

@@ -41,6 +41,7 @@ import OrderPage from "./pages/Order/OrderPage";
 import OrderDetail from "./pages/OrderDetail/OrderDetail";
 import CartPage from "./pages/Cart/CartPage";
 import NotFoundPage from "./pages/NotFoundPage";
+import SalesReport from "./pages/SalesReport/SalesReport";
 
 function App() {
 	return (
@@ -101,6 +102,7 @@ function App() {
 				<Route path="/admin/product" element={<AdminAuthGuard component={<ManageProduct />} />} />
 				<Route path="/admin/product/create" element={<AdminAuthGuard component={<CreateProduct />} />} />
 				<Route path="/admin/product/update" element={<AdminAuthGuard component={<UpdateProduct />} />} />
+				<Route path="/admin/report" element={<AdminAuthGuard component={<SalesReport />} />} />
 				{/* //Not Found Page */}
 				<Route path="*" element={<NotFoundPage />} />
 			</Routes>

projects/client/src/components/Cart/CartBox.jsx

@@ -13,7 +13,6 @@ const CartBox = () => {
 	React.useEffect(() => {
 		getUserCart()
 			.then((result) => {
-				// if (!result.data) navigate("/404");
 				setCart(result.data);
 				setSubTotal(
 					cart?.reduce((acc, curr) => {

projects/client/src/components/Cart/CartBoxDetail.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import CartPriceDetail from "./CartPriceDetail";
 import QuantityUpdateButtonSet from "./QuantityUpdateButtonSet";
-// import PriceDetail from "./PriceDetail.jsx";
 
 const CartBoxDetail = ({ cart, setIsUpdate }) => {
 	return cart.length ? (

projects/client/src/components/Cart/CheckoutButton.jsx

@@ -1,11 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-// import { useSelector, useDispatch } from "react-redux";
-// import { postTransaction } from "./handlers/checkoutHandler";
 
 const CheckoutButton = ({ cart }) => {
-	// const checkout = useSelector((state) => state.checkout);
-	// const dispatch = useDispatch();
 	const navigate = useNavigate();
 	return (
 		<div className="flex flex-col">

projects/client/src/components/Checkout/SwitchAddress.jsx

@@ -2,13 +2,17 @@ import React from "react";
 import BackButton from "../BackButton.jsx";
 import Addresses from "./SwitchAddress/Addresses.jsx";
 import { useNavigate } from "react-router-dom";
+import ContinueButton from "../ContinueButton.jsx";
 
 const SwitchAddress = () => {
 	const navigate = useNavigate();
 	return (
-		<div className="flex flex-col bg-white min-h-screen">
-			<BackButton color="text-green-400" url="/cart/checkout" />
-			<Addresses />
+		<div className="sm:p-20 min-h-screen bg-green-100 items-center justify-center">
+			<div className="flex flex-col min-h-screen sm:min-h-0 sm:p-5 bg-white max-w-7xl rounded-xl shadow-lg">
+				<BackButton color="text-green-400" url="/cart/checkout" />
+				<Addresses />
+				<ContinueButton />
+			</div>
 		</div>
 	);
 };

projects/client/src/components/Checkout/SwitchLogistic.jsx

@@ -1,12 +1,16 @@
 import React from "react";
 import Logistics from "./SwitchLogistic/Logistics";
 import BackButton from "../BackButton";
+import ContinueButton from "../ContinueButton";
 
 const SwitchLogistic = () => {
 	return (
-		<div className="flex flex-col bg-white min-h-screen">
-			<BackButton color="text-green-400" url="/cart/checkout" />
-			<Logistics />
+		<div className="sm:p-20 min-h-screen bg-green-100 items-center justify-center">
+			<div className="flex flex-col min-h-screen sm:min-h-0 sm:p-5 bg-white max-w-7xl rounded-xl shadow-lg">
+				<BackButton color="text-green-400" url="/cart/checkout" />
+				<Logistics />
+				<ContinueButton />
+			</div>
 		</div>
 	);
 };

projects/client/src/components/Checkout/SwitchVoucher.jsx

@@ -1,13 +1,15 @@
 import React from "react";
 import Vouchers from "./SwitchVoucher/Vouchers";
 import BackButton from "../BackButton";
+import ContinueButton from "../ContinueButton";
 
 const SwitchVoucher = () => {
 	return (
-		<div className="sm:p-20 min-h-screen bg-green-100 flex items-center justify-center">
+		<div className="sm:p-20 min-h-screen bg-green-100 items-center justify-center">
 			<div className="flex flex-col min-h-screen sm:min-h-0 sm:p-5 bg-white max-w-7xl rounded-xl shadow-lg">
 				<BackButton color="text-green-400" url="/cart/checkout" />
 				<Vouchers />
+				<ContinueButton />
 			</div>
 		</div>
 	);

projects/client/src/components/ContinueButton.jsx

@@ -0,0 +1,17 @@
+import { useNavigate } from "react-router-dom";
+
+const ContinueButton = () => {
+	const navigate = useNavigate();
+	return (
+		<>
+			<button
+				className="rounded-lg font-bold h-fit bg-green-500 text-green-100 px-4 py-2 ml-auto mr-10 my-10"
+				onClick={() => navigate("/cart/checkout")}
+			>
+				Continue
+			</button>
+		</>
+	);
+};
+
+export default ContinueButton;

projects/client/src/components/Order/handlers/orderHandler.js

@@ -16,7 +16,6 @@ export const generateUrlQuery = (name, startDate, endDate, filterBy, filter, sor
 };
 
 export const getUserTransactions = () => {
-	// return axios.get(`${process.env.REACT_APP_API_BASE_URL}/transaction/list${query}`, {
 	return axios.get(`${process.env.REACT_APP_API_BASE_URL}/transaction/list`, {
 		headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
 	});

projects/client/src/components/ProductDetail/ProductInfo/AddToCart/AddToCart.jsx

@@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { addProducts } from "../../../Products/handlers/productsHandler";
 import { useParams } from "react-router-dom";
+import { useDispatch } from "react-redux";
 
 const DesktopAddToCart = ({ amount }) => {
 	const user = useSelector((state) => state.user);
 	const { inventory_id } = useParams();
-	const [quantity, setQuantity] = useState(amount);
-
+	const dispatch = useDispatch();
 	return (
 		<button
 			type="button"
 			disabled={amount === 0 || !user?.hasLogged}
 			onClick={() => {
-				addProducts(inventory_id, amount);
+				addProducts(inventory_id, amount, dispatch);
 			}}
 			className="bg-green-200 text-white font-semibold px-12 py-4 rounded-xl disabled:opacity-50 lg:w-full lg:px-0 lg:py-1.5 lg:rounded-lg"
 		>

projects/client/src/components/ProductStockHistory/InventoryTable/ViewMode.jsx

@@ -22,7 +22,6 @@ const Time = ({ item }) => {
 
 const ViewMode = ({ item, index }) => {
 	const tdClassName = index % 2 ? "py-4 bg-green-100 text-xs text-center" : "py-4 bg-white text-xs text-center";
-	console.log(item);
 	return (
 		<tbody key={index}>
 			<tr>

projects/client/src/components/Products/handlers/productsHandler.js

@@ -47,6 +47,7 @@ export const addProducts = async (inventory_id, quantity, dispatch) => {
 			timer: 1000,
 		});
 	} catch (error) {
+		console.log("error ordctHandler: ", error);
 		Swal.fire({
 			icon: "error",
 			title: await productErrorHandler(error),

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesReportBodyContent.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ProductSalesViewMode from "./ProductSalesViewMode";
+
+const ProductSalesReportBodyContent = ({ datas }) => {
+	return datas.map((item, index) => {
+		return <ProductSalesViewMode item={item} key={index} index={index} />;
+	});
+};
+
+export default ProductSalesReportBodyContent;

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesReportTable.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import ProductSalesReportTableHead from "./ProductSalesReportTableHead.jsx";
+import ProductSalesReportTableBody from "./ProductSalesReportTableBody.jsx";
+
+const ProductSalesReportTable = ({ name, filterBy, filter, sort, order, page, setMaxPage, startDate, endDate }) => {
+	return (
+		<div className="flex overflow-x-auto rounded-lg border border-green-300 border-2 mx-6">
+			<table className="w-full">
+				<ProductSalesReportTableHead />
+
+				<ProductSalesReportTableBody
+					name={name}
+					filterBy={filterBy}
+					filter={filter}
+					sort={sort}
+					order={order}
+					page={page}
+					setMaxPage={setMaxPage}
+					startDate={startDate}
+					endDate={endDate}
+				/>
+			</table>
+		</div>
+	);
+};
+
+export default ProductSalesReportTable;

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesReportTableBody.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { getSalesReportByProduct } from "../handlers/SalesReportHandler.js";
+import ProductSalesReportBodyContent from "./ProductSalesReportBodyContent";
+// import { generateUrlQuery, getBranchInventories } from "../handlers/SalesReportHandler.js";
+
+const ProductSalesReportTableBody = ({ name, filterBy, filter, sort, order, page, setMaxPage, startDate, endDate }) => {
+	const [datas, setDatas] = React.useState([]);
+	React.useEffect(() => {
+		getSalesReportByProduct()
+			.then((result) => {
+				setDatas(result.data);
+				// setMaxPage(Math.ceil(result.data.count / 3));
+			})
+			.catch((error) => alert("Server Unavailable"));
+	}, []);
+
+	// React.useEffect(() => {
+	// 	const query = generateUrlQuery(name, page, filterBy, filter, sort, order, startDate, endDate);
+
+	// 	getBranchInventories(query)
+	// 		.then((result) => {
+	// 			setDatas(result.data.rows);
+	// 			setMaxPage(Math.ceil(result.data.count / 3));
+	// 		})
+	// 		.catch((error) => alert("Server Unavailable"));
+	// }, [filter, order, page, name, startDate, endDate]);
+
+	return datas && <ProductSalesReportBodyContent datas={datas} />;
+};
+
+export default ProductSalesReportTableBody;

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesReportTableGroup.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { orderDefault, sortDefault } from "../handlers/SalesReportHandler";
+import SearchConfiguration from "../SearchConfiguration.jsx";
+import Pagination from "../../Pagination.jsx";
+
+import SalesReportTable from "./ProductSalesReportTable.jsx";
+import ProductSalesReportTable from "./ProductSalesReportTable.jsx";
+
+const ProductSalesReportTableGroup = () => {
+	const [name, setName] = React.useState("");
+	const [filterBy, setFilterBy] = React.useState("");
+	const [filter, setFilter] = React.useState("");
+	const [sort, setSort] = React.useState("");
+	const [order, setOrder] = React.useState("");
+	const [page, setPage] = React.useState(1);
+	const [maxPage, setMaxPage] = React.useState(1);
+	const [startDate, setStartDate] = React.useState("");
+	const [endDate, setEndDate] = React.useState("");
+
+	React.useEffect(() => {
+		setPage(1);
+	}, [name, filter, order, startDate, endDate]);
+
+	return (
+		<div className="flex flex-col justify-start pt-0.5 mt-7 px-4 h-full">
+			<h1>Product report</h1>
+			<SearchConfiguration
+				setPage={setPage}
+				setName={setName}
+				filterBy={filterBy}
+				setFilterBy={setFilterBy}
+				filter={filter}
+				setFilter={setFilter}
+				sort={sort}
+				setSort={setSort}
+				order={order}
+				setOrder={setOrder}
+				startDate={startDate}
+				endDate={endDate}
+				setStartDate={setStartDate}
+				setEndDate={setEndDate}
+			/>
+			<ProductSalesReportTable
+				name={name}
+				sort={sort}
+				filterBy={filterBy}
+				filter={filter}
+				order={order}
+				page={page}
+				setMaxPage={setMaxPage}
+				startDate={startDate}
+				endDate={endDate}
+			/>
+			<div className="mx-auto mt-16">
+				<Pagination page={page} setPage={setPage} maxPage={maxPage} />
+			</div>
+		</div>
+	);
+};
+
+export default ProductSalesReportTableGroup;

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesReportTableHead.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const ProductSalesReportTableHead = () => {
+	const thClassName = "py-6 bg-green-500 text-green-100 px-10 whitespace-nowrap";
+	return (
+		<thead className="uppercase">
+			<tr className="text-center">
+				<th className={"py-6 bg-green-500 text-green-100 px-1 whitespace-nowrap"}>No.</th>
+				<th className={"py-6 bg-green-500 text-green-100 px-1 whitespace-nowrap"}>Product's Name</th>
+				<th className={"py-6 bg-green-500 text-green-100 px-1 whitespace-nowrap"}>Quantity</th>
+			</tr>
+		</thead>
+	);
+};
+
+export default ProductSalesReportTableHead;

projects/client/src/components/SalesReport/ProductSalesReport/ProductSalesViewMode.jsx

@@ -0,0 +1,45 @@
+const Mutation = ({ item }) => {
+	const changes = item.stock_after - item.stock_before;
+	const isNegative = changes < 0;
+
+	const string = isNegative ? changes.toString() : `+${changes}`;
+	const className = isNegative ? "text-red font-bold" : "text-green-300 font-bold";
+
+	return <span className={className}>{string}</span>;
+};
+
+const Time = ({ item }) => {
+	const fullDate = new Date(item.created_at).toString();
+	const date = fullDate.split(" ").slice(0, 4).join(" ").replace(" ", ", ");
+	const time = fullDate.split(" ").slice(4, 5).join(" ");
+
+	return (
+		<span>
+			{date} - {time}
+		</span>
+	);
+};
+
+const ProductSalesViewMode = ({ item, index }) => {
+	const tdClassName = index % 2 ? "py-4 bg-green-100 text-xs text-center" : "py-4 bg-white text-xs text-center";
+	return (
+		<tbody key={index}>
+			<tr>
+				{/* <td className={tdClassName}>
+					<img src={item.Inventory.Product.image} className="max-w-[80px] mx-auto" />
+				</td> */}
+				<td className={tdClassName}>{index + 1}</td>
+				<td className={tdClassName}>{item.name}</td>
+				<td className={tdClassName}>{item.qty}</td>
+				{/* <td className={tdClassName}>
+					<Mutation item={item} />
+				</td>
+				<td className={tdClassName}>
+					<Time item={item} />
+				</td> */}
+			</tr>
+		</tbody>
+	);
+};
+
+export default ProductSalesViewMode;

projects/client/src/components/SalesReport/SalesTable/SalesReportBodyContent.jsx

@@ -0,0 +1,10 @@
+// import React from "react";
+// // import ViewMode from "./ViewMode";
+
+// const SalesReportBodyContent = ({ datas }) => {
+// 	return datas.map((item, index) => {
+// 		return <ViewMode item={item} key={index} index={index} />;
+// 	});
+// };
+
+// export default SalesReportBodyContent;