Merge branch 'development'

projects/client/src/components/AddressMenu/AddressDropDown.jsx

@@ -1,6 +1,8 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { showAlertByError } from "../../helper/alert";
 
 const getDefaultAddress = (token) => {
 	return axios.get(`${process.env.REACT_APP_API_BASE_URL}/address/default`, {
@@ -11,12 +13,14 @@ const getDefaultAddress = (token) => {
 const AddressDropDown = () => {
 	const [address, setAddress] = useState();
 	const navigate = useNavigate();
+	const dispatch = useDispatch();
+
 	useEffect(() => {
 		getDefaultAddress(localStorage.getItem("token"))
 			.then((result) => {
 				setAddress(result.data);
 			})
-			.catch((error) => alert("Server Unavailable"));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, []);
 
 	return (

projects/client/src/components/BranchMenu/BranchName.jsx

@@ -11,13 +11,15 @@ const BranchName = ({ toggleBranchModal }) => {
 	const dispatch = useDispatch();
 
 	React.useEffect(() => {
-		getNearestBranch(user.location.latitude, user.location.longitude)
+		if(!user.branch.id) {
+			getNearestBranch(user.location.latitude, user.location.longitude)
 			.then((result) => {
 				dispatch(setUserNearestBranch({ name: result.data.name, id: result.data.id }));
 			})
 			.catch((error) => {
 				dispatch(setUserNearestBranch({ name: "Server Error!", id: null }));
 			});
+		};
 	}, []);
 
 	return (

projects/client/src/components/Category/CategoryTableBody.jsx

@@ -1,10 +1,14 @@
 import React from "react";
 import TableBodyContent from "./TableBodyContent.jsx";
 import { getCategories, generateUrlQuery } from "./handlers/categoryHandler.js";
+import { clearUser } from "../../redux/reducers/user/userAction.js";
+import { useDispatch } from "react-redux";
+import { showAlertByError } from "../../helper/alert.js";
 
 const CategoryTableBody = ({ page, setMaxPage, itemPerPage, filter, sort, order }) => {
 	const [datas, setDatas] = React.useState([]);
 	const [isUpdated, setIsUpdated] = React.useState(false);
+	const dispatch = useDispatch()
 
 	React.useEffect(() => {
 		const query = generateUrlQuery(page, itemPerPage, filter, sort, order);
@@ -14,7 +18,7 @@ const CategoryTableBody = ({ page, setMaxPage, itemPerPage, filter, sort, order
 				setMaxPage(Math.ceil(result.data.count / itemPerPage));
 				setIsUpdated(false);
 			})
-			.catch((error) => alert("Server Unavailable"));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, [page, setMaxPage, itemPerPage, filter, sort, order, isUpdated]);
 
 	return (

projects/client/src/components/Checkout/LogisticBox/HeaderContent.jsx

@@ -3,13 +3,13 @@ import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 const HeaderContent = () => {
-	const summary = useSelector((state) => state.checkout.summary);
+	const checkout = useSelector((state) => state.checkout);
 
 	return (
 		<>
 			<span className="col-span-1 material-symbols-rounded">local_shipping</span>
 			<span className="col-span-4 text-left">Logistic:</span>
-			{summary.weight ? (
+			{checkout.summary.weight && checkout.address.id ? (
 				<Link className="col-start-7 underline cursor-pointer mr-2" to="logistic/change">
 					<span className="material-symbols-rounded text-sm">arrow_forward_ios</span>
 				</Link>

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

@@ -15,7 +15,7 @@ const Logistic = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 font-normal my-1 text-left">
 			<span className="col-start-4 col-span-2">Logistic fee:</span>
-			<span className="col-start-7 col-span-2"> {toCurrency(summary?.logistic)}</span>
+			<span className="col-start-7 col-span-2"> {toCurrency(summary?.raw?.logistic)}</span>
 		</div>
 	);
 };
@@ -24,7 +24,10 @@ const Discount = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 font-normal whitespace-nowrap text-left">
 			<span className="col-start-4 col-span-2">Voucher Discount:</span>
-			<span className="col-start-7 col-span-2 text-red"> {toCurrency(summary?.discount)}</span>
+			<span className="col-start-7 col-span-2 text-red">
+				{" "}
+				{summary?.discount ? `- ${toCurrency(summary?.discount)}` : "-"}
+			</span>
 		</div>
 	);
 };

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

@@ -22,7 +22,7 @@ const SwitchAddress = () => {
 	const navigate = useNavigate();
 	return (
 		<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">
+			<div className="flex flex-col min-h-screen bg-white max-w-7xl rounded-xl shadow-lg mx-auto sm:min-h-0 sm:p-5">
 				<BackButton color="text-green-400" url="/cart/checkout" />
 				<Addresses />
 				<CreateButton />

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

@@ -2,16 +2,30 @@ import React from "react";
 import Logistics from "./SwitchLogistic/Logistics";
 import BackButton from "../BackButton";
 import ContinueButton from "../ContinueButton";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const SwitchLogistic = () => {
+	const checkout = useSelector((state) => state.checkout);
+	const navigate = useNavigate();
+
+	React.useEffect(() => {
+		if (!checkout.summary.weight || !checkout.address.id) {
+			navigate("/cart/checkout");
+		}
+	}, []);
+
 	return (
-		<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 />
+		checkout.summary.weight &&
+		checkout.address.id && (
+			<div className="min-h-screen bg-green-100 items-center justify-center sm:p-20 ">
+				<div className="flex flex-col min-h-screen bg-white max-w-7xl  mx-auto rounded-xl shadow-lg sm:min-h-0 sm:p-5">
+					<BackButton color="text-green-400" url="/cart/checkout" />
+					<Logistics />
+					<ContinueButton />
+				</div>
 			</div>
-		</div>
+		)
 	);
 };
 

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

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

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

@@ -4,6 +4,8 @@ import VoucherOptions from "./VoucherOptions.jsx";
 import { removeVoucher } from "../../../redux/reducers/checkout/checkoutAction.js";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
+import { clearUser } from "../../../redux/reducers/user/userAction.js";
+import { showAlertByError } from "../../../helper/alert.js";
 
 const Vouchers = () => {
 	const [vouchers, setVouchers] = React.useState([]);
@@ -20,9 +22,9 @@ const Vouchers = () => {
 						let filteredVouchers = filterVoucherByBranchAndCart(result.data, cart);
 						setVouchers(filteredVouchers);
 					})
-					.catch((error) => alert(error));
+					.catch((error) => showAlertByError(error, dispatch));
 			})
-			.catch((error) => alert(error));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, []);
 
 	return (

projects/client/src/components/Checkout/handlers/checkoutHandler.js

@@ -56,7 +56,7 @@ export const getUserCart = () => {
 	return axios.get(`${process.env.REACT_APP_API_BASE_URL}/cart`, headers);
 };
 
-const promtCreateOrder = (data) =>
+const promptCreateOrder = (data) =>
 	Swal.fire({
 		title: "Create Order?",
 		html: `Total Payment: <b>${toCurrency(data.summary.total)}</b>`,
@@ -82,7 +82,7 @@ export const postTransaction = (data, dispatch, navigate) => {
 	const token = localStorage.getItem("token");
 	const headers = { headers: { Authorization: `Bearer ${token}` } };
 
-	promtCreateOrder(data).then(async (result) => {
+	promptCreateOrder(data).then(async (result) => {
 		if (result.isConfirmed) {
 			await axios
 				.post(`${process.env.REACT_APP_API_BASE_URL}/transaction/create`, data, headers)

projects/client/src/components/CreateProductPromo/config/formikCreatePromoConfiguration.js

@@ -21,7 +21,7 @@ const promotion_id = Yup.number().typeError("Must be a number").required(require
 const value = Yup.number()
 	.typeError("Must be a number")
 	.required(requiredMessage)
-	.test("Must be greater than or equal to 1", "Must be a positve number", input => {
+	.test("Must be greater than or equal to 1", "Must be a positive number", (input) => {
 		return input >= 1;
 	})
 	.test("Percentage", "Must be lesser than 101%", (input, formik) => {
@@ -66,22 +66,22 @@ const onSubmitConfiguration = async (values, setError, navigate) => {
 		confirmButtonColor: "#0EB177",
 		cancelButtonColor: "#d33",
 		confirmButtonText: "Confirm",
-	}).then(async result => {
+	}).then(async (result) => {
 		if (result.isConfirmed) {
 			await createInventoryPromotion(values)
-				.then(result => {
+				.then((result) => {
 					Swal.fire("Success!", "Promotion Created!", "success");
 					navigate(-1);
 				})
-				.catch(error => setError(error.message));
+				.catch((error) => setError(error.message));
 		}
 	});
 };
 
 export const formikConfiguration = (setError, navigate) => {
 	return {
 		initialValues,
-		onSubmit: async values => onSubmitConfiguration(values, setError, navigate),
+		onSubmit: async (values) => onSubmitConfiguration(values, setError, navigate),
 		validateOnChange,
 		validateOnBlur,
 		validationSchema,

projects/client/src/components/DesktopNavBar.jsx

@@ -30,7 +30,6 @@ const DesktopNavBar = ({ setFilter }) => {
 			.catch((error) => setItemOnCart(0));
 		dispatch(setCartUpdate({ cartUpdate: false }));
 	}, [user.cartUpdate]);
-	console.log(user);
 
 	return (
 		<div className="hidden text-green-100 text-xl sm:flex sm:flex-row sm:justify-center sm:w-full sm:mt-2 items-center">

projects/client/src/components/DropDown.jsx

@@ -66,7 +66,7 @@ const DropDownOptions = ({ setter, getter }) => {
 					leaveFrom="opacity-100"
 					leaveTo="opacity-0"
 				>
-					<Listbox.Options className="border absolute h-fit inset-0 max-h-44 min-w-full w-fit overflow-auto rounded-lg text-xs divide-y cursor-pointer">
+					<Listbox.Options className="border z-50 absolute h-fit inset-0 max-h-44 min-w-full w-fit overflow-auto rounded-lg text-xs divide-y cursor-pointer">
 						<DataLists lists={lists} setter={setter} />
 					</Listbox.Options>
 				</Transition>

projects/client/src/components/ManageAddress/AddressList.jsx

@@ -3,6 +3,9 @@ import { LocationMarkerIcon, PencilIcon } from "@heroicons/react/outline";
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import axios from "axios";
+import { clearUser } from "../../redux/reducers/user/userAction";
+import { useDispatch } from "react-redux";
+import { showAlertByError } from "../../helper/alert";
 
 const AddressItem = ({ address }) => {
 	const navigate = useNavigate();
@@ -45,12 +48,14 @@ const getAddresses = (token) => {
 
 export default function AddressList() {
 	const [addresses, setAddresses] = useState([]);
+	const dispatch = useDispatch();
+
 	useEffect(() => {
 		getAddresses(localStorage.getItem("token"))
 			.then((result) => {
 				setAddresses(result.data);
 			})
-			.catch((error) => alert("Server Unavailable"));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, []);
 
 	return (

projects/client/src/components/ManageOrder/OrderTable/OrderBodyContent.jsx

@@ -14,10 +14,14 @@ const BranchName = ({ item }) => {
 };
 
 const CreatedAt = ({ 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 (
 		<div className="col-span-2 my-auto flex flex-col">
-			<span>{item.created_at.split("T")[0]}</span>
-			<span>{item.created_at.split("T")[1].slice(0, 8)}</span>
+			<span>{date}</span>
+			<span>{time}</span>
 		</div>
 	);
 };

projects/client/src/components/ManageOrder/handlers/manageOrderHandler.js

@@ -107,8 +107,8 @@ export const generateUrlQuery = (name, startDate, endDate, filterBy, filter, sor
 
 	url += `?page=${page}`;
 	url += `&id=${name}`;
-	url += startDate ? `&start_after=${new Date(startDate)}` : "";
-	url += endDate ? `&end_before=${new Date(new Date(endDate).getTime() + 1000 * 60 * 60 * 24)}` : "";
+	url += startDate ? `&start_after=${startDate}` : "";
+	url += endDate ? `&end_before=${endDate}` : "";
 	url += filter ? `&${filterBy.id}=${filter.id}` : "";
 	url += order.id ? `&order=${sort.id}` : "";
 	url += order.id ? `&asc=${order.id}` : "";

projects/client/src/components/ProductPromo/PromoTable/PromoTableBody.jsx

@@ -1,10 +1,14 @@
 import React from "react";
 import TableBodyContent from "./TableBodyContent.jsx";
 import { getInventoryPromotions, generateUrlQuery } from "../handlers/productPromoHandler";
+import { clearUser } from "../../../redux/reducers/user/userAction.js";
+import { useDispatch } from "react-redux";
+import { showAlertByError } from "../../../helper/alert.js";
 
 const PromoTableBody = ({ name, filter, sort, order, page, setMaxPage }) => {
 	const [datas, setDatas] = React.useState([]);
-
+	const dispatch = useDispatch();
+
 	React.useEffect(() => {
 		const query = generateUrlQuery(name, page, filter, sort, order);
 
@@ -13,7 +17,7 @@ const PromoTableBody = ({ name, filter, sort, order, page, setMaxPage }) => {
 				setDatas(result.data.rows);
 				setMaxPage(Math.ceil(result.data.count / 3));
 			})
-			.catch((error) => alert("Server Unavailable"));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, [filter, order, page, name]);
 
 	return datas && <TableBodyContent datas={datas} />;

projects/client/src/components/ProductPromo/PromoTable/ViewMode.jsx

@@ -1,7 +1,6 @@
 import Value from "./Value";
 
 const ViewMode = ({ item, index, setEditMode }) => {
-	console.log(item);
 	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}>

projects/client/src/components/ProductPromo/config/formikEditModeHandler.js

@@ -1,7 +1,7 @@
 import * as Yup from "yup";
 import { patchInventoryPromotions } from "../handlers/productPromoHandler";
 
-const initialValues = item => {
+const initialValues = (item) => {
 	return {
 		id: item.id,
 		inventory_id: item.inventory_id,
@@ -19,7 +19,7 @@ const requiredMessage = "Field can't be empty";
 
 const value = Yup.number()
 	.typeError("Must be a number")
-	.test("Must be greater than or equal to 1", "Must be a positve number", input => {
+	.test("Must be greater than or equal to 1", "Must be a positive number", (input) => {
 		return input >= 1;
 	})
 	.test("Percentage", "Must be lesser than 101%", (input, formik) => {
@@ -57,14 +57,14 @@ const validationSchema = Yup.object({
 
 const onSubmitConfiguration = async (values, setError) => {
 	await patchInventoryPromotions(values)
-		.then(result => window.location.reload(false))
-		.catch(error => setError(error.message));
+		.then((result) => window.location.reload(false))
+		.catch((error) => setError(error.message));
 };
 
 export const formikEditModeConfiguration = (setError, item, setEditMode) => {
 	return {
 		initialValues: initialValues(item),
-		onSubmit: async values => onSubmitConfiguration(values, setError),
+		onSubmit: async (values) => onSubmitConfiguration(values, setError),
 		validateOnChange,
 		validateOnBlur,
 		validationSchema,

projects/client/src/components/ProductStock/InventoryTable/InventoryTableBody.jsx

@@ -1,9 +1,13 @@
 import React from "react";
 import TableBodyContent from "./TableBodyContent.jsx";
 import { generateUrlQuery, getBranchInventories } from "../handlers/ProductStockHandler.js";
+import { clearUser } from "../../../redux/reducers/user/userAction.js";
+import { useDispatch } from "react-redux";
+import { showAlertByError } from "../../../helper/alert.js";
 
 const InventoryTableBody = ({ name, filterBy, filter, sort, order, page, setMaxPage }) => {
 	const [datas, setDatas] = React.useState([]);
+	const dispatch = useDispatch();
 
 	React.useEffect(() => {
 		const query = generateUrlQuery(name, page, filterBy, filter, sort, order);
@@ -13,7 +17,7 @@ const InventoryTableBody = ({ name, filterBy, filter, sort, order, page, setMaxP
 				setDatas(result.data.rows);
 				setMaxPage(Math.ceil(result.data.count / 3));
 			})
-			.catch((error) => alert("Server Unavailable"));
+			.catch((error) => showAlertByError(error, dispatch));
 	}, [filter, order, page, name]);
 
 	return datas && <TableBodyContent datas={datas} />;