Compare commits
No commits in common. "68355e31a84403c9501b45168f3a270087de0c7b" and "cee837e1a6434d3140c2adfeeabb43bdedcd1a87" have entirely different histories.
68355e31a8
...
cee837e1a6
180
src/App.css
180
src/App.css
@ -1,180 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
25
src/App.js
25
src/App.js
@ -1,25 +0,0 @@
|
||||
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;
|
||||
25
src/App.tsx
25
src/App.tsx
@ -1,25 +0,0 @@
|
||||
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;
|
||||
@ -1,8 +1,6 @@
|
||||
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",
|
||||
@ -194,6 +192,4 @@ export const all_routes = {
|
||||
warehouses: "/warehouse",
|
||||
coupons:"/coupons",
|
||||
weddingGuestList: "/wedding-guest-list",
|
||||
addWeddingGuest: "/add-wedding-guest",
|
||||
editWeddingGuest: "/edit-wedding-guest/:id",
|
||||
};
|
||||
|
||||
@ -199,10 +199,6 @@ 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 = [
|
||||
{
|
||||
@ -219,20 +215,6 @@ 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,
|
||||
@ -1453,20 +1435,6 @@ 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: "/",
|
||||
|
||||
@ -1,107 +0,0 @@
|
||||
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;
|
||||
@ -1,118 +0,0 @@
|
||||
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;
|
||||
@ -62,11 +62,9 @@ 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: "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: "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: "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 },
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
/* eslint-disable no-dupe-keys */
|
||||
/* eslint-disable no-const-assign */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import React, { useState, useEffect } 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";
|
||||
@ -27,128 +25,36 @@ const Calendar = () => {
|
||||
[category_color, setcategory_color] = useState(""),
|
||||
[calenderevent, setcalenderevent] = useState(""),
|
||||
[weekendsVisible, setweekendsVisible] = useState(true),
|
||||
[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);
|
||||
|
||||
[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",
|
||||
},
|
||||
];
|
||||
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);
|
||||
@ -179,71 +85,6 @@ 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;
|
||||
|
||||
@ -275,13 +116,13 @@ const Calendar = () => {
|
||||
setiseditdelete(false);
|
||||
};
|
||||
const clickupdateevent = () => {
|
||||
const newArray = [...calendarEvents];
|
||||
const newArray = defaultEvents;
|
||||
for (let i = 0; i < newArray.length; i++) {
|
||||
if (newArray[i].id === parseInt(calenderevent.id)) {
|
||||
newArray[i].title = event_title;
|
||||
}
|
||||
}
|
||||
setCalendarEvents(newArray);
|
||||
defaultEvents = newArray;
|
||||
setiseditdelete(false);
|
||||
};
|
||||
|
||||
@ -303,167 +144,74 @@ const Calendar = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-wrapper calendar-page-wrapper">
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="calendar-page-header">
|
||||
<div className="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 className="col-lg-10 col-sm-12">
|
||||
<h3 className="page-title">Calendar</h3>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-12 text-end">
|
||||
<div className="col-lg-2 col-sm-12">
|
||||
<a
|
||||
href="#"
|
||||
className="calendar-create-btn"
|
||||
to="#"
|
||||
className="btn btn-primary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#add_event"
|
||||
>
|
||||
Thêm sự kiện
|
||||
Create Event
|
||||
</a>
|
||||
</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" /> ⚽ 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>
|
||||
<h4 className="card-title">Drag & 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>
|
||||
<div className="checkbox mb-3">
|
||||
<input id="drop-remove" className="me-1" type="checkbox" />
|
||||
<label htmlFor="drop-remove">Remove after drop</label>
|
||||
<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>
|
||||
<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="calendar-main-card">
|
||||
<div className="card bg-white">
|
||||
<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={3} // Show max 3 events per day, then +more
|
||||
dayMaxEvents={true}
|
||||
weekends={weekendsVisible}
|
||||
droppable={true} // Enable dropping external events
|
||||
dragScroll={true}
|
||||
events={calendarEvents} // Use dynamic events state
|
||||
initialEvents={defaultEvents} // alternatively, use the `events` setting to fetch from a feed
|
||||
select={handleDateSelect}
|
||||
eventClick={(clickInfo) => handleEventClick(clickInfo)}
|
||||
eventReceive={handleEventReceive} // Handle external drops
|
||||
eventDrop={handleEventDrop} // Handle internal drops
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -530,7 +278,7 @@ const Calendar = () => {
|
||||
type="button"
|
||||
className="btn btn-success save-event submit-btn"
|
||||
>
|
||||
Thêm sự kiện
|
||||
Create event
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -86,7 +86,7 @@ const Content = () => {
|
||||
className="feather-calendar"
|
||||
/>
|
||||
</span>
|
||||
<h3>Hôm nay</h3>
|
||||
<h3>Today</h3>
|
||||
<h6>1</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,442 +0,0 @@
|
||||
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;
|
||||
@ -1,500 +0,0 @@
|
||||
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;
|
||||
@ -28,20 +28,20 @@ const ExpiredProduct = () => {
|
||||
};
|
||||
|
||||
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' },
|
||||
{ value: 'date', label: 'Sort by Date' },
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'oldest', label: 'Oldest' },
|
||||
];
|
||||
|
||||
const brands = [
|
||||
{ value: 'chooseType', label: 'Chọn loại' },
|
||||
{ value: 'lenovo3rdGen', label: 'Lenovo thế hệ 3' },
|
||||
{ value: 'chooseType', label: 'Choose Type' },
|
||||
{ value: 'lenovo3rdGen', label: 'Lenovo 3rd Generation' },
|
||||
{ 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}>
|
||||
In ấn
|
||||
Printer
|
||||
</Tooltip>
|
||||
);
|
||||
const renderRefreshTooltip = (props) => (
|
||||
<Tooltip id="refresh-tooltip" {...props}>
|
||||
Làm mới
|
||||
Refresh
|
||||
</Tooltip>
|
||||
);
|
||||
const renderCollapseTooltip = (props) => (
|
||||
<Tooltip id="refresh-tooltip" {...props}>
|
||||
Thu gọn
|
||||
Collapse
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Sản phẩm",
|
||||
title: "Product",
|
||||
dataIndex: "product",
|
||||
render: (text, record) => (
|
||||
<span className="productimgname">
|
||||
@ -81,23 +81,23 @@ const ExpiredProduct = () => {
|
||||
width: "5%"
|
||||
},
|
||||
{
|
||||
title: "Mã IMEI",
|
||||
title: "SKU",
|
||||
dataIndex: "sku",
|
||||
sorter: (a, b) => a.sku.length - b.sku.length,
|
||||
},
|
||||
{
|
||||
title: "Ngày sản xuất",
|
||||
title: "Manufactured Date",
|
||||
dataIndex: "manufactureddate",
|
||||
sorter: (a, b) => a.manufactureddate.length - b.manufactureddate.length,
|
||||
},
|
||||
{
|
||||
title: "Ngày hết hạn",
|
||||
title: "Expired Date",
|
||||
dataIndex: "expireddate",
|
||||
sorter: (a, b) => a.expireddate.length - b.expireddate.length,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: 'Thao tác',
|
||||
title: 'Actions',
|
||||
dataIndex: 'actions',
|
||||
key: 'actions',
|
||||
render: () => (
|
||||
@ -118,19 +118,19 @@ const ExpiredProduct = () => {
|
||||
|
||||
const showConfirmationAlert = () => {
|
||||
MySwal.fire({
|
||||
title: 'Bạn có chắc chắn?',
|
||||
text: 'Bạn sẽ không thể hoàn tác hành động này!',
|
||||
title: 'Are you sure?',
|
||||
text: 'You won\'t be able to revert this!',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#00ff00',
|
||||
confirmButtonText: 'Có, xóa nó!',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonColor: '#ff0000',
|
||||
cancelButtonText: 'Hủy',
|
||||
cancelButtonText: 'Cancel',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
|
||||
MySwal.fire({
|
||||
title: 'Đã xóa!',
|
||||
text: 'Tệp của bạn đã được xóa.',
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
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>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>
|
||||
<h4>Expired Products</h4>
|
||||
<h6>Manage your expired products</h6>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="table-top-head">
|
||||
@ -209,7 +209,7 @@ const ExpiredProduct = () => {
|
||||
<div className="search-input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Tìm kiếm"
|
||||
placeholder="Search"
|
||||
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="Mới nhất"
|
||||
placeholder="Newest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -251,7 +251,7 @@ const ExpiredProduct = () => {
|
||||
<div className="input-blocks">
|
||||
<Box className="info-img" />
|
||||
|
||||
<Select options={brands} className="select" placeholder="Chọn loại" />
|
||||
<Select options={brands} className="select" placeholder="Choose Type" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -264,7 +264,7 @@ const ExpiredProduct = () => {
|
||||
type="date"
|
||||
className="filterdatepicker"
|
||||
dateFormat="dd-MM-yyyy"
|
||||
placeholder='Chọn ngày'
|
||||
placeholder='Choose Date'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -274,7 +274,7 @@ const ExpiredProduct = () => {
|
||||
<Link className="btn btn-filters ms-auto">
|
||||
{" "}
|
||||
<i data-feather="search" className="feather-search" />{" "}
|
||||
Tìm kiếm{" "}
|
||||
Search{" "}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,784 +0,0 @@
|
||||
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;
|
||||
@ -1,758 +0,0 @@
|
||||
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;
|
||||
@ -13,7 +13,6 @@ 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);
|
||||
@ -272,11 +271,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);
|
||||
@ -368,84 +367,6 @@ 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();
|
||||
@ -567,48 +488,28 @@ const WeddingGuestList = () => {
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<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'
|
||||
<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');
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
/>
|
||||
<Trash2
|
||||
size={16}
|
||||
style={{ cursor: 'pointer', color: '#ff4d4f' }}
|
||||
onClick={() => handleDeleteGuest(record.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -630,285 +531,6 @@ 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">
|
||||
@ -936,8 +558,9 @@ const WeddingGuestList = () => {
|
||||
type="primary"
|
||||
icon={<Plus size={16} />}
|
||||
className="btn btn-added"
|
||||
style={{ backgroundColor: '#ff69b4', borderColor: '#ff69b4' }}
|
||||
>
|
||||
Thêm mới
|
||||
Thêm khách mời
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@ -997,22 +620,13 @@ 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,
|
||||
border: '1px solid #d9d9d9'
|
||||
}}
|
||||
className="wedding-guest-search-input"
|
||||
style={{ width: 300 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,39 +35,12 @@ const ProjectTracker = () => {
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
|
||||
// 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;
|
||||
// Load projects from API
|
||||
const loadProjects = async (page = currentPage, size = pageSize) => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || '';
|
||||
console.log('📡 Loading projects from:', `${apiBaseUrl}Projects?page=${page}&pageSize=${size}`);
|
||||
console.log('Loading projects from:', `${apiBaseUrl}Projects`);
|
||||
|
||||
const response = await fetch(`${apiBaseUrl}Projects?page=${page}&pageSize=${size}`, {
|
||||
method: 'GET',
|
||||
@ -82,7 +55,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
|
||||
@ -126,20 +99,15 @@ const ProjectTracker = () => {
|
||||
setTotalPages(1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('💥 Error loading projects:', error);
|
||||
// Only update state if component is still mounted
|
||||
if (mountedRef.current) {
|
||||
setProjectData([]);
|
||||
setTotalCount(0);
|
||||
setTotalPages(1);
|
||||
}
|
||||
console.error('Error loading projects:', error);
|
||||
// Set empty data on error
|
||||
setProjectData([]);
|
||||
setTotalCount(0);
|
||||
setTotalPages(1);
|
||||
} finally {
|
||||
if (mountedRef.current) {
|
||||
setLoading(false);
|
||||
}
|
||||
loadingRef.current = false; // Reset loading ref
|
||||
setLoading(false);
|
||||
}
|
||||
}, [currentPage, pageSize]); // Add dependencies for useCallback
|
||||
};
|
||||
|
||||
// Helper functions for mapping
|
||||
const getCategoryColor = (categoryName) => {
|
||||
@ -220,12 +188,6 @@ 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.',
|
||||
@ -298,47 +260,34 @@ const ProjectTracker = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// Mount/unmount management
|
||||
// Load data on component mount
|
||||
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) => {
|
||||
if (page !== currentPage && !loading) {
|
||||
setCurrentPage(page);
|
||||
loadProjects(page, pageSize);
|
||||
}
|
||||
setCurrentPage(page);
|
||||
loadProjects(page, pageSize);
|
||||
};
|
||||
|
||||
// Handle page size change
|
||||
const handlePageSizeChange = (newPageSize) => {
|
||||
if (newPageSize !== pageSize && !loading) {
|
||||
setPageSize(newPageSize);
|
||||
setCurrentPage(1); // Reset to first page when changing page size
|
||||
loadProjects(1, newPageSize);
|
||||
}
|
||||
setPageSize(newPageSize);
|
||||
setCurrentPage(1); // Reset to first page when changing page size
|
||||
loadProjects(1, newPageSize);
|
||||
};
|
||||
|
||||
// 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');
|
||||
// Handle table change (for Ant Design Table)
|
||||
const handleTableChange = (paginationInfo) => {
|
||||
if (paginationInfo.current !== currentPage) {
|
||||
handlePageChange(paginationInfo.current);
|
||||
}
|
||||
if (paginationInfo.pageSize !== pageSize) {
|
||||
handlePageSizeChange(paginationInfo.pageSize);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -396,7 +345,7 @@ const ProjectTracker = () => {
|
||||
dataIndex: 'manager',
|
||||
key: 'manager',
|
||||
render: (managers) => (
|
||||
<Avatar.Group max={{ count: 2 }} size="small">
|
||||
<Avatar.Group maxCount={2} size="small">
|
||||
{managers.map((manager, index) => (
|
||||
<Avatar
|
||||
key={index}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
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%;
|
||||
}
|
||||
@ -54,11 +54,14 @@ 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.");
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
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>
|
||||
);
|
||||
@ -1,367 +0,0 @@
|
||||
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;
|
||||
@ -1,367 +0,0 @@
|
||||
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;
|
||||
@ -1,418 +0,0 @@
|
||||
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;
|
||||
@ -1,431 +0,0 @@
|
||||
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;
|
||||
1
src/react-app-env.d.ts
vendored
1
src/react-app-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@ -132,38 +132,14 @@ export const weddingGuestService = {
|
||||
// Update wedding guest
|
||||
async updateWeddingGuest(id, guestData) {
|
||||
try {
|
||||
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
|
||||
});
|
||||
|
||||
const response = await apiClient.put(`/WeddingGuests/${id}`, guestData);
|
||||
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:', {
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
console.error('Error updating wedding guest:', error);
|
||||
return {
|
||||
success: false,
|
||||
data: null,
|
||||
@ -194,7 +170,7 @@ export const weddingGuestService = {
|
||||
// Update wedding guest status only
|
||||
async updateWeddingGuestStatus(id, status) {
|
||||
try {
|
||||
const response = await apiClient.post(`/WeddingGuests/${id}/status`, { status });
|
||||
const response = await apiClient.put(`/WeddingGuests/${id}/status`, { status });
|
||||
return {
|
||||
success: true,
|
||||
data: response.data.data || response.data,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1433,153 +1433,4 @@ 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;
|
||||
}
|
||||
}
|
||||
@ -1,312 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
206
src/styles/fullcalendar.min.css
vendored
206
src/styles/fullcalendar.min.css
vendored
@ -1,206 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user