perf: restyle imports to use @ for the base path

src/App.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from './utils/hooks';
+import { useAppDispatch, useAppSelector } from '@/utils/hooks';
-import { hydrateAuth } from './features/auth/authSlice';
+import { hydrateAuth } from '@/features/auth/authSlice';
-import AdminLayout from './components/layout/AdminLayout';
+import AdminLayout from '@/components/layout/AdminLayout';
 
 function App() {
   const dispatch = useAppDispatch();

src/api/authApi.ts

@@ -1,4 +1,4 @@
-import type { SendOtpResponse } from '../features/auth/authTypes';
+import type { SendOtpResponse } from '@/features/auth/authTypes';
 
 export const authApi = {
   sendOtp: async (phoneNumber: string): Promise<SendOtpResponse> => {

src/api/axios.ts

@@ -1,6 +1,6 @@
 import axios, { type AxiosError } from 'axios';
-import { env } from '../config/env';
+import { env } from '@/config/env';
-import { STORAGE_KEYS } from '../utils/storage';
+import { STORAGE_KEYS } from '@/utils/storage';
 
 const api = axios.create({
   baseURL: env.apiBaseUrl,

src/app/store.ts

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import authReducer from '../features/auth/authSlice.ts';
+import authReducer from '@/features/auth/authSlice.ts';
 
 export const store = configureStore({
   reducer: {

src/components/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
-import { useAppSelector } from '../utils/hooks';
+import { useAppSelector } from '@/utils/hooks';
 
 interface ProtectedRouteProps {
   children: ReactNode;

src/components/layout/AdminLayout.tsx

@@ -2,10 +2,10 @@ import { Drawer, Layout, Menu, Typography, theme } from "antd";
 import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import winsooLogo from "../../assets/images/winsoo.svg";
+import winsooLogo from "@/assets/images/winsoo.svg";
-import { getSidebarMenuItems } from "../../constants/navigation";
+import { getSidebarMenuItems } from "@/constants/navigation";
-import { colors } from "../../design/tokens/colors";
+import { colors } from "@/design/tokens/colors";
-import { spacing } from "../../design/tokens/spacing";
+import { spacing } from "@/design/tokens/spacing";
 
 const { Header, Content, Sider } = Layout;
 const { Title } = Typography;

src/components/layout/Sidebar.tsx

@@ -1,8 +1,8 @@
 import { Menu } from 'antd';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { getSidebarMenuItems } from '../../constants/navigation';
+import { getSidebarMenuItems } from '@/constants/navigation';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const Sidebar = () => {
   const navigate = useNavigate();

src/constants/navigation.tsx

@@ -1,9 +1,9 @@
-import { Home, MonitorPlay, UserRound } from 'lucide';
+import { Home, MonitorPlay, UserRound } from "lucide";
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
-import type { MenuProps } from 'antd';
+import type { MenuProps } from "antd";
-import LucideIcon from '../components/ui/LucideIcon';
+import LucideIcon from "@/components/ui/LucideIcon";
 
-export type SidebarItemKey = '/profile' | '/billboards' | '/';
+export type SidebarItemKey = "/profile" | "/billboards" | "/";
 
 export interface SidebarItem {
   key: SidebarItemKey;
@@ -13,25 +13,40 @@ export interface SidebarItem {
 
 export const sidebarItems: SidebarItem[] = [
   {
-    key: '/profile',
+    key: "/",
-    label: 'پروفایل کاربر',
+    label: "داشبورد",
+    icon: <LucideIcon icon={Home} size={18} />,
+  },
+  {
+    key: "/profile",
+    label: "پروفایل کاربر",
     icon: <LucideIcon icon={UserRound} size={18} />,
   },
   {
-    key: '/billboards',
+    key: "/billboards",
-    label: 'بیلبوردها',
+    label: "بیلبوردها",
     icon: <LucideIcon icon={MonitorPlay} size={18} />,
   },
-  {
-    key: '/',
-    label: 'داشبورد',
-    icon: <LucideIcon icon={Home} size={18} />,
-  },
 ];
 
-export const getSidebarMenuItems = (): NonNullable<MenuProps['items']> =>
+export const getSidebarMenuItems = (): NonNullable<MenuProps["items"]> =>
   sidebarItems.map((item) => ({
     key: item.key,
-    label: <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>{item.icon}<span>{item.label}</span></span>,
+    label: (
-    icon: <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{item.icon}</span>,
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
+        {item.icon}
+        <span>{item.label}</span>
+      </span>
+    ),
+    icon: (
+      <span
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {item.icon}
+      </span>
+    ),
   }));

src/design/theme/antdTheme.ts

@@ -1,6 +1,6 @@
 import type { ThemeConfig } from 'antd';
-import { colors } from '../tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { typography } from '../tokens/typography';
+import { typography } from '@/design/tokens/typography';
 
 export const antdTheme: ThemeConfig = {
   token: {

src/design/tokens/index.ts

@@ -1,3 +1,3 @@
-export { colors } from './colors';
+export { colors } from '@/design/tokens/colors';
-export { spacing } from './spacing';
+export { spacing } from '@/design/tokens/spacing';
-export { typography } from './typography';
+export { typography } from '@/design/tokens/typography';

src/features/auth/authService.ts

@@ -1,5 +1,5 @@
-import { authApi } from '../../services/authApi';
+import { authApi } from '@/services/authApi';
-import type { AuthSessionPayload, RequestOtpResponse } from '../../types/auth';
+import type { AuthSessionPayload, RequestOtpResponse } from '@/types/auth';
 
 export const authService = {
   sendOtp: async (phoneNumber: string): Promise<RequestOtpResponse> => {

src/features/auth/authSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-import type { AuthState, LoginSuccessPayload } from './authTypes';
+import type { AuthState, LoginSuccessPayload } from '@/features/auth/authTypes';
-import { STORAGE_KEYS } from '../../utils/storage';
+import { STORAGE_KEYS } from '@/utils/storage';
-import { getAccessToken, storeAuthTokens } from '../../utils/authToken';
+import { getAccessToken, storeAuthTokens } from '@/utils/authToken';
 
 const initialState: AuthState = {
   user: null,

src/main.tsx

@@ -5,9 +5,9 @@ import { RouterProvider } from 'react-router-dom';
 import { ConfigProvider } from 'antd';
 import 'antd/dist/reset.css';
 import faIR from 'antd/locale/fa_IR';
-import { store } from './app/store';
+import { store } from '@/app/store';
-import { router } from './routes/router';
+import { router } from '@/routes/router';
-import { antdTheme } from './design/theme/antdTheme';
+import { antdTheme } from '@/design/theme/antdTheme';
 import './index.css';
 
 createRoot(document.getElementById('root')!).render(

src/pages/Billboards/Billboards.tsx

@@ -1,6 +1,6 @@
 import { Card, Typography } from 'antd';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 

src/pages/Home/Home.tsx

@@ -1,6 +1,6 @@
 import { Card, Typography } from 'antd';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 

src/pages/Login/Login.tsx

@@ -1,8 +1,8 @@
 import { Button, Card, Form, Input, Typography, message } from 'antd';
 import { useNavigate } from 'react-router-dom';
-import { authService } from '../../features/auth/authService';
+import { authService } from '@/features/auth/authService';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 

src/pages/Profile/Profile.tsx

@@ -1,6 +1,6 @@
 import { Card, Typography } from 'antd';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 

src/pages/VerifyOtp/VerifyOtp.tsx

@@ -1,11 +1,11 @@
 import { Button, Card, Form, Input, Typography, message, type InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAppDispatch } from '../../utils/hooks';
+import { useAppDispatch } from '@/utils/hooks';
-import { loginSuccess } from '../../features/auth/authSlice';
+import { loginSuccess } from '@/features/auth/authSlice';
-import { authService } from '../../features/auth/authService';
+import { authService } from '@/features/auth/authService';
-import { colors } from '../../design/tokens/colors';
+import { colors } from '@/design/tokens/colors';
-import { spacing } from '../../design/tokens/spacing';
+import { spacing } from '@/design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 

src/routes/router.tsx

@@ -1,11 +1,11 @@
 import { createBrowserRouter, Navigate } from 'react-router-dom';
-import App from '../App';
+import App from '@/App';
-import Login from '../pages/Login/Login';
+import Login from '@/pages/Login/Login';
-import VerifyOtp from '../pages/VerifyOtp/VerifyOtp';
+import VerifyOtp from '@/pages/VerifyOtp/VerifyOtp';
-import Home from '../pages/Home/Home';
+import Home from '@/pages/Home/Home';
-import Profile from '../pages/Profile/Profile';
+import Profile from '@/pages/Profile/Profile';
-import Billboards from '../pages/Billboards/Billboards';
+import Billboards from '@/pages/Billboards/Billboards';
-import ProtectedRoute from '../components/ProtectedRoute';
+import ProtectedRoute from '@/components/ProtectedRoute';
 
 export const router = createBrowserRouter([
   {

src/services/api.ts

@@ -1,11 +1,11 @@
 import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios';
-import { AUTH_SCOPE } from '../constants/auth';
+import { AUTH_SCOPE } from '@/constants/auth';
-import { env } from '../config/env';
+import { env } from '@/config/env';
-import { getAccessToken, getRefreshToken, storeAuthTokens, clearAuthTokens } from '../utils/authToken';
+import { getAccessToken, getRefreshToken, storeAuthTokens, clearAuthTokens } from '@/utils/authToken';
-import { logout } from '../utils/logout';
+import { logout } from '@/utils/logout';
-import { buildAuthUrl } from '../utils/authUrl';
+import { buildAuthUrl } from '@/utils/authUrl';
-import { createBasicAuthHeader } from '../config/env';
+import { createBasicAuthHeader } from '@/config/env';
-import type { TokenResponse } from '../types/auth';
+import type { TokenResponse } from '@/types/auth';
 
 const apiBaseUrl = env.apiBaseUrl;
 

src/services/authApi.ts

@@ -1,10 +1,10 @@
 import axios from 'axios';
-import { AUTH_SCOPE } from '../constants/auth';
+import { AUTH_SCOPE } from '@/constants/auth';
-import { createBasicAuthHeader } from '../config/env';
+import { createBasicAuthHeader } from '@/config/env';
-import { clearAuthTokens, storeAuthTokens } from '../utils/authToken';
+import { clearAuthTokens, storeAuthTokens } from '@/utils/authToken';
-import { normalizePhoneNumber, toE164PhoneNumber } from '../utils/phone';
+import { normalizePhoneNumber, toE164PhoneNumber } from '@/utils/phone';
-import { buildAuthUrl } from '../utils/authUrl';
+import { buildAuthUrl } from '@/utils/authUrl';
-import type { RequestOtpPayload, RequestOtpResponse, TokenResponse } from '../types/auth';
+import type { RequestOtpPayload, RequestOtpResponse, TokenResponse } from '@/types/auth';
 
 export const authApi = {
   requestOtp: async (phoneNumber: string): Promise<RequestOtpResponse> => {

src/types/index.ts

@@ -1 +1 @@
-export * from '../features/auth/authTypes';
+export * from '@/features/auth/authTypes';

src/utils/authInterceptor.ts

@@ -1,5 +1,5 @@
 import type { AxiosError } from 'axios';
-import api from '../services/api';
+import api from '@/services/api';
 
 export const attachAuthInterceptor = () => {
   api.interceptors.response.use(

src/utils/authUrl.ts

@@ -1,4 +1,4 @@
-import { env } from '../config/env';
+import { env } from '@/config/env';
 
 const normalizeBaseUrl = (value: string) => value.trim().replace(/\/+$/, '');
 const ensureLeadingSlash = (value: string) => (value.startsWith('/') ? value : `/${value}`);

src/utils/hooks.ts

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import type { AppDispatch, RootState } from '../app/store';
+import type { AppDispatch, RootState } from '@/app/store';
 
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();

src/utils/logout.ts

@@ -1,4 +1,4 @@
-import { clearAuthTokens } from './authToken';
+import { clearAuthTokens } from '@/utils/authToken';
 
 export const logout = () => {
   clearAuthTokens();

tsconfig.app.json

@@ -16,6 +16,11 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path aliases */
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
     /* Linting */
     "noUnusedLocals": true,
     "noUnusedParameters": true,

vite.config.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import babel from '@rolldown/plugin-babel'
@@ -8,4 +9,9 @@ export default defineConfig({
     react(),
     babel({ presets: [reactCompilerPreset()] })
   ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 })