Fix CORS configuration to allow localhost:3000 for development

Author: Dang

VehicleShowroom/package.json

@@ -31,7 +31,7 @@
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-is": "^18.3.1",
-    "react-quill": "^2.0.0",
+    "react-quill": "^0.0.2",
     "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "sanitize-html": "^2.17.0",
@@ -41,10 +41,10 @@
     "web-vitals": "^4.2.2"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "test:ci": "craco test --coverage --watchAll=false --passWithNoTests",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "test:ci": "react-scripts test --coverage --watchAll=false --passWithNoTests",
     "lint": "eslint src --ext .js,.jsx --max-warnings 0",
     "lint:fix": "eslint src --ext .js,.jsx --fix",
     "eject": "react-scripts eject",
@@ -74,11 +74,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@craco/craco": "^5.9.0",
     "anymatch": "^3.1.3",
     "chokidar": "^3.6.0",
     "gh-pages": "^6.1.1",
-    "micromatch": "^4.0.7",
-    "@craco/craco": "^7.1.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+    "micromatch": "^4.0.7"
   }
 }

VehicleShowroom/src/App.js

@@ -5,15 +5,13 @@ import { useState, Suspense, lazy } from 'react';
 
 import initialTheme from './theme/theme';
 import useWebVitals from './hooks/useWebVitals';
+import { UserProvider } from 'contexts/UserContext';
 
 // 🧩 Layouts - Lazy loaded for better performance
 const AuthLayout = lazy(() => import('./layouts/auth'));
 const AdminLayout = lazy(() => import('./layouts/admin'));
 const UserLayout = lazy(() => import('layouts/user'));
 
-// 🧩 Providers
-import { UserProvider } from 'contexts/UserContext';
-
 // Loading component
 const LoadingSpinner = () => (
   <div style={{ 

VehicleShowroom/src/components/images/ImagePreview.js

@@ -3,15 +3,13 @@ import {
   Modal,
   ModalOverlay,
   ModalContent,
-  ModalCloseButton,
   ModalBody,
   Image,
   IconButton,
   Flex,
   Box,
   HStack,
   useColorModeValue,
-  Divider,
 } from '@chakra-ui/react';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 

VehicleShowroom/src/components/navbar/NavbarUser.js

@@ -23,7 +23,6 @@ function NavbarUser({ toggleCategory, isCategoryOpen }) {
   // 🎨 Màu chữ và icon phụ thuộc location
   const textColor = isHome ? 'white' : 'black';
   const iconColor = isHome ? 'white' : 'black';
-  const hoverBg = isHome ? 'whiteAlpha.300' : 'black';
 
   return (
     <>

VehicleShowroom/src/hooks/useWebVitals.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
+import { onCLS, onINP, onFCP, onLCP, onTTFB } from 'web-vitals';
 
 function reportWebVitals(metric) {
   console.log(metric);
@@ -18,11 +18,11 @@ function reportWebVitals(metric) {
 
 export function useWebVitals() {
   useEffect(() => {
-    getCLS(reportWebVitals);
-    getFID(reportWebVitals);
-    getFCP(reportWebVitals);
-    getLCP(reportWebVitals);
-    getTTFB(reportWebVitals);
+    onCLS(reportWebVitals);
+    onINP(reportWebVitals);
+    onFCP(reportWebVitals);
+    onLCP(reportWebVitals);
+    onTTFB(reportWebVitals);
   }, []);
 }
 

VehicleShowroom/src/services/AuthService.js

@@ -77,7 +77,7 @@ const AuthService = {
   // ---------------------------------
   login: async (data, keepLoggedIn = false) => {
     const res = await ApiClient.post(ApiUrl.AUTH.LOGIN, data);
-    const { token, refreshToken, user } = res.data;
+    const { token, refreshToken } = res.data;
 
     AuthService.setKeepLoggedIn(keepLoggedIn);
 

VehicleShowroom/src/views/admin/customer/index.jsx

@@ -6,7 +6,6 @@ import List from './components/List';
 import Columns from './components/Columns';
 import { useAppToast } from 'utils/ToastHelper';
 import Header from './components/Header';
-import { LoadingState } from 'components/common/LoadingState';
 
 function CustomerManagement() {
   const textColor = useColorModeValue('secondaryGray.900', 'white');
@@ -30,7 +29,7 @@ function CustomerManagement() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [toast]);
 
   useEffect(() => {
     loadUsers();

VehicleShowroom/src/views/admin/dashboard/index.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo } from 'react';
 import {
   Box,
   SimpleGrid,
-  Spinner,
   Flex,
   Text,
   useColorModeValue,
@@ -88,7 +87,7 @@ export default function DashboardPage() {
         tooltip: { y: { formatter: (val) => formatUSD(val) } },
       },
     };
-  }, [revenue]);
+  }, [revenue, textColorSecondary]);
 
   // 🧠 Customer chart data
   const customerChart = useMemo(() => {
@@ -109,7 +108,7 @@ export default function DashboardPage() {
         grid: { borderColor: '#E2E8F0', strokeDashArray: 4 },
       },
     };
-  }, [customer]);
+  }, [customer, textColorSecondary]);
 
   return (
     <>

VehicleShowroom/src/views/admin/employee/index.jsx

@@ -6,7 +6,6 @@ import List from './components/List';
 import Columns from './components/Columns';
 import { useAppToast } from 'utils/ToastHelper';
 import Header from './components/Header';
-import { LoadingState } from 'components/common/LoadingState';
 
 function EmployeeManagement() {
   const textColor = useColorModeValue('secondaryGray.900', 'white');
@@ -30,14 +29,14 @@ function EmployeeManagement() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [toast]);
 
   useEffect(() => {
     loadEmployees();
   }, [loadEmployees]);
 
   // ✅ Toggle active/inactive
-  const handleToggleActive = async (id, current) => {
+  const handleToggleActive = useCallback(async (id, current) => {
     try {
       setLoading(true);
       await UserService.toggleActive(id, !current);
@@ -48,7 +47,7 @@ function EmployeeManagement() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [toast, loadEmployees]);
 
   // ✅ Cấu hình cột
   const columns = useMemo(

VehicleShowroom/src/views/admin/serviceOrder/index.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { useColorModeValue, Card, useDisclosure } from '@chakra-ui/react';
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { useAppToast } from 'utils/ToastHelper';
-import { LoadingState } from 'components/common/LoadingState';
 
 import ServiceOrderService from 'services/ServiceOrderService';
 import UserService from 'services/UserService';
@@ -84,22 +83,22 @@ function ServiceOrderManagement() {
         setLoading(false);
       }
     },
-    [statusFilter],
+    [statusFilter, toast],
   );
 
   useEffect(() => {
     loadOrders(page);
-  }, [page, statusFilter]);
+  }, [loadOrders, page]);
 
-  const handleViewDetail = (order) => {
+  const handleViewDetail = useCallback((order) => {
     setSelectedOrder(order);
     onDetailOpen();
-  };
+  }, [onDetailOpen]);
 
-  const handleStatusChange = (order) => {
+  const handleStatusChange = useCallback((order) => {
     setUpdatingOrder(order);
     onStatusOpen();
-  };
+  }, [onStatusOpen]);
 
   const columns = useMemo(
     () =>
@@ -109,7 +108,7 @@ function ServiceOrderManagement() {
         statusFilter,
         setStatusFilter,
       }),
-    [statusFilter],
+    [handleViewDetail, handleStatusChange, statusFilter],
   );
 
   const table = useReactTable({