feat: Update Wedding Guest Forms with Create-Project Styling

- Copy CSS and styling patterns from create-project to add-wedding-guest page
- Update edit-wedding-guest to match add-wedding-guest structure and design
- Add form-group-header with icons (FileText, Users, Gift) for visual hierarchy
- Implement Bootstrap grid layout (col-lg-*, row, mb-3) for consistent spacing
- Add LoadingButton component with advanced loading states
- Fix dropdown lists background-color for dark theme compatibility
- Remove className='form-control' from Ant Design Select components to prevent conflicts
- Add comprehensive dark theme CSS support for dropdowns and form elements
- Update form structure to use card/card-body instead of Ant Design Card
- Implement consistent button styling with create-project-btn and btn-cancel-project classes
- Add transparent background for wedding guest search input elements
- Update status options: Confirmed, Pending, Cancelled, Attended with emojis

src/App.css

@@ -0,0 +1,180 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+}
+
+.container-fluid {
+  padding: 20px;
+}
+
+/* Dark mode support */
+.dark-mode {
+  background-color: #1f1f1f;
+  color: #ffffff;
+}
+
+.dark-mode .ant-layout {
+  background-color: #1f1f1f;
+}
+
+.dark-mode .ant-layout-content {
+  background-color: #1f1f1f;
+}
+
+/* Calendar custom styles */
+.fc {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .fc {
+  background-color: #2d2d2d;
+  color: #ffffff;
+}
+
+.dark-mode .fc-theme-standard td,
+.dark-mode .fc-theme-standard th {
+  border-color: #404040;
+}
+
+.dark-mode .fc-theme-standard .fc-scrollgrid {
+  border-color: #404040;
+}
+
+.dark-mode .fc-col-header-cell {
+  background-color: #3d3d3d;
+}
+
+.dark-mode .fc-daygrid-day {
+  background-color: #2d2d2d;
+}
+
+.dark-mode .fc-daygrid-day:hover {
+  background-color: #404040;
+}
+
+/* Project tracker styles */
+.project-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .project-card {
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+.progress-bar {
+  border-radius: 4px;
+}
+
+.status-badge {
+  border-radius: 12px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-active {
+  background-color: #52c41a;
+  color: white;
+}
+
+.status-pending {
+  background-color: #faad14;
+  color: white;
+}
+
+.status-completed {
+  background-color: #1890ff;
+  color: white;
+}
+
+.status-cancelled {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+/* Navigation styles */
+.navbar-brand {
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.nav-link {
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+  color: #1890ff !important;
+}
+
+.nav-link.active {
+  color: #1890ff !important;
+  font-weight: 600;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container-fluid {
+    padding: 10px;
+  }
+  
+  .project-card {
+    margin-bottom: 12px;
+  }
+  
+  .fc {
+    font-size: 14px;
+  }
+}
+
+/* Loading animation */
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.loading-spinner .ant-spin {
+  font-size: 24px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.dark-mode ::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.dark-mode ::-webkit-scrollbar-thumb {
+  background: #555;
+}
+
+.dark-mode ::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}

src/App.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Calendar from './pages/Calendar';
+import ProjectTracker from './pages/ProjectTracker';
+import Navigation from './components/Navigation';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'antd/dist/reset.css';
+import './App.css';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Navigate to="/calendar" replace />} />
+          <Route path="/calendar" element={<Calendar />} />
+          <Route path="/projects" element={<ProjectTracker />} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

src/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Calendar from './pages/Calendar';
+import ProjectTracker from './pages/ProjectTracker';
+import Navigation from './components/Navigation';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'antd/dist/reset.css';
+import './App.css';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Navigate to="/calendar" replace />} />
+          <Route path="/calendar" element={<Calendar />} />
+          <Route path="/projects" element={<ProjectTracker />} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

src/Router/all_routes.jsx

@@ -1,6 +1,8 @@
 export const all_routes = {
   dashboard: "/",
   productlist: "/product-list",
+  productlist2: "/product-list-2",
+  productlist3: "/product-list-3",
   addproduct: "/add-product",
   salesdashboard: "/sales-dashboard",
   brandlist: "/brand-list",
@@ -192,4 +194,6 @@ export const all_routes = {
   warehouses: "/warehouse",
   coupons:"/coupons",
   weddingGuestList: "/wedding-guest-list",
+  addWeddingGuest: "/add-wedding-guest",
+  editWeddingGuest: "/edit-wedding-guest/:id",
 };

src/Router/router.link.jsx

@@ -199,6 +199,10 @@ import ProjectTracker from "../feature-module/projects/projecttracker";
 import CreateProject from "../feature-module/projects/createproject";
 import EnhancedLoaders from "../feature-module/uiinterface/enhanced-loaders";
 import WeddingGuestList from "../feature-module/inventory/weddingGuestList";
+import EditWeddingGuest from "../feature-module/inventory/editWeddingGuest";
+import AddWeddingGuest from "../feature-module/inventory/addWeddingGuest";
+import ProductList2 from "../feature-module/inventory/productlist2";
+import ProductList3 from "../feature-module/inventory/productlist3";
 import { all_routes } from "./all_routes";
 export const publicRoutes = [
   {
@@ -215,6 +219,20 @@ export const publicRoutes = [
     element: <ProductList />,
     route: Route,
   },
+  {
+    id: 2.1,
+    path: routes.productlist2,
+    name: "products2",
+    element: <ProductList2 />,
+    route: Route,
+  },
+  {
+    id: 2.2,
+    path: routes.productlist3,
+    name: "products3",
+    element: <ProductList3 />,
+    route: Route,
+  },
   {
     id: 3,
     path: routes.addproduct,
@@ -1435,6 +1453,20 @@ export const publicRoutes = [
     element: <WeddingGuestList />,
     route: Route,
   },
+  {
+    id: 117.3,
+    path: routes.editWeddingGuest,
+    name: "editWeddingGuest",
+    element: <EditWeddingGuest />,
+    route: Route,
+  },
+  {
+    id: 117.4,
+    path: routes.addWeddingGuest,
+    name: "addWeddingGuest",
+    element: <AddWeddingGuest />,
+    route: Route,
+  },
   {
     id: 118,
     path: "/",

src/components/Navigation.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Calendar, Target } from 'feather-icons-react';
+
+const Navigation = () => {
+  const location = useLocation();
+
+  const navItems = [
+    {
+      path: '/calendar',
+      name: 'Calendar',
+      icon: <Calendar size={20} />,
+      description: 'Quản lý lịch trình và sự kiện'
+    },
+    {
+      path: '/projects',
+      name: 'Project Tracker',
+      icon: <Target size={20} />,
+      description: 'Theo dõi tiến độ dự án'
+    }
+  ];
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark" style={{
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
+      padding: '1rem 0'
+    }}>
+      <div className="container">
+        <Link className="navbar-brand d-flex align-items-center" to="/" style={{
+          fontSize: '1.5rem',
+          fontWeight: '700',
+          color: 'white',
+          textDecoration: 'none'
+        }}>
+          <div style={{
+            background: 'rgba(255,255,255,0.2)',
+            borderRadius: '10px',
+            padding: '8px 12px',
+            marginRight: '12px',
+            backdropFilter: 'blur(10px)'
+          }}>
+            📅
+          </div>
+          Calendar & Project Hub
+        </Link>
+
+        <div className="navbar-nav ms-auto d-flex flex-row gap-3">
+          {navItems.map((item) => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`nav-link d-flex align-items-center ${
+                location.pathname === item.path ? 'active' : ''
+              }`}
+              style={{
+                color: 'white',
+                textDecoration: 'none',
+                padding: '10px 20px',
+                borderRadius: '25px',
+                background: location.pathname === item.path 
+                  ? 'rgba(255,255,255,0.2)' 
+                  : 'transparent',
+                backdropFilter: location.pathname === item.path 
+                  ? 'blur(10px)' 
+                  : 'none',
+                border: location.pathname === item.path 
+                  ? '1px solid rgba(255,255,255,0.3)' 
+                  : '1px solid transparent',
+                transition: 'all 0.3s ease',
+                fontWeight: '500'
+              }}
+              onMouseEnter={(e) => {
+                if (location.pathname !== item.path) {
+                  e.target.style.background = 'rgba(255,255,255,0.1)';
+                  e.target.style.backdropFilter = 'blur(10px)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (location.pathname !== item.path) {
+                  e.target.style.background = 'transparent';
+                  e.target.style.backdropFilter = 'none';
+                }
+              }}
+            >
+              <span className="me-2">{item.icon}</span>
+              <div className="d-flex flex-column">
+                <span style={{ fontSize: '14px', fontWeight: '600' }}>
+                  {item.name}
+                </span>
+                <small style={{ 
+                  fontSize: '11px', 
+                  opacity: '0.8',
+                  display: location.pathname === item.path ? 'block' : 'none'
+                }}>
+                  {item.description}
+                </small>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/components/Navigation.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Calendar, Target, Moon, Sun } from 'feather-icons-react';
+
+const Navigation: React.FC = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  const location = useLocation();
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    document.body.classList.toggle('dark-mode');
+  };
+
+  const isActive = (path: string) => {
+    return location.pathname === path;
+  };
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark" style={{
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
+      padding: '1rem 0'
+    }}>
+      <div className="container">
+        <Link className="navbar-brand d-flex align-items-center" to="/" style={{
+          fontSize: '1.5rem',
+          fontWeight: '700',
+          color: 'white',
+          textDecoration: 'none'
+        }}>
+          <div style={{
+            background: 'rgba(255,255,255,0.2)',
+            borderRadius: '10px',
+            padding: '8px 12px',
+            marginRight: '12px',
+            backdropFilter: 'blur(10px)'
+          }}>
+            📅
+          </div>
+          Calendar & Project Hub
+        </Link>
+
+        <div className="navbar-nav ms-auto d-flex flex-row gap-3">
+          <Link
+            to="/calendar"
+            className={`nav-link d-flex align-items-center ${
+              isActive('/calendar') ? 'active' : ''
+            }`}
+            style={{
+              color: 'white',
+              textDecoration: 'none',
+              padding: '10px 20px',
+              borderRadius: '25px',
+              background: isActive('/calendar')
+                ? 'rgba(255,255,255,0.2)'
+                : 'transparent',
+              backdropFilter: isActive('/calendar')
+                ? 'blur(10px)'
+                : 'none',
+              border: isActive('/calendar')
+                ? '1px solid rgba(255,255,255,0.3)'
+                : '1px solid transparent',
+              transition: 'all 0.3s ease',
+              fontWeight: '500'
+            }}
+          >
+            <Calendar size={20} className="me-2" />
+            <span>Calendar</span>
+          </Link>
+
+          <Link
+            to="/projects"
+            className={`nav-link d-flex align-items-center ${
+              isActive('/projects') ? 'active' : ''
+            }`}
+            style={{
+              color: 'white',
+              textDecoration: 'none',
+              padding: '10px 20px',
+              borderRadius: '25px',
+              background: isActive('/projects')
+                ? 'rgba(255,255,255,0.2)'
+                : 'transparent',
+              backdropFilter: isActive('/projects')
+                ? 'blur(10px)'
+                : 'none',
+              border: isActive('/projects')
+                ? '1px solid rgba(255,255,255,0.3)'
+                : '1px solid transparent',
+              transition: 'all 0.3s ease',
+              fontWeight: '500'
+            }}
+          >
+            <Target size={20} className="me-2" />
+            <span>Projects</span>
+          </Link>
+
+          <button
+            className="btn btn-outline-light"
+            onClick={toggleDarkMode}
+            title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+            style={{
+              borderRadius: '25px',
+              padding: '10px 15px',
+              border: '1px solid rgba(255,255,255,0.3)',
+              background: 'rgba(255,255,255,0.1)',
+              backdropFilter: 'blur(10px)'
+            }}
+          >
+            {darkMode ? <Sun size={18} /> : <Moon size={18} />}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/core/json/siderbar_data.jsx

@@ -62,9 +62,11 @@ export const SidebarData = [
         submenuItems: [
            { label: "Tiến độ dự án", link: "/project-tracker",icon:  <Icon.Layers />,showSubRoute: false},
           { label: "Sản phẩm", link: "/product-list", icon:<Icon.Box />,showSubRoute: false,submenu: false },
+          { label: "Nhập kho", link: "/product-list-2", icon:<Icon.Package />,showSubRoute: false,submenu: false },
+          { label: "Tồn kho", link: "/product-list-3", icon:<Icon.Archive />,showSubRoute: false,submenu: false },
           { label: "Create Product", link: "/add-product", icon:  <Icon.PlusSquare />,showSubRoute: false, submenu: false },
-          { label: "Expired Products", link: "/expired-products", icon:  <Icon.Codesandbox  />,showSubRoute: false,submenu: false },
-          { label: "Low Stocks", link: "/low-stocks", icon: <Icon.TrendingDown  />,showSubRoute: false,submenu: false },
+          { label: "Sản phẩm hết hạn", link: "/expired-products", icon:  <Icon.Codesandbox  />,showSubRoute: false,submenu: false },
+          { label: "Hàng tồn kho", link: "/low-stocks", icon: <Icon.TrendingDown  />,showSubRoute: false,submenu: false },
           { label: "Danh mục", link: "/category-list", icon:  <Icon.Codepen />,showSubRoute: false,submenu: false },
           { label: "Sub Category", link: "/sub-categories", icon:  <Icon.Speaker  />,showSubRoute: false,submenu: false },
           { label: "Thương hiệu", link: "/brand-list", icon:  <Icon.Tag />,showSubRoute: false,submenu: false },

src/feature-module/Application/calendar.jsx

@@ -1,13 +1,15 @@
 /* eslint-disable no-dupe-keys */
 /* eslint-disable no-const-assign */
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
+import { Draggable } from "@fullcalendar/interaction";
 // import "../../assets/plugins/fullcalendar/fullcalendar.min.css";
 import "../../style/css/fullcalendar.min.css";
+import "../../style/css/calendar-custom.css";
 // import FullCalendar from '@fullcalendar/react/dist/main.esm.js';
 
 import Select from "react-select";
@@ -25,36 +27,128 @@ const Calendar = () => {
     [category_color, setcategory_color] = useState(""),
     [calenderevent, setcalenderevent] = useState(""),
     [weekendsVisible, setweekendsVisible] = useState(true),
-    [currentEvents, setscurrentEvents] = useState([]),
-    defaultEvents = [
-      {
-        title: "Event Name 4",
-        start: Date.now() + 148000000,
-        className: "bg-purple",
-      },
-      {
-        title: "Test Event 1",
-        start: Date.now(),
-        end: Date.now(),
-        className: "bg-success",
-      },
-      {
-        title: "Test Event 2",
-        start: Date.now() + 168000000,
-        className: "bg-info",
-      },
-      {
-        title: "Test Event 3",
-        start: Date.now() + 338000000,
-        className: "bg-primary",
-      },
-    ];
+    [currentEvents, setscurrentEvents] = useState([]);
+
+  const calendarRef = useRef(null);
+
+  // State to store dropped events temporarily
+  const [droppedEvents, setDroppedEvents] = useState([]);
+
+  // Combined events state for calendar display - using current dates
+  const today = new Date();
+  const [calendarEvents, setCalendarEvents] = useState([
+    {
+      id: 'default-1',
+      title: "🎯 Existing Meeting",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0), // Today 10:00 AM
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),   // Today 11:00 AM
+      className: "bg-primary",
+    },
+    {
+      id: 'default-2',
+      title: "📈 Weekly Review",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0), // Tomorrow 2:00 PM
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),  // Tomorrow 3:30 PM
+      className: "bg-success",
+    },
+    {
+      id: 'default-3',
+      title: "🚀 Product Demo",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2, 9, 0),  // Day after tomorrow 9:00 AM
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2, 10, 0),   // Day after tomorrow 10:00 AM
+      className: "bg-info",
+    },
+    {
+      id: 'default-4',
+      title: "🎨 Design Review",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 16, 0), // 3 days from now 4:00 PM
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),   // 3 days from now 5:00 PM
+      className: "bg-warning",
+    },
+  ]);
+  // Add ref to prevent multiple initialization
+  const initializedRef = React.useRef(false);
+
   useEffect(() => {
+    // Prevent multiple initialization
+    if (initializedRef.current) {
+      console.log("🚫 Calendar already initialized, skipping");
+      return;
+    }
+
     let elements = Array.from(
       document.getElementsByClassName("react-datepicker-wrapper")
     );
     elements.map((element) => element.classList.add("width-100"));
-  }, []);
+
+    // Initialize external draggable events with enhanced duplicate prevention
+    const draggableEl = document.getElementById("calendar-events");
+    if (draggableEl) {
+      console.log("🚀 Initializing calendar draggable events");
+
+      new Draggable(draggableEl, {
+        itemSelector: ".calendar-events",
+        eventData: function(eventEl) {
+          const title = eventEl.innerText.trim();
+          const className = eventEl.getAttribute("data-class");
+          return {
+            title: title,
+            className: className,
+            duration: "01:00" // 1 hour default duration
+          };
+        },
+        longPressDelay: 0,
+        touchTimeoutDelay: 0
+      });
+
+      // Store reference to currently dragging element
+      let currentDragElement = null;
+
+      // Listen for drag start from external elements
+      const handleDragStart = (e) => {
+        const target = e.target.closest('.calendar-events');
+        if (target) {
+          currentDragElement = target;
+          // Hide the original item when dragging starts
+          setTimeout(() => {
+            if (currentDragElement) {
+              currentDragElement.classList.add('dragging-hidden');
+              console.log("🎯 Hiding dragged element:", target.innerText.trim());
+            }
+          }, 10); // Small delay to let drag start
+        }
+      };
+
+      // Listen for drag end
+      const handleDragEnd = (e) => {
+        if (currentDragElement) {
+          currentDragElement.classList.remove('dragging-hidden');
+          console.log("🎯 Showing dragged element back");
+          currentDragElement = null;
+        }
+      };
+
+      draggableEl.addEventListener('dragstart', handleDragStart);
+      document.addEventListener('dragend', handleDragEnd);
+
+      // Mark as initialized
+      initializedRef.current = true;
+      console.log("✅ Calendar draggable events initialized successfully");
+
+      // Cleanup function
+      return () => {
+        draggableEl.removeEventListener('dragstart', handleDragStart);
+        document.removeEventListener('dragend', handleDragEnd);
+        initializedRef.current = false;
+        console.log("🧹 Calendar drag listeners cleaned up");
+      };
+    }
+  }, []); // Empty dependency array for one-time initialization
+
+  // Debug useEffect to track calendarEvents changes - DISABLED to prevent re-renders
+  // useEffect(() => {
+  //   console.log("🔥 calendarEvents changed:", calendarEvents.length, calendarEvents);
+  // }, [calendarEvents]);
 
   const handleChange = (date) => {
     setDate(date);
@@ -85,6 +179,71 @@ const Calendar = () => {
     setisnewevent(true);
     setaddneweventobj(selectInfo);
   };
+
+  // Add ref to track processing state more reliably
+  const processingRef = React.useRef(false);
+  const lastDropTime = React.useRef(0);
+
+  const handleEventReceive = useCallback((info) => {
+    const now = Date.now();
+    const timeSinceLastDrop = now - lastDropTime.current;
+
+    // Handle external drag and drop with enhanced duplicate prevention
+    console.log("🔥 handleEventReceive called - Event:", info.event.title);
+
+    // Prevent duplicate processing within 300ms
+    if (processingRef.current || timeSinceLastDrop < 300) {
+      console.log("🚫 Duplicate drop prevented:", {
+        processing: processingRef.current,
+        timeSinceLastDrop
+      });
+      info.revert();
+      return;
+    }
+
+    processingRef.current = true;
+    lastDropTime.current = now;
+
+    // Prevent default behavior
+    info.revert();
+
+    // Create event object with unique ID
+    const uniqueId = `dropped-${now}-${Math.random().toString(36).substr(2, 9)}`;
+    const newEvent = {
+      id: uniqueId,
+      title: info.event.title,
+      start: info.event.start,
+      end: info.event.end || new Date(info.event.start.getTime() + 60 * 60 * 1000),
+      className: info.event.classNames[0] || 'bg-primary',
+      droppedAt: new Date().toLocaleString(),
+      source: 'external'
+    };
+
+    console.log("✅ Creating new event:", uniqueId);
+
+    // Update calendar events
+    setCalendarEvents(prev => [...prev, newEvent]);
+
+    // Add to dropped events list
+    setDroppedEvents(prev => [...prev, newEvent]);
+
+    // Handle "Remove after drop" option
+    const removeAfterDrop = document.getElementById("drop-remove")?.checked;
+    if (removeAfterDrop && info.draggedEl) {
+      info.draggedEl.remove();
+      console.log("🗑️ Original event removed from sidebar");
+    }
+
+    // Reset processing flag
+    setTimeout(() => {
+      processingRef.current = false;
+    }, 300);
+  }, []); // Remove dependencies to prevent unnecessary re-creation
+
+  const handleEventDrop = (info) => {
+    // Handle internal event drag and drop
+    console.log("Event dropped:", info.event);
+  };
   const addnewevent = () => {
     let calendarApi = addneweventobj.view.calendar;
 
@@ -116,13 +275,13 @@ const Calendar = () => {
     setiseditdelete(false);
   };
   const clickupdateevent = () => {
-    const newArray = defaultEvents;
+    const newArray = [...calendarEvents];
     for (let i = 0; i < newArray.length; i++) {
       if (newArray[i].id === parseInt(calenderevent.id)) {
         newArray[i].title = event_title;
       }
     }
-    defaultEvents = newArray;
+    setCalendarEvents(newArray);
     setiseditdelete(false);
   };
 
@@ -144,74 +303,167 @@ const Calendar = () => {
 
   return (
     <>
-      <div className="page-wrapper">
+      <div className="page-wrapper calendar-page-wrapper">
         <div className="content">
-          <div className="page-header">
+          <div className="calendar-page-header">
             <div className="row align-items-center w-100">
-              <div className="col-lg-10 col-sm-12">
-                <h3 className="page-title">Calendar</h3>
+              <div className="col-lg-8 col-sm-12">
+                <h3 className="page-title">📅 Beautiful Calendar</h3>
               </div>
-              <div className="col-lg-2 col-sm-12">
+              <div className="col-lg-4 col-sm-12 text-end">
                 <a
-                  to="#"
-                  className="btn btn-primary"
+                  href="#"
+                  className="calendar-create-btn"
                   data-bs-toggle="modal"
                   data-bs-target="#add_event"
                 >
-                  Create Event
+                  Thêm sự kiện
                 </a>
               </div>
             </div>
           </div>
           <div className="row">
             <div className="col-lg-3 col-md-4">
-              <h4 className="card-title">Drag &amp; Drop Event</h4>
-              <div id="calendar-events" className="mb-3">
-                <div className="calendar-events" data-class="bg-info">
-                  <i className="fas fa-circle text-info" /> My Event One
+              <div className="calendar-sidebar">
+                <h4 className="card-title">🎯 Drag & Drop Events</h4>
+                <div id="calendar-events" className="mb-3">
+                  <div className="calendar-events" data-class="bg-danger">
+                    <i className="fas fa-circle" /> 👥 Họp
+                  </div>
+                  <div className="calendar-events" data-class="bg-success">
+                    <i className="fas fa-circle" /> ⚽ Bóng đá
+                  </div>
+                  <div className="calendar-events" data-class="bg-danger">
+                    <i className="fas fa-circle" /> 🔑 Quan trọng
+                  </div>
+                  <div className="calendar-events" data-class="bg-success">
+                    <i className="fas fa-circle" /> 🎨 Sáng tạo 
+                  </div>
+                  <div className="calendar-events" data-class="bg-info">
+                    <i className="fas fa-circle" /> 🧑‍💼 Đi làm
+                  </div>
+                  <div className="calendar-events" data-class="bg-secondary">
+                    <i className="fas fa-circle" /> 🍽️ Ăn trưa 
+                  </div>
+                  <div className="calendar-events" data-class="bg-purple">
+                    <i className="fas fa-circle" /> 📚 Training Session
+                  </div>
+                  <div className="calendar-events" data-class="bg-success">
+                    <i className="fas fa-circle" /> 🏃 Gym
+                  </div>
+                  <div className="calendar-events" data-class="bg-info">
+                    <i className="fas fa-circle" /> 🏸 Cầu lông
+                  </div>
+                  <div className="calendar-events" data-class="bg-primary">
+                    <i className="fas fa-circle" /> ☕ Cafe
+                  </div>
                 </div>
-                <div className="calendar-events" data-class="bg-success">
-                  <i className="fas fa-circle text-success" /> My Event Two
-                </div>
-                <div className="calendar-events" data-class="bg-danger">
-                  <i className="fas fa-circle text-danger" /> My Event Three
-                </div>
-                <div className="calendar-events" data-class="bg-warning">
-                  <i className="fas fa-circle text-warning" /> My Event Four
+                <div className="checkbox mb-3">
+                  <input id="drop-remove" className="me-1" type="checkbox" />
+                  <label htmlFor="drop-remove">Remove after drop</label>
                 </div>
+                <a
+                  href="#"
+                  data-bs-toggle="modal"
+                  data-bs-target="#add_new_event"
+                  className="calendar-add-category-btn"
+                >
+                  <i className="fas fa-plus" /> Add Category
+                </a>
+
+                {/* Dropped Events Tracker */}
+                {droppedEvents.length > 0 && (
+                  <div className="mt-4">
+                    <div className="dropped-events-header">
+                      ✅ Recently Dropped Events
+                      <span className="dropped-events-count">{droppedEvents.length}</span>
+                    </div>
+                    <div className="dropped-events-list">
+                      {droppedEvents.slice(-8).map((event) => (
+                        <div key={event.id} className="dropped-event-item p-3">
+                          <div className="row align-items-start">
+                            <div className="col-8">
+                              <strong>{event.title}</strong>
+                              <div className="event-time">
+                                <span className="event-icon">📅</span>
+                                <small className="text-muted">
+                                  {event.start.toLocaleDateString()} • {event.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+                                </small>
+                              </div>
+                              <div className="event-dropped-time">
+                                <span className="event-icon">⏰</span>
+                                <small className="text-success">
+                                  {event.droppedAt}
+                                </small>
+                              </div>
+                            </div>
+                            <div className="col-4 text-end">
+                              <span
+                                className={`badge ${event.className}`}
+                                title={event.className.replace('bg-', '').toUpperCase()}
+                                style={{
+                                  width: '20px',
+                                  height: '20px',
+                                  borderRadius: '50%',
+                                  display: 'inline-block',
+                                  border: '2px solid rgba(255,255,255,0.3)'
+                                }}
+                              >
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                      {droppedEvents.length > 8 && (
+                        <div className="text-center mt-2">
+                          <small className="text-muted" style={{fontStyle: 'italic'}}>
+                            ... and {droppedEvents.length - 8} more events
+                          </small>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
               </div>
-              <div className="checkbox  mb-3">
-                <input id="drop-remove" className="me-1" type="checkbox" />
-                <label htmlFor="drop-remove">Remove after drop</label>
-              </div>
-              <a
-                to="#"
-                data-bs-toggle="modal"
-                data-bs-target="#add_new_event"
-                className="btn mb-3 btn-primary btn-block w-100"
-              >
-                <i className="fas fa-plus" /> Add Category
-              </a>
             </div>
             <div className="col-lg-9 col-md-8">
-              <div className="card bg-white">
+              <div className="calendar-main-card">
                 <div className="card-body">
                   <FullCalendar
+                    ref={calendarRef}
                     plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+                    locale="vi" // Set Vietnamese locale
                     headerToolbar={{
                       left: "prev,next today",
                       center: "title",
                       right: "dayGridMonth,timeGridWeek,timeGridDay",
                     }}
+                    buttonText={{
+                      today: "Hôm nay",
+                      month: "Tháng",
+                      week: "Tuần",
+                      day: "Ngày",
+                      prev: "Trước",
+                      next: "Sau"
+                    }}
+                    dayHeaderFormat={{ weekday: 'long' }}
+                    titleFormat={{
+                      year: 'numeric',
+                      month: 'long'
+                    }}
                     initialView="dayGridMonth"
                     editable={true}
                     selectable={true}
                     selectMirror={true}
-                    dayMaxEvents={true}
+                    dayMaxEvents={3} // Show max 3 events per day, then +more
                     weekends={weekendsVisible}
-                    initialEvents={defaultEvents} // alternatively, use the `events` setting to fetch from a feed
+                    droppable={true} // Enable dropping external events
+                    dragScroll={true}
+                    events={calendarEvents} // Use dynamic events state
                     select={handleDateSelect}
                     eventClick={(clickInfo) => handleEventClick(clickInfo)}
+                    eventReceive={handleEventReceive} // Handle external drops
+                    eventDrop={handleEventDrop} // Handle internal drops
                   />
                 </div>
               </div>
@@ -278,7 +530,7 @@ const Calendar = () => {
                 type="button"
                 className="btn btn-success save-event submit-btn"
               >
-                Create event
+                Thêm sự kiện
               </button>
               <button
                 type="button"

src/feature-module/Application/content.jsx

@@ -86,7 +86,7 @@ const Content = () => {
                                 className="feather-calendar"
                               />
                             </span>
-                            <h3>Today</h3>
+                            <h3>Hôm nay</h3>
                             <h6>1</h6>
                           </div>
                         </div>

src/feature-module/inventory/addWeddingGuest.jsx

@@ -0,0 +1,442 @@
+import React, { useState } from 'react';
+import { Form, Input, InputNumber, Select, message } from 'antd';
+import { useNavigate, Link } from 'react-router-dom';
+import { ArrowLeft, Save, Users, FileText, Gift } from 'react-feather';
+import { weddingGuestService } from '../../services/weddingGuestService';
+import { LoadingButton } from '../../components/Loading';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+const AddWeddingGuest = () => {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+
+  // Handle form submission
+  const handleSubmit = async (values) => {
+    setSubmitting(true);
+    try {
+      console.log('📤 Creating guest with values:', values);
+
+      // Prepare create data according to API model (không gửi id, createdDate, createdBy)
+      const createData = {
+        name: values.name,
+        unit: values.unit,
+        numberOfPeople: values.numberOfPeople,
+        giftAmount: values.giftAmount,
+        status: values.status,
+        relationship: values.relationship,
+        notes: values.notes || '',
+        updatedDate: new Date().toISOString(),
+        updatedBy: 'current-user', // You might want to get this from auth context
+        isActive: true
+      };
+
+      console.log('📤 Final create data:', createData);
+
+      const response = await weddingGuestService.createWeddingGuest(createData);
+
+      if (response.success) {
+        message.success('Thêm khách mời thành công!');
+        navigate('/wedding-guest-list');
+      } else {
+        message.error(response.message || 'Failed to create guest');
+      }
+    } catch (error) {
+      console.error('Error creating guest:', error);
+      message.error('An error occurred while creating guest');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="page-wrapper">
+      <style>
+        {`
+          /* Dropdown Lists Dark Theme Styling for Add Wedding Guest */
+
+          /* Light Mode Dropdown Styling */
+          html[data-layout-mode="light_mode"] .ant-select-selector,
+          html[data-layout-mode="light_mode"] .ant-select-single .ant-select-selector,
+          body.light-mode .ant-select-selector,
+          body.light .ant-select-selector {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-dropdown,
+          body.light-mode .ant-select-dropdown,
+          body.light .ant-select-dropdown {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item,
+          body.light-mode .ant-select-item,
+          body.light .ant-select-item {
+            color: #000000 !important;
+            background-color: #ffffff !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item:hover,
+          body.light-mode .ant-select-item:hover,
+          body.light .ant-select-item:hover {
+            background-color: #f5f5f5 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item-option-selected,
+          body.light-mode .ant-select-item-option-selected,
+          body.light .ant-select-item-option-selected {
+            background-color: #1890ff !important;
+            color: #ffffff !important;
+          }
+
+          /* Dark Mode Dropdown Styling */
+          html[data-layout-mode="dark_mode"] .ant-select-selector,
+          html[data-layout-mode="dark_mode"] .ant-select-single .ant-select-selector,
+          body.dark-mode .ant-select-selector,
+          body.dark .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-dropdown,
+          body.dark-mode .ant-select-dropdown,
+          body.dark .ant-select-dropdown {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2) !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item,
+          body.dark-mode .ant-select-item,
+          body.dark .ant-select-item {
+            color: #ffffff !important;
+            background-color: #141432 !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item:hover,
+          body.dark-mode .ant-select-item:hover,
+          body.dark .ant-select-item:hover {
+            background-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item-option-selected,
+          body.dark-mode .ant-select-item-option-selected,
+          body.dark .ant-select-item-option-selected {
+            background-color: #177ddc !important;
+            color: #ffffff !important;
+          }
+
+          /* Dropdown Arrow Icon Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-arrow,
+          body.dark-mode .ant-select-arrow,
+          body.dark .ant-select-arrow {
+            color: #ffffff !important;
+          }
+
+          /* Focus States for Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-focused .ant-select-selector,
+          body.dark-mode .ant-select-focused .ant-select-selector,
+          body.dark .ant-select-focused .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* Placeholder Text Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-selection-placeholder,
+          body.dark-mode .ant-select-selection-placeholder,
+          body.dark .ant-select-selection-placeholder {
+            color: #888888 !important;
+          }
+
+          /* Input Number Dark Mode Styling */
+          html[data-layout-mode="dark_mode"] .ant-input-number,
+          html[data-layout-mode="dark_mode"] .ant-input-number-input,
+          body.dark-mode .ant-input-number,
+          body.dark .ant-input-number {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-input-number:focus,
+          html[data-layout-mode="dark_mode"] .ant-input-number-focused,
+          body.dark-mode .ant-input-number:focus,
+          body.dark .ant-input-number:focus {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* TextArea Dark Mode Styling */
+          html[data-layout-mode="dark_mode"] .ant-input,
+          html[data-layout-mode="dark_mode"] textarea.ant-input,
+          body.dark-mode .ant-input,
+          body.dark textarea.ant-input {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-input:focus,
+          html[data-layout-mode="dark_mode"] textarea.ant-input:focus,
+          body.dark-mode .ant-input:focus,
+          body.dark textarea.ant-input:focus {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* Placeholder Text for Inputs */
+          html[data-layout-mode="dark_mode"] .ant-input::placeholder,
+          html[data-layout-mode="dark_mode"] .ant-input-number-input::placeholder,
+          html[data-layout-mode="dark_mode"] textarea.ant-input::placeholder,
+          body.dark-mode .ant-input::placeholder,
+          body.dark .ant-input::placeholder {
+            color: #888888 !important;
+          }
+        `}
+      </style>
+      <div className="content">
+        {/* Header */}
+        <div className="page-header">
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4>Thêm khách mời đám cưới</h4>
+              <h6>Tạo thông tin khách mời mới cho đám cưới</h6>
+            </div>
+          </div>
+          <div className="page-btn">
+            <Link to="/wedding-guest-list" className="btn btn-added">
+              <ArrowLeft className="me-2" size={16} />
+              Quay lại danh sách
+            </Link>
+          </div>
+        </div>
+
+        {/* Form */}
+        <div className="card">
+          <div className="card-body">
+            <Form
+              form={form}
+              layout="vertical"
+              onFinish={handleSubmit}
+              autoComplete="off"
+              initialValues={{
+                numberOfPeople: 1,
+                giftAmount: 0,
+                status: 'Pending'
+              }}
+            >
+              <div className="row">
+                {/* Guest Basic Info */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <FileText size={20} />
+                    </div>
+                    <h5>Thông tin khách mời</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Tên khách mời <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="name"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập tên khách mời!' },
+                        { min: 2, message: 'Tên phải có ít nhất 2 ký tự!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Input
+                        placeholder="Nhập tên khách mời"
+                        className="form-control"
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Đơn vị <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="unit"
+                      rules={[{ required: true, message: 'Vui lòng nhập đơn vị!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Input
+                        placeholder="Nhập đơn vị"
+                        className="form-control"
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+
+              <div className="row">
+                {/* Guest Details */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <Users size={20} />
+                    </div>
+                    <h5>Chi tiết khách mời</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Số người <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="numberOfPeople"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập số người!' },
+                        { type: 'number', min: 1, message: 'Số người phải lớn hơn 0!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <InputNumber
+                        placeholder="Nhập số người"
+                        style={{ width: '100%' }}
+                        min={1}
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Số tiền mừng (VND) <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="giftAmount"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập số tiền mừng!' },
+                        { type: 'number', min: 0, message: 'Số tiền phải lớn hơn hoặc bằng 0!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <InputNumber
+                        placeholder="Nhập số tiền mừng"
+                        style={{ width: '100%' }}
+                        min={0}
+                        formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                        parser={value => value.replace(/\$\s?|(,*)/g, '')}
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Trạng thái <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="status"
+                      rules={[{ required: true, message: 'Vui lòng chọn trạng thái!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Select
+                        placeholder="Chọn trạng thái"
+                        style={{ width: '100%' }}
+                      >
+                        <Option value="Confirmed">✅ Đã xác nhận</Option>
+                        <Option value="Pending">⏳ Chưa xác nhận</Option>
+                        <Option value="Cancelled">❌ Hủy</Option>
+                        <Option value="Attended">👥 Đã tham dự</Option>
+                      </Select>
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+
+              <div className="row">
+                {/* Additional Info */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <Gift size={20} />
+                    </div>
+                    <h5>Thông tin bổ sung</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Mối quan hệ <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="relationship"
+                      rules={[{ required: true, message: 'Vui lòng chọn mối quan hệ!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Select
+                        placeholder="Chọn mối quan hệ"
+                        style={{ width: '100%' }}
+                      >
+                        <Option value="Family">👨‍👩‍👧‍👦 Gia đình</Option>
+                        <Option value="Friend">👫 Bạn bè</Option>
+                        <Option value="Colleague">💼 Đồng nghiệp</Option>
+                        <Option value="Relative">👥 Họ hàng</Option>
+                        <Option value="Other">🤝 Khác</Option>
+                      </Select>
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-12">
+                  <div className="mb-3">
+                    <label className="form-label">Ghi chú</label>
+                    <Form.Item
+                      name="notes"
+                      style={{ marginBottom: 0 }}
+                    >
+                      <TextArea
+                        placeholder="Nhập ghi chú (tùy chọn)"
+                        rows={4}
+                        maxLength={500}
+                        showCount
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+
+              {/* Submit Buttons */}
+              <div className="row">
+                <div className="col-lg-12">
+                  <div className="btn-addproduct mb-4 d-flex align-items-center gap-3">
+                    <LoadingButton
+                      type="submit"
+                      variant="primary"
+                      size="medium"
+                      loading={submitting}
+                      loadingText="Đang thêm khách mời..."
+                      className="create-project-btn"
+                      icon={<Save size={16} />}
+                    >
+                      Thêm khách mời
+                    </LoadingButton>
+
+                    <Link to="/wedding-guest-list" className="btn btn-cancel btn-cancel-project">
+                      Hủy
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddWeddingGuest;

src/feature-module/inventory/editWeddingGuest.jsx

@@ -0,0 +1,500 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, InputNumber, Select, message, Spin } from 'antd';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { ArrowLeft, Save, Users, FileText, Gift } from 'react-feather';
+import { weddingGuestService } from '../../services/weddingGuestService';
+import { LoadingButton } from '../../components/Loading';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+const EditWeddingGuest = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [guestData, setGuestData] = useState(null);
+
+
+
+  // Load guest data
+  const loadGuestData = async () => {
+    setLoading(true);
+    try {
+      console.log('🔍 Loading guest data for ID:', id);
+      const response = await weddingGuestService.getWeddingGuestById(id);
+
+      if (response.success) {
+        const guest = response.data;
+        setGuestData(guest);
+
+        // Set form values
+        form.setFieldsValue({
+          name: guest.name,
+          unit: guest.unit,
+          numberOfPeople: guest.numberOfPeople,
+          giftAmount: guest.giftAmount,
+          status: guest.status,
+          relationship: guest.relationship,
+          notes: guest.notes
+        });
+
+        console.log('✅ Guest data loaded:', guest);
+      } else {
+        message.error(response.message || 'Failed to load guest data');
+        navigate('/wedding-guest-list');
+      }
+    } catch (error) {
+      console.error('Error loading guest data:', error);
+      message.error('An error occurred while loading guest data');
+      navigate('/wedding-guest-list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Handle form submission
+  const handleSubmit = async (values) => {
+    setSubmitting(true);
+    try {
+      console.log('📤 Updating guest with values:', values);
+
+      // Prepare update data according to API model (không gửi id, createdDate, createdBy)
+      const updateData = {
+        name: values.name,
+        unit: values.unit,
+        numberOfPeople: values.numberOfPeople,
+        giftAmount: values.giftAmount,
+        status: values.status,
+        relationship: values.relationship,
+        notes: values.notes || '',
+        updatedDate: new Date().toISOString(),
+        updatedBy: 'current-user', // You might want to get this from auth context
+        isActive: guestData?.isActive !== false // Default to true if not specified
+      };
+
+      console.log('📤 Final update data (using POST method):', updateData);
+
+      const response = await weddingGuestService.updateWeddingGuest(id, updateData);
+
+      if (response.success) {
+        message.success('Cập nhật khách mời thành công!');
+        navigate('/wedding-guest-list');
+      } else {
+        message.error(response.message || 'Failed to update guest');
+      }
+    } catch (error) {
+      console.error('Error updating guest:', error);
+      message.error('An error occurred while updating guest');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+
+
+  // Load data on component mount
+  useEffect(() => {
+    if (id) {
+      loadGuestData();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="page-wrapper">
+        <div className="content" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>
+          <Spin size="large" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-wrapper">
+      <style>
+        {`
+          /* Dropdown Lists Dark Theme Styling for Edit Wedding Guest */
+
+          /* Light Mode Dropdown Styling */
+          html[data-layout-mode="light_mode"] .ant-select-selector,
+          html[data-layout-mode="light_mode"] .ant-select-single .ant-select-selector,
+          body.light-mode .ant-select-selector,
+          body.light .ant-select-selector {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-dropdown,
+          body.light-mode .ant-select-dropdown,
+          body.light .ant-select-dropdown {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item,
+          body.light-mode .ant-select-item,
+          body.light .ant-select-item {
+            color: #000000 !important;
+            background-color: #ffffff !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item:hover,
+          body.light-mode .ant-select-item:hover,
+          body.light .ant-select-item:hover {
+            background-color: #f5f5f5 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item-option-selected,
+          body.light-mode .ant-select-item-option-selected,
+          body.light .ant-select-item-option-selected {
+            background-color: #1890ff !important;
+            color: #ffffff !important;
+          }
+
+          /* Dark Mode Dropdown Styling */
+          html[data-layout-mode="dark_mode"] .ant-select-selector,
+          html[data-layout-mode="dark_mode"] .ant-select-single .ant-select-selector,
+          body.dark-mode .ant-select-selector,
+          body.dark .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-dropdown,
+          body.dark-mode .ant-select-dropdown,
+          body.dark .ant-select-dropdown {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2) !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item,
+          body.dark-mode .ant-select-item,
+          body.dark .ant-select-item {
+            color: #ffffff !important;
+            background-color: #141432 !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item:hover,
+          body.dark-mode .ant-select-item:hover,
+          body.dark .ant-select-item:hover {
+            background-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item-option-selected,
+          body.dark-mode .ant-select-item-option-selected,
+          body.dark .ant-select-item-option-selected {
+            background-color: #177ddc !important;
+            color: #ffffff !important;
+          }
+
+          /* Dropdown Arrow Icon Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-arrow,
+          body.dark-mode .ant-select-arrow,
+          body.dark .ant-select-arrow {
+            color: #ffffff !important;
+          }
+
+          /* Focus States for Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-focused .ant-select-selector,
+          body.dark-mode .ant-select-focused .ant-select-selector,
+          body.dark .ant-select-focused .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* Placeholder Text Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-selection-placeholder,
+          body.dark-mode .ant-select-selection-placeholder,
+          body.dark .ant-select-selection-placeholder {
+            color: #888888 !important;
+          }
+
+          /* Input Number Dark Mode Styling */
+          html[data-layout-mode="dark_mode"] .ant-input-number,
+          html[data-layout-mode="dark_mode"] .ant-input-number-input,
+          body.dark-mode .ant-input-number,
+          body.dark .ant-input-number {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-input-number:focus,
+          html[data-layout-mode="dark_mode"] .ant-input-number-focused,
+          body.dark-mode .ant-input-number:focus,
+          body.dark .ant-input-number:focus {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* TextArea Dark Mode Styling */
+          html[data-layout-mode="dark_mode"] .ant-input,
+          html[data-layout-mode="dark_mode"] textarea.ant-input,
+          body.dark-mode .ant-input,
+          body.dark textarea.ant-input {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-input:focus,
+          html[data-layout-mode="dark_mode"] textarea.ant-input:focus,
+          body.dark-mode .ant-input:focus,
+          body.dark textarea.ant-input:focus {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* Placeholder Text for Inputs */
+          html[data-layout-mode="dark_mode"] .ant-input::placeholder,
+          html[data-layout-mode="dark_mode"] .ant-input-number-input::placeholder,
+          html[data-layout-mode="dark_mode"] textarea.ant-input::placeholder,
+          body.dark-mode .ant-input::placeholder,
+          body.dark .ant-input::placeholder {
+            color: #888888 !important;
+          }
+            border-color: #d9d9d9 !important;
+            color: #000000 !important;
+          }
+        `}
+      </style>
+      <div className="content">
+        {/* Header */}
+        <div className="page-header">
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4>Chỉnh sửa khách mời đám cưới</h4>
+              <h6>Cập nhật thông tin khách mời cho đám cưới</h6>
+            </div>
+          </div>
+          <div className="page-btn">
+            <Link to="/wedding-guest-list" className="btn btn-added">
+              <ArrowLeft className="me-2" size={16} />
+              Quay lại danh sách
+            </Link>
+          </div>
+        </div>
+
+        {/* Form */}
+        <div className="card">
+          <div className="card-body">
+            <Form
+              form={form}
+              layout="vertical"
+              onFinish={handleSubmit}
+              autoComplete="off"
+            >
+              <div className="row">
+                {/* Guest Basic Info */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <FileText size={20} />
+                    </div>
+                    <h5>Thông tin khách mời</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Tên khách mời <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="name"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập tên khách mời!' },
+                        { min: 2, message: 'Tên phải có ít nhất 2 ký tự!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Input
+                        placeholder="Nhập tên khách mời"
+                        className="form-control"
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Đơn vị <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="unit"
+                      rules={[{ required: true, message: 'Vui lòng nhập đơn vị!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Input
+                        placeholder="Nhập đơn vị"
+                        className="form-control"
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+
+              <div className="row">
+                {/* Guest Details */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <Users size={20} />
+                    </div>
+                    <h5>Chi tiết khách mời</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Số người <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="numberOfPeople"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập số người!' },
+                        { type: 'number', min: 1, message: 'Số người phải lớn hơn 0!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <InputNumber
+                        placeholder="Nhập số người"
+                        style={{ width: '100%' }}
+                        min={1}
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Số tiền mừng (VND) <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="giftAmount"
+                      rules={[
+                        { required: true, message: 'Vui lòng nhập số tiền mừng!' },
+                        { type: 'number', min: 0, message: 'Số tiền phải lớn hơn hoặc bằng 0!' }
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <InputNumber
+                        placeholder="Nhập số tiền mừng"
+                        style={{ width: '100%' }}
+                        min={0}
+                        formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                        parser={value => value.replace(/\$\s?|(,*)/g, '')}
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-4">
+                  <div className="mb-3">
+                    <label className="form-label">Trạng thái <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="status"
+                      rules={[{ required: true, message: 'Vui lòng chọn trạng thái!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Select
+                        placeholder="Chọn trạng thái"
+                        style={{ width: '100%' }}
+                      >
+                        <Option value="Confirmed">✅ Đã xác nhận</Option>
+                        <Option value="Pending">⏳ Chưa xác nhận</Option>
+                        <Option value="Cancelled">❌ Hủy</Option>
+                        <Option value="Attended">👥 Đã tham dự</Option>
+                      </Select>
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+
+              <div className="row">
+                {/* Additional Info */}
+                <div className="col-lg-12">
+                  <div className="form-group-header">
+                    <div className="form-group-icon">
+                      <Gift size={20} />
+                    </div>
+                    <h5>Thông tin bổ sung</h5>
+                  </div>
+                </div>
+
+                <div className="col-lg-6">
+                  <div className="mb-3">
+                    <label className="form-label">Mối quan hệ <span className="text-danger">*</span></label>
+                    <Form.Item
+                      name="relationship"
+                      rules={[{ required: true, message: 'Vui lòng chọn mối quan hệ!' }]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Select
+                        placeholder="Chọn mối quan hệ"
+                        style={{ width: '100%' }}
+                      >
+                        <Option value="Family">👨‍👩‍👧‍👦 Gia đình</Option>
+                        <Option value="Friend">👫 Bạn bè</Option>
+                        <Option value="Colleague">💼 Đồng nghiệp</Option>
+                        <Option value="Relative">👥 Họ hàng</Option>
+                        <Option value="Other">🤝 Khác</Option>
+                      </Select>
+                    </Form.Item>
+                  </div>
+                </div>
+
+                <div className="col-lg-12">
+                  <div className="mb-3">
+                    <label className="form-label">Ghi chú</label>
+                    <Form.Item
+                      name="notes"
+                      style={{ marginBottom: 0 }}
+                    >
+                      <TextArea
+                        placeholder="Nhập ghi chú (tùy chọn)"
+                        rows={4}
+                        maxLength={500}
+                        showCount
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+              </div>
+              {/* Submit Buttons */}
+              <div className="row">
+                <div className="col-lg-12">
+                  <div className="btn-addproduct mb-4 d-flex align-items-center gap-3">
+                    <LoadingButton
+                      type="submit"
+                      variant="primary"
+                      size="medium"
+                      loading={submitting}
+                      loadingText="Đang cập nhật khách mời..."
+                      className="create-project-btn"
+                      icon={<Save size={16} />}
+                    >
+                      Cập nhật khách mời
+                    </LoadingButton>
+
+                    <Link to="/wedding-guest-list" className="btn btn-cancel btn-cancel-project">
+                      Hủy
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditWeddingGuest;

src/feature-module/inventory/expiredproduct.jsx

@@ -28,20 +28,20 @@ const ExpiredProduct = () => {
     };
 
     const oldandlatestvalue = [
-        { value: 'date', label: 'Sort by Date' },
-        { value: 'newest', label: 'Newest' },
-        { value: 'oldest', label: 'Oldest' },
+        { value: 'date', label: 'Sắp xếp theo ngày' },
+        { value: 'newest', label: 'Mới nhất' },
+        { value: 'oldest', label: 'Cũ nhất' },
     ];
 
     const brands = [
-        { value: 'chooseType', label: 'Choose Type' },
-        { value: 'lenovo3rdGen', label: 'Lenovo 3rd Generation' },
+        { value: 'chooseType', label: 'Chọn loại' },
+        { value: 'lenovo3rdGen', label: 'Lenovo thế hệ 3' },
         { value: 'nikeJordan', label: 'Nike Jordan' },
     ];
 
     const renderTooltip = (props) => (
         <Tooltip id="pdf-tooltip" {...props}>
-            Pdf
+            PDF
         </Tooltip>
     );
     const renderExcelTooltip = (props) => (
@@ -51,23 +51,23 @@ const ExpiredProduct = () => {
     );
     const renderPrinterTooltip = (props) => (
         <Tooltip id="printer-tooltip" {...props}>
-            Printer
+            In ấn
         </Tooltip>
     );
     const renderRefreshTooltip = (props) => (
         <Tooltip id="refresh-tooltip" {...props}>
-            Refresh
+            Làm mới
         </Tooltip>
     );
     const renderCollapseTooltip = (props) => (
         <Tooltip id="refresh-tooltip" {...props}>
-            Collapse
+            Thu gọn
         </Tooltip>
     );
 
     const columns = [
         {
-            title: "Product",
+            title: "Sản phẩm",
             dataIndex: "product",
             render: (text, record) => (
                 <span className="productimgname">
@@ -81,23 +81,23 @@ const ExpiredProduct = () => {
             width: "5%"
         },
         {
-            title: "SKU",
+            title: "Mã IMEI",
             dataIndex: "sku",
             sorter: (a, b) => a.sku.length - b.sku.length,
         },
         {
-            title: "Manufactured Date",
+            title: "Ngày sản xuất",
             dataIndex: "manufactureddate",
             sorter: (a, b) => a.manufactureddate.length - b.manufactureddate.length,
         },
         {
-            title: "Expired Date",
+            title: "Ngày hết hạn",
             dataIndex: "expireddate",
             sorter: (a, b) => a.expireddate.length - b.expireddate.length,
         },
-       
+
         {
-            title: 'Actions',
+            title: 'Thao tác',
             dataIndex: 'actions',
             key: 'actions',
             render: () => (
@@ -118,19 +118,19 @@ const ExpiredProduct = () => {
 
     const showConfirmationAlert = () => {
         MySwal.fire({
-            title: 'Are you sure?',
-            text: 'You won\'t be able to revert this!',
+            title: 'Bạn có chắc chắn?',
+            text: 'Bạn sẽ không thể hoàn tác hành động này!',
             showCancelButton: true,
             confirmButtonColor: '#00ff00',
-            confirmButtonText: 'Yes, delete it!',
+            confirmButtonText: 'Có, xóa nó!',
             cancelButtonColor: '#ff0000',
-            cancelButtonText: 'Cancel',
+            cancelButtonText: 'Hủy',
         }).then((result) => {
             if (result.isConfirmed) {
 
                 MySwal.fire({
-                    title: 'Deleted!',
-                    text: 'Your file has been deleted.',
+                    title: 'Đã xóa!',
+                    text: 'Tệp của bạn đã được xóa.',
                     className: "btn btn-success",
                     confirmButtonText: 'OK',
                     customClass: {
@@ -150,8 +150,8 @@ const ExpiredProduct = () => {
                     <div className="page-header">
                         <div className="add-item d-flex">
                             <div className="page-title">
-                                <h4>Expired Products</h4>
-                                <h6>Manage your expired products</h6>
+                                <h4>Sản phẩm hết hạn</h4>
+                                <h6>Quản lý các sản phẩm hết hạn của bạn</h6>
                             </div>
                         </div>
                         <ul className="table-top-head">
@@ -209,7 +209,7 @@ const ExpiredProduct = () => {
                                     <div className="search-input">
                                         <input
                                             type="text"
-                                            placeholder="Search"
+                                            placeholder="Tìm kiếm"
                                             className="form-control form-control-sm formsearch"
                                         />
                                         <Link to className="btn btn-searchset">
@@ -235,7 +235,7 @@ const ExpiredProduct = () => {
                                     <Select
                                         className="select"
                                         options={oldandlatestvalue}
-                                        placeholder="Newest"
+                                        placeholder="Mới nhất"
                                     />
                                 </div>
                             </div>
@@ -251,7 +251,7 @@ const ExpiredProduct = () => {
                                             <div className="input-blocks">
                                                 <Box className="info-img" />
 
-                                                <Select options={brands} className="select" placeholder="Choose Type" />
+                                                <Select options={brands} className="select" placeholder="Chọn loại" />
 
                                             </div>
                                         </div>
@@ -264,7 +264,7 @@ const ExpiredProduct = () => {
                                                         type="date"
                                                         className="filterdatepicker"
                                                         dateFormat="dd-MM-yyyy"
-                                                        placeholder='Choose Date'
+                                                        placeholder='Chọn ngày'
                                                     />
                                                 </div>
                                             </div>
@@ -274,7 +274,7 @@ const ExpiredProduct = () => {
                                                 <Link className="btn btn-filters ms-auto">
                                                     {" "}
                                                     <i data-feather="search" className="feather-search" />{" "}
-                                                    Search{" "}
+                                                    Tìm kiếm{" "}
                                                 </Link>
                                             </div>
                                         </div>

src/feature-module/inventory/productlist2.jsx

@@ -0,0 +1,784 @@
+import {
+  Box,
+  ChevronUp,
+  Edit,
+  Eye,
+  Filter,
+  GitMerge,
+  PlusCircle,
+  RotateCcw,
+  Sliders,
+  StopCircle,
+  Trash2,
+} from "feather-icons-react/build/IconComponents";
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import Select from "react-select";
+import ImageWithBasePath from "../../core/img/imagewithbasebath";
+import Brand from "../../core/modals/inventory/brand";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { all_routes } from "../../Router/all_routes";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import Table from "../../core/pagination/datatable";
+import {
+  fetchProducts,
+  fetchProduct,
+  deleteProduct,
+  searchProducts
+} from "../../core/redux/actions/productActions";
+import { setToogleHeader } from "../../core/redux/action";
+import { Download } from "react-feather";
+import CustomPagination from "../../components/CustomPagination";
+
+const MySwal = withReactContent(Swal);
+const route = all_routes;
+
+// Add CSS to hide Ant Design pagination and checkboxes
+function hideAntElements() {
+  const styleSheet = document.createElement("style");
+  styleSheet.type = "text/css";
+  styleSheet.innerText = `
+    .ant-pagination {
+      display: none !important;
+      visibility: hidden !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+      pointer-events: none !important;
+    }
+
+    /* Hide all Ant Design checkboxes */
+    .ant-checkbox,
+    .ant-checkbox-input,
+    .ant-checkbox-wrapper,
+    .ant-table-selection-column,
+    .ant-table-selection,
+    .ant-table-thead > tr > th.ant-table-selection-column,
+    .ant-table-tbody > tr > td.ant-table-selection-column {
+      display: none !important;
+      visibility: hidden !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+      pointer-events: none !important;
+    }
+  `;
+  document.head.appendChild(styleSheet);
+}
+
+const ProductList2 = () => {
+  // Use new Redux structure for API data, fallback to legacy for existing functionality
+  const {
+    products: apiProducts,
+    loading,
+    error,
+    totalProducts,
+    pageSize: reduxPageSize,
+    currentPage: reduxCurrentPage
+  } = useSelector((state) => state.products);
+
+  // Fallback to legacy data if API data is not available
+  const legacyProducts = useSelector((state) => state.legacy?.product_list || []);
+
+  // Sample import data for demonstration
+  const sampleImportData = [
+    {
+      key: 1,
+      product: "MacBook Pro 13 inch",
+      sku: "MBP13-001",
+      importPrice: 25000000,
+      importQuantity: 5,
+      productImage: "assets/img/products/macbook.jpg",
+      supplier: "Apple Vietnam",
+      createdDate: "2024-01-15",
+      importDate: "2024-01-15"
+    },
+    {
+      key: 2,
+      product: "iPhone 15 Pro",
+      sku: "IP15P-001",
+      importPrice: 28000000,
+      importQuantity: 10,
+      productImage: "assets/img/products/iphone.jpg",
+      supplier: "Apple Vietnam",
+      createdDate: "2024-01-14",
+      importDate: "2024-01-14"
+    },
+    {
+      key: 3,
+      product: "Samsung Galaxy S24",
+      sku: "SGS24-001",
+      importPrice: 22000000,
+      importQuantity: 8,
+      productImage: "assets/img/products/samsung.jpg",
+      supplier: "Samsung Vietnam",
+      createdDate: "2024-01-13",
+      importDate: "2024-01-13"
+    }
+  ];
+
+  const dataSource = apiProducts.length > 0 ? apiProducts : (legacyProducts.length > 0 ? legacyProducts : sampleImportData);
+
+  const dispatch = useDispatch();
+  const data = useSelector((state) => state.legacy?.toggle_header || false);
+
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // State for pagination - sync with Redux
+  const [currentPage, setCurrentPage] = useState(reduxCurrentPage || 1);
+  const [pageSize, setPageSize] = useState(reduxPageSize || 20);
+
+  // State for filter values
+  const [filterValues, setFilterValues] = useState({
+    product: '',
+    supplier: '',
+    importDate: '',
+    priceRange: '',
+    quantityRange: ''
+  });
+
+  // Calculate total records and pages
+  const totalRecords = totalProducts || dataSource.length;
+  const actualTotalPages = Math.ceil(totalRecords / pageSize);
+
+  useEffect(() => {
+    hideAntElements();
+
+    // Fetch products on component mount
+    if (apiProducts.length === 0) {
+      dispatch(fetchProducts({ page: currentPage, pageSize }));
+    }
+  }, [dispatch, apiProducts.length]);
+
+  // Sync local state with Redux state
+  useEffect(() => {
+    if (reduxCurrentPage && reduxCurrentPage !== currentPage) {
+      setCurrentPage(reduxCurrentPage);
+    }
+    if (reduxPageSize && reduxPageSize !== pageSize) {
+      setPageSize(reduxPageSize);
+    }
+  }, [reduxCurrentPage, reduxPageSize, currentPage, pageSize]);
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    
+    if (value.trim()) {
+      dispatch(searchProducts(value));
+    } else {
+      dispatch(fetchProducts({ page: 1, pageSize }));
+      setCurrentPage(1);
+    }
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+    dispatch(fetchProducts({ page, pageSize, search: searchTerm }));
+  };
+
+  const handlePageSizeChange = (newPageSize) => {
+    setPageSize(newPageSize);
+    setCurrentPage(1);
+    dispatch(fetchProducts({ page: 1, pageSize: newPageSize, search: searchTerm }));
+  };
+
+
+
+  const handleDelete = async (productId) => {
+    try {
+      const result = await MySwal.fire({
+        title: "Are you sure?",
+        text: "You won't be able to revert this!",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#dc3545",
+        cancelButtonColor: "#6c757d",
+        confirmButtonText: "Yes, delete it!",
+        cancelButtonText: "Cancel",
+      });
+
+      if (result.isConfirmed) {
+        await dispatch(deleteProduct(productId));
+        
+        MySwal.fire({
+          title: "Deleted!",
+          text: "Product has been deleted successfully.",
+          icon: "success",
+          confirmButtonColor: "#28a745",
+        });
+
+        // Refresh the product list
+        dispatch(fetchProducts({ page: currentPage, pageSize, search: searchTerm }));
+      }
+    } catch (error) {
+      MySwal.fire({
+        title: "Error!",
+        text: "Failed to delete product. Please try again.",
+        icon: "error",
+        confirmButtonColor: "#dc3545",
+      });
+    }
+  };
+
+  const oldandlatestvalue = [
+    { value: "date", label: "Sắp xếp theo ngày" },
+    { value: "newest", label: "Mới nhất" },
+    { value: "oldest", label: "Cũ nhất" },
+  ];
+
+  const supplierOptions = [
+    { value: "", label: "Chọn nhà cung cấp" },
+    { value: "supplier1", label: "Nhà cung cấp A" },
+    { value: "supplier2", label: "Nhà cung cấp B" },
+  ];
+
+  const importDateOptions = [
+    { value: "", label: "Chọn thời gian nhập" },
+    { value: "today", label: "Hôm nay" },
+    { value: "week", label: "Tuần này" },
+    { value: "month", label: "Tháng này" },
+  ];
+
+  const priceRangeOptions = [
+    { value: "", label: "Chọn khoảng giá" },
+    { value: "0-100000", label: "0 - 100,000 ₫" },
+    { value: "100000-500000", label: "100,000 - 500,000 ₫" },
+    { value: "500000-1000000", label: "500,000 - 1,000,000 ₫" },
+  ];
+
+  const quantityRangeOptions = [
+    { value: "", label: "Chọn số lượng" },
+    { value: "1-10", label: "1 - 10" },
+    { value: "11-50", label: "11 - 50" },
+    { value: "51-100", label: "51 - 100" },
+    { value: "100+", label: "Trên 100" },
+  ];
+
+  const handleMenuToggle = () => {
+    dispatch(setToogleHeader(!data));
+  };
+
+  const columns = [
+    {
+      title: "Sản phẩm",
+      dataIndex: "product",
+      render: (text, record) => (
+        <span>{text || record.name || record.productName}</span>
+      ),
+      sorter: (a, b) => a.product.length - b.product.length,
+    },
+    {
+      title: "Mã",
+      dataIndex: "sku",
+      render: (_, record) => {
+        const sku = record.sku || record.code || record.productCode || '-';
+        return <span>{sku}</span>;
+      },
+      sorter: (a, b) => {
+        const skuA = a.sku || a.code || a.productCode || '';
+        const skuB = b.sku || b.code || b.productCode || '';
+        return skuA.length - skuB.length;
+      },
+    },
+    {
+      title: "Giá nhập",
+      dataIndex: "importPrice",
+      render: (_, record) => {
+        const price = record.price || record.price || record.price || 0;
+        return (
+          <span
+            className="price-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: '#fff3cd',
+              color: '#856404',
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: '1px solid #ffeaa7',
+              minWidth: '80px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {price.toLocaleString('vi-VN')} ₫
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const priceA = a.importPrice || a.purchasePrice || a.costPrice || 0;
+        const priceB = b.importPrice || b.purchasePrice || b.costPrice || 0;
+        return priceA - priceB;
+      },
+    },
+    {
+      title: "Số lượng nhập",
+      dataIndex: "importQuantity",
+      render: (_, record) => {
+        const quantity = record.qty || record.quantity || record.inboundQuantity || 0;
+        return (
+          <span
+            className="quantity-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: quantity > 0 ? '#e8f5e8' : '#f8f9fa',
+              color: quantity > 0 ? '#28a745' : '#6c757d',
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: `1px solid ${quantity > 0 ? '#c3e6cb' : '#dee2e6'}`,
+              minWidth: '80px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {quantity.toLocaleString('vi-VN')}
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const qtyA = a.importQuantity || a.receivedQuantity || a.inboundQuantity || 0;
+        const qtyB = b.importQuantity || b.receivedQuantity || b.inboundQuantity || 0;
+        return qtyA - qtyB;
+      },
+    },
+    {
+      title: "Ngày nhập",
+      dataIndex: "importDate",
+      render: (_, record) => {
+        const importDate = record.createdDate || record.importDate || record.receivedDate || '';
+        if (!importDate) return <span>-</span>;
+
+        // Format date to Vietnamese format
+        const date = new Date(importDate);
+        const formattedDate = date.toLocaleDateString('vi-VN', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric'
+        });
+
+        // Calculate days ago
+        const today = new Date();
+        const diffTime = Math.abs(today - date);
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+        let badgeColor = '#d1ecf1';
+        let textColor = '#0c5460';
+        let borderColor = '#bee5eb';
+
+        if (diffDays <= 1) {
+          badgeColor = '#d4edda';
+          textColor = '#155724';
+          borderColor = '#c3e6cb';
+        } else if (diffDays <= 7) {
+          badgeColor = '#fff3cd';
+          textColor = '#856404';
+          borderColor = '#ffeaa7';
+        } else if (diffDays > 30) {
+          badgeColor = '#f8d7da';
+          textColor = '#721c24';
+          borderColor = '#f5c6cb';
+        }
+
+        return (
+          <span
+            className="date-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: badgeColor,
+              color: textColor,
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: `1px solid ${borderColor}`,
+              minWidth: '90px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+            title={`${diffDays} ngày trước`}
+          >
+            {formattedDate}
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const dateA = new Date(a.createdDate || a.importDate || a.receivedDate || 0);
+        const dateB = new Date(b.createdDate || b.importDate || b.receivedDate || 0);
+        return dateA - dateB;
+      },
+    },
+    {
+      title: "Thao tác",
+      dataIndex: "action",
+      render: (_, record) => (
+        <td className="action-table-data">
+          <div className="edit-delete-action">
+            <Link className="me-2 p-2" to={route.productdetails}>
+              <Eye className="feather-view" />
+            </Link>
+            <Link
+              className="me-2 p-2"
+              to={`${route.editproduct}/${record.id || record.key}`}
+              onClick={() => {
+                // Pre-fetch product details for editing
+                if (record.id || record.key) {
+                  dispatch(fetchProduct(record.id || record.key));
+                }
+              }}
+            >
+              <Edit className="feather-edit" />
+            </Link>
+            <Link
+              className="confirm-text p-2"
+              to="#"
+              onClick={(e) => {
+                e.preventDefault();
+                handleDelete(record.id || record.key);
+              }}
+            >
+              <Trash2 className="feather-delete" />
+            </Link>
+          </div>
+        </td>
+      ),
+    },
+  ];
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        <div className="page-header">
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4>Nhập kho</h4>
+              <h6>Quản lý thông tin nhập kho sản phẩm</h6>
+            </div>
+          </div>
+          <ul className="table-top-head">
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Pdf</Tooltip>}
+              >
+                <Link>
+                  <ImageWithBasePath
+                    src="assets/img/icons/pdf.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Excel</Tooltip>}
+              >
+                <Link data-bs-toggle="tooltip" data-bs-placement="top">
+                  <ImageWithBasePath
+                    src="assets/img/icons/excel.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Print</Tooltip>}
+              >
+                <Link data-bs-toggle="tooltip" data-bs-placement="top">
+                  <ImageWithBasePath
+                    src="assets/img/icons/printer.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Refresh</Tooltip>}
+              >
+                <Link
+                  data-bs-toggle="tooltip"
+                  data-bs-placement="top"
+                  onClick={() => dispatch(fetchProducts({ page: currentPage, pageSize }))}
+                >
+                  <RotateCcw />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Collapse</Tooltip>}
+              >
+                <Link
+                  data-bs-toggle="tooltip"
+                  data-bs-placement="top"
+                  id="collapse-header"
+                  className={data ? "active" : ""}
+                  onClick={handleMenuToggle}
+                >
+                  <ChevronUp />
+                </Link>
+              </OverlayTrigger>
+            </li>
+          </ul>
+          <div className="page-btn">
+            <Link to="#" className="btn btn-added">
+              <PlusCircle className="me-2 iconsize" />
+              Tạo phiếu nhập
+            </Link>
+          </div>
+          <div className="page-btn import">
+            <Link
+              to="#"
+              className="btn btn-added color"
+              data-bs-toggle="modal"
+              data-bs-target="#view-notes"
+            >
+              <Download className="me-2" />
+              Import Excel
+            </Link>
+          </div>
+        </div>
+        {/* /product list */}
+        <div className="card table-list-card">
+          <div className="card-body">
+            <div className="table-top">
+              <div className="search-set">
+                <div className="search-input">
+                  <input
+                    type="text"
+                    placeholder="Tìm kiếm sản phẩm nhập kho..."
+                    className="form-control form-control-sm formsearch"
+                    value={searchTerm}
+                    onChange={handleSearch}
+                  />
+                  <Link to className="btn btn-searchset">
+                    <i data-feather="search" className="feather-search" />
+                  </Link>
+                </div>
+              </div>
+              <div className="search-path">
+                <Link
+                  className={`btn btn-filter ${isFilterVisible ? "setclose" : ""}`}
+                  id="filter_search"
+                  onClick={() => setIsFilterVisible(!isFilterVisible)}
+                >
+                  <Filter className="filter-icon" />
+                  <span>
+                    <ImageWithBasePath
+                      src="assets/img/icons/closes.svg"
+                      alt="img"
+                    />
+                  </span>
+                </Link>
+              </div>
+              <div className="form-sort">
+                <Sliders className="info-img" />
+                <Select
+                  className="img-select"
+                  classNamePrefix="react-select"
+                  options={oldandlatestvalue}
+                  placeholder="Newest"
+                />
+              </div>
+            </div>
+            {/* /Filter */}
+            <div
+              className={`card${isFilterVisible ? " " : " d-none"}`}
+              id="filter_inputs"
+              style={{ display: isFilterVisible ? "block" : "none" }}
+            >
+              <div className="card-body pb-0">
+                <div className="row">
+                  <div className="col-lg-2 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <GitMerge className="info-img" />
+                      <Select
+                        className="img-select"
+                        classNamePrefix="react-select"
+                        options={[
+                          { value: "", label: "Chọn sản phẩm" },
+                          { value: "macbook-pro", label: "Macbook Pro" },
+                          { value: "orange", label: "Cam" },
+                        ]}
+                        placeholder="Chọn sản phẩm"
+                        value={[
+                          { value: "", label: "Chọn sản phẩm" },
+                          { value: "macbook-pro", label: "Macbook Pro" },
+                          { value: "orange", label: "Cam" },
+                        ].find(option => option.value === filterValues.product)}
+                        onChange={(selectedOption) =>
+                          setFilterValues(prev => ({ ...prev, product: selectedOption?.value || '' }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <StopCircle className="info-img" />
+                      <Select
+                        className="img-select"
+                        classNamePrefix="react-select"
+                        options={supplierOptions}
+                        placeholder="Chọn nhà cung cấp"
+                        value={supplierOptions.find(option => option.value === filterValues.supplier)}
+                        onChange={(selectedOption) =>
+                          setFilterValues(prev => ({ ...prev, supplier: selectedOption?.value || '' }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <StopCircle className="info-img" />
+                      <Select
+                        className="img-select"
+                        classNamePrefix="react-select"
+                        options={importDateOptions}
+                        placeholder="Chọn thời gian nhập"
+                        value={importDateOptions.find(option => option.value === filterValues.importDate)}
+                        onChange={(selectedOption) =>
+                          setFilterValues(prev => ({ ...prev, importDate: selectedOption?.value || '' }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <Box className="info-img" />
+                      <Select
+                        className="img-select"
+                        classNamePrefix="react-select"
+                        options={priceRangeOptions}
+                        placeholder="Chọn khoảng giá"
+                        value={priceRangeOptions.find(option => option.value === filterValues.priceRange)}
+                        onChange={(selectedOption) =>
+                          setFilterValues(prev => ({ ...prev, priceRange: selectedOption?.value || '' }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <StopCircle className="info-img" />
+                      <Select
+                        className="img-select"
+                        classNamePrefix="react-select"
+                        options={quantityRangeOptions}
+                        placeholder="Chọn số lượng"
+                        value={quantityRangeOptions.find(option => option.value === filterValues.quantityRange)}
+                        onChange={(selectedOption) =>
+                          setFilterValues(prev => ({ ...prev, quantityRange: selectedOption?.value || '' }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-1 col-sm-6 col-12 ms-auto">
+                    <div className="input-blocks">
+                      <Link className="btn btn-filters ms-auto">
+                        <i
+                          data-feather="search"
+                          className="feather-search"
+                          style={{ marginRight: '8px' }}
+                        />
+                        Tìm kiếm
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* /Filter */}
+            <div className="table-responsive">
+              {loading ? (
+                <div className="text-center p-4">
+                  <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                  <p className="mt-2">Đang tải dữ liệu nhập kho...</p>
+                </div>
+              ) : error ? (
+                <div className="alert alert-danger" role="alert">
+                  <strong>Error:</strong> {error}
+                  <button
+                    className="btn btn-sm btn-outline-danger ms-2"
+                    onClick={() => dispatch(fetchProducts())}
+                  >
+                    Retry
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <Table
+                    columns={columns}
+                    dataSource={dataSource}
+                    pagination={false} // Disable Ant Design pagination
+                    rowSelection={null} // Disable row selection checkboxes
+                  />
+
+                  {/* Reusable Custom Pagination Component */}
+                  <CustomPagination
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    totalCount={totalRecords}
+                    totalPages={actualTotalPages}
+                    loading={loading}
+                    onPageChange={handlePageChange}
+                    onPageSizeChange={handlePageSizeChange}
+                    pageSizeOptions={[10, 20, 50, 100]}
+                    showInfo={true}
+                    showPageSizeSelector={true}
+                    compact={false}
+                    className="product-list-pagination"
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        {/* /product list */}
+        <Brand />
+      </div>
+    </div>
+  );
+};
+
+export default ProductList2;

src/feature-module/inventory/productlist3.jsx

@@ -0,0 +1,758 @@
+import {
+  Box,
+  Edit,
+  Eye,
+  Filter,
+  Sliders,
+  StopCircle,
+  Trash2,
+} from "feather-icons-react/build/IconComponents";
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import Select from "react-select";
+import ImageWithBasePath from "../../core/img/imagewithbasebath";
+import Brand from "../../core/modals/inventory/brand";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { all_routes } from "../../Router/all_routes";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import Table from "../../core/pagination/datatable";
+import {
+  fetchProducts,
+  fetchProduct,
+  deleteProduct,
+  searchProducts
+} from "../../core/redux/actions/productActions";
+
+import CustomPagination from "../../components/CustomPagination";
+
+const MySwal = withReactContent(Swal);
+const route = all_routes;
+
+// Add CSS to hide Ant Design pagination and checkboxes
+function hideAntElements() {
+  const styleSheet = document.createElement("style");
+  styleSheet.type = "text/css";
+  styleSheet.innerText = `
+    .ant-pagination {
+      display: none !important;
+      visibility: hidden !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+      pointer-events: none !important;
+    }
+
+    /* Hide all Ant Design checkboxes */
+    .ant-checkbox,
+    .ant-checkbox-input,
+    .ant-checkbox-wrapper,
+    .ant-table-selection-column,
+    .ant-table-selection,
+    .ant-table-thead > tr > th.ant-table-selection-column,
+    .ant-table-tbody > tr > td.ant-table-selection-column {
+      display: none !important;
+      visibility: hidden !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+      pointer-events: none !important;
+    }
+  `;
+  document.head.appendChild(styleSheet);
+}
+
+const ProductList3 = () => {
+  // Use new Redux structure for API data, fallback to legacy for existing functionality
+  const {
+    products: apiProducts,
+    loading,
+    error,
+    totalProducts,
+    pageSize: reduxPageSize,
+    currentPage: reduxCurrentPage
+  } = useSelector((state) => state.products);
+
+  // Fallback to legacy data if API data is not available
+  const legacyProducts = useSelector((state) => state.legacy?.product_list || []);
+
+  // Sample inventory data for demonstration
+  const sampleInventoryData = [
+    {
+      key: 1,
+      product: "MacBook Pro 13 inch",
+      sku: "MBP13-001",
+      totalImported: 50,
+      totalExported: 35,
+      currentStock: 15,
+      minStock: 5,
+      maxStock: 50,
+      unitPrice: 25000000,
+      totalValue: 375000000,
+      productImage: "assets/img/products/macbook.jpg",
+      createdDate: "2024-01-15",
+      lastUpdated: "2024-01-20"
+    },
+    {
+      key: 2,
+      product: "iPhone 15 Pro",
+      sku: "IP15P-001",
+      totalImported: 80,
+      totalExported: 55,
+      currentStock: 25,
+      minStock: 10,
+      maxStock: 100,
+      unitPrice: 28000000,
+      totalValue: 700000000,
+      productImage: "assets/img/products/iphone.jpg",
+      createdDate: "2024-01-14",
+      lastUpdated: "2024-01-19"
+    },
+    {
+      key: 3,
+      product: "Samsung Galaxy S24",
+      sku: "SGS24-001",
+      totalImported: 30,
+      totalExported: 22,
+      currentStock: 8,
+      minStock: 5,
+      maxStock: 30,
+      unitPrice: 22000000,
+      totalValue: 176000000,
+      productImage: "assets/img/products/samsung.jpg",
+      createdDate: "2024-01-13",
+      lastUpdated: "2024-01-18"
+    },
+    {
+      key: 4,
+      product: "Dell XPS 13",
+      sku: "DXP13-001",
+      totalImported: 40,
+      totalExported: 28,
+      currentStock: 12,
+      minStock: 8,
+      maxStock: 40,
+      unitPrice: 23000000,
+      totalValue: 276000000,
+      productImage: "assets/img/products/dell.jpg",
+      createdDate: "2024-01-12",
+      lastUpdated: "2024-01-17"
+    },
+    {
+      key: 5,
+      product: "iPad Pro 11 inch",
+      sku: "IPD11-001",
+      totalImported: 60,
+      totalExported: 45,
+      currentStock: 15,
+      minStock: 10,
+      maxStock: 60,
+      unitPrice: 20000000,
+      totalValue: 300000000,
+      productImage: "assets/img/products/ipad.jpg",
+      createdDate: "2024-01-11",
+      lastUpdated: "2024-01-16"
+    }
+  ];
+
+  const dataSource = apiProducts.length > 0 ? apiProducts : (legacyProducts.length > 0 ? legacyProducts : sampleInventoryData);
+
+  const dispatch = useDispatch();
+
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // State for pagination - sync with Redux
+  const [currentPage, setCurrentPage] = useState(reduxCurrentPage || 1);
+  const [pageSize, setPageSize] = useState(reduxPageSize || 20);
+
+  // State for filter values
+  const [filterValues, setFilterValues] = useState({
+    product: '',
+    stockLevel: '',
+    quantityRange: '',
+    stockStatus: ''
+  });
+
+  // Calculate total records and pages
+  const totalRecords = totalProducts || dataSource.length;
+  const actualTotalPages = Math.ceil(totalRecords / pageSize);
+
+  useEffect(() => {
+    hideAntElements();
+
+    // Fetch products on component mount
+    if (apiProducts.length === 0) {
+      dispatch(fetchProducts({ page: currentPage, pageSize }));
+    }
+  }, [dispatch, apiProducts.length]);
+
+  // Sync local state with Redux state
+  useEffect(() => {
+    if (reduxCurrentPage && reduxCurrentPage !== currentPage) {
+      setCurrentPage(reduxCurrentPage);
+    }
+    if (reduxPageSize && reduxPageSize !== pageSize) {
+      setPageSize(reduxPageSize);
+    }
+  }, [reduxCurrentPage, reduxPageSize, currentPage, pageSize]);
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+
+    if (value.trim()) {
+      dispatch(searchProducts(value));
+    } else {
+      dispatch(fetchProducts({ page: 1, pageSize }));
+      setCurrentPage(1);
+    }
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+    dispatch(fetchProducts({ page, pageSize, search: searchTerm }));
+  };
+
+  const handlePageSizeChange = (newPageSize) => {
+    setPageSize(newPageSize);
+    setCurrentPage(1);
+    dispatch(fetchProducts({ page: 1, pageSize: newPageSize, search: searchTerm }));
+  };
+
+  const handleDelete = async (productId) => {
+    try {
+      const result = await MySwal.fire({
+        title: "Are you sure?",
+        text: "You won't be able to revert this!",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#dc3545",
+        cancelButtonColor: "#6c757d",
+        confirmButtonText: "Yes, delete it!",
+        cancelButtonText: "Cancel",
+      });
+
+      if (result.isConfirmed) {
+        await dispatch(deleteProduct(productId));
+
+        MySwal.fire({
+          title: "Deleted!",
+          text: "Product has been deleted successfully.",
+          icon: "success",
+          confirmButtonColor: "#28a745",
+        });
+
+        // Refresh the product list
+        dispatch(fetchProducts({ page: currentPage, pageSize, search: searchTerm }));
+      }
+    } catch (error) {
+      MySwal.fire({
+        title: "Error!",
+        text: "Failed to delete product. Please try again.",
+        icon: "error",
+        confirmButtonColor: "#dc3545",
+      });
+    }
+  };
+
+  const oldandlatestvalue = [
+    { value: "date", label: "Sắp xếp theo ngày" },
+    { value: "newest", label: "Mới nhất" },
+    { value: "oldest", label: "Cũ nhất" },
+  ];
+
+  const stockLevelOptions = [
+    { value: "", label: "Chọn mức tồn kho" },
+    { value: "low", label: "Tồn kho thấp" },
+    { value: "normal", label: "Tồn kho bình thường" },
+    { value: "high", label: "Tồn kho cao" },
+  ];
+
+  const stockStatusOptions = [
+    { value: "", label: "Chọn trạng thái" },
+    { value: "in-stock", label: "Còn hàng" },
+    { value: "low-stock", label: "Sắp hết hàng" },
+    { value: "out-of-stock", label: "Hết hàng" },
+  ];
+
+  const quantityRangeOptions = [
+    { value: "", label: "Chọn khoảng số lượng" },
+    { value: "0-10", label: "0 - 10" },
+    { value: "11-50", label: "11 - 50" },
+    { value: "51-100", label: "51 - 100" },
+    { value: "100+", label: "Trên 100" },
+  ];
+
+  // Handle filter value changes
+  const handleFilterChange = (filterType, value) => {
+    setFilterValues(prev => ({
+      ...prev,
+      [filterType]: value
+    }));
+  };
+
+  const columns = [
+    {
+      title: "Sản phẩm",
+      dataIndex: "product",
+      render: (text, record) => (
+        <span>{text || record.name || record.productName}</span>
+      ),
+      sorter: (a, b) => a.product.length - b.product.length,
+    },
+    {
+      title: "Mã",
+      dataIndex: "sku",
+      render: (_, record) => {
+        const sku = record.sku || record.code || record.productCode || '-';
+        return <span>{sku}</span>;
+      },
+      sorter: (a, b) => {
+        const skuA = a.sku || a.code || a.productCode || '';
+        const skuB = b.sku || b.code || b.productCode || '';
+        return skuA.length - skuB.length;
+      },
+    },
+    {
+      title: "Tổng nhập kho",
+      dataIndex: "totalImported",
+      render: (_, record) => {
+        const totalImported = record.totalImported || 0;
+
+        return (
+          <span
+            className="import-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: '#e8f5e8',
+              color: '#28a745',
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: '1px solid #c3e6cb',
+              minWidth: '80px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {totalImported.toLocaleString('vi-VN')}
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const importedA = a.totalImported || 0;
+        const importedB = b.totalImported || 0;
+        return importedA - importedB;
+      },
+    },
+    {
+      title: "Tổng xuất kho",
+      dataIndex: "totalExported",
+      render: (_, record) => {
+        const totalExported = record.totalExported || 0;
+
+        return (
+          <span
+            className="export-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: '#fff3cd',
+              color: '#856404',
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: '1px solid #ffeaa7',
+              minWidth: '80px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {totalExported.toLocaleString('vi-VN')}
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const exportedA = a.totalExported || 0;
+        const exportedB = b.totalExported || 0;
+        return exportedA - exportedB;
+      },
+    },
+    {
+      title: "Tồn kho hiện tại",
+      dataIndex: "currentStock",
+      render: (_, record) => {
+        const stock = record.currentStock || record.qty || record.quantity || 0;
+        const minStock = record.minStock || 5;
+
+        let badgeColor = '#e3f2fd';
+        let textColor = '#1565c0';
+        let borderColor = '#bbdefb';
+
+        if (stock <= 0) {
+          badgeColor = '#f8d7da';
+          textColor = '#721c24';
+          borderColor = '#f5c6cb';
+        } else if (stock <= minStock) {
+          badgeColor = '#fff3cd';
+          textColor = '#856404';
+          borderColor = '#ffeaa7';
+        }
+
+        return (
+          <span
+            className="stock-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: badgeColor,
+              color: textColor,
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: `1px solid ${borderColor}`,
+              minWidth: '80px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {stock.toLocaleString('vi-VN')}
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const stockA = a.currentStock || a.qty || a.quantity || 0;
+        const stockB = b.currentStock || b.qty || b.quantity || 0;
+        return stockA - stockB;
+      },
+    },
+    {
+      title: "Giá trị tồn kho",
+      dataIndex: "totalValue",
+      render: (_, record) => {
+        const stock = record.currentStock || record.qty || record.quantity || 0;
+        const price = record.unitPrice || record.price || record.sellPrice || 0;
+        const totalValue = stock * price;
+
+        return (
+          <span
+            className="value-badge"
+            style={{
+              display: 'inline-block',
+              padding: '6px 12px',
+              backgroundColor: '#f3e5f5',
+              color: '#7b1fa2',
+              borderRadius: '20px',
+              fontSize: '13px',
+              fontWeight: '600',
+              border: '1px solid #e1bee7',
+              minWidth: '120px',
+              textAlign: 'center',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+            }}
+          >
+            {totalValue.toLocaleString('vi-VN')} ₫
+          </span>
+        );
+      },
+      sorter: (a, b) => {
+        const valueA = (a.currentStock || 0) * (a.unitPrice || 0);
+        const valueB = (b.currentStock || 0) * (b.unitPrice || 0);
+        return valueA - valueB;
+      },
+    },
+    {
+      title: "Thao tác",
+      dataIndex: "action",
+      render: (_, record) => (
+        <td className="action-table-data">
+          <div className="edit-delete-action">
+            <Link className="me-2 p-2" to={route.productdetails}>
+              <Eye className="feather-view" />
+            </Link>
+            <Link
+              className="me-2 p-2"
+              to={`${route.editproduct}/${record.id || record.key}`}
+              onClick={() => {
+                // Pre-fetch product details for editing
+                if (record.id || record.key) {
+                  dispatch(fetchProduct(record.id || record.key));
+                }
+              }}
+            >
+              <Edit className="feather-edit" />
+            </Link>
+            <Link
+              className="confirm-text p-2"
+              to="#"
+              onClick={(e) => {
+                e.preventDefault();
+                handleDelete(record.id || record.key);
+              }}
+            >
+              <Trash2 className="feather-delete" />
+            </Link>
+          </div>
+        </td>
+      ),
+    },
+  ];
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        <div className="page-header">
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4>Tồn kho</h4>
+              <h6>Quản lý thông tin tồn kho sản phẩm</h6>
+            </div>
+          </div>
+          <ul className="table-top-head">
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Pdf</Tooltip>}
+              >
+                <Link>
+                  <ImageWithBasePath
+                    src="assets/img/icons/pdf.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Excel</Tooltip>}
+              >
+                <Link data-bs-toggle="tooltip" data-bs-placement="top">
+                  <ImageWithBasePath
+                    src="assets/img/icons/excel.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+            <li>
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id="tooltip-top">Print</Tooltip>}
+              >
+                <Link data-bs-toggle="tooltip" data-bs-placement="top">
+                  <ImageWithBasePath
+                    src="assets/img/icons/printer.svg"
+                    alt="img"
+                  />
+                </Link>
+              </OverlayTrigger>
+            </li>
+          </ul>
+        </div>
+        {/* /product list */}
+        <div className="card mb-0" id="filter_inputs">
+          <div className="card-body pb-0">
+            <div className="row">
+              <div className="col-lg-12 col-sm-12">
+                <div className="row">
+                  <div className="col-lg col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <StopCircle className="info-img" />
+                      <Select
+                        className="img-select"
+                        options={oldandlatestvalue}
+                        placeholder="Sắp xếp theo ngày"
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <Box className="info-img" />
+                      <Select
+                        className="img-select"
+                        options={stockLevelOptions}
+                        placeholder="Chọn mức tồn kho"
+                        value={stockLevelOptions.find(option => option.value === filterValues.stockLevel)}
+                        onChange={(selectedOption) => handleFilterChange('stockLevel', selectedOption?.value || '')}
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <Sliders className="info-img" />
+                      <Select
+                        className="img-select"
+                        options={quantityRangeOptions}
+                        placeholder="Chọn khoảng số lượng"
+                        value={quantityRangeOptions.find(option => option.value === filterValues.quantityRange)}
+                        onChange={(selectedOption) => handleFilterChange('quantityRange', selectedOption?.value || '')}
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <Filter className="info-img" />
+                      <Select
+                        className="img-select"
+                        options={stockStatusOptions}
+                        placeholder="Chọn trạng thái"
+                        value={stockStatusOptions.find(option => option.value === filterValues.stockStatus)}
+                        onChange={(selectedOption) => handleFilterChange('stockStatus', selectedOption?.value || '')}
+                      />
+                    </div>
+                  </div>
+                  <div className="col-lg-1 col-sm-6 col-12">
+                    <div className="input-blocks">
+                      <Link className="btn btn-filters ms-auto">
+                        <i data-feather="search" className="feather-search" />
+                        Tìm kiếm
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* /Filter */}
+        <div className="card table-list-card">
+          <div className="card-body">
+            <div className="table-top">
+              <div className="search-set">
+                <div className="search-input">
+                  <input
+                    type="text"
+                    placeholder="Tìm kiếm sản phẩm tồn kho..."
+                    className="form-control form-control-sm formsearch"
+                    value={searchTerm}
+                    onChange={handleSearch}
+                  />
+                  <Link className="btn btn-searchset">
+                    <i data-feather="search" className="feather-search" />
+                  </Link>
+                </div>
+              </div>
+              <div className="search-path">
+                <Link
+                  className={`btn btn-filter ${
+                    isFilterVisible ? "setclose" : ""
+                  }`}
+                  id="filter_search"
+                  onClick={() => setIsFilterVisible(!isFilterVisible)}
+                >
+                  <Filter className="filter-icon" />
+                  <span>
+                    <ImageWithBasePath
+                      src="assets/img/icons/closes.svg"
+                      alt="img"
+                    />
+                  </span>
+                </Link>
+              </div>
+              <div className="form-sort">
+                <Sliders className="info-img" />
+                <Select
+                  className="img-select"
+                  options={oldandlatestvalue}
+                  placeholder="Sắp xếp theo ngày"
+                />
+              </div>
+            </div>
+            {/* /Filter */}
+            <div className="table-responsive">
+              {loading ? (
+                <div className="text-center p-4">
+                  <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                  <p className="mt-2">Đang tải dữ liệu tồn kho...</p>
+                </div>
+              ) : error ? (
+                <div className="text-center p-4">
+                  <div className="alert alert-danger">
+                    <p>Lỗi: {error}</p>
+                  </div>
+                  <button
+                    className="btn btn-primary"
+                    onClick={() => dispatch(fetchProducts({ page: currentPage, pageSize }))}
+                  >
+                    Retry
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <Table
+                    columns={columns}
+                    dataSource={dataSource}
+                    pagination={false} // Disable Ant Design pagination
+                    rowSelection={null} // Disable row selection checkboxes
+                  />
+
+                  {/* Custom Pagination */}
+                  <CustomPagination
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    totalCount={totalRecords}
+                    totalPages={actualTotalPages}
+                    loading={loading}
+                    onPageChange={handlePageChange}
+                    onPageSizeChange={handlePageSizeChange}
+                    pageSizeOptions={[10, 20, 50, 100]}
+                    showInfo={true}
+                    showPageSizeSelector={true}
+                    compact={false}
+                    className="inventory-pagination"
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        {/* /product list */}
+        <Brand />
+      </div>
+    </div>
+  );
+};
+
+export default ProductList3;

src/feature-module/inventory/weddingGuestList.jsx

@@ -13,6 +13,7 @@ const WeddingGuestList = () => {
   const [guestData, setGuestData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
@@ -271,11 +272,11 @@ const WeddingGuestList = () => {
       const response = await weddingGuestService.getUnits();
 
       if (response.success) {
-      
+
         console.log('✅ Units loaded:', response.data);
       } else {
         console.log('🔄 Using mock units as fallback');
-    
+
       }
     } catch (error) {
       console.error('Error loading units:', error);
@@ -367,6 +368,84 @@ const WeddingGuestList = () => {
     }).format(amount);
   };
 
+  // Theme detection with multiple approaches
+  useEffect(() => {
+    const checkTheme = () => {
+      const htmlElement = document.documentElement;
+      const bodyElement = document.body;
+
+      // Get all possible theme indicators
+      const layoutMode = htmlElement.getAttribute('data-layout-mode');
+      const dataTheme = htmlElement.getAttribute('data-theme');
+      const bodyClass = bodyElement.className;
+      const colorSchema = localStorage.getItem('colorschema');
+
+      // Check multiple ways to detect dark mode
+      const isDarkByLayoutMode = layoutMode === 'dark_mode';
+      const isDarkByDataTheme = dataTheme === 'dark';
+      const isDarkByLocalStorage = colorSchema === 'dark_mode';
+      const isDarkByBodyClass = bodyClass.includes('dark') || bodyClass.includes('dark-mode');
+
+      // Use any method that indicates dark mode
+      const isDark = isDarkByLayoutMode || isDarkByDataTheme || isDarkByLocalStorage || isDarkByBodyClass;
+
+      console.log('🎨 Theme debug:', {
+        layoutMode,
+        dataTheme,
+        bodyClass,
+        colorSchema,
+        isDarkByLayoutMode,
+        isDarkByDataTheme,
+        isDarkByLocalStorage,
+        isDarkByBodyClass,
+        finalIsDark: isDark
+      });
+
+      setIsDarkTheme(isDark);
+    };
+
+    // Initial check
+    checkTheme();
+
+    // Check again after a short delay to catch late theme application
+    setTimeout(checkTheme, 100);
+    setTimeout(checkTheme, 500);
+
+    // Listen for all possible theme changes
+    const observer = new MutationObserver(() => {
+      console.log('🔄 DOM mutation detected, rechecking theme...');
+      checkTheme();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-layout-mode', 'data-theme', 'class']
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme']
+    });
+
+    // Listen for localStorage changes
+    const handleStorageChange = (e) => {
+      if (e.key === 'colorschema') {
+        console.log('📦 localStorage colorschema changed:', e.newValue);
+        setTimeout(checkTheme, 50);
+      }
+    };
+    window.addEventListener('storage', handleStorageChange);
+
+    // Also check periodically as fallback
+    const interval = setInterval(checkTheme, 2000);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('storage', handleStorageChange);
+      clearInterval(interval);
+    };
+  }, []);
+
   // Load data on component mount
   useEffect(() => {
     loadGuests();
@@ -488,28 +567,48 @@ const WeddingGuestList = () => {
         );
       }
     },
-   
+
     {
       title: '',
       key: 'actions',
-      width: 100,
+      width: 120,
       render: (_, record) => (
-        <div className="action-table-data">
-          <div className="edit-delete-action">
-            <Edit
-              size={16}
-              style={{ cursor: 'pointer', color: '#1890ff', marginRight: '8px' }}
-              onClick={() => {
-                // TODO: Navigate to edit page
-                message.info('Edit functionality will be implemented');
+        <div className="d-flex gap-2">
+          <Link to={`/edit-wedding-guest/${record.id}`}>
+            <button
+              className="btn btn-sm btn-outline-warning"
+              title="Chỉnh sửa"
+              style={{
+                border: '1px solid #faad14',
+                color: '#faad14',
+                backgroundColor: 'transparent',
+                padding: '4px 8px',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
               }}
-            />
-            <Trash2
-              size={16}
-              style={{ cursor: 'pointer', color: '#ff4d4f' }}
-              onClick={() => handleDeleteGuest(record.id)}
-            />
-          </div>
+            >
+              <Edit size={14} />
+            </button>
+          </Link>
+          <button
+            className="btn btn-sm btn-outline-danger"
+            onClick={() => handleDeleteGuest(record.id)}
+            title="Xóa"
+            style={{
+              border: '1px solid #ff4d4f',
+              color: '#ff4d4f',
+              backgroundColor: 'transparent',
+              padding: '4px 8px',
+              borderRadius: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <Trash2 size={14} />
+          </button>
         </div>
       )
     }
@@ -531,6 +630,285 @@ const WeddingGuestList = () => {
 
   return (
     <div className="page-wrapper">
+      <style>
+        {`
+          /* Dynamic theme styling for wedding guest list */
+          .card.table-list-card {
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          .wedding-guest-search-input input,
+          .wedding-guest-search-input .ant-input {
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+          }
+
+          .wedding-guest-search-input .ant-input::placeholder {
+            color: ${isDarkTheme ? '#888888' : '#999999'} !important;
+          }
+
+          .ant-select-selector {
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+          }
+
+          .ant-select-selection-item {
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          .ant-table {
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          .ant-table-thead > tr > th {
+            background-color: ${isDarkTheme ? '#2a2a2a' : '#fafafa'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+            border-bottom: 1px solid ${isDarkTheme ? '#434343' : '#f0f0f0'} !important;
+          }
+
+          .ant-table-tbody > tr > td {
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+            border-bottom: 1px solid ${isDarkTheme ? '#434343' : '#f0f0f0'} !important;
+          }
+
+          .ant-table-tbody > tr:hover > td {
+            background-color: ${isDarkTheme ? '#2a2a2a' : '#f5f5f5'} !important;
+          }
+
+          /* Page wrapper ant-card styling - match website background */
+          .page-wrapper .content .ant-card {
+            background-color: ${isDarkTheme ? '#141432' : '#FAFBFE'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          /* All ant-card elements in page-wrapper - match website background */
+          .page-wrapper .ant-card,
+          .page-wrapper .content .ant-card,
+          .page-wrapper .content .ant-card.ant-card-bordered {
+            background-color: ${isDarkTheme ? '#141432' : '#FAFBFE'} !important;
+            background: ${isDarkTheme ? '#141432' : '#FAFBFE'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          /* Override any CSS-in-JS styles */
+          .page-wrapper .ant-card[style],
+          .page-wrapper .content .ant-card[style] {
+            background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+            background: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
+          }
+
+          /* Force dark mode styles when data-layout-mode is dark_mode - match website background */
+          html[data-layout-mode="dark_mode"] .page-wrapper .content .ant-card,
+          html[data-layout-mode="dark_mode"] .page-wrapper .ant-card,
+          body.dark-mode .page-wrapper .content .ant-card,
+          body.dark .page-wrapper .content .ant-card {
+            background-color: #141432 !important;
+            background: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          /* Force light mode styles when data-layout-mode is light_mode - match website background */
+          html[data-layout-mode="light_mode"] .page-wrapper .content .ant-card,
+          html[data-layout-mode="light_mode"] .page-wrapper .ant-card,
+          body.light-mode .page-wrapper .content .ant-card,
+          body.light .page-wrapper .content .ant-card {
+            background-color: #FAFBFE !important;
+            background: #FAFBFE !important;
+            border-color: #d9d9d9 !important;
+            color: #000000 !important;
+          }
+
+          /* Project Tracker Style Buttons */
+          .btn-outline-warning {
+            border: 1px solid #faad14 !important;
+            color: #faad14 !important;
+            background-color: transparent !important;
+          }
+
+          .btn-outline-warning:hover {
+            background-color: #faad14 !important;
+            color: #ffffff !important;
+            border-color: #faad14 !important;
+          }
+
+          .btn-outline-danger {
+            border: 1px solid #ff4d4f !important;
+            color: #ff4d4f !important;
+            background-color: transparent !important;
+          }
+
+          .btn-outline-danger:hover {
+            background-color: #ff4d4f !important;
+            color: #ffffff !important;
+            border-color: #ff4d4f !important;
+          }
+
+          /* Dark mode button adjustments */
+          [data-layout-mode="dark_mode"] .btn-outline-warning {
+            border-color: #faad14 !important;
+            color: #faad14 !important;
+          }
+
+          [data-layout-mode="dark_mode"] .btn-outline-danger {
+            border-color: #ff4d4f !important;
+            color: #ff4d4f !important;
+          }
+
+          /* Remove background-color from wedding guest search inputs */
+          .wedding-guest-search-input input,
+          .wedding-guest-search-input .ant-input {
+            background-color: transparent !important;
+            background: transparent !important;
+          }
+
+          /* Ensure search input transparency in all themes */
+          .wedding-guest-search-input .ant-input:focus,
+          .wedding-guest-search-input .ant-input:hover,
+          .wedding-guest-search-input input:focus,
+          .wedding-guest-search-input input:hover {
+            background-color: transparent !important;
+            background: transparent !important;
+          }
+
+          /* Dropdown Lists Dark Theme Styling */
+
+          /* Light Mode Dropdown Styling */
+          html[data-layout-mode="light_mode"] .ant-select-selector,
+          html[data-layout-mode="light_mode"] .ant-select-single .ant-select-selector,
+          body.light-mode .ant-select-selector,
+          body.light .ant-select-selector {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-dropdown,
+          body.light-mode .ant-select-dropdown,
+          body.light .ant-select-dropdown {
+            background-color: #ffffff !important;
+            border-color: #d9d9d9 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item,
+          body.light-mode .ant-select-item,
+          body.light .ant-select-item {
+            color: #000000 !important;
+            background-color: #ffffff !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item:hover,
+          body.light-mode .ant-select-item:hover,
+          body.light .ant-select-item:hover {
+            background-color: #f5f5f5 !important;
+            color: #000000 !important;
+          }
+
+          html[data-layout-mode="light_mode"] .ant-select-item-option-selected,
+          body.light-mode .ant-select-item-option-selected,
+          body.light .ant-select-item-option-selected {
+            background-color: #1890ff !important;
+            color: #ffffff !important;
+          }
+
+          /* Dark Mode Dropdown Styling */
+          html[data-layout-mode="dark_mode"] .ant-select-selector,
+          html[data-layout-mode="dark_mode"] .ant-select-single .ant-select-selector,
+          body.dark-mode .ant-select-selector,
+          body.dark .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-dropdown,
+          body.dark-mode .ant-select-dropdown,
+          body.dark .ant-select-dropdown {
+            background-color: #141432 !important;
+            border-color: #434343 !important;
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2) !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item,
+          body.dark-mode .ant-select-item,
+          body.dark .ant-select-item {
+            color: #ffffff !important;
+            background-color: #141432 !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item:hover,
+          body.dark-mode .ant-select-item:hover,
+          body.dark .ant-select-item:hover {
+            background-color: #434343 !important;
+            color: #ffffff !important;
+          }
+
+          html[data-layout-mode="dark_mode"] .ant-select-item-option-selected,
+          body.dark-mode .ant-select-item-option-selected,
+          body.dark .ant-select-item-option-selected {
+            background-color: #177ddc !important;
+            color: #ffffff !important;
+          }
+
+          /* Dropdown Arrow Icon Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-arrow,
+          body.dark-mode .ant-select-arrow,
+          body.dark .ant-select-arrow {
+            color: #ffffff !important;
+          }
+
+          /* Focus States for Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-focused .ant-select-selector,
+          body.dark-mode .ant-select-focused .ant-select-selector,
+          body.dark .ant-select-focused .ant-select-selector {
+            background-color: #141432 !important;
+            border-color: #177ddc !important;
+            box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
+          }
+
+          /* Placeholder Text Dark Mode */
+          html[data-layout-mode="dark_mode"] .ant-select-selection-placeholder,
+          body.dark-mode .ant-select-selection-placeholder,
+          body.dark .ant-select-selection-placeholder {
+            color: #888888 !important;
+          }
+
+          /* Dynamic Theme Support */
+          .ant-select-selector {
+            background-color: ${isDarkTheme ? '#141432' : '#ffffff'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          .ant-select-dropdown {
+            background-color: ${isDarkTheme ? '#141432' : '#ffffff'} !important;
+            border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
+          }
+
+          .ant-select-item {
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+            background-color: ${isDarkTheme ? '#141432' : '#ffffff'} !important;
+          }
+
+          .ant-select-item:hover {
+            background-color: ${isDarkTheme ? '#434343' : '#f5f5f5'} !important;
+            color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
+          }
+
+          .ant-select-item-option-selected {
+            background-color: ${isDarkTheme ? '#177ddc' : '#1890ff'} !important;
+            color: #ffffff !important;
+          }
+        `}
+      </style>
       <div className="content">
         {/* Header */}
         <div className="page-header">
@@ -558,9 +936,8 @@ const WeddingGuestList = () => {
                   type="primary"
                   icon={<Plus size={16} />}
                   className="btn btn-added"
-                  style={{ backgroundColor: '#ff69b4', borderColor: '#ff69b4' }}
                 >
-                  Thêm khách mời
+                  Thêm mới
                 </Button>
               </Link>
             </div>
@@ -620,13 +997,22 @@ const WeddingGuestList = () => {
           <div className="card-body pb-0">
             <div className="table-top">
               <div className="search-set">
+                <div className="search-input">
+                  <span style={{ fontSize: '16px', fontWeight: '500' }}>
+                    Danh sách khách mời
+                  </span>
+                </div>
                 <div className="search-input">
                   <Input
                     placeholder="Tìm kiếm khách mời..."
                     prefix={<Search size={16} />}
                     value={searchTerm}
                     onChange={(e) => handleSearch(e.target.value)}
-                    style={{ width: 300 }}
+                    style={{
+                      width: 300,
+                      border: '1px solid #d9d9d9'
+                    }}
+                    className="wedding-guest-search-input"
                   />
                 </div>
               </div>

src/feature-module/projects/projecttracker.jsx

@@ -35,12 +35,39 @@ const ProjectTracker = () => {
   const [totalCount, setTotalCount] = useState(0);
   const [totalPages, setTotalPages] = useState(1);
 
-  // Load projects from API
-  const loadProjects = async (page = currentPage, size = pageSize) => {
+  // Add loading ref to prevent duplicate calls with timestamp
+  const loadingRef = React.useRef(false);
+  const lastCallRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+
+  // Load projects from API with enhanced duplicate prevention
+  const loadProjects = React.useCallback(async (page = currentPage, size = pageSize) => {
+    const now = Date.now();
+    const timeSinceLastCall = now - lastCallRef.current;
+
+    // Prevent duplicate API calls within 500ms
+    if (loadingRef.current || timeSinceLastCall < 500) {
+      console.log('🚫 API call blocked - already in progress or too soon:', {
+        loading: loadingRef.current,
+        timeSinceLastCall,
+        mounted: mountedRef.current
+      });
+      return;
+    }
+
+    // Only proceed if component is mounted
+    if (!mountedRef.current) {
+      console.log('🚫 Component not mounted, skipping API call');
+      return;
+    }
+
+    lastCallRef.current = now;
+    loadingRef.current = true;
     setLoading(true);
+
     try {
       const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || '';
-      console.log('Loading projects from:', `${apiBaseUrl}Projects`);
+      console.log('📡 Loading projects from:', `${apiBaseUrl}Projects?page=${page}&pageSize=${size}`);
 
       const response = await fetch(`${apiBaseUrl}Projects?page=${page}&pageSize=${size}`, {
         method: 'GET',
@@ -55,7 +82,7 @@ const ProjectTracker = () => {
       }
 
       const result = await response.json();
-      console.log('API Response:', result);
+      console.log('✅ API Response:', result);
 
       if (result.data) {
         // Map API data to table format
@@ -99,15 +126,20 @@ const ProjectTracker = () => {
         setTotalPages(1);
       }
     } catch (error) {
-      console.error('Error loading projects:', error);
-      // Set empty data on error
-      setProjectData([]);
-      setTotalCount(0);
-      setTotalPages(1);
+      console.error('💥 Error loading projects:', error);
+      // Only update state if component is still mounted
+      if (mountedRef.current) {
+        setProjectData([]);
+        setTotalCount(0);
+        setTotalPages(1);
+      }
     } finally {
-      setLoading(false);
+      if (mountedRef.current) {
+        setLoading(false);
+      }
+      loadingRef.current = false; // Reset loading ref
     }
-  };
+  }, [currentPage, pageSize]); // Add dependencies for useCallback
 
   // Helper functions for mapping
   const getCategoryColor = (categoryName) => {
@@ -188,6 +220,12 @@ const ProjectTracker = () => {
 
   // Delete project function
   const handleDeleteProject = async (projectId) => {
+    // Prevent multiple delete operations
+    if (loading || loadingRef.current) {
+      console.log('🚫 Operation already in progress, ignoring delete request');
+      return;
+    }
+
     Modal.confirm({
       title: 'Xác nhận xóa dự án',
       content: 'Bạn có chắc chắn muốn xóa dự án này không? Hành động này không thể hoàn tác.',
@@ -260,34 +298,47 @@ const ProjectTracker = () => {
     });
   };
 
-  // Load data on component mount
+  // Mount/unmount management
   useEffect(() => {
+    mountedRef.current = true;
+    console.log('🚀 Component mounted - loading projects');
+
+    // Load projects on mount
     loadProjects();
-  }, []);
+
+    // Cleanup on unmount
+    return () => {
+      console.log('🔄 Component unmounting - cleaning up');
+      mountedRef.current = false;
+      loadingRef.current = false;
+      lastCallRef.current = 0;
+    };
+  }, [loadProjects]); // Include loadProjects in dependencies
 
 
 
   // Handle pagination change
   const handlePageChange = (page) => {
-    setCurrentPage(page);
-    loadProjects(page, pageSize);
+    if (page !== currentPage && !loading) {
+      setCurrentPage(page);
+      loadProjects(page, pageSize);
+    }
   };
 
   // Handle page size change
   const handlePageSizeChange = (newPageSize) => {
-    setPageSize(newPageSize);
-    setCurrentPage(1); // Reset to first page when changing page size
-    loadProjects(1, newPageSize);
+    if (newPageSize !== pageSize && !loading) {
+      setPageSize(newPageSize);
+      setCurrentPage(1); // Reset to first page when changing page size
+      loadProjects(1, newPageSize);
+    }
   };
 
-  // Handle table change (for Ant Design Table)
-  const handleTableChange = (paginationInfo) => {
-    if (paginationInfo.current !== currentPage) {
-      handlePageChange(paginationInfo.current);
-    }
-    if (paginationInfo.pageSize !== pageSize) {
-      handlePageSizeChange(paginationInfo.pageSize);
-    }
+  // Handle table change (for Ant Design Table) - DISABLED to prevent double calls
+  const handleTableChange = () => {
+    // Disabled to prevent duplicate API calls since we use CustomPagination
+    // The CustomPagination component handles all pagination logic
+    console.log('Table change event ignored to prevent duplicate API calls');
   };
 
 
@@ -345,7 +396,7 @@ const ProjectTracker = () => {
       dataIndex: 'manager',
       key: 'manager',
       render: (managers) => (
-        <Avatar.Group maxCount={2} size="small">
+        <Avatar.Group max={{ count: 2 }} size="small">
           {managers.map((manager, index) => (
             <Avatar
               key={index}

src/index.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+}

src/index.js

@@ -54,14 +54,11 @@ initializeTheme();
 if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
-    <React.StrictMode>
     <Provider store={store} >
       <BrowserRouter basename={process.env.PUBLIC_URL}>
       <AllRoutes />
-
       </BrowserRouter>
     </Provider>
-  </React.StrictMode>
   );
 } else {
   console.error("Element with id 'root' not found.");

src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/pages/Calendar.js

@@ -0,0 +1,367 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { Draggable } from "@fullcalendar/interaction";
+import "../styles/fullcalendar.min.css";
+import "../styles/calendar-custom.css";
+import Select from "react-select";
+
+const Calendar = () => {
+  const calendarRef = useRef(null);
+  const initializedRef = useRef(false);
+  
+  const [weekendsVisible, setWeekendsVisible] = useState(true);
+  const [isnewevent, setisnewevent] = useState(false);
+  const [iseditdelete, setiseditdelete] = useState(false);
+  const [event_title, setevent_title] = useState("");
+  const [category_color, setcategory_color] = useState("");
+  const [calenderevent, setcalenderevent] = useState(null);
+  const [addneweventobj, setaddneweventobj] = useState(null);
+
+  // Combined events state for calendar display - using current dates
+  const today = new Date();
+  const [calendarEvents, setCalendarEvents] = useState([
+    {
+      id: 'default-1',
+      title: "🎯 Existing Meeting",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
+      className: "bg-primary",
+    },
+    {
+      id: 'default-2',
+      title: "📈 Weekly Review",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),
+      className: "bg-success",
+    },
+    {
+      id: 'default-3',
+      title: "🚀 Project Launch",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 9, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),
+      className: "bg-warning",
+    },
+    {
+      id: 'default-4',
+      title: "🎉 Team Building",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 13, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 18, 0),
+      className: "bg-info",
+    }
+  ]);
+
+  useEffect(() => {
+    if (initializedRef.current) {
+      console.log("🚫 Calendar already initialized, skipping");
+      return;
+    }
+
+    let elements = Array.from(
+      document.getElementsByClassName("react-datepicker-wrapper")
+    );
+    elements.map((element) => element.classList.add("width-100"));
+
+    // Initialize external draggable events
+    const draggableEl = document.getElementById("calendar-events");
+    if (draggableEl) {
+      console.log("🚀 Initializing calendar draggable events");
+
+      new Draggable(draggableEl, {
+        itemSelector: ".calendar-events",
+        eventData: function(eventEl) {
+          const title = eventEl.innerText.trim();
+          const className = eventEl.getAttribute("data-class");
+          return {
+            title: title,
+            className: className,
+            duration: "01:00"
+          };
+        },
+        longPressDelay: 0,
+        touchTimeoutDelay: 0
+      });
+
+      initializedRef.current = true;
+      console.log("✅ Calendar initialization completed");
+    }
+  }, []);
+
+  const handleDateSelect = useCallback((selectInfo) => {
+    console.log("📅 Date selected:", selectInfo);
+    setaddneweventobj(selectInfo);
+    setisnewevent(true);
+  }, []);
+
+  const handleEventClick = useCallback((clickInfo) => {
+    console.log("🖱️ Event clicked:", clickInfo.event);
+    setcalenderevent(clickInfo.event);
+    setevent_title(clickInfo.event.title);
+    setiseditdelete(true);
+  }, []);
+
+  const handleEventReceive = useCallback((info) => {
+    console.log("📥 External event dropped:", info);
+    
+    const newEvent = {
+      id: `external-${Date.now()}`,
+      title: info.event.title,
+      start: info.event.start,
+      end: info.event.end,
+      className: info.event.classNames[0] || "bg-primary"
+    };
+
+    setCalendarEvents(prev => [...prev, newEvent]);
+  }, []);
+
+  const handleEventDrop = useCallback((info) => {
+    console.log("🔄 Event moved:", info);
+    
+    setCalendarEvents(prev => 
+      prev.map(event => 
+        event.id === info.event.id 
+          ? { ...event, start: info.event.start, end: info.event.end }
+          : event
+      )
+    );
+  }, []);
+
+  const addnewevent = () => {
+    let calendarApi = addneweventobj.view.calendar;
+
+    calendarApi.unselect();
+
+    if (event_title) {
+      const newEvent = {
+        id: `new-${Date.now()}`,
+        title: event_title,
+        className: category_color,
+        start: addneweventobj.startStr,
+        end: addneweventobj.endStr,
+        allDay: addneweventobj.allDay,
+      };
+
+      calendarApi.addEvent(newEvent);
+      setCalendarEvents(prev => [...prev, newEvent]);
+    }
+    setisnewevent(false);
+  };
+
+  const onupdateModalClose = () => {
+    setiseditdelete(false);
+    setevent_title("");
+  };
+
+  const oncreateeventModalClose = () => {
+    setevent_title("");
+    setisnewevent(false);
+  };
+
+  const removeevent = () => {
+    calenderevent.remove();
+    setCalendarEvents(prev => prev.filter(event => event.id !== calenderevent.id));
+    setiseditdelete(false);
+  };
+
+  const categoryColorOptions = [
+    { value: "bg-danger", label: "🔴 Đỏ", color: "#dc3545" },
+    { value: "bg-success", label: "🟢 Xanh lá", color: "#28a745" },
+    { value: "bg-primary", label: "🔵 Xanh dương", color: "#007bff" },
+    { value: "bg-info", label: "🟦 Xanh nhạt", color: "#17a2b8" },
+    { value: "bg-warning", label: "🟡 Vàng", color: "#ffc107" },
+    { value: "bg-purple", label: "🟣 Tím", color: "#6f42c1" },
+  ];
+
+  return (
+    <div className="page-wrapper calendar-page-wrapper">
+      <div className="content">
+        <div className="calendar-page-header">
+          <div className="row align-items-center w-100">
+            <div className="col-lg-8 col-sm-12">
+              <h3 className="page-title">📅 Beautiful Calendar</h3>
+            </div>
+            <div className="col-lg-4 col-sm-12 text-end">
+              <button
+                className="calendar-create-btn"
+                onClick={() => setisnewevent(true)}
+              >
+                Thêm sự kiện
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-lg-3 col-md-4">
+            <div className="calendar-sidebar">
+              <h4 className="card-title">🎯 Drag & Drop Events</h4>
+              <div id="calendar-events" className="mb-3">
+                <div className="calendar-events" data-class="bg-danger">
+                  <i className="fas fa-circle" /> 👥 Họp
+                </div>
+                <div className="calendar-events" data-class="bg-success">
+                  <i className="fas fa-circle" /> 📞 Gọi điện
+                </div>
+                <div className="calendar-events" data-class="bg-primary">
+                  <i className="fas fa-circle" /> 💼 Công việc
+                </div>
+                <div className="calendar-events" data-class="bg-info">
+                  <i className="fas fa-circle" /> 🎯 Mục tiêu
+                </div>
+                <div className="calendar-events" data-class="bg-warning">
+                  <i className="fas fa-circle" /> ⚠️ Quan trọng
+                </div>
+                <div className="calendar-events" data-class="bg-purple">
+                  <i className="fas fa-circle" /> 🎉 Sự kiện
+                </div>
+              </div>
+              
+              <div className="calendar-options">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={weekendsVisible}
+                    onChange={(e) => setWeekendsVisible(e.target.checked)}
+                  />
+                  Hiển thị cuối tuần
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-9 col-md-8">
+            <div className="calendar-main-card">
+              <div className="card-body">
+                <FullCalendar
+                  ref={calendarRef}
+                  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+                  locale="vi"
+                  headerToolbar={{
+                    left: "prev,next today",
+                    center: "title",
+                    right: "dayGridMonth,timeGridWeek,timeGridDay",
+                  }}
+                  buttonText={{
+                    today: "Hôm nay",
+                    month: "Tháng",
+                    week: "Tuần",
+                    day: "Ngày",
+                    prev: "Trước",
+                    next: "Sau"
+                  }}
+                  dayHeaderFormat={{ weekday: 'long' }}
+                  titleFormat={{
+                    year: 'numeric',
+                    month: 'long'
+                  }}
+                  initialView="dayGridMonth"
+                  editable={true}
+                  selectable={true}
+                  selectMirror={true}
+                  dayMaxEvents={3}
+                  weekends={weekendsVisible}
+                  droppable={true}
+                  dragScroll={true}
+                  events={calendarEvents}
+                  select={handleDateSelect}
+                  eventClick={handleEventClick}
+                  eventReceive={handleEventReceive}
+                  eventDrop={handleEventDrop}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Add Event Modal */}
+      {isnewevent && (
+        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">Thêm sự kiện mới</h4>
+                <button type="button" className="btn-close" onClick={oncreateeventModalClose}></button>
+              </div>
+              <div className="modal-body">
+                <div className="row">
+                  <div className="col-md-12">
+                    <label>Tiêu đề sự kiện</label>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={event_title}
+                      onChange={(e) => setevent_title(e.target.value)}
+                    />
+                  </div>
+                  <div className="col-md-12">
+                    <label>Màu sắc</label>
+                    <Select
+                      options={categoryColorOptions}
+                      value={categoryColorOptions.find(option => option.value === category_color)}
+                      onChange={(selectedOption) => setcategory_color(selectedOption?.value || "")}
+                      placeholder="Chọn màu sắc"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={oncreateeventModalClose}>
+                  Hủy
+                </button>
+                <button type="button" className="btn btn-primary" onClick={addnewevent}>
+                  Thêm sự kiện
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit/Delete Event Modal */}
+      {iseditdelete && (
+        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">Chỉnh sửa sự kiện</h4>
+                <button type="button" className="btn-close" onClick={onupdateModalClose}></button>
+              </div>
+              <div className="modal-body">
+                <div className="row">
+                  <div className="col-md-12">
+                    <label>Tiêu đề sự kiện</label>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={event_title}
+                      onChange={(e) => setevent_title(e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={onupdateModalClose}>
+                  Hủy
+                </button>
+                <button type="button" className="btn btn-danger" onClick={removeevent}>
+                  Xóa
+                </button>
+                <button type="button" className="btn btn-primary" onClick={() => {
+                  if (calenderevent) {
+                    calenderevent.setProp('title', event_title);
+                  }
+                  onupdateModalClose();
+                }}>
+                  Cập nhật
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Calendar;

src/pages/Calendar.tsx

@@ -0,0 +1,367 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { Draggable } from "@fullcalendar/interaction";
+import "../styles/fullcalendar.min.css";
+import "../styles/calendar-custom.css";
+import Select from "react-select";
+
+const Calendar = () => {
+  const calendarRef = useRef<FullCalendar>(null);
+  const initializedRef = useRef(false);
+  
+  const [weekendsVisible, setWeekendsVisible] = useState(true);
+  const [isnewevent, setisnewevent] = useState(false);
+  const [iseditdelete, setiseditdelete] = useState(false);
+  const [event_title, setevent_title] = useState("");
+  const [category_color, setcategory_color] = useState("");
+  const [calenderevent, setcalenderevent] = useState<any>(null);
+  const [addneweventobj, setaddneweventobj] = useState<any>(null);
+
+  // Combined events state for calendar display - using current dates
+  const today = new Date();
+  const [calendarEvents, setCalendarEvents] = useState([
+    {
+      id: 'default-1',
+      title: "🎯 Existing Meeting",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
+      className: "bg-primary",
+    },
+    {
+      id: 'default-2',
+      title: "📈 Weekly Review",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),
+      className: "bg-success",
+    },
+    {
+      id: 'default-3',
+      title: "🚀 Project Launch",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 9, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),
+      className: "bg-warning",
+    },
+    {
+      id: 'default-4',
+      title: "🎉 Team Building",
+      start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 13, 0),
+      end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 18, 0),
+      className: "bg-info",
+    }
+  ]);
+
+  useEffect(() => {
+    if (initializedRef.current) {
+      console.log("🚫 Calendar already initialized, skipping");
+      return;
+    }
+
+    let elements = Array.from(
+      document.getElementsByClassName("react-datepicker-wrapper")
+    );
+    elements.map((element) => element.classList.add("width-100"));
+
+    // Initialize external draggable events
+    const draggableEl = document.getElementById("calendar-events");
+    if (draggableEl) {
+      console.log("🚀 Initializing calendar draggable events");
+
+      new Draggable(draggableEl, {
+        itemSelector: ".calendar-events",
+        eventData: function(eventEl) {
+          const title = eventEl.innerText.trim();
+          const className = eventEl.getAttribute("data-class");
+          return {
+            title: title,
+            className: className,
+            duration: "01:00"
+          };
+        },
+        longPressDelay: 0,
+        touchTimeoutDelay: 0
+      });
+
+      initializedRef.current = true;
+      console.log("✅ Calendar initialization completed");
+    }
+  }, []);
+
+  const handleDateSelect = useCallback((selectInfo: any) => {
+    console.log("📅 Date selected:", selectInfo);
+    setaddneweventobj(selectInfo);
+    setisnewevent(true);
+  }, []);
+
+  const handleEventClick = useCallback((clickInfo: any) => {
+    console.log("🖱️ Event clicked:", clickInfo.event);
+    setcalenderevent(clickInfo.event);
+    setevent_title(clickInfo.event.title);
+    setiseditdelete(true);
+  }, []);
+
+  const handleEventReceive = useCallback((info: any) => {
+    console.log("📥 External event dropped:", info);
+    
+    const newEvent = {
+      id: `external-${Date.now()}`,
+      title: info.event.title,
+      start: info.event.start,
+      end: info.event.end,
+      className: info.event.classNames[0] || "bg-primary"
+    };
+
+    setCalendarEvents(prev => [...prev, newEvent]);
+  }, []);
+
+  const handleEventDrop = useCallback((info: any) => {
+    console.log("🔄 Event moved:", info);
+    
+    setCalendarEvents(prev => 
+      prev.map(event => 
+        event.id === info.event.id 
+          ? { ...event, start: info.event.start, end: info.event.end }
+          : event
+      )
+    );
+  }, []);
+
+  const addnewevent = () => {
+    let calendarApi = addneweventobj.view.calendar;
+
+    calendarApi.unselect();
+
+    if (event_title) {
+      const newEvent = {
+        id: `new-${Date.now()}`,
+        title: event_title,
+        className: category_color,
+        start: addneweventobj.startStr,
+        end: addneweventobj.endStr,
+        allDay: addneweventobj.allDay,
+      };
+
+      calendarApi.addEvent(newEvent);
+      setCalendarEvents(prev => [...prev, newEvent]);
+    }
+    setisnewevent(false);
+  };
+
+  const onupdateModalClose = () => {
+    setiseditdelete(false);
+    setevent_title("");
+  };
+
+  const oncreateeventModalClose = () => {
+    setevent_title("");
+    setisnewevent(false);
+  };
+
+  const removeevent = () => {
+    calenderevent.remove();
+    setCalendarEvents(prev => prev.filter(event => event.id !== calenderevent.id));
+    setiseditdelete(false);
+  };
+
+  const categoryColorOptions = [
+    { value: "bg-danger", label: "🔴 Đỏ", color: "#dc3545" },
+    { value: "bg-success", label: "🟢 Xanh lá", color: "#28a745" },
+    { value: "bg-primary", label: "🔵 Xanh dương", color: "#007bff" },
+    { value: "bg-info", label: "🟦 Xanh nhạt", color: "#17a2b8" },
+    { value: "bg-warning", label: "🟡 Vàng", color: "#ffc107" },
+    { value: "bg-purple", label: "🟣 Tím", color: "#6f42c1" },
+  ];
+
+  return (
+    <div className="page-wrapper calendar-page-wrapper">
+      <div className="content">
+        <div className="calendar-page-header">
+          <div className="row align-items-center w-100">
+            <div className="col-lg-8 col-sm-12">
+              <h3 className="page-title">📅 Beautiful Calendar</h3>
+            </div>
+            <div className="col-lg-4 col-sm-12 text-end">
+              <button
+                className="calendar-create-btn"
+                onClick={() => setisnewevent(true)}
+              >
+                Thêm sự kiện
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-lg-3 col-md-4">
+            <div className="calendar-sidebar">
+              <h4 className="card-title">🎯 Drag & Drop Events</h4>
+              <div id="calendar-events" className="mb-3">
+                <div className="calendar-events" data-class="bg-danger">
+                  <i className="fas fa-circle" /> 👥 Họp
+                </div>
+                <div className="calendar-events" data-class="bg-success">
+                  <i className="fas fa-circle" /> 📞 Gọi điện
+                </div>
+                <div className="calendar-events" data-class="bg-primary">
+                  <i className="fas fa-circle" /> 💼 Công việc
+                </div>
+                <div className="calendar-events" data-class="bg-info">
+                  <i className="fas fa-circle" /> 🎯 Mục tiêu
+                </div>
+                <div className="calendar-events" data-class="bg-warning">
+                  <i className="fas fa-circle" /> ⚠️ Quan trọng
+                </div>
+                <div className="calendar-events" data-class="bg-purple">
+                  <i className="fas fa-circle" /> 🎉 Sự kiện
+                </div>
+              </div>
+              
+              <div className="calendar-options">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={weekendsVisible}
+                    onChange={(e) => setWeekendsVisible(e.target.checked)}
+                  />
+                  Hiển thị cuối tuần
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-9 col-md-8">
+            <div className="calendar-main-card">
+              <div className="card-body">
+                <FullCalendar
+                  ref={calendarRef}
+                  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+                  locale="vi"
+                  headerToolbar={{
+                    left: "prev,next today",
+                    center: "title",
+                    right: "dayGridMonth,timeGridWeek,timeGridDay",
+                  }}
+                  buttonText={{
+                    today: "Hôm nay",
+                    month: "Tháng",
+                    week: "Tuần",
+                    day: "Ngày",
+                    prev: "Trước",
+                    next: "Sau"
+                  }}
+                  dayHeaderFormat={{ weekday: 'long' }}
+                  titleFormat={{
+                    year: 'numeric',
+                    month: 'long'
+                  }}
+                  initialView="dayGridMonth"
+                  editable={true}
+                  selectable={true}
+                  selectMirror={true}
+                  dayMaxEvents={3}
+                  weekends={weekendsVisible}
+                  droppable={true}
+                  dragScroll={true}
+                  events={calendarEvents}
+                  select={handleDateSelect}
+                  eventClick={handleEventClick}
+                  eventReceive={handleEventReceive}
+                  eventDrop={handleEventDrop}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Add Event Modal */}
+      {isnewevent && (
+        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">Thêm sự kiện mới</h4>
+                <button type="button" className="btn-close" onClick={oncreateeventModalClose}></button>
+              </div>
+              <div className="modal-body">
+                <div className="row">
+                  <div className="col-md-12">
+                    <label>Tiêu đề sự kiện</label>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={event_title}
+                      onChange={(e) => setevent_title(e.target.value)}
+                    />
+                  </div>
+                  <div className="col-md-12">
+                    <label>Màu sắc</label>
+                    <Select
+                      options={categoryColorOptions}
+                      value={categoryColorOptions.find(option => option.value === category_color)}
+                      onChange={(selectedOption) => setcategory_color(selectedOption?.value || "")}
+                      placeholder="Chọn màu sắc"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={oncreateeventModalClose}>
+                  Hủy
+                </button>
+                <button type="button" className="btn btn-primary" onClick={addnewevent}>
+                  Thêm sự kiện
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit/Delete Event Modal */}
+      {iseditdelete && (
+        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">Chỉnh sửa sự kiện</h4>
+                <button type="button" className="btn-close" onClick={onupdateModalClose}></button>
+              </div>
+              <div className="modal-body">
+                <div className="row">
+                  <div className="col-md-12">
+                    <label>Tiêu đề sự kiện</label>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={event_title}
+                      onChange={(e) => setevent_title(e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={onupdateModalClose}>
+                  Hủy
+                </button>
+                <button type="button" className="btn btn-danger" onClick={removeevent}>
+                  Xóa
+                </button>
+                <button type="button" className="btn btn-primary" onClick={() => {
+                  if (calenderevent) {
+                    calenderevent.setProp('title', event_title);
+                  }
+                  onupdateModalClose();
+                }}>
+                  Cập nhật
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Calendar;

src/pages/ProjectTracker.js

@@ -0,0 +1,418 @@
+import React, { useState, useEffect } from "react";
+import { Eye, Edit, Trash2, Plus, Filter, Search } from "feather-icons-react";
+import Select from "react-select";
+
+const ProjectTracker = () => {
+  const [projects, setProjects] = useState([
+    {
+      id: 1,
+      name: "🚀 Website Redesign",
+      category: "Web Development",
+      startDate: "2024-01-15",
+      endDate: "2024-03-15",
+      progress: 75,
+      status: "In Progress",
+      budget: 50000000,
+      team: ["John Doe", "Jane Smith", "Mike Johnson"],
+      description: "Complete redesign of company website with modern UI/UX"
+    },
+    {
+      id: 2,
+      name: "📱 Mobile App Development",
+      category: "Mobile Development",
+      startDate: "2024-02-01",
+      endDate: "2024-06-01",
+      progress: 45,
+      status: "In Progress",
+      budget: 120000000,
+      team: ["Sarah Wilson", "David Brown", "Lisa Chen"],
+      description: "Native mobile application for iOS and Android platforms"
+    },
+    {
+      id: 3,
+      name: "🔒 Security Audit",
+      category: "Security",
+      startDate: "2024-01-01",
+      endDate: "2024-02-01",
+      progress: 100,
+      status: "Completed",
+      budget: 25000000,
+      team: ["Alex Turner", "Emma Davis"],
+      description: "Comprehensive security audit and vulnerability assessment"
+    },
+    {
+      id: 4,
+      name: "☁️ Cloud Migration",
+      category: "Infrastructure",
+      startDate: "2024-03-01",
+      endDate: "2024-05-01",
+      progress: 20,
+      status: "Planning",
+      budget: 80000000,
+      team: ["Tom Wilson", "Rachel Green", "Chris Lee"],
+      description: "Migration of legacy systems to cloud infrastructure"
+    },
+    {
+      id: 5,
+      name: "📊 Data Analytics Platform",
+      category: "Data Science",
+      startDate: "2024-02-15",
+      endDate: "2024-07-15",
+      progress: 60,
+      status: "In Progress",
+      budget: 95000000,
+      team: ["Kevin Zhang", "Maria Garcia", "James Park"],
+      description: "Advanced analytics platform for business intelligence"
+    }
+  ]);
+
+  const [filteredProjects, setFilteredProjects] = useState(projects);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [selectedProject, setSelectedProject] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    let filtered = projects;
+
+    if (searchTerm) {
+      filtered = filtered.filter(project =>
+        project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.description.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    if (statusFilter) {
+      filtered = filtered.filter(project => project.status === statusFilter);
+    }
+
+    if (categoryFilter) {
+      filtered = filtered.filter(project => project.category === categoryFilter);
+    }
+
+    setFilteredProjects(filtered);
+  }, [projects, searchTerm, statusFilter, categoryFilter]);
+
+  const getStatusBadge = (status) => {
+    const statusConfig = {
+      "Completed": { bg: "#e8f5e8", color: "#28a745", border: "#c3e6cb" },
+      "In Progress": { bg: "#e3f2fd", color: "#1565c0", border: "#bbdefb" },
+      "Planning": { bg: "#fff3cd", color: "#856404", border: "#ffeaa7" },
+      "On Hold": { bg: "#f8d7da", color: "#721c24", border: "#f5c6cb" }
+    };
+
+    const config = statusConfig[status] || statusConfig["Planning"];
+
+    return (
+      <span
+        style={{
+          display: 'inline-block',
+          padding: '6px 12px',
+          backgroundColor: config.bg,
+          color: config.color,
+          borderRadius: '20px',
+          fontSize: '13px',
+          fontWeight: '600',
+          border: `1px solid ${config.border}`,
+          minWidth: '100px',
+          textAlign: 'center',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+        }}
+      >
+        {status}
+      </span>
+    );
+  };
+
+  const getProgressBar = (progress) => {
+    let progressColor = "#28a745";
+    if (progress < 30) progressColor = "#dc3545";
+    else if (progress < 70) progressColor = "#ffc107";
+
+    return (
+      <div style={{ width: '100%', backgroundColor: '#e9ecef', borderRadius: '10px', height: '8px' }}>
+        <div
+          style={{
+            width: `${progress}%`,
+            backgroundColor: progressColor,
+            height: '100%',
+            borderRadius: '10px',
+            transition: 'width 0.3s ease'
+          }}
+        />
+        <small style={{ fontSize: '12px', color: '#6c757d', marginTop: '2px', display: 'block' }}>
+          {progress}%
+        </small>
+      </div>
+    );
+  };
+
+  const formatCurrency = (amount) => {
+    return new Intl.NumberFormat('vi-VN', {
+      style: 'currency',
+      currency: 'VND'
+    }).format(amount);
+  };
+
+  const statusOptions = [
+    { value: "", label: "Tất cả trạng thái" },
+    { value: "Planning", label: "📋 Planning" },
+    { value: "In Progress", label: "🔄 In Progress" },
+    { value: "Completed", label: "✅ Completed" },
+    { value: "On Hold", label: "⏸️ On Hold" }
+  ];
+
+  const categoryOptions = [
+    { value: "", label: "Tất cả danh mục" },
+    { value: "Web Development", label: "🌐 Web Development" },
+    { value: "Mobile Development", label: "📱 Mobile Development" },
+    { value: "Security", label: "🔒 Security" },
+    { value: "Infrastructure", label: "☁️ Infrastructure" },
+    { value: "Data Science", label: "📊 Data Science" }
+  ];
+
+  const handleViewProject = (project) => {
+    setSelectedProject(project);
+    setIsEditing(false);
+    setShowModal(true);
+  };
+
+  const handleEditProject = (project) => {
+    setSelectedProject(project);
+    setIsEditing(true);
+    setShowModal(true);
+  };
+
+  const handleDeleteProject = (projectId) => {
+    if (window.confirm("Bạn có chắc chắn muốn xóa dự án này?")) {
+      setProjects(projects.filter(p => p.id !== projectId));
+    }
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setSelectedProject(null);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        <div className="page-header">
+          <div className="row align-items-center">
+            <div className="col-lg-8 col-sm-12">
+              <h3 className="page-title">🎯 Project Tracker</h3>
+              <p className="text-muted">Quản lý và theo dõi tiến độ dự án</p>
+            </div>
+            <div className="col-lg-4 col-sm-12 text-end">
+              <button className="btn btn-primary">
+                <Plus size={16} className="me-2" />
+                Thêm dự án mới
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="card mb-4">
+          <div className="card-body">
+            <div className="row align-items-center">
+              <div className="col-lg-4 col-md-6 col-sm-12 mb-3">
+                <div className="input-group">
+                  <span className="input-group-text">
+                    <Search size={16} />
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Tìm kiếm dự án..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="col-lg-3 col-md-6 col-sm-12 mb-3">
+                <Select
+                  options={statusOptions}
+                  value={statusOptions.find(option => option.value === statusFilter)}
+                  onChange={(selectedOption) => setStatusFilter(selectedOption?.value || "")}
+                  placeholder="Lọc theo trạng thái"
+                />
+              </div>
+              <div className="col-lg-3 col-md-6 col-sm-12 mb-3">
+                <Select
+                  options={categoryOptions}
+                  value={categoryOptions.find(option => option.value === categoryFilter)}
+                  onChange={(selectedOption) => setCategoryFilter(selectedOption?.value || "")}
+                  placeholder="Lọc theo danh mục"
+                />
+              </div>
+              <div className="col-lg-2 col-md-6 col-sm-12 mb-3">
+                <button
+                  className="btn btn-outline-secondary w-100"
+                  onClick={() => {
+                    setSearchTerm("");
+                    setStatusFilter("");
+                    setCategoryFilter("");
+                  }}
+                >
+                  <Filter size={16} className="me-2" />
+                  Reset
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Projects Table */}
+        <div className="card">
+          <div className="card-body">
+            <div className="table-responsive">
+              <table className="table table-hover">
+                <thead>
+                  <tr>
+                    <th>Dự án</th>
+                    <th>Danh mục</th>
+                    <th>Ngày bắt đầu</th>
+                    <th>Deadline</th>
+                    <th>Tiến độ</th>
+                    <th>Trạng thái</th>
+                    <th>Ngân sách</th>
+                    <th>Thao tác</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredProjects.map((project) => (
+                    <tr key={project.id}>
+                      <td>
+                        <div>
+                          <h6 className="mb-1">{project.name}</h6>
+                          <small className="text-muted">
+                            Team: {project.team.length} thành viên
+                          </small>
+                        </div>
+                      </td>
+                      <td>
+                        <span className="badge bg-light text-dark">
+                          {project.category}
+                        </span>
+                      </td>
+                      <td>{new Date(project.startDate).toLocaleDateString('vi-VN')}</td>
+                      <td>{new Date(project.endDate).toLocaleDateString('vi-VN')}</td>
+                      <td style={{ minWidth: '120px' }}>
+                        {getProgressBar(project.progress)}
+                      </td>
+                      <td>{getStatusBadge(project.status)}</td>
+                      <td>
+                        <span style={{ fontWeight: '600', color: '#7b1fa2' }}>
+                          {formatCurrency(project.budget)}
+                        </span>
+                      </td>
+                      <td>
+                        <div className="d-flex gap-2">
+                          <button
+                            className="btn btn-sm btn-outline-primary"
+                            onClick={() => handleViewProject(project)}
+                            title="Xem chi tiết"
+                          >
+                            <Eye size={14} />
+                          </button>
+                          <button
+                            className="btn btn-sm btn-outline-warning"
+                            onClick={() => handleEditProject(project)}
+                            title="Chỉnh sửa"
+                          >
+                            <Edit size={14} />
+                          </button>
+                          <button
+                            className="btn btn-sm btn-outline-danger"
+                            onClick={() => handleDeleteProject(project.id)}
+                            title="Xóa"
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Project Details Modal */}
+        {showModal && selectedProject && (
+          <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+            <div className="modal-dialog modal-lg modal-dialog-centered">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h4 className="modal-title">
+                    {isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
+                  </h4>
+                  <button type="button" className="btn-close" onClick={closeModal}></button>
+                </div>
+                <div className="modal-body">
+                  <div className="row">
+                    <div className="col-md-6">
+                      <h6>Tên dự án</h6>
+                      <p>{selectedProject.name}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Danh mục</h6>
+                      <p>{selectedProject.category}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Ngày bắt đầu</h6>
+                      <p>{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Deadline</h6>
+                      <p>{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Tiến độ</h6>
+                      {getProgressBar(selectedProject.progress)}
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Trạng thái</h6>
+                      {getStatusBadge(selectedProject.status)}
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Ngân sách</h6>
+                      <p style={{ fontWeight: '600', color: '#7b1fa2' }}>
+                        {formatCurrency(selectedProject.budget)}
+                      </p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Thành viên team</h6>
+                      <p>{selectedProject.team.join(", ")}</p>
+                    </div>
+                    <div className="col-md-12">
+                      <h6>Mô tả</h6>
+                      <p>{selectedProject.description}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button type="button" className="btn btn-secondary" onClick={closeModal}>
+                    Đóng
+                  </button>
+                  {isEditing && (
+                    <button type="button" className="btn btn-primary">
+                      Lưu thay đổi
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectTracker;

src/pages/ProjectTracker.tsx

@@ -0,0 +1,431 @@
+import React, { useState, useEffect } from "react";
+import { Eye, Edit, Trash2, Plus, Filter, Search } from "feather-icons-react";
+import Select from "react-select";
+
+interface Project {
+  id: number;
+  name: string;
+  category: string;
+  startDate: string;
+  endDate: string;
+  progress: number;
+  status: string;
+  budget: number;
+  team: string[];
+  description: string;
+}
+
+const ProjectTracker: React.FC = () => {
+  const [projects, setProjects] = useState<Project[]>([
+    {
+      id: 1,
+      name: "🚀 Website Redesign",
+      category: "Web Development",
+      startDate: "2024-01-15",
+      endDate: "2024-03-15",
+      progress: 75,
+      status: "In Progress",
+      budget: 50000000,
+      team: ["John Doe", "Jane Smith", "Mike Johnson"],
+      description: "Complete redesign of company website with modern UI/UX"
+    },
+    {
+      id: 2,
+      name: "📱 Mobile App Development",
+      category: "Mobile Development",
+      startDate: "2024-02-01",
+      endDate: "2024-06-01",
+      progress: 45,
+      status: "In Progress",
+      budget: 120000000,
+      team: ["Sarah Wilson", "David Brown", "Lisa Chen"],
+      description: "Native mobile application for iOS and Android platforms"
+    },
+    {
+      id: 3,
+      name: "🔒 Security Audit",
+      category: "Security",
+      startDate: "2024-01-01",
+      endDate: "2024-02-01",
+      progress: 100,
+      status: "Completed",
+      budget: 25000000,
+      team: ["Alex Turner", "Emma Davis"],
+      description: "Comprehensive security audit and vulnerability assessment"
+    },
+    {
+      id: 4,
+      name: "☁️ Cloud Migration",
+      category: "Infrastructure",
+      startDate: "2024-03-01",
+      endDate: "2024-05-01",
+      progress: 20,
+      status: "Planning",
+      budget: 80000000,
+      team: ["Tom Wilson", "Rachel Green", "Chris Lee"],
+      description: "Migration of legacy systems to cloud infrastructure"
+    },
+    {
+      id: 5,
+      name: "📊 Data Analytics Platform",
+      category: "Data Science",
+      startDate: "2024-02-15",
+      endDate: "2024-07-15",
+      progress: 60,
+      status: "In Progress",
+      budget: 95000000,
+      team: ["Kevin Zhang", "Maria Garcia", "James Park"],
+      description: "Advanced analytics platform for business intelligence"
+    }
+  ]);
+
+  const [filteredProjects, setFilteredProjects] = useState<Project[]>(projects);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    let filtered = projects;
+
+    if (searchTerm) {
+      filtered = filtered.filter(project =>
+        project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.description.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    if (statusFilter) {
+      filtered = filtered.filter(project => project.status === statusFilter);
+    }
+
+    if (categoryFilter) {
+      filtered = filtered.filter(project => project.category === categoryFilter);
+    }
+
+    setFilteredProjects(filtered);
+  }, [projects, searchTerm, statusFilter, categoryFilter]);
+
+  const getStatusBadge = (status: string) => {
+    const statusConfig = {
+      "Completed": { bg: "#e8f5e8", color: "#28a745", border: "#c3e6cb" },
+      "In Progress": { bg: "#e3f2fd", color: "#1565c0", border: "#bbdefb" },
+      "Planning": { bg: "#fff3cd", color: "#856404", border: "#ffeaa7" },
+      "On Hold": { bg: "#f8d7da", color: "#721c24", border: "#f5c6cb" }
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig["Planning"];
+
+    return (
+      <span
+        style={{
+          display: 'inline-block',
+          padding: '6px 12px',
+          backgroundColor: config.bg,
+          color: config.color,
+          borderRadius: '20px',
+          fontSize: '13px',
+          fontWeight: '600',
+          border: `1px solid ${config.border}`,
+          minWidth: '100px',
+          textAlign: 'center',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+        }}
+      >
+        {status}
+      </span>
+    );
+  };
+
+  const getProgressBar = (progress: number) => {
+    let progressColor = "#28a745";
+    if (progress < 30) progressColor = "#dc3545";
+    else if (progress < 70) progressColor = "#ffc107";
+
+    return (
+      <div style={{ width: '100%', backgroundColor: '#e9ecef', borderRadius: '10px', height: '8px' }}>
+        <div
+          style={{
+            width: `${progress}%`,
+            backgroundColor: progressColor,
+            height: '100%',
+            borderRadius: '10px',
+            transition: 'width 0.3s ease'
+          }}
+        />
+        <small style={{ fontSize: '12px', color: '#6c757d', marginTop: '2px', display: 'block' }}>
+          {progress}%
+        </small>
+      </div>
+    );
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('vi-VN', {
+      style: 'currency',
+      currency: 'VND'
+    }).format(amount);
+  };
+
+  const statusOptions = [
+    { value: "", label: "Tất cả trạng thái" },
+    { value: "Planning", label: "📋 Planning" },
+    { value: "In Progress", label: "🔄 In Progress" },
+    { value: "Completed", label: "✅ Completed" },
+    { value: "On Hold", label: "⏸️ On Hold" }
+  ];
+
+  const categoryOptions = [
+    { value: "", label: "Tất cả danh mục" },
+    { value: "Web Development", label: "🌐 Web Development" },
+    { value: "Mobile Development", label: "📱 Mobile Development" },
+    { value: "Security", label: "🔒 Security" },
+    { value: "Infrastructure", label: "☁️ Infrastructure" },
+    { value: "Data Science", label: "📊 Data Science" }
+  ];
+
+  const handleViewProject = (project: Project) => {
+    setSelectedProject(project);
+    setIsEditing(false);
+    setShowModal(true);
+  };
+
+  const handleEditProject = (project: Project) => {
+    setSelectedProject(project);
+    setIsEditing(true);
+    setShowModal(true);
+  };
+
+  const handleDeleteProject = (projectId: number) => {
+    if (window.confirm("Bạn có chắc chắn muốn xóa dự án này?")) {
+      setProjects(projects.filter(p => p.id !== projectId));
+    }
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setSelectedProject(null);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        <div className="page-header">
+          <div className="row align-items-center">
+            <div className="col-lg-8 col-sm-12">
+              <h3 className="page-title">🎯 Project Tracker</h3>
+              <p className="text-muted">Quản lý và theo dõi tiến độ dự án</p>
+            </div>
+            <div className="col-lg-4 col-sm-12 text-end">
+              <button className="btn btn-primary">
+                <Plus size={16} className="me-2" />
+                Thêm dự án mới
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="card mb-4">
+          <div className="card-body">
+            <div className="row align-items-center">
+              <div className="col-lg-4 col-md-6 col-sm-12 mb-3">
+                <div className="input-group">
+                  <span className="input-group-text">
+                    <Search size={16} />
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Tìm kiếm dự án..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="col-lg-3 col-md-6 col-sm-12 mb-3">
+                <Select
+                  options={statusOptions}
+                  value={statusOptions.find(option => option.value === statusFilter)}
+                  onChange={(selectedOption) => setStatusFilter(selectedOption?.value || "")}
+                  placeholder="Lọc theo trạng thái"
+                />
+              </div>
+              <div className="col-lg-3 col-md-6 col-sm-12 mb-3">
+                <Select
+                  options={categoryOptions}
+                  value={categoryOptions.find(option => option.value === categoryFilter)}
+                  onChange={(selectedOption) => setCategoryFilter(selectedOption?.value || "")}
+                  placeholder="Lọc theo danh mục"
+                />
+              </div>
+              <div className="col-lg-2 col-md-6 col-sm-12 mb-3">
+                <button
+                  className="btn btn-outline-secondary w-100"
+                  onClick={() => {
+                    setSearchTerm("");
+                    setStatusFilter("");
+                    setCategoryFilter("");
+                  }}
+                >
+                  <Filter size={16} className="me-2" />
+                  Reset
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Projects Table */}
+        <div className="card">
+          <div className="card-body">
+            <div className="table-responsive">
+              <table className="table table-hover">
+                <thead>
+                  <tr>
+                    <th>Dự án</th>
+                    <th>Danh mục</th>
+                    <th>Ngày bắt đầu</th>
+                    <th>Deadline</th>
+                    <th>Tiến độ</th>
+                    <th>Trạng thái</th>
+                    <th>Ngân sách</th>
+                    <th>Thao tác</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredProjects.map((project) => (
+                    <tr key={project.id}>
+                      <td>
+                        <div>
+                          <h6 className="mb-1">{project.name}</h6>
+                          <small className="text-muted">
+                            Team: {project.team.length} thành viên
+                          </small>
+                        </div>
+                      </td>
+                      <td>
+                        <span className="badge bg-light text-dark">
+                          {project.category}
+                        </span>
+                      </td>
+                      <td>{new Date(project.startDate).toLocaleDateString('vi-VN')}</td>
+                      <td>{new Date(project.endDate).toLocaleDateString('vi-VN')}</td>
+                      <td style={{ minWidth: '120px' }}>
+                        {getProgressBar(project.progress)}
+                      </td>
+                      <td>{getStatusBadge(project.status)}</td>
+                      <td>
+                        <span style={{ fontWeight: '600', color: '#7b1fa2' }}>
+                          {formatCurrency(project.budget)}
+                        </span>
+                      </td>
+                      <td>
+                        <div className="d-flex gap-2">
+                          <button
+                            className="btn btn-sm btn-outline-primary"
+                            onClick={() => handleViewProject(project)}
+                            title="Xem chi tiết"
+                          >
+                            <Eye size={14} />
+                          </button>
+                          <button
+                            className="btn btn-sm btn-outline-warning"
+                            onClick={() => handleEditProject(project)}
+                            title="Chỉnh sửa"
+                          >
+                            <Edit size={14} />
+                          </button>
+                          <button
+                            className="btn btn-sm btn-outline-danger"
+                            onClick={() => handleDeleteProject(project.id)}
+                            title="Xóa"
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Project Details Modal */}
+        {showModal && selectedProject && (
+          <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+            <div className="modal-dialog modal-lg modal-dialog-centered">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h4 className="modal-title">
+                    {isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
+                  </h4>
+                  <button type="button" className="btn-close" onClick={closeModal}></button>
+                </div>
+                <div className="modal-body">
+                  <div className="row">
+                    <div className="col-md-6">
+                      <h6>Tên dự án</h6>
+                      <p>{selectedProject.name}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Danh mục</h6>
+                      <p>{selectedProject.category}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Ngày bắt đầu</h6>
+                      <p>{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Deadline</h6>
+                      <p>{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}</p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Tiến độ</h6>
+                      {getProgressBar(selectedProject.progress)}
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Trạng thái</h6>
+                      {getStatusBadge(selectedProject.status)}
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Ngân sách</h6>
+                      <p style={{ fontWeight: '600', color: '#7b1fa2' }}>
+                        {formatCurrency(selectedProject.budget)}
+                      </p>
+                    </div>
+                    <div className="col-md-6">
+                      <h6>Thành viên team</h6>
+                      <p>{selectedProject.team.join(", ")}</p>
+                    </div>
+                    <div className="col-md-12">
+                      <h6>Mô tả</h6>
+                      <p>{selectedProject.description}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button type="button" className="btn btn-secondary" onClick={closeModal}>
+                    Đóng
+                  </button>
+                  {isEditing && (
+                    <button type="button" className="btn btn-primary">
+                      Lưu thay đổi
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectTracker;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/services/weddingGuestService.js

@@ -132,14 +132,38 @@ export const weddingGuestService = {
   // Update wedding guest
   async updateWeddingGuest(id, guestData) {
     try {
-      const response = await apiClient.put(`/WeddingGuests/${id}`, guestData);
+      console.log('🔍 API Call - Update Wedding Guest:', {
+        baseURL: API_BASE_URL,
+        endpoint: `/WeddingGuests/${id}`,
+        method: 'POST',
+        data: guestData
+      });
+
+      const response = await apiClient.post(`/WeddingGuests/${id}`, guestData);
+
+      console.log('✅ API Response - Update Wedding Guest:', {
+        status: response.status,
+        data: response.data
+      });
+
       return {
         success: true,
         data: response.data.data || response.data,
         message: response.data.message || 'Wedding guest updated successfully'
       };
     } catch (error) {
-      console.error('Error updating wedding guest:', error);
+      console.error('❌ Error updating wedding guest:', {
+        message: error.message,
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        data: error.response?.data,
+        config: {
+          url: error.config?.url,
+          method: error.config?.method,
+          baseURL: error.config?.baseURL
+        }
+      });
+
       return {
         success: false,
         data: null,
@@ -170,7 +194,7 @@ export const weddingGuestService = {
   // Update wedding guest status only
   async updateWeddingGuestStatus(id, status) {
     try {
-      const response = await apiClient.put(`/WeddingGuests/${id}/status`, { status });
+      const response = await apiClient.post(`/WeddingGuests/${id}/status`, { status });
       return {
         success: true,
         data: response.data.data || response.data,

src/style/scss/components/_calendar.scss

@@ -1,130 +1,881 @@
+/* Beautiful Calendar Styles */
+
+/* Prevent overflow issues during drag */
+body.fc-dragging {
+  overflow: visible !important;
+}
+
+html, body {
+  overflow-x: visible;
+}
+
+/* Disable all animations during drag operations */
+.fc-dragging * {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* External draggable elements */
+.fc-draggable-dragging {
+  transition: none !important;
+  animation: none !important;
+  transform: none !important;
+}
+
+/* Calendar Page Layout */
+.calendar-page-wrapper {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+  position: relative;
+  overflow: visible;
+
+  .content {
+    background: transparent;
+    position: relative;
+    overflow: visible;
+  }
+
+  .row {
+    position: relative;
+    overflow: visible;
+  }
+
+  .col-lg-3, .col-lg-9, .col-md-4, .col-md-8 {
+    position: relative;
+    overflow: visible;
+  }
+}
+
+.calendar-page-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+  }
+
+  h3 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      font-size: 2rem;
+    }
+  }
+}
+
+.calendar-create-btn {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+  border: none;
+  border-radius: 50px;
+  padding: 12px 30px;
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.4);
+    color: white;
+    text-decoration: none;
+  }
+
+  &::before {
+    content: "✨";
+    font-size: 18px;
+  }
+}
+
+/* Calendar Sidebar */
+.calendar-sidebar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+  }
+
+  h4 {
+    color: #2c3e50;
+    font-weight: 700;
+    margin-bottom: 20px;
+    font-size: 1.4rem;
+    text-align: center;
+  }
+
+  #calendar-events {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+/* Calendar Events */
 .calendar-events {
-    border: 1px solid transparent;
-    cursor: move;
-	@include margin-padding(null, 10px 15px);
+  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+  color: white;
+  border-radius: 15px;
+  padding: 15px;
+  margin-bottom: 15px;
+  cursor: move;
+  transition: all 0.3s ease;
+  border: none;
+  box-shadow: 0 5px 15px rgba(116, 185, 255, 0.3);
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+  }
+
+  &:hover:not(.fc-dragging) {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(116, 185, 255, 0.4);
+    background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
+
+    &::before {
+      left: 100%;
+    }
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  // Simple drag state - just hide the item completely
+  &.dragging-hidden {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    transition: none !important;
+    pointer-events: none !important;
+  }
 }
-.calendar-events:hover {
-	border-color: $gray-300;
-    background-color: $white;
+
+// Dropped Events Tracker Styling
+.dropped-events-list {
+  max-height: 300px;
+  overflow-y: auto;
+
+  .dropped-event-item {
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border-radius: 10px !important;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      background: rgba(255, 255, 255, 1);
+    }
+
+    .badge {
+      font-size: 10px;
+      padding: 4px 8px;
+      border-radius: 15px;
+      text-transform: uppercase;
+      font-weight: 600;
+
+      &.bg-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
+      &.bg-success { background: linear-gradient(135deg, #00b894 0%, #00cec9 100%) !important; }
+      &.bg-warning { background: linear-gradient(135deg, #fdcb6e 0%, #e84393 100%) !important; }
+      &.bg-danger { background: linear-gradient(135deg, #e17055 0%, #d63031 100%) !important; }
+      &.bg-info { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important; }
+      &.bg-secondary { background: linear-gradient(135deg, #636e72 0%, #2d3436 100%) !important; }
+      &.bg-purple { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%) !important; }
+    }
+  }
 }
-.calendar-events i {
-    margin-right: 8px;
+
+// Hide dragged items during drag
+.calendar-events.dragging-hidden {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  transition: none !important;
+  pointer-events: none !important;
 }
-.calendar {
-	float: left;
-	margin-bottom: 0;
+
+/* Calendar Events - Additional Styles */
+.calendar-events {
+  &[data-class="bg-success"] {
+    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
+    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);
+
+    &:hover {
+      background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
+      box-shadow: 0 8px 25px rgba(0, 184, 148, 0.4);
+    }
+
+    &:active {
+      background: linear-gradient(135deg, #00a085 0%, #00b8b3 100%);
+    }
+  }
+
+  &[data-class="bg-danger"] {
+    background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
+    box-shadow: 0 5px 15px rgba(225, 112, 85, 0.3);
+
+    &:hover {
+      background: linear-gradient(135deg, #d63031 0%, #e17055 100%);
+      box-shadow: 0 8px 25px rgba(225, 112, 85, 0.4);
+    }
+
+    &:active {
+      background: linear-gradient(135deg, #c92a2a 0%, #d63031 100%);
+    }
+  }
+
+  &[data-class="bg-warning"] {
+    background: linear-gradient(135deg, #fdcb6e 0%, #e84393 100%);
+    box-shadow: 0 5px 15px rgba(253, 203, 110, 0.3);
+
+    &:hover {
+      background: linear-gradient(135deg, #e84393 0%, #fdcb6e 100%);
+      box-shadow: 0 8px 25px rgba(253, 203, 110, 0.4);
+    }
+
+    &:active {
+      background: linear-gradient(135deg, #d63384 0%, #fab005 100%);
+    }
+  }
+
+  i {
+    margin-right: 10px;
+    font-size: 12px;
+  }
+
+  // Drag states - simplified without problematic animations
+  &.fc-dragging {
+    opacity: 0.8 !important;
+    z-index: 9999 !important;
+    pointer-events: none !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
+    transition: none !important; // Disable transitions during drag
+  }
+
+  // Dragging state for external events
+  &[data-is-dragging="true"] {
+    opacity: 0.5;
+    transition: none !important; // Disable transitions during drag
+  }
 }
-.fc-toolbar.fc-header-toolbar {
-    margin-bottom: 1.5rem;
+
+// Let FullCalendar handle drag mirrors naturally
+.fc-event-dragging,
+.fc-event-mirror,
+.fc-draggable-mirror {
+  // Just hide them completely for clean experience
+  display: none !important;
 }
-.none-border .modal-footer {
-	border-top: none;
+
+// Calendar drop zones
+.fc-day-grid .fc-day.fc-highlight,
+.fc-daygrid-day.fc-highlight {
+  background: rgba(102, 126, 234, 0.1) !important;
+  border: 2px dashed rgba(102, 126, 234, 0.5) !important;
+  position: relative;
+
+  &::before {
+    content: '📅 Drop here';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(102, 126, 234, 0.8);
+    font-weight: 600;
+    font-size: 12px;
+    pointer-events: none;
+  }
 }
-.fc-toolbar h2 {
-	font-size: $font-size-18;
-	font-weight: $font-weight-semibold;
-	font-family: 'Roboto', sans-serif;
-	line-height: 30px;
-	text-transform: uppercase;
+
+.fc-time-grid .fc-highlight {
+  background: rgba(102, 126, 234, 0.1) !important;
+  border: 2px dashed rgba(102, 126, 234, 0.5) !important;
 }
-.fc-day-grid-event .fc-time {
-	font-family: 'Roboto', sans-serif;
+
+/* Add Category Button */
+.calendar-add-category-btn {
+  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
+  border: none;
+  border-radius: 50px;
+  padding: 15px 25px;
+  color: white;
+  font-weight: 600;
+  width: 100%;
+  box-shadow: 0 8px 25px rgba(162, 155, 254, 0.3);
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 35px rgba(162, 155, 254, 0.4);
+    color: white;
+    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
+    text-decoration: none;
+  }
 }
-.fc-day {
-	background: $white;
+
+/* Calendar Main Card */
+.calendar-main-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+  }
+
+  .card-body {
+    padding: 0;
+    position: relative;
+    overflow: visible;
+  }
 }
-.fc-toolbar .fc-state-active,
-.fc-toolbar .ui-state-active,
-.fc-toolbar button:focus,
-.fc-toolbar button:hover,
-.fc-toolbar .ui-state-hover {
-	z-index: 0;
+
+/* FullCalendar Beautiful Styling */
+.fc {
+  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  position: relative;
+  overflow: visible;
+  z-index: 1;
 }
-.fc th.fc-widget-header {
-	background: $gray-300;
-	font-size: $font-size-14;
-	line-height: 20px;
-	padding: 10px 0;
-	text-transform: uppercase;
+
+.fc-toolbar-title {
+  font-size: 2rem !important;
+  font-weight: 700 !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  @media (max-width: 768px) {
+    font-size: 1.5rem !important;
+  }
 }
-.fc-unthemed th,
-.fc-unthemed td,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-popover {
-	border-color: #f3f3f3;
+
+.fc-button-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 10px !important;
+  padding: 8px 16px !important;
+  font-weight: 600 !important;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
+  transition: all 0.3s ease !important;
+
+  &:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
+  }
+
+  &:not(:disabled):active,
+  &:not(:disabled).fc-button-active {
+    background: linear-gradient(135deg, #5a4fcf 0%, #667eea 100%) !important;
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
+  }
 }
-.fc-basic-view .fc-day-number, 
-.fc-basic-view .fc-week-number {
-    padding: 2px 5px;
+
+.fc-daygrid-day {
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(102, 126, 234, 0.05) !important;
+  }
 }
-.fc-button {
-	background: #f1f1f1;
-	border: none;
-	color: #797979;
-	text-transform: capitalize;
-	box-shadow: none !important;
-	border-radius: 3px !important;
-	margin: 0 3px !important;
-	padding: 6px 12px !important;
-	height: auto !important;
-}
-.fc-text-arrow {
-	font-family: inherit;
-	font-size: $font-size-16;
-}
-.fc-state-hover {
-	background: #f3f3f3;
-}
-.fc-state-highlight {
-	background: #f0f0f0;
-}
-.fc-state-down,
-.fc-state-active,
-.fc-state-disabled {
-	background-color: $primary !important;
-	color: $white !important;
-	text-shadow: none !important;
-}
-.fc-cell-overlay {
-	background: #f0f0f0;
-}
-.fc-unthemed .fc-today {
-	background: $white;
+
+.fc-day-today {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
+  border: 2px solid rgba(102, 126, 234, 0.3) !important;
+  position: relative;
+
+  &::before {
+    content: '📅';
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    font-size: 12px;
+    opacity: 0.7;
+  }
 }
+
 .fc-event {
-	border-radius: 2px;
-	border: none;
-	color: $white !important;
-	cursor: move;
-	font-size: 13px;
-	margin: 1px 7px;
-	padding: 5px 5px;
-	text-align: center;
+  border-radius: 8px !important;
+  border: none !important;
+  padding: 4px 8px !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+  transition: all 0.3s ease !important;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s;
+  }
+
+  &:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+
+    &::before {
+      left: 100%;
+    }
+  }
+
+  &.bg-purple {
+    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%) !important;
+  }
+
+  &.bg-success {
+    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%) !important;
+  }
+
+  &.bg-info {
+    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;
+  }
+
+  &.bg-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  }
 }
-.fc-basic-view td.fc-week-number span {
-	padding-right: 8px;
-	font-weight: $font-weight-bold;
-	font-family: 'Roboto', sans-serif;
+
+.fc-daygrid-day-number {
+  font-weight: 600 !important;
+  color: #2c3e50 !important;
+  padding: 8px !important;
+  transition: all 0.3s ease;
+
+  &:hover {
+    color: #667eea !important;
+    transform: scale(1.1);
+  }
 }
-.fc-basic-view td.fc-day-number {
-	padding-right: 8px;
-	font-weight: $font-weight-bold;
-	font-family: 'Roboto', sans-serif;
+
+.fc-col-header-cell {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  font-weight: 700 !important;
+  color: #495057 !important;
+  border: none !important;
+  padding: 15px 8px !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
-.event-form .input-group .form-control {
-	height: 40px;
+
+.fc-scrollgrid {
+  border: none !important;
+  border-radius: 15px !important;
+  overflow: visible !important;
+  position: relative;
+  z-index: 1;
 }
-.submit-section {
-	text-align: center;
-	margin-top: 40px;
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border-color: rgba(0, 0, 0, 0.05) !important;
 }
-.submit-btn {
+
+/* Checkbox Styling */
+.checkbox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    accent-color: #667eea;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  label {
+    font-weight: 500;
+    color: #495057;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+/* Modal Enhancements */
+.modal.custom-modal {
+  .modal-content {
+    border-radius: 20px;
+    border: none;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+  }
+
+  .modal-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 20px 20px 0 0;
+    padding: 20px 25px;
+    border-bottom: none;
+
+    .modal-title {
+      font-weight: 700;
+      font-size: 1.3rem;
+    }
+
+    .btn-close {
+      filter: brightness(0) invert(1);
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: 25px;
+    background: rgba(255, 255, 255, 0.95);
+
+    .form-group {
+      margin-bottom: 20px;
+
+      label {
+        font-weight: 600;
+        color: #2c3e50;
+        margin-bottom: 8px;
+        display: block;
+      }
+
+      .form-control {
+        border-radius: 10px;
+        border: 2px solid #e9ecef;
+        padding: 12px 15px;
+        transition: all 0.3s ease;
+
+        &:focus {
+          border-color: #667eea;
+          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+      }
+    }
+  }
+
+  .submit-section {
+    text-align: center;
+    margin-top: 30px;
+  }
+
+  .submit-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
     border-radius: 50px;
-    font-size: $font-size-18;
-    font-weight: $font-weight-semibold;
-    min-width: 200px;
+    padding: 12px 30px;
+    color: white;
+    font-weight: 600;
+    font-size: 16px;
+    min-width: 150px;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
+      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+    }
+
+    &.btn-success {
+      background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
+      box-shadow: 0 8px 25px rgba(0, 184, 148, 0.3);
+
+      &:hover {
+        background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
+        box-shadow: 0 12px 35px rgba(0, 184, 148, 0.4);
+      }
+    }
+
+    &.btn-danger {
+      background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
+      box-shadow: 0 8px 25px rgba(225, 112, 85, 0.3);
+
+      &:hover {
+        background: linear-gradient(135deg, #d63031 0%, #e17055 100%);
+        box-shadow: 0 12px 35px rgba(225, 112, 85, 0.4);
+      }
+    }
+  }
+}
+
+/* Dark Mode Support */
+[data-layout-mode="dark_mode"] {
+  .calendar-page-wrapper {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  }
+
+  .calendar-page-header {
+    background: rgba(29, 29, 66, 0.95);
+    border: 1px solid rgba(103, 116, 142, 0.3);
+
+    h3 {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+  }
+
+  .calendar-sidebar {
+    background: rgba(29, 29, 66, 0.95);
+    border: 1px solid rgba(103, 116, 142, 0.3);
+
+    h4 {
+      color: #ffffff;
+    }
+  }
+
+  .calendar-main-card {
+    background: rgba(29, 29, 66, 0.95);
+    border: 1px solid rgba(103, 116, 142, 0.3);
+  }
+
+  .fc-col-header-cell {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
+    color: #ffffff !important;
+  }
+
+  .fc-daygrid-day-number {
+    color: #ffffff !important;
+
+    &:hover {
+      color: #ff9f43 !important;
+    }
+  }
+
+  .fc-day-today {
+    background: linear-gradient(135deg, rgba(255, 159, 67, 0.1) 0%, rgba(254, 202, 87, 0.1) 100%) !important;
+    border: 2px solid rgba(255, 159, 67, 0.3) !important;
+  }
+
+  .fc-toolbar-title {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .fc-button-primary {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3) !important;
+
+    &:hover {
+      background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%) !important;
+      box-shadow: 0 6px 20px rgba(255, 159, 67, 0.4) !important;
+    }
+
+    &:not(:disabled):active,
+    &:not(:disabled).fc-button-active {
+      background: linear-gradient(135deg, #e8890a 0%, #ff9f43 100%) !important;
+      box-shadow: 0 2px 10px rgba(255, 159, 67, 0.5) !important;
+    }
+  }
+
+  .fc-daygrid-day:hover {
+    background: rgba(255, 159, 67, 0.05) !important;
+  }
+
+  .modal.custom-modal {
+    .modal-content {
+      background: rgba(29, 29, 66, 0.95);
+      border: 1px solid rgba(103, 116, 142, 0.3);
+    }
+
+    .modal-header {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);
+    }
+
+    .modal-body {
+      background: rgba(29, 29, 66, 0.95);
+
+      .form-group {
+        label {
+          color: #ffffff;
+        }
+
+        .form-control {
+          background: rgba(29, 29, 66, 0.8);
+          border-color: rgba(103, 116, 142, 0.5);
+          color: #ffffff;
+
+          &:focus {
+            border-color: #ff9f43;
+            box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.1);
+          }
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.5);
+          }
+        }
+      }
+    }
+
+    .submit-btn {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);
+      box-shadow: 0 8px 25px rgba(255, 159, 67, 0.3);
+
+      &:hover {
+        background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%);
+        box-shadow: 0 12px 35px rgba(255, 159, 67, 0.4);
+      }
+    }
+  }
+
+  .checkbox label {
+    color: #ffffff;
+  }
+
+  // Dark mode drag & drop
+  .fc-day-grid .fc-day.fc-highlight,
+  .fc-daygrid-day.fc-highlight {
+    background: rgba(255, 159, 67, 0.1) !important;
+    border: 2px dashed rgba(255, 159, 67, 0.5) !important;
+
+    &::before {
+      color: rgba(255, 159, 67, 0.8) !important;
+    }
+  }
+
+  .fc-time-grid .fc-highlight {
+    background: rgba(255, 159, 67, 0.1) !important;
+    border: 2px dashed rgba(255, 159, 67, 0.5) !important;
+  }
+}
+
+/* Loading Animation */
+@keyframes shimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+.calendar-loading {
+  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
+  background-size: 800px 104px;
+  animation: shimmer 1.5s infinite linear;
+  border-radius: 15px;
+  height: 400px;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+  .calendar-sidebar {
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-width: 768px) {
+  .calendar-page-wrapper {
+    padding: 15px;
+  }
+
+  .calendar-page-header {
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .calendar-sidebar {
+    padding: 20px;
+  }
+
+  .calendar-main-card {
+    padding: 20px;
+  }
+
+  .fc-toolbar {
+    flex-direction: column;
+    gap: 10px;
+
+    .fc-toolbar-chunk {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .calendar-events {
+    padding: 12px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 576px) {
+  .calendar-page-header h3 {
+    font-size: 1.8rem;
+  }
+
+  .calendar-create-btn {
     padding: 10px 20px;
+    font-size: 14px;
+  }
+
+  .fc-toolbar-title {
+    font-size: 1.3rem !important;
+  }
+
+  .fc-button-primary {
+    padding: 6px 12px !important;
+    font-size: 12px !important;
+  }
 }

src/style/scss/pages/_customisedstyle.scss

@@ -1433,4 +1433,153 @@ ul.ant-pagination.ant-table-pagination li button.ant-pagination-item-link {
 
 .section-notes-slider .notes-slider .slick-list .slick-slide div{
   margin-left: 12px !important;
+}
+
+// Calendar Dark Mode Integration
+[data-layout-mode="dark_mode"] {
+  .calendar-page-wrapper {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
+  }
+
+  .calendar-page-header {
+    background: rgba(29, 29, 66, 0.95) !important;
+    border: 1px solid rgba(103, 116, 142, 0.3) !important;
+
+    h3 {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+      -webkit-background-clip: text !important;
+      -webkit-text-fill-color: transparent !important;
+      background-clip: text !important;
+    }
+  }
+
+  .calendar-sidebar {
+    background: rgba(29, 29, 66, 0.95) !important;
+    border: 1px solid rgba(103, 116, 142, 0.3) !important;
+
+    h4 {
+      color: #ffffff !important;
+    }
+  }
+
+  .calendar-main-card {
+    background: rgba(29, 29, 66, 0.95) !important;
+    border: 1px solid rgba(103, 116, 142, 0.3) !important;
+  }
+
+  .fc-col-header-cell {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
+    color: #ffffff !important;
+  }
+
+  .fc-daygrid-day-number {
+    color: #ffffff !important;
+
+    &:hover {
+      color: #ff9f43 !important;
+    }
+  }
+
+  .fc-day-today {
+    background: linear-gradient(135deg, rgba(255, 159, 67, 0.1) 0%, rgba(254, 202, 87, 0.1) 100%) !important;
+    border: 2px solid rgba(255, 159, 67, 0.3) !important;
+  }
+
+  .fc-toolbar-title {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+  }
+
+  .fc-button-primary {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3) !important;
+
+    &:hover {
+      background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%) !important;
+      box-shadow: 0 6px 20px rgba(255, 159, 67, 0.4) !important;
+    }
+
+    &:not(:disabled):active,
+    &:not(:disabled).fc-button-active {
+      background: linear-gradient(135deg, #e8890a 0%, #ff9f43 100%) !important;
+      box-shadow: 0 2px 10px rgba(255, 159, 67, 0.5) !important;
+    }
+  }
+
+  .fc-daygrid-day:hover {
+    background: rgba(255, 159, 67, 0.05) !important;
+  }
+
+  .calendar-create-btn {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    box-shadow: 0 8px 25px rgba(255, 159, 67, 0.3) !important;
+
+    &:hover {
+      background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%) !important;
+      box-shadow: 0 12px 35px rgba(255, 159, 67, 0.4) !important;
+    }
+  }
+
+  .calendar-add-category-btn {
+    background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    box-shadow: 0 8px 25px rgba(255, 159, 67, 0.3) !important;
+
+    &:hover {
+      background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%) !important;
+      box-shadow: 0 12px 35px rgba(255, 159, 67, 0.4) !important;
+    }
+  }
+
+  // Calendar Modal Dark Mode
+  .modal.custom-modal {
+    .modal-content {
+      background: rgba(29, 29, 66, 0.95) !important;
+      border: 1px solid rgba(103, 116, 142, 0.3) !important;
+    }
+
+    .modal-header {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+    }
+
+    .modal-body {
+      background: rgba(29, 29, 66, 0.95) !important;
+
+      .form-group {
+        label {
+          color: #ffffff !important;
+        }
+
+        .form-control {
+          background: rgba(29, 29, 66, 0.8) !important;
+          border-color: rgba(103, 116, 142, 0.5) !important;
+          color: #ffffff !important;
+
+          &:focus {
+            border-color: #ff9f43 !important;
+            box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.1) !important;
+          }
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.5) !important;
+          }
+        }
+      }
+    }
+
+    .submit-btn {
+      background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%) !important;
+      box-shadow: 0 8px 25px rgba(255, 159, 67, 0.3) !important;
+
+      &:hover {
+        background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%) !important;
+        box-shadow: 0 12px 35px rgba(255, 159, 67, 0.4) !important;
+      }
+    }
+  }
+
+  .checkbox label {
+    color: #ffffff !important;
+  }
 }

src/styles/calendar-custom.css

@@ -0,0 +1,312 @@
+/* Calendar Page Wrapper */
+.calendar-page-wrapper {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.calendar-page-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.page-title {
+  color: #2c3e50;
+  font-weight: 700;
+  margin: 0;
+  font-size: 2rem;
+}
+
+/* Calendar Create Button */
+.calendar-create-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 25px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.calendar-create-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Calendar Sidebar */
+.calendar-sidebar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  height: fit-content;
+}
+
+.calendar-sidebar .card-title {
+  color: #2c3e50;
+  font-weight: 600;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+}
+
+/* Draggable Events */
+.calendar-events {
+  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
+  border: 2px dashed #dee2e6;
+  border-radius: 10px;
+  padding: 12px 16px;
+  margin-bottom: 10px;
+  cursor: move;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  color: #495057;
+}
+
+.calendar-events:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  border-color: #007bff;
+}
+
+.calendar-events[data-class="bg-danger"] {
+  background: linear-gradient(45deg, #ffebee, #ffcdd2);
+  border-color: #f44336;
+  color: #c62828;
+}
+
+.calendar-events[data-class="bg-success"] {
+  background: linear-gradient(45deg, #e8f5e8, #c8e6c9);
+  border-color: #4caf50;
+  color: #2e7d32;
+}
+
+.calendar-events[data-class="bg-primary"] {
+  background: linear-gradient(45deg, #e3f2fd, #bbdefb);
+  border-color: #2196f3;
+  color: #1565c0;
+}
+
+.calendar-events[data-class="bg-info"] {
+  background: linear-gradient(45deg, #e0f2f1, #b2dfdb);
+  border-color: #00bcd4;
+  color: #00695c;
+}
+
+.calendar-events[data-class="bg-warning"] {
+  background: linear-gradient(45deg, #fff8e1, #ffecb3);
+  border-color: #ff9800;
+  color: #ef6c00;
+}
+
+.calendar-events[data-class="bg-purple"] {
+  background: linear-gradient(45deg, #f3e5f5, #e1bee7);
+  border-color: #9c27b0;
+  color: #7b1fa2;
+}
+
+/* Calendar Options */
+.calendar-options {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #dee2e6;
+}
+
+.calendar-options label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: #495057;
+  cursor: pointer;
+}
+
+.calendar-options input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #667eea;
+}
+
+/* Main Calendar Card */
+.calendar-main-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+}
+
+.calendar-main-card .card-body {
+  padding: 20px;
+}
+
+/* FullCalendar Customizations */
+.fc {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.fc-header-toolbar {
+  margin-bottom: 20px !important;
+  padding: 15px;
+  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
+  border-radius: 10px;
+}
+
+.fc-button-primary {
+  background: linear-gradient(45deg, #667eea, #764ba2) !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 8px 16px !important;
+  font-weight: 600 !important;
+  transition: all 0.3s ease !important;
+}
+
+.fc-button-primary:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
+}
+
+.fc-button-primary:not(:disabled):active,
+.fc-button-primary:not(:disabled).fc-button-active {
+  background: linear-gradient(45deg, #5a6fd8, #6a42a0) !important;
+}
+
+.fc-daygrid-day {
+  transition: all 0.2s ease;
+}
+
+.fc-daygrid-day:hover {
+  background-color: rgba(102, 126, 234, 0.05) !important;
+}
+
+.fc-day-today {
+  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
+}
+
+.fc-event {
+  border-radius: 8px !important;
+  border: none !important;
+  padding: 2px 6px !important;
+  font-weight: 500 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+  transition: all 0.2s ease !important;
+}
+
+.fc-event:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+}
+
+.fc-event.bg-danger {
+  background: linear-gradient(45deg, #f44336, #e53935) !important;
+}
+
+.fc-event.bg-success {
+  background: linear-gradient(45deg, #4caf50, #43a047) !important;
+}
+
+.fc-event.bg-primary {
+  background: linear-gradient(45deg, #2196f3, #1e88e5) !important;
+}
+
+.fc-event.bg-info {
+  background: linear-gradient(45deg, #00bcd4, #00acc1) !important;
+}
+
+.fc-event.bg-warning {
+  background: linear-gradient(45deg, #ff9800, #fb8c00) !important;
+}
+
+.fc-event.bg-purple {
+  background: linear-gradient(45deg, #9c27b0, #8e24aa) !important;
+}
+
+/* Modal Customizations */
+.modal-content {
+  border-radius: 15px;
+  border: none;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border-radius: 15px 15px 0 0;
+  border-bottom: none;
+}
+
+.modal-title {
+  font-weight: 600;
+}
+
+.btn-close {
+  filter: invert(1);
+}
+
+.modal-body {
+  padding: 30px;
+}
+
+.modal-footer {
+  border-top: 1px solid #dee2e6;
+  padding: 20px 30px;
+}
+
+/* Form Controls */
+.form-control {
+  border-radius: 10px;
+  border: 2px solid #e9ecef;
+  padding: 12px 16px;
+  transition: all 0.3s ease;
+}
+
+.form-control:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .calendar-page-wrapper {
+    padding: 10px;
+  }
+  
+  .calendar-sidebar {
+    margin-bottom: 20px;
+  }
+  
+  .fc-header-toolbar {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .fc-toolbar-chunk {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+/* Animation for dragging */
+.fc-event-dragging {
+  opacity: 0.7;
+  transform: rotate(5deg);
+}
+
+/* Loading animation */
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+.fc-loading {
+  animation: pulse 1.5s ease-in-out infinite;
+}

src/styles/fullcalendar.min.css

@@ -0,0 +1,206 @@
+/* Basic FullCalendar CSS */
+.fc {
+  direction: ltr;
+  text-align: left;
+}
+
+.fc table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.fc th {
+  text-align: center;
+}
+
+.fc th,
+.fc td {
+  vertical-align: top;
+  padding: 0;
+}
+
+.fc-header-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fc-toolbar-chunk {
+  display: flex;
+  align-items: center;
+}
+
+.fc-button-group {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.fc-button {
+  position: relative;
+  display: inline-block;
+  padding: 0.4em 0.65em;
+  margin-bottom: 0;
+  font-size: 1em;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25em;
+}
+
+.fc-button:not(:disabled) {
+  cursor: pointer;
+}
+
+.fc-button:not(:disabled):active,
+.fc-button:not(:disabled).fc-button-active {
+  background-color: #007bff;
+  border-color: #007bff;
+  color: #fff;
+}
+
+.fc-daygrid {
+  position: relative;
+}
+
+.fc-daygrid-body {
+  position: relative;
+  width: 100%;
+}
+
+.fc-daygrid-day {
+  position: relative;
+}
+
+.fc-daygrid-day-number {
+  position: relative;
+  z-index: 4;
+  padding: 4px;
+}
+
+.fc-event {
+  position: relative;
+  display: block;
+  font-size: 0.85em;
+  line-height: 1.3;
+  border-radius: 3px;
+  border: 1px solid #3788d8;
+  background-color: #3788d8;
+  font-weight: normal;
+  color: #fff;
+}
+
+.fc-event-harness {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.fc-event-title {
+  padding: 0 1px;
+}
+
+.fc-day-today {
+  background-color: rgba(255, 220, 40, 0.15);
+}
+
+.fc-timegrid {
+  position: relative;
+  z-index: 1;
+}
+
+.fc-timegrid-body {
+  position: relative;
+  z-index: 1;
+  min-height: 100%;
+}
+
+.fc-timegrid-slot {
+  height: 1.5em;
+  border-bottom: 1px solid #ddd;
+}
+
+.fc-timegrid-slot-label {
+  vertical-align: middle;
+  padding: 0 4px;
+}
+
+.fc-scrollgrid {
+  position: relative;
+  border: 1px solid #ddd;
+}
+
+.fc-scrollgrid table {
+  width: 100%;
+}
+
+.fc-col-header-cell {
+  background-color: #eee;
+}
+
+.fc-daygrid-day-frame {
+  position: relative;
+  min-height: 100%;
+}
+
+.fc-daygrid-day-top {
+  position: relative;
+  z-index: 2;
+}
+
+.fc-daygrid-day-events {
+  margin-top: 1px;
+}
+
+.fc-daygrid-event {
+  position: relative;
+  white-space: nowrap;
+  border-radius: 3px;
+  font-size: 0.85em;
+  margin-bottom: 1px;
+}
+
+.fc-daygrid-block-event .fc-event-time {
+  font-weight: bold;
+}
+
+.fc-daygrid-block-event .fc-event-title {
+  margin-top: 1px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-start,
+.fc-direction-rtl .fc-daygrid-event.fc-event-end {
+  margin-left: 2px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  margin-right: 2px;
+}
+
+.fc-daygrid-week-number {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  padding: 2px;
+  min-width: 1.5em;
+  text-align: center;
+  background-color: rgba(208, 208, 208, 0.3);
+  color: #808080;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .fc-header-toolbar {
+    flex-direction: column;
+  }
+  
+  .fc-toolbar-chunk {
+    margin: 2px 0;
+  }
+}