Use @ alias for import

config.ts

@@ -10,7 +10,7 @@ enum LayoutType {
 
 const CONFIG = {
   appName: process.env.VITE_APP_NAME || 'Reforge',
-  enablePWA: process.env.VITE_ENABLE_PWA !== 'false',
+  enablePWA: process.env.VITE_ENABLE_PWA === 'true',
   theme: {
     accentColor: process.env.VITE_THEME_ACCENT_COLOR || '#18181b',
     sidebarLayout: process.env.VITE_THEME_SIDEBAR_LAYOUT || LayoutType.TOP,

package.json

@@ -43,7 +43,7 @@
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.16.0",
     "redux-persist": "^6.0.0",
-    "sonner": "^0.5.0",
+    "sonner": "^1.5.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.6",
     "vite": "^4.4.2",

src/App.tsx

@@ -1,6 +1,6 @@
 import { Toaster } from 'sonner';
 import { RouterProvider } from 'react-router-dom';
-import { browserRouter } from './routes/browserRouter';
+import { browserRouter } from '@/routes/browserRouter';
 
 function App() {
   return (

src/components/dashboard/StatCard.tsx → src/components/dashboard/statCard.tsx

@@ -1,7 +1,7 @@
 import { Card, Skeleton, Typography } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import CountUp from 'react-countup';
-import styles from './statCard.module.css';
+import styles from '@/components/dashboard/statCard.module.css';
 import React, { Fragment } from 'react';
 
 const { Text } = Typography;
@@ -27,7 +27,7 @@ const StatCard = ({
 
   const children = (
     <div style={{ cursor: link ? 'pointer' : 'default' }}>
-      <span className={`${styles.iconWrapper} text-primary text-opacity-80`}>
+      <span className={`${styles.iconWrapper} text-rfprimary text-opacity-80`}>
         {icon}
       </span>
       <div className={styles.statContent}>

src/components/layout/index.tsx

@@ -1,15 +1,15 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { webRoutes } from '../../routes/web';
+import { webRoutes } from '@/routes/web';
 import { Dropdown } from 'antd';
 import { ProLayout, ProLayoutProps } from '@ant-design/pro-components';
 import Icon, { LogoutOutlined } from '@ant-design/icons';
 import { useDispatch } from 'react-redux';
-import { logout } from '../../store/slices/adminSlice';
+import { logout } from '@/store/slices/adminSlice';
 import { memo } from 'react';
-import { sidebar } from './sidebar';
-import { apiRoutes } from '../../routes/api';
-import http from '../../lib/http';
-import { handleErrorResponse } from '../../lib/utils';
+import { sidebar } from '@/components/layout/sidebar';
+import { apiRoutes } from '@/routes/api';
+import http from '@/lib/http';
+import { handleErrorResponse } from '@/lib/utils';
 import { RiShieldUserFill } from 'react-icons/ri';
 
 const Layout = () => {
@@ -66,7 +66,8 @@ const Layout = () => {
         )}
         avatarProps={{
           icon: <Icon component={RiShieldUserFill} />,
-          className: 'bg-primary bg-opacity-20 text-primary text-opacity-90',
+          className:
+            'bg-rfprimary bg-opacity-20 text-rfprimary text-opacity-90',
           size: 'small',
           shape: 'square',
           title: 'Admin',

src/components/layout/PageContainer.tsx → src/components/layout/pageContainer.tsx

@@ -1,7 +1,7 @@
 import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { Breadcrumb, Spin } from 'antd';
-import useBreakpoint from '../hooks/breakpoint';
-import Loader from '../loader';
+import useBreakpoint from '@/hooks/breakpoint';
+import Loader from '@/components/loader';
 import type { BreadcrumbProps } from 'antd/es/breadcrumb/Breadcrumb';
 
 export interface BasePageContainerProps {

src/components/layout/Redirect.tsx → src/components/layout/redirect.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
-import { webRoutes } from '../../routes/web';
-import { RootState } from '../../store';
+import { webRoutes } from '@/routes/web';
+import { RootState } from '@/store';
 
 const Redirect = () => {
   const admin = useSelector((state: RootState) => state.admin);

src/components/layout/sidebar.tsx

@@ -1,4 +1,4 @@
-import { webRoutes } from '../../routes/web';
+import { webRoutes } from '@/routes/web';
 import { BiHomeAlt2 } from 'react-icons/bi';
 import Icon, { UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
 

src/components/loader/index.tsx

@@ -11,7 +11,7 @@ export interface LoaderProps {
 }
 
 const Loader = ({
-  text = 'LOADING',
+  text = 'Loading...',
   spinner = defaultSpinner,
 }: LoaderProps) => {
   return (

src/components/loader/progressBar.css

@@ -4,7 +4,7 @@
 }
 
 #nprogress .bar {
-  background: theme('colors.primary');
+  background: theme('colors.rfprimary');
 
   position: fixed;
   z-index: 1031;
@@ -22,7 +22,8 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px theme('colors.primary'), 0 0 5px theme('colors.primary');
+  box-shadow: 0 0 10px theme('colors.rfprimary'),
+    0 0 5px theme('colors.rfprimary');
   opacity: 1;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
@@ -45,8 +46,8 @@
   box-sizing: border-box;
 
   border: solid 2px transparent;
-  border-top-color: theme('colors.primary');
-  border-left-color: theme('colors.primary');
+  border-top-color: theme('colors.rfprimary');
+  border-left-color: theme('colors.rfprimary');
   border-radius: 50%;
 
   -webkit-animation: nprogress-spinner 400ms linear infinite;

src/components/loader/progressBar.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useEffect } from 'react';
 import NProgress from 'nprogress';
-import './progressBar.css';
+import '@/components/loader/progressBar.css';
 
 export interface ProgressBarProps {
   spinner?: boolean;

src/index.css

@@ -12,6 +12,11 @@
   -webkit-text-size-adjust: 100%;
 }
 
+body,
+p {
+  margin: 0;
+}
+
 .fade-in {
   opacity: 1;
   animation-name: fadeIn;
@@ -25,6 +30,12 @@
   animation: icon-spin 1s infinite linear;
 }
 
+.ant-pro-top-nav-header-logo > *:first-child,
+.ant-pro-sider-logo > a,
+.ant-pro-global-header-logo > a {
+  opacity: 60%;
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;

src/lib/http.tsx

@@ -1,7 +1,7 @@
 import { Store } from '@reduxjs/toolkit';
 import axios from 'axios';
-import { RootState } from '../store';
-import { logout } from '../store/slices/adminSlice';
+import { RootState } from '@/store';
+import { logout } from '@/store/slices/adminSlice';
 
 let store: Store;
 

src/main.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ConfigProvider } from 'antd';
-import { antdConfig } from './constants';
+import { antdConfig } from '@/constants';
 import { Provider } from 'react-redux';
 import { persistStore } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
-import Loader from './components/loader';
-import { store } from './store';
-import { injectStore } from './lib/http';
-import App from './App';
-import './index.css';
+import Loader from '@/components/loader';
+import { store } from '@/store';
+import { injectStore } from '@/lib/http';
+import App from '@/App';
+import '@/index.css';
 
 const persistor = persistStore(store);
 injectStore(store);

src/components/demo-pages/about.tsx → src/pages/aboutPage.tsx

@@ -1,10 +1,10 @@
 import { BreadcrumbProps } from 'antd';
-import BasePageContainer from '../layout/PageContainer';
-import { webRoutes } from '../../routes/web';
+import BasePageContainer from '@/components/layout/pageContainer';
+import { webRoutes } from '@/routes/web';
 import { Link } from 'react-router-dom';
 import { AiFillGithub, AiOutlineBug, AiOutlineHeart } from 'react-icons/ai';
 import { FaRegLightbulb } from 'react-icons/fa';
-import packageJson from '../../../package.json';
+import packageJson from '../../package.json';
 
 const breadcrumb: BreadcrumbProps = {
   items: [
@@ -19,15 +19,15 @@ const breadcrumb: BreadcrumbProps = {
   ],
 };
 
-const About = () => {
+const AboutPage = () => {
   const packageVersion = packageJson.version;
 
   return (
     <BasePageContainer breadcrumb={breadcrumb}>
       <div className="m-5">
         <article>
           <header className="mb-9 space-y-1">
-            <p className="font-display text-sm font-medium text-primary">
+            <p className="font-display text-sm font-medium text-rfprimary">
               v{packageVersion}
             </p>
             <h1 className="font-display text-3xl tracking-tight text-slate-900">
@@ -40,7 +40,7 @@ const About = () => {
               boilerplate.{' '}
             </p>
             <div className="my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
-              <div className="group relative rounded-xl border border-slate-200">
+              <div className="group relative rounded-xl border border-slate-200 border-solid">
                 <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
                 <div className="relative overflow-hidden rounded-xl p-6">
                   <AiFillGithub className="text-4xl opacity-90" />
@@ -49,7 +49,7 @@ const About = () => {
                       href="https://github.com/arifszn/reforge"
                       target="_blank"
                       rel="noreferrer"
-                      className="hover:text-primary"
+                      className="hover:text-rfprimary"
                     >
                       <span className="absolute -inset-px rounded-xl" />
                       GitHub
@@ -60,7 +60,7 @@ const About = () => {
                   </p>
                 </div>
               </div>
-              <div className="group relative rounded-xl border border-slate-200">
+              <div className="group relative rounded-xl border border-slate-200 border-solid">
                 <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
                 <div className="relative overflow-hidden rounded-xl p-6">
                   <AiOutlineBug className="text-4xl opacity-90" />
@@ -69,7 +69,7 @@ const About = () => {
                       href="https://github.com/arifszn/reforge/issues"
                       target="_blank"
                       rel="noreferrer"
-                      className="hover:text-primary"
+                      className="hover:text-rfprimary"
                     >
                       <span className="absolute -inset-px rounded-xl" />
                       Report Bug
@@ -80,7 +80,7 @@ const About = () => {
                   </p>
                 </div>
               </div>
-              <div className="group relative rounded-xl border border-slate-200">
+              <div className="group relative rounded-xl border border-slate-200 border-solid">
                 <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
                 <div className="relative overflow-hidden rounded-xl p-6">
                   <FaRegLightbulb className="text-4xl opacity-90" />
@@ -89,7 +89,7 @@ const About = () => {
                       href="https://github.com/arifszn/reforge/discussions/categories/ideas"
                       target="_blank"
                       rel="noreferrer"
-                      className="hover:text-primary"
+                      className="hover:text-rfprimary"
                     >
                       <span className="absolute -inset-px rounded-xl" />
                       Request Feature
@@ -100,7 +100,7 @@ const About = () => {
                   </p>
                 </div>
               </div>
-              <div className="group relative rounded-xl border border-slate-200">
+              <div className="group relative rounded-xl border border-slate-200 border-solid">
                 <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
                 <div className="relative overflow-hidden rounded-xl p-6">
                   <AiOutlineHeart className="text-4xl opacity-90" />
@@ -109,7 +109,7 @@ const About = () => {
                       href="https://github.com/arifszn/reforge/blob/main/CONTRIBUTING.md"
                       target="_blank"
                       rel="noreferrer"
-                      className="hover:text-primary"
+                      className="hover:text-rfprimary"
                     >
                       <span className="absolute -inset-px rounded-xl" />
                       Contribute
@@ -128,4 +128,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default AboutPage;

src/components/auth/Login.tsx → src/pages/auth/loginPage.tsx

@@ -1,21 +1,21 @@
 import { Button, Form, Input } from 'antd';
 import { Fragment, useEffect, useState } from 'react';
-import { apiRoutes } from '../../routes/api';
+import { apiRoutes } from '@/routes/api';
 import { useDispatch, useSelector } from 'react-redux';
-import { login } from '../../store/slices/adminSlice';
-import { RootState } from '../../store';
+import { login } from '@/store/slices/adminSlice';
+import { RootState } from '@/store';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { webRoutes } from '../../routes/web';
-import { handleErrorResponse, setPageTitle } from '../../lib/utils';
-import { Admin } from '../../interfaces/models/admin';
-import { defaultHttp } from '../../lib/http';
+import { webRoutes } from '@/routes/web';
+import { handleErrorResponse, setPageTitle } from '@/lib/utils';
+import { Admin } from '@/interfaces/admin';
+import { defaultHttp } from '@/lib/http';
 
 interface FormValues {
   email: string;
   password: string;
 }
 
-const Login = () => {
+const LoginPage = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
@@ -57,7 +57,7 @@ const Login = () => {
   return (
     <Fragment>
       <div className="flex flex-col space-y-1.5">
-        <h3 className="font-semibold tracking-tight text-2xl opacity-60">
+        <h3 className="font-semibold tracking-tight text-2xl opacity-60 my-0">
           Admin Login
         </h3>
         <p className="text-sm text-gray-400">
@@ -143,4 +143,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default LoginPage;