add validation and basic api && change design sidebar

app/component/uploadFile/index.js

@@ -42,6 +42,7 @@ function UploadFile({ image, setImage }) {
       <input
         type="file"
         ref={fileRef}
+        accept="image/*"
         className="contents"
         onChange={handleChange}
       />

app/globals.css

@@ -280,6 +280,10 @@ html {
   max-width: 100%;
 }
 
+.hover-sidebar .logout-btn {
+  max-width: 100% !important;
+}
+
 @media (max-width: 768px) {
   .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
     padding-top: 10px;

components/icons/LogoutOrangeP.js

@@ -6,6 +6,7 @@ function LogoutOrangeP() {
       height="20"
       viewBox="0 0 20 20"
       fill="none"
+      className="min-w-[20px] min-h-[20px] max-w-[20px] max-h-[20px]"
     >
       <path
         d="M14.5334 12.1837L16.6668 10.0503L14.5334 7.91699"

components/layout/sidebar/ModalLogout.js

@@ -1,8 +1,15 @@
 import { styleDefault } from "@/mui";
 import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
+import { removeToken } from "@/utils";
 
 function ModalLogout({ open, handleClose }) {
+  const logout = () => {
+    removeToken();
+    window.location.pathname = '/login'
+    handleClose();
+  };
+
   return (
     <Modal open={open} onClose={handleClose}>
       <Box
@@ -31,7 +38,7 @@ function ModalLogout({ open, handleClose }) {
           </Button>
           <Button
             variant="contained"
-            onClick={handleClose}
+            onClick={logout}
             className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
           >
             خروج

components/layoutPanel/sidebar/index.js

@@ -43,14 +43,14 @@ function Sidebar({ active, setActive, open, setOpen }) {
             <Links open={open} setActive={setActive} />
           </div>
           <div
-            className={`w-full flex justify-center overflow-hidden transition-all duration-500 ${
-              open ? "!max-w-full" : "!max-w-0"
+            className={`w-full flex logout-btn justify-center overflow-hidden transition-all duration-500 ${
+              open ? "!max-w-full" : "!max-w-[36px]"
             }`}
           >
             <Button
               variant="text"
               onClick={handleOpen}
-              className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
+              className="!flex !w-fit !items-center !justify-start !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
             >
               <LogoutOrangeP />
               خروج از حساب

components/panel/userAccount/bank/head/modal/index.js

@@ -24,13 +24,12 @@ function ModalAddCard() {
 
   const updateNum = (value, type, name) => {
     const parseValue = +value;
-    const { max } = validate_phone_number;
 
-    const validateValue = parseValue > max ? data[name].value : value;
-
-    changeData(validateValue, name);
+    changeData(parseValue, name);
   };
 
+  const isValidData = data.card && data.shaba && data.value && data.value.value;
+
   return (
     <>
       {/* Button Modal */}
@@ -69,6 +68,7 @@ function ModalAddCard() {
             <Button
               variant="contained"
               onClick={handleClose}
+              disabled={!isValidData}
               className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !text-[#EFEFEF] !text-[16px] !font-medium"
             >
               ذخیره

services/api.js

@@ -13,8 +13,18 @@ const api = axios.create({
 
 api.interceptors.request.use(
   (request) => {
-    if (cookies.get("token")) {
-      request.headers.authorization = `Bearer ${cookies.get("token")}`;
+    const token = cookies.get("token");
+    const isLoginPage = window.location.pathname === "/login";
+
+    if (!token) {
+      if (!isLoginPage) {
+        window.location.pathname = "/login";
+      }
+    } else {
+      if (isLoginPage) {
+        window.location.pathname = "/";
+      }
+      request.headers.authorization = `Bearer ${token}`;
     }
     return request;
   },
@@ -26,10 +36,9 @@ api.interceptors.response.use(
     return response.data;
   },
   (error) => {
-    console.log(error);
     if (error.data.status === 400) {
       cookies.remove("token", { path: "/" });
-      window.location.reload();
+      window.location.pathname = "/login";
     } else {
     }
   }

utils/index.js

@@ -0,0 +1,7 @@
+import Cookies from "universal-cookie";
+
+const cookies = new Cookies();
+
+const removeToken = () => cookies.remove("token", { path: "/" });
+
+export { removeToken };