fix:correct imports and async function calls and typos

src/app/page.scss

@@ -33,7 +33,6 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 0px; /* Remove scrollbar space */
+  width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
 }
-

src/components/basket.tsx

@@ -3,12 +3,12 @@ import FontAwesome from 'react-fontawesome';
 
 import './basket.scss';
 import { useDispatch, useSelector } from 'react-redux';
-import { clearBasket, removeItem } from '../reducers/basket';
+import { clearBasket, removeItem } from "@/reducers/basket";
 import PaymentModal from './modals/payment';
-import { setNormalPrice } from '../reducers/orgaPrice';
-import { State, PaymentMethod, Promotion } from '../types';
-import { addOrder } from '../utils/orders';
-import { formatPrice } from '../utils/format';
+import { setNormalPrice } from "@/reducers/orgaPrice";
+import { State, PaymentMethod, Promotion } from "@/types";
+import { addOrder } from "@/utils/orders";
+import { formatPrice } from "@/utils/format";
 import computePromotions from '../utils/promotions';
 
 interface GroupedItem {

src/components/itemsGrid.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { addItem } from '../reducers/basket';
+import { addItem } from "@/reducers/basket";
 import './itemsGrid.scss';
 import { State, Item as ItemType, Category, Supplement } from '../types';
-import { formatPrice } from '../utils/format';
+import { formatPrice } from "@/utils/format";
 import Modal from './modals/modal';
 
 interface ItemsGridProps {

src/components/loginRouter.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Login from '../routes/login';
-import { autoLogin } from '../reducers/login';
-import { State } from '../types';
+import { autoLogin } from "@/reducers/login";
+import { State } from "@/types";
 import Loader from './pageLoader';
 import { Action } from 'redux';
 

src/components/modals/confirmation.tsx

@@ -4,7 +4,7 @@ import Modal from './modal';
 import './confirmation.scss';
 import FontAwesome from 'react-fontawesome';
 import Loader from '../loader';
-import { formatPrice } from '../../utils/format';
+import { formatPrice } from "@/utils/format";
 
 interface ModalProps {
   isOpen: boolean;

src/components/modals/modal.scss

@@ -27,7 +27,7 @@
   .content .button {
     height: 60px;
     line-height: 60px;
-    margin: 10px 0px;
+    margin: 10px 0;
     color: var(--light);
     position: relative;
 

src/components/modals/payment.tsx

@@ -1,10 +1,10 @@
 import React, { useState, ReactNode, useEffect } from 'react';
 import Modal from './modal';
-import { PaymentMethod, State } from '../../types';
+import { PaymentMethod, State } from "@/types";
 import FontAwesome from 'react-fontawesome';
 
 import './payment.scss';
-import { formatMethod } from '../../utils/format';
+import { formatMethod } from "@/utils/format";
 import { useSelector } from 'react-redux';
 import ConfirmModal from './confirmation';
 
@@ -74,7 +74,7 @@ const PaymentMethodModal = ({ isOpen, onPay, onClose, total }: ModalProps) => {
     if (!loading) {
       setLoading(true);
       const place = `${currentLetter}${currentDigit}`;
-      await onPay(place, paymentMethod);
+      onPay(place, paymentMethod);
       setConfirmOpened(false);
       setCurrentDigit('');
       setCurrentLetter('');

src/components/navbar.tsx

@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 import moment from 'moment';
 
 import './navbar.scss';
-import { State } from '../types';
+import { State } from "@/types";
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
 

src/components/priceToogler.tsx

@@ -3,8 +3,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import React from 'react';
 
 import './priceToogler.scss';
-import { toogleOrgaPrice } from '../reducers/orgaPrice';
-import { State } from '../types';
+import { toogleOrgaPrice } from "@/reducers/orgaPrice";
+import { State } from "@/types";
 
 const PriceToogler = () => {
   const orgaPrice = useSelector((state: State) => state.orgaPrice);

src/reducers/basket.ts

@@ -1,4 +1,4 @@
-import { Action, Item } from '../types';
+import { Action, Item } from "@/types";
 
 const initialState: Array<Item> = [];
 

src/reducers/categories.ts

@@ -1,4 +1,4 @@
-import { Category, Action } from '../types';
+import { Category, Action } from "@/types";
 
 const initialState: Array<Category> = [];
 

src/reducers/index.ts

@@ -6,7 +6,7 @@ import login from './login';
 import categories from './categories';
 import promotions from './promotions';
 import server from './server';
-import { State } from '../types';
+import { State } from "@/types";
 
 const app = combineReducers<State>({ basket, orgaPrice, orders, login, categories, promotions, server });
 

src/reducers/login.ts

@@ -1,14 +1,14 @@
-import { API, setAPIToken } from '../utils/api';
+import { API, setAPIToken } from "@/utils/api";
 import { toast } from 'react-toastify';
-import { Socket } from '../utils/socket';
+import { Socket } from "@/utils/socket";
 import { clearOrders, setOrders } from './orders';
 import { clearBasket } from './basket';
-import { LoginState, User, Action, Dispatch, ApiLoginResponse } from '../types';
+import { LoginState, User, Action, Dispatch, ApiLoginResponse } from "@/types";
 import { clearPromotions, setPromotions } from './promotions';
-import { getOrders } from '../utils/orders';
-import { getCategories } from '../utils/categories';
+import { getOrders } from "@/utils/orders";
+import { getCategories } from "@/utils/categories";
 import { setCategories } from './categories';
-import { getPromotions } from '../utils/promotions';
+import { getPromotions } from "@/utils/promotions";
 import { setServerOffline, setServerOnline } from './server';
 
 const initialState: LoginState = {
@@ -100,7 +100,7 @@ export const fetchData = () => async (dispatch: Dispatch) => {
 };
 
 export const autoLogin = () => async (dispatch: Dispatch) => {
-  dispatch(Socket.connect());
+  await dispatch(Socket.connect());
   dispatch(setLoading(true));
   if (localStorage.hasOwnProperty(BOUFFE_TOKEN)) {
     const oldToken: string = localStorage.getItem(BOUFFE_TOKEN);
@@ -111,7 +111,7 @@ export const autoLogin = () => async (dispatch: Dispatch) => {
 
       dispatch(setUser({ token, name, key }));
       dispatch(isOnline ? setServerOnline() : setServerOffline());
-      dispatch(fetchData());
+      await dispatch(fetchData());
     } catch (err) {
       dispatch(logout());
       dispatch(setLoading(false));
@@ -128,5 +128,5 @@ export const tryLogin = (pin: string) => async (dispatch: Dispatch) => {
   dispatch(setLoading(true));
   dispatch(setUser({ token, name, key }));
   dispatch(isOnline ? setServerOnline() : setServerOffline());
-  dispatch(fetchData());
+  await dispatch(fetchData());
 };

src/reducers/orders.ts

@@ -1,4 +1,4 @@
-import { Order, Action } from '../types';
+import { Order, Action } from "@/types";
 
 const initialState: Array<Order> = [];
 

src/reducers/orgaPrice.ts

@@ -1,4 +1,4 @@
-import { Action } from '../types';
+import { Action } from "@/types";
 
 const initialState = false;
 

src/reducers/promotions.ts

@@ -1,4 +1,4 @@
-import { Action, Promotion } from '../types';
+import { Action, Promotion } from "@/types";
 
 const initialState: Array<Promotion> = [];
 

src/reducers/server.ts

@@ -1,4 +1,4 @@
-import { Action, ServerState } from '../types';
+import { Action, ServerState } from "@/types";
 
 const initialState: ServerState = {
   socketConnected: false,

src/routes/items.tsx

@@ -6,8 +6,8 @@ import Switch from '../components/switch';
 import { useSelector } from 'react-redux';
 import { State, IBuyable, Category as CategoryType } from '../types';
 import FontAwesome from 'react-fontawesome';
-import { formatPrice } from '../utils/format';
-import { toggleAvailable } from '../utils/items';
+import { formatPrice } from "@/utils/format";
+import { toggleAvailable } from "@/utils/items";
 
 const Item = ({ item }: { item: IBuyable }) => {
   return (

src/routes/login.tsx

@@ -2,7 +2,7 @@ import React, { useState, ReactNode } from 'react';
 
 import './login.scss';
 import { useDispatch } from 'react-redux';
-import { tryLogin } from '../reducers/login';
+import { tryLogin } from "@/reducers/login";
 import FontAwesome from 'react-fontawesome';
 
 const Login = () => {

src/routes/preparation.scss

@@ -18,10 +18,9 @@
 
   .status {
     margin: auto;
-    padding-top: 10px;
     width: 100%;
     height: 100%;
-    padding: 0 14px;
+    padding: 10px 14px 0;
 
     &::-webkit-scrollbar {
       width: 0 !important;
@@ -32,7 +31,7 @@
       line-height: 60px;
     }
 
-    // Removes the visuals clics for pending (because you can't downgrade a pending order)
+    // Removes the visuals clicks for pending (because you can't downgrade a pending order)
     &.pending .orders .order .next.downgrade {
       background-color: var(--danger-dark);
     }

src/routes/preparation.tsx

@@ -5,8 +5,8 @@ import Navbar from '../components/navbar';
 import moment from 'moment';
 import FontAwesome from 'react-fontawesome';
 import { useSelector } from 'react-redux';
-import { State, Order, Status } from '../types';
-import { upgradeOrder, downgradeOrder } from '../utils/orders';
+import { State, Order, Status } from "@/types";
+import { upgradeOrder, downgradeOrder } from "@/utils/orders";
 import { useLocation } from 'react-router';
 import queryString from 'query-string';
 import Modal from '../components/modals/modal';

src/routes/sell.tsx

@@ -7,9 +7,9 @@ import Navbar from '../components/navbar';
 import PriceToogler from '../components/priceToogler';
 import Basket from '../components/basket';
 import { useDispatch, useSelector } from 'react-redux';
-import { clearBasket } from '../reducers/basket';
-import { State } from '../types';
-import { setNormalPrice } from '../reducers/orgaPrice';
+import { clearBasket } from "@/reducers/basket";
+import { State } from "@/types";
+import { setNormalPrice } from "@/reducers/orgaPrice";
 /**
  * /sell
  *

src/utils/categories.ts

@@ -1,5 +1,5 @@
 import { API } from './api';
-import { Category } from '../types';
+import { Category } from "@/types";
 
 export const getCategories = async () => {
   const request = await API.get<Array<Category>>('/categories');

src/utils/format.ts

@@ -1,4 +1,4 @@
-import { PaymentMethod } from '../types';
+import { PaymentMethod } from "@/types";
 
 const formatPrice = (price: number): string => {
   return `${(price / 100).toFixed(2)} €`;

src/utils/orders.ts

@@ -1,6 +1,6 @@
 import { toast } from 'react-toastify';
 
-import { Item, Order, PaymentMethod } from '../types';
+import { Item, Order, PaymentMethod } from "@/types";
 import { API } from './api';
 
 export const getOrders = async () => {

src/utils/promotions.ts

@@ -1,4 +1,4 @@
-import { Item, Promotion, Price } from '../types';
+import { Item, Promotion, Price } from "@/types";
 import { API } from './api';
 
 export const getPromotions = async () => {

src/utils/socket.ts

@@ -1,9 +1,9 @@
 import { Socket as ClientSocket, connect, io } from 'socket.io-client';
-import { setOrders } from '../reducers/orders';
+import { setOrders } from "@/reducers/orders";
 import { toast } from 'react-toastify';
-import { Order, Category, Dispatch } from '../types';
-import { setCategories } from '../reducers/categories';
-import { setSocketDisconnected, setSocketConnected, setServerOnline, setServerOffline } from '../reducers/server';
+import { Order, Category, Dispatch } from "@/types";
+import { setCategories } from "@/reducers/categories";
+import { setSocketDisconnected, setSocketConnected, setServerOnline, setServerOffline } from "@/reducers/server";
 
 let socket: ClientSocket | undefined = undefined;