feat: Add Wedding Guest Management with Theme Support
- Add Wedding Guest List page with search, filter, and pagination - Add Wedding Guest Add/Edit forms with validation - Implement dark/light theme support for all components - Fix .page-wrapper .content .ant-card background to match website theme - Remove blue hover color from edit buttons - Add comprehensive theme detection with multiple fallback methods - Update API service for Wedding Guest CRUD operations - Add routing for wedding guest management pages - Implement real-time theme switching with MutationObserver - Add CSS overrides for Ant Design components theme support
This commit is contained in:
tuan.cna
parent
1171d7c452
commit
af93a1fd6a
180
src/App.css
Normal file
180
src/App.css
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #282c34;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode support */
|
||||||
|
.dark-mode {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .ant-layout {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .ant-layout-content {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar custom styles */
|
||||||
|
.fc {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc-theme-standard td,
|
||||||
|
.dark-mode .fc-theme-standard th {
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc-theme-standard .fc-scrollgrid {
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc-col-header-cell {
|
||||||
|
background-color: #3d3d3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc-daygrid-day {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .fc-daygrid-day:hover {
|
||||||
|
background-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project tracker styles */
|
||||||
|
.project-card {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .project-card {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-active {
|
||||||
|
background-color: #52c41a;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pending {
|
||||||
|
background-color: #faad14;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-completed {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-cancelled {
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation styles */
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: #1890ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active {
|
||||||
|
color: #1890ff !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container-fluid {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading animation */
|
||||||
|
.loading-spinner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner .ant-spin {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c1c1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #a8a8a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode ::-webkit-scrollbar-track {
|
||||||
|
background: #2d2d2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode ::-webkit-scrollbar-thumb {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
25
src/App.js
Normal file
25
src/App.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import Calendar from './pages/Calendar';
|
||||||
|
import ProjectTracker from './pages/ProjectTracker';
|
||||||
|
import Navigation from './components/Navigation';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div className="App">
|
||||||
|
<Navigation />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Navigate to="/calendar" replace />} />
|
||||||
|
<Route path="/calendar" element={<Calendar />} />
|
||||||
|
<Route path="/projects" element={<ProjectTracker />} />
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
25
src/App.tsx
Normal file
25
src/App.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import Calendar from './pages/Calendar';
|
||||||
|
import ProjectTracker from './pages/ProjectTracker';
|
||||||
|
import Navigation from './components/Navigation';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div className="App">
|
||||||
|
<Navigation />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Navigate to="/calendar" replace />} />
|
||||||
|
<Route path="/calendar" element={<Calendar />} />
|
||||||
|
<Route path="/projects" element={<ProjectTracker />} />
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -194,4 +194,6 @@ export const all_routes = {
|
|||||||
warehouses: "/warehouse",
|
warehouses: "/warehouse",
|
||||||
coupons:"/coupons",
|
coupons:"/coupons",
|
||||||
weddingGuestList: "/wedding-guest-list",
|
weddingGuestList: "/wedding-guest-list",
|
||||||
|
addWeddingGuest: "/add-wedding-guest",
|
||||||
|
editWeddingGuest: "/edit-wedding-guest/:id",
|
||||||
};
|
};
|
||||||
|
|||||||
@ -199,6 +199,8 @@ import ProjectTracker from "../feature-module/projects/projecttracker";
|
|||||||
import CreateProject from "../feature-module/projects/createproject";
|
import CreateProject from "../feature-module/projects/createproject";
|
||||||
import EnhancedLoaders from "../feature-module/uiinterface/enhanced-loaders";
|
import EnhancedLoaders from "../feature-module/uiinterface/enhanced-loaders";
|
||||||
import WeddingGuestList from "../feature-module/inventory/weddingGuestList";
|
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 ProductList2 from "../feature-module/inventory/productlist2";
|
||||||
import ProductList3 from "../feature-module/inventory/productlist3";
|
import ProductList3 from "../feature-module/inventory/productlist3";
|
||||||
import { all_routes } from "./all_routes";
|
import { all_routes } from "./all_routes";
|
||||||
@ -1451,6 +1453,20 @@ export const publicRoutes = [
|
|||||||
element: <WeddingGuestList />,
|
element: <WeddingGuestList />,
|
||||||
route: Route,
|
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,
|
id: 118,
|
||||||
path: "/",
|
path: "/",
|
||||||
|
|||||||
107
src/components/Navigation.js
Normal file
107
src/components/Navigation.js
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import { Calendar, Target } from 'feather-icons-react';
|
||||||
|
|
||||||
|
const Navigation = () => {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{
|
||||||
|
path: '/calendar',
|
||||||
|
name: 'Calendar',
|
||||||
|
icon: <Calendar size={20} />,
|
||||||
|
description: 'Quản lý lịch trình và sự kiện'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/projects',
|
||||||
|
name: 'Project Tracker',
|
||||||
|
icon: <Target size={20} />,
|
||||||
|
description: 'Theo dõi tiến độ dự án'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="navbar navbar-expand-lg navbar-dark" style={{
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
|
||||||
|
padding: '1rem 0'
|
||||||
|
}}>
|
||||||
|
<div className="container">
|
||||||
|
<Link className="navbar-brand d-flex align-items-center" to="/" style={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: '700',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'rgba(255,255,255,0.2)',
|
||||||
|
borderRadius: '10px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
marginRight: '12px',
|
||||||
|
backdropFilter: 'blur(10px)'
|
||||||
|
}}>
|
||||||
|
📅
|
||||||
|
</div>
|
||||||
|
Calendar & Project Hub
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="navbar-nav ms-auto d-flex flex-row gap-3">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className={`nav-link d-flex align-items-center ${
|
||||||
|
location.pathname === item.path ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: '25px',
|
||||||
|
background: location.pathname === item.path
|
||||||
|
? 'rgba(255,255,255,0.2)'
|
||||||
|
: 'transparent',
|
||||||
|
backdropFilter: location.pathname === item.path
|
||||||
|
? 'blur(10px)'
|
||||||
|
: 'none',
|
||||||
|
border: location.pathname === item.path
|
||||||
|
? '1px solid rgba(255,255,255,0.3)'
|
||||||
|
: '1px solid transparent',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
if (location.pathname !== item.path) {
|
||||||
|
e.target.style.background = 'rgba(255,255,255,0.1)';
|
||||||
|
e.target.style.backdropFilter = 'blur(10px)';
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
if (location.pathname !== item.path) {
|
||||||
|
e.target.style.background = 'transparent';
|
||||||
|
e.target.style.backdropFilter = 'none';
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="me-2">{item.icon}</span>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<span style={{ fontSize: '14px', fontWeight: '600' }}>
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
<small style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
opacity: '0.8',
|
||||||
|
display: location.pathname === item.path ? 'block' : 'none'
|
||||||
|
}}>
|
||||||
|
{item.description}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
118
src/components/Navigation.tsx
Normal file
118
src/components/Navigation.tsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import { Calendar, Target, Moon, Sun } from 'feather-icons-react';
|
||||||
|
|
||||||
|
const Navigation: React.FC = () => {
|
||||||
|
const [darkMode, setDarkMode] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const toggleDarkMode = () => {
|
||||||
|
setDarkMode(!darkMode);
|
||||||
|
document.body.classList.toggle('dark-mode');
|
||||||
|
};
|
||||||
|
|
||||||
|
const isActive = (path: string) => {
|
||||||
|
return location.pathname === path;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="navbar navbar-expand-lg navbar-dark" style={{
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
|
||||||
|
padding: '1rem 0'
|
||||||
|
}}>
|
||||||
|
<div className="container">
|
||||||
|
<Link className="navbar-brand d-flex align-items-center" to="/" style={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: '700',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'rgba(255,255,255,0.2)',
|
||||||
|
borderRadius: '10px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
marginRight: '12px',
|
||||||
|
backdropFilter: 'blur(10px)'
|
||||||
|
}}>
|
||||||
|
📅
|
||||||
|
</div>
|
||||||
|
Calendar & Project Hub
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="navbar-nav ms-auto d-flex flex-row gap-3">
|
||||||
|
<Link
|
||||||
|
to="/calendar"
|
||||||
|
className={`nav-link d-flex align-items-center ${
|
||||||
|
isActive('/calendar') ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: '25px',
|
||||||
|
background: isActive('/calendar')
|
||||||
|
? 'rgba(255,255,255,0.2)'
|
||||||
|
: 'transparent',
|
||||||
|
backdropFilter: isActive('/calendar')
|
||||||
|
? 'blur(10px)'
|
||||||
|
: 'none',
|
||||||
|
border: isActive('/calendar')
|
||||||
|
? '1px solid rgba(255,255,255,0.3)'
|
||||||
|
: '1px solid transparent',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Calendar size={20} className="me-2" />
|
||||||
|
<span>Calendar</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to="/projects"
|
||||||
|
className={`nav-link d-flex align-items-center ${
|
||||||
|
isActive('/projects') ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: '25px',
|
||||||
|
background: isActive('/projects')
|
||||||
|
? 'rgba(255,255,255,0.2)'
|
||||||
|
: 'transparent',
|
||||||
|
backdropFilter: isActive('/projects')
|
||||||
|
? 'blur(10px)'
|
||||||
|
: 'none',
|
||||||
|
border: isActive('/projects')
|
||||||
|
? '1px solid rgba(255,255,255,0.3)'
|
||||||
|
: '1px solid transparent',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Target size={20} className="me-2" />
|
||||||
|
<span>Projects</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-light"
|
||||||
|
onClick={toggleDarkMode}
|
||||||
|
title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
||||||
|
style={{
|
||||||
|
borderRadius: '25px',
|
||||||
|
padding: '10px 15px',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
background: 'rgba(255,255,255,0.1)',
|
||||||
|
backdropFilter: 'blur(10px)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
364
src/feature-module/inventory/addWeddingGuest.jsx
Normal file
364
src/feature-module/inventory/addWeddingGuest.jsx
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Form, Input, InputNumber, Select, Button, Card, message, Row, Col } from 'antd';
|
||||||
|
import { useNavigate, Link } from 'react-router-dom';
|
||||||
|
import { ArrowLeft, Save, Heart } from 'react-feather';
|
||||||
|
import { weddingGuestService } from '../../services/weddingGuestService';
|
||||||
|
|
||||||
|
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>
|
||||||
|
{`
|
||||||
|
/* Force light theme styles for all form elements */
|
||||||
|
.page-wrapper .content .ant-form-item-label > label,
|
||||||
|
.page-wrapper .content .ant-form-item label {
|
||||||
|
color: #000000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrapper .content .ant-input,
|
||||||
|
.page-wrapper .content .ant-input-number,
|
||||||
|
.page-wrapper .content .ant-input-number-input,
|
||||||
|
.page-wrapper .content .ant-select-selection-item,
|
||||||
|
.page-wrapper .content .ant-select-selector,
|
||||||
|
.page-wrapper .content .ant-select-single .ant-select-selector,
|
||||||
|
.page-wrapper .content textarea.ant-input {
|
||||||
|
color: #000000 !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrapper .content .ant-input:focus,
|
||||||
|
.page-wrapper .content .ant-input-number:focus,
|
||||||
|
.page-wrapper .content .ant-input-number-input:focus,
|
||||||
|
.page-wrapper .content .ant-select-focused .ant-select-selector,
|
||||||
|
.page-wrapper .content textarea.ant-input:focus {
|
||||||
|
color: #000000 !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-color: #40a9ff !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrapper .content .ant-input::placeholder,
|
||||||
|
.page-wrapper .content .ant-input-number-input::placeholder,
|
||||||
|
.page-wrapper .content textarea.ant-input::placeholder {
|
||||||
|
color: #999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrapper .content .ant-card {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme overrides */
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-form-item-label > label,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-form-item label {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input-number,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input-number-input,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-selection-item,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-selector,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-single .ant-select-selector,
|
||||||
|
[data-theme="dark"] .page-wrapper .content textarea.ant-input {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #434343 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input:focus,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input-number:focus,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input-number-input:focus,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-focused .ant-select-selector,
|
||||||
|
[data-theme="dark"] .page-wrapper .content textarea.ant-input:focus {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #177ddc !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input::placeholder,
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-input-number-input::placeholder,
|
||||||
|
[data-theme="dark"] .page-wrapper .content textarea.ant-input::placeholder {
|
||||||
|
color: #888888 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-card {
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #434343 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-dropdown {
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #434343 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-item {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-item:hover {
|
||||||
|
background-color: #434343 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .page-wrapper .content .ant-select-item-option-selected {
|
||||||
|
background-color: #177ddc !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* System dark theme detection */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-form-item-label > label,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-form-item label {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-input,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-input-number,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-input-number-input,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-select-selection-item,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-select-selector,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-select-single .ant-select-selector,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content textarea.ant-input {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #434343 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-input::placeholder,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-input-number-input::placeholder,
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content textarea.ant-input::placeholder {
|
||||||
|
color: #888888 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not([data-theme="light"]) .page-wrapper .content .ant-card {
|
||||||
|
background-color: #1f1f1f !important;
|
||||||
|
border-color: #434343 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
<div className="content">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="page-header">
|
||||||
|
<div className="add-item d-flex">
|
||||||
|
<div className="page-title">
|
||||||
|
<h4>
|
||||||
|
<Heart size={20} style={{ marginRight: '8px', color: '#ff69b4' }} />
|
||||||
|
Thêm khách mời đám cưới
|
||||||
|
</h4>
|
||||||
|
<h6>Thêm khách mời mới vào danh sách</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="page-btn">
|
||||||
|
<Link to="/wedding-guest-list">
|
||||||
|
<Button
|
||||||
|
type="default"
|
||||||
|
icon={<ArrowLeft size={16} />}
|
||||||
|
>
|
||||||
|
Quay lại
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<Card>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
autoComplete="off"
|
||||||
|
initialValues={{
|
||||||
|
numberOfPeople: 1,
|
||||||
|
giftAmount: 0,
|
||||||
|
status: 'Pending'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="Tên khách mời"
|
||||||
|
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ự!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input placeholder="Nhập tên khách mời" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="Đơn vị"
|
||||||
|
name="unit"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng nhập đơn vị!' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="Nhập đơn vị" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="Số người"
|
||||||
|
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!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber
|
||||||
|
placeholder="Nhập số người"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
min={1}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="Số tiền mừng (VND)"
|
||||||
|
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!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="Trạng thái"
|
||||||
|
name="status"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng chọn trạng thái!' }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="Chọn trạng thái">
|
||||||
|
<Option value="Going">✅ Đi</Option>
|
||||||
|
<Option value="NotGoing">❌ Không đi</Option>
|
||||||
|
<Option value="Pending">⏳ Chưa xác nhận</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="Mối quan hệ"
|
||||||
|
name="relationship"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng chọn mối quan hệ!' }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="Chọn mối quan hệ">
|
||||||
|
<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>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="Ghi chú"
|
||||||
|
name="notes"
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
placeholder="Nhập ghi chú (tùy chọn)"
|
||||||
|
rows={4}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col xs={24}>
|
||||||
|
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
|
||||||
|
<Link to="/wedding-guest-list">
|
||||||
|
<Button type="default">
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
loading={submitting}
|
||||||
|
icon={<Save size={16} />}
|
||||||
|
style={{ backgroundColor: '#ff69b4', borderColor: '#ff69b4' }}
|
||||||
|
>
|
||||||
|
Thêm khách mời
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddWeddingGuest;
|
||||||
512
src/feature-module/inventory/editWeddingGuest.jsx
Normal file
512
src/feature-module/inventory/editWeddingGuest.jsx
Normal file
@ -0,0 +1,512 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Form, Input, InputNumber, Select, Button, Card, message, Spin, Row, Col } from 'antd';
|
||||||
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||||
|
import { ArrowLeft, Save, Heart } from 'react-feather';
|
||||||
|
import { weddingGuestService } from '../../services/weddingGuestService';
|
||||||
|
|
||||||
|
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);
|
||||||
|
const [isDarkTheme, setIsDarkTheme] = useState(false);
|
||||||
|
|
||||||
|
// Check theme 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 (Edit):', {
|
||||||
|
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 (Edit), 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 (Edit):', 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 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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Dynamic styles based on theme
|
||||||
|
const getInputStyle = () => ({
|
||||||
|
color: isDarkTheme ? '#ffffff' : '#000000',
|
||||||
|
backgroundColor: isDarkTheme ? '#1f1f1f' : '#ffffff',
|
||||||
|
borderColor: isDarkTheme ? '#434343' : '#d9d9d9',
|
||||||
|
});
|
||||||
|
|
||||||
|
const getLabelStyle = () => ({
|
||||||
|
color: isDarkTheme ? '#ffffff' : '#000000',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Force DOM styling update
|
||||||
|
useEffect(() => {
|
||||||
|
const forceCardStyling = () => {
|
||||||
|
// Find all ant-card elements
|
||||||
|
const cards = document.querySelectorAll('.ant-card, .wedding-guest-form');
|
||||||
|
cards.forEach(card => {
|
||||||
|
if (card) {
|
||||||
|
card.style.backgroundColor = isDarkTheme ? '#141432' : '#FAFBFE';
|
||||||
|
card.style.background = isDarkTheme ? '#141432' : '#FAFBFE';
|
||||||
|
card.style.borderColor = isDarkTheme ? '#434343' : '#d9d9d9';
|
||||||
|
card.style.color = isDarkTheme ? '#ffffff' : '#000000';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Apply immediately
|
||||||
|
forceCardStyling();
|
||||||
|
|
||||||
|
// Apply after a short delay to catch any late-rendered elements
|
||||||
|
const timer = setTimeout(forceCardStyling, 100);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [isDarkTheme]);
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
{`
|
||||||
|
/* Nuclear option - override everything with maximum specificity */
|
||||||
|
div[class*="ant-card"] {
|
||||||
|
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
background: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target specific CSS classes that Ant Design generates */
|
||||||
|
.css-dev-only-do-not-override-1ae8k9u,
|
||||||
|
[class*="css-dev-only-do-not-override"] {
|
||||||
|
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
background: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ultra high specificity for all possible selectors */
|
||||||
|
html body div.page-wrapper div.content div.ant-card,
|
||||||
|
html body div.page-wrapper div.content .ant-card,
|
||||||
|
html body .page-wrapper .content .ant-card,
|
||||||
|
html body .ant-card,
|
||||||
|
.ant-card,
|
||||||
|
.wedding-guest-form {
|
||||||
|
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
background: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form elements */
|
||||||
|
.wedding-guest-form .ant-form-item-label > label {
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wedding-guest-form .ant-input,
|
||||||
|
.wedding-guest-form .ant-input-number-input,
|
||||||
|
.wedding-guest-form .ant-select-selector,
|
||||||
|
.wedding-guest-form textarea {
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
|
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||||
|
background: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wedding-guest-form .ant-input::placeholder,
|
||||||
|
.wedding-guest-form .ant-input-number-input::placeholder,
|
||||||
|
.wedding-guest-form textarea::placeholder {
|
||||||
|
color: ${isDarkTheme ? '#888888' : '#999999'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wedding-guest-form .ant-select-selection-item {
|
||||||
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !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,
|
||||||
|
html[data-layout-mode="dark_mode"] .wedding-guest-form,
|
||||||
|
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,
|
||||||
|
html[data-layout-mode="light_mode"] .wedding-guest-form,
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
<div className="content">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="page-header">
|
||||||
|
<div className="add-item d-flex">
|
||||||
|
<div className="page-title">
|
||||||
|
<h4>
|
||||||
|
<Heart size={20} style={{ marginRight: '8px', color: '#ff69b4' }} />
|
||||||
|
Chỉnh sửa khách mời đám cưới
|
||||||
|
</h4>
|
||||||
|
<h6>Cập nhật thông tin khách mời</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="page-btn">
|
||||||
|
<Link to="/wedding-guest-list">
|
||||||
|
<Button
|
||||||
|
type="default"
|
||||||
|
icon={<ArrowLeft size={16} />}
|
||||||
|
>
|
||||||
|
Quay lại
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<Card
|
||||||
|
className="wedding-guest-form"
|
||||||
|
style={{
|
||||||
|
backgroundColor: isDarkTheme ? '#141432' : '#FAFBFE',
|
||||||
|
borderColor: isDarkTheme ? '#434343' : '#d9d9d9',
|
||||||
|
color: isDarkTheme ? '#ffffff' : '#000000',
|
||||||
|
background: isDarkTheme ? '#141432' : '#FAFBFE'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
autoComplete="off"
|
||||||
|
className="wedding-guest-form"
|
||||||
|
>
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Tên khách mời</span>}
|
||||||
|
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ự!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input placeholder="Nhập tên khách mời" style={getInputStyle()} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Đơn vị</span>}
|
||||||
|
name="unit"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng nhập đơn vị!' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="Nhập đơn vị" style={getInputStyle()} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Số người</span>}
|
||||||
|
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!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber
|
||||||
|
placeholder="Nhập số người"
|
||||||
|
style={{ width: '100%', ...getInputStyle() }}
|
||||||
|
min={1}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Số tiền mừng (VND)</span>}
|
||||||
|
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!' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber
|
||||||
|
placeholder="Nhập số tiền mừng"
|
||||||
|
style={{ width: '100%', ...getInputStyle() }}
|
||||||
|
min={0}
|
||||||
|
formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
||||||
|
parser={value => value.replace(/\$\s?|(,*)/g, '')}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} sm={8}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Trạng thái</span>}
|
||||||
|
name="status"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng chọn trạng thái!' }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="Chọn trạng thái" style={getInputStyle()}>
|
||||||
|
<Option value="Going">✅ Đi</Option>
|
||||||
|
<Option value="NotGoing">❌ Không đi</Option>
|
||||||
|
<Option value="Pending">⏳ Chưa xác nhận</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Mối quan hệ</span>}
|
||||||
|
name="relationship"
|
||||||
|
rules={[{ required: true, message: 'Vui lòng chọn mối quan hệ!' }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="Chọn mối quan hệ" style={getInputStyle()}>
|
||||||
|
<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>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
<Col xs={24}>
|
||||||
|
<Form.Item
|
||||||
|
label={<span style={getLabelStyle()}>Ghi chú</span>}
|
||||||
|
name="notes"
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
placeholder="Nhập ghi chú (tùy chọn)"
|
||||||
|
rows={4}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
style={getInputStyle()}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col xs={24}>
|
||||||
|
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
|
||||||
|
<Link to="/wedding-guest-list">
|
||||||
|
<Button type="default">
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
loading={submitting}
|
||||||
|
icon={<Save size={16} />}
|
||||||
|
style={{ backgroundColor: '#ff69b4', borderColor: '#ff69b4' }}
|
||||||
|
>
|
||||||
|
Cập nhật khách mời
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditWeddingGuest;
|
||||||
@ -3,7 +3,6 @@ import {
|
|||||||
Edit,
|
Edit,
|
||||||
Eye,
|
Eye,
|
||||||
Filter,
|
Filter,
|
||||||
GitMerge,
|
|
||||||
Sliders,
|
Sliders,
|
||||||
StopCircle,
|
StopCircle,
|
||||||
Trash2,
|
Trash2,
|
||||||
|
|||||||
@ -13,6 +13,7 @@ const WeddingGuestList = () => {
|
|||||||
const [guestData, setGuestData] = useState([]);
|
const [guestData, setGuestData] = useState([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||||
|
const [isDarkTheme, setIsDarkTheme] = useState(false);
|
||||||
|
|
||||||
// Pagination state
|
// Pagination state
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
@ -367,6 +368,84 @@ const WeddingGuestList = () => {
|
|||||||
}).format(amount);
|
}).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
|
// Load data on component mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadGuests();
|
loadGuests();
|
||||||
@ -496,14 +575,23 @@ const WeddingGuestList = () => {
|
|||||||
render: (_, record) => (
|
render: (_, record) => (
|
||||||
<div className="action-table-data">
|
<div className="action-table-data">
|
||||||
<div className="edit-delete-action">
|
<div className="edit-delete-action">
|
||||||
|
<Link to={`/edit-wedding-guest/${record.id}`}>
|
||||||
<Edit
|
<Edit
|
||||||
size={16}
|
size={16}
|
||||||
style={{ cursor: 'pointer', color: '#1890ff', marginRight: '8px' }}
|
style={{
|
||||||
onClick={() => {
|
cursor: 'pointer',
|
||||||
// TODO: Navigate to edit page
|
color: isDarkTheme ? '#ffffff' : '#666666',
|
||||||
message.info('Edit functionality will be implemented');
|
marginRight: '8px',
|
||||||
|
transition: 'color 0.2s ease'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.target.style.color = isDarkTheme ? '#cccccc' : '#333333';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.target.style.color = isDarkTheme ? '#ffffff' : '#666666';
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</Link>
|
||||||
<Trash2
|
<Trash2
|
||||||
size={16}
|
size={16}
|
||||||
style={{ cursor: 'pointer', color: '#ff4d4f' }}
|
style={{ cursor: 'pointer', color: '#ff4d4f' }}
|
||||||
@ -533,16 +621,128 @@ const WeddingGuestList = () => {
|
|||||||
<div className="page-wrapper">
|
<div className="page-wrapper">
|
||||||
<style>
|
<style>
|
||||||
{`
|
{`
|
||||||
.wedding-guest-search-input input {
|
/* Dynamic theme styling for wedding guest list */
|
||||||
color: #000000 !important;
|
.card.table-list-card {
|
||||||
background-color: #ffffff !important;
|
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 {
|
.wedding-guest-search-input .ant-input {
|
||||||
color: #000000 !important;
|
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||||
background-color: #ffffff !important;
|
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||||
|
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wedding-guest-search-input .ant-input::placeholder {
|
.wedding-guest-search-input .ant-input::placeholder {
|
||||||
color: #999999 !important;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edit button styling - remove blue hover */
|
||||||
|
.action-table-data .edit-delete-action a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-table-data .edit-delete-action a:hover {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-table-data .edit-delete-action svg {
|
||||||
|
transition: color 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-table-data .edit-delete-action svg:hover {
|
||||||
|
color: ${isDarkTheme ? '#cccccc' : '#333333'} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove any blue hover effects from links */
|
||||||
|
a:hover {
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ant Design link hover override */
|
||||||
|
.ant-table-tbody > tr > td a:hover {
|
||||||
|
color: inherit !important;
|
||||||
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
21
src/index.css
Normal file
21
src/index.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(
|
||||||
|
document.getElementById('root') as HTMLElement
|
||||||
|
);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
367
src/pages/Calendar.js
Normal file
367
src/pages/Calendar.js
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
|
import FullCalendar from "@fullcalendar/react";
|
||||||
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||||
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||||
|
import interactionPlugin from "@fullcalendar/interaction";
|
||||||
|
import { Draggable } from "@fullcalendar/interaction";
|
||||||
|
import "../styles/fullcalendar.min.css";
|
||||||
|
import "../styles/calendar-custom.css";
|
||||||
|
import Select from "react-select";
|
||||||
|
|
||||||
|
const Calendar = () => {
|
||||||
|
const calendarRef = useRef(null);
|
||||||
|
const initializedRef = useRef(false);
|
||||||
|
|
||||||
|
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||||
|
const [isnewevent, setisnewevent] = useState(false);
|
||||||
|
const [iseditdelete, setiseditdelete] = useState(false);
|
||||||
|
const [event_title, setevent_title] = useState("");
|
||||||
|
const [category_color, setcategory_color] = useState("");
|
||||||
|
const [calenderevent, setcalenderevent] = useState(null);
|
||||||
|
const [addneweventobj, setaddneweventobj] = useState(null);
|
||||||
|
|
||||||
|
// Combined events state for calendar display - using current dates
|
||||||
|
const today = new Date();
|
||||||
|
const [calendarEvents, setCalendarEvents] = useState([
|
||||||
|
{
|
||||||
|
id: 'default-1',
|
||||||
|
title: "🎯 Existing Meeting",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
|
||||||
|
className: "bg-primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-2',
|
||||||
|
title: "📈 Weekly Review",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),
|
||||||
|
className: "bg-success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-3',
|
||||||
|
title: "🚀 Project Launch",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 9, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),
|
||||||
|
className: "bg-warning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-4',
|
||||||
|
title: "🎉 Team Building",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 13, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 18, 0),
|
||||||
|
className: "bg-info",
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initializedRef.current) {
|
||||||
|
console.log("🚫 Calendar already initialized, skipping");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let elements = Array.from(
|
||||||
|
document.getElementsByClassName("react-datepicker-wrapper")
|
||||||
|
);
|
||||||
|
elements.map((element) => element.classList.add("width-100"));
|
||||||
|
|
||||||
|
// Initialize external draggable events
|
||||||
|
const draggableEl = document.getElementById("calendar-events");
|
||||||
|
if (draggableEl) {
|
||||||
|
console.log("🚀 Initializing calendar draggable events");
|
||||||
|
|
||||||
|
new Draggable(draggableEl, {
|
||||||
|
itemSelector: ".calendar-events",
|
||||||
|
eventData: function(eventEl) {
|
||||||
|
const title = eventEl.innerText.trim();
|
||||||
|
const className = eventEl.getAttribute("data-class");
|
||||||
|
return {
|
||||||
|
title: title,
|
||||||
|
className: className,
|
||||||
|
duration: "01:00"
|
||||||
|
};
|
||||||
|
},
|
||||||
|
longPressDelay: 0,
|
||||||
|
touchTimeoutDelay: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
initializedRef.current = true;
|
||||||
|
console.log("✅ Calendar initialization completed");
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleDateSelect = useCallback((selectInfo) => {
|
||||||
|
console.log("📅 Date selected:", selectInfo);
|
||||||
|
setaddneweventobj(selectInfo);
|
||||||
|
setisnewevent(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventClick = useCallback((clickInfo) => {
|
||||||
|
console.log("🖱️ Event clicked:", clickInfo.event);
|
||||||
|
setcalenderevent(clickInfo.event);
|
||||||
|
setevent_title(clickInfo.event.title);
|
||||||
|
setiseditdelete(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventReceive = useCallback((info) => {
|
||||||
|
console.log("📥 External event dropped:", info);
|
||||||
|
|
||||||
|
const newEvent = {
|
||||||
|
id: `external-${Date.now()}`,
|
||||||
|
title: info.event.title,
|
||||||
|
start: info.event.start,
|
||||||
|
end: info.event.end,
|
||||||
|
className: info.event.classNames[0] || "bg-primary"
|
||||||
|
};
|
||||||
|
|
||||||
|
setCalendarEvents(prev => [...prev, newEvent]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventDrop = useCallback((info) => {
|
||||||
|
console.log("🔄 Event moved:", info);
|
||||||
|
|
||||||
|
setCalendarEvents(prev =>
|
||||||
|
prev.map(event =>
|
||||||
|
event.id === info.event.id
|
||||||
|
? { ...event, start: info.event.start, end: info.event.end }
|
||||||
|
: event
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addnewevent = () => {
|
||||||
|
let calendarApi = addneweventobj.view.calendar;
|
||||||
|
|
||||||
|
calendarApi.unselect();
|
||||||
|
|
||||||
|
if (event_title) {
|
||||||
|
const newEvent = {
|
||||||
|
id: `new-${Date.now()}`,
|
||||||
|
title: event_title,
|
||||||
|
className: category_color,
|
||||||
|
start: addneweventobj.startStr,
|
||||||
|
end: addneweventobj.endStr,
|
||||||
|
allDay: addneweventobj.allDay,
|
||||||
|
};
|
||||||
|
|
||||||
|
calendarApi.addEvent(newEvent);
|
||||||
|
setCalendarEvents(prev => [...prev, newEvent]);
|
||||||
|
}
|
||||||
|
setisnewevent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onupdateModalClose = () => {
|
||||||
|
setiseditdelete(false);
|
||||||
|
setevent_title("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const oncreateeventModalClose = () => {
|
||||||
|
setevent_title("");
|
||||||
|
setisnewevent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeevent = () => {
|
||||||
|
calenderevent.remove();
|
||||||
|
setCalendarEvents(prev => prev.filter(event => event.id !== calenderevent.id));
|
||||||
|
setiseditdelete(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryColorOptions = [
|
||||||
|
{ value: "bg-danger", label: "🔴 Đỏ", color: "#dc3545" },
|
||||||
|
{ value: "bg-success", label: "🟢 Xanh lá", color: "#28a745" },
|
||||||
|
{ value: "bg-primary", label: "🔵 Xanh dương", color: "#007bff" },
|
||||||
|
{ value: "bg-info", label: "🟦 Xanh nhạt", color: "#17a2b8" },
|
||||||
|
{ value: "bg-warning", label: "🟡 Vàng", color: "#ffc107" },
|
||||||
|
{ value: "bg-purple", label: "🟣 Tím", color: "#6f42c1" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-wrapper calendar-page-wrapper">
|
||||||
|
<div className="content">
|
||||||
|
<div className="calendar-page-header">
|
||||||
|
<div className="row align-items-center w-100">
|
||||||
|
<div className="col-lg-8 col-sm-12">
|
||||||
|
<h3 className="page-title">📅 Beautiful Calendar</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-4 col-sm-12 text-end">
|
||||||
|
<button
|
||||||
|
className="calendar-create-btn"
|
||||||
|
onClick={() => setisnewevent(true)}
|
||||||
|
>
|
||||||
|
Thêm sự kiện
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-3 col-md-4">
|
||||||
|
<div className="calendar-sidebar">
|
||||||
|
<h4 className="card-title">🎯 Drag & Drop Events</h4>
|
||||||
|
<div id="calendar-events" className="mb-3">
|
||||||
|
<div className="calendar-events" data-class="bg-danger">
|
||||||
|
<i className="fas fa-circle" /> 👥 Họp
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-success">
|
||||||
|
<i className="fas fa-circle" /> 📞 Gọi điện
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-primary">
|
||||||
|
<i className="fas fa-circle" /> 💼 Công việc
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-info">
|
||||||
|
<i className="fas fa-circle" /> 🎯 Mục tiêu
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-warning">
|
||||||
|
<i className="fas fa-circle" /> ⚠️ Quan trọng
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-purple">
|
||||||
|
<i className="fas fa-circle" /> 🎉 Sự kiện
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calendar-options">
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={weekendsVisible}
|
||||||
|
onChange={(e) => setWeekendsVisible(e.target.checked)}
|
||||||
|
/>
|
||||||
|
Hiển thị cuối tuần
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-9 col-md-8">
|
||||||
|
<div className="calendar-main-card">
|
||||||
|
<div className="card-body">
|
||||||
|
<FullCalendar
|
||||||
|
ref={calendarRef}
|
||||||
|
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||||
|
locale="vi"
|
||||||
|
headerToolbar={{
|
||||||
|
left: "prev,next today",
|
||||||
|
center: "title",
|
||||||
|
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||||
|
}}
|
||||||
|
buttonText={{
|
||||||
|
today: "Hôm nay",
|
||||||
|
month: "Tháng",
|
||||||
|
week: "Tuần",
|
||||||
|
day: "Ngày",
|
||||||
|
prev: "Trước",
|
||||||
|
next: "Sau"
|
||||||
|
}}
|
||||||
|
dayHeaderFormat={{ weekday: 'long' }}
|
||||||
|
titleFormat={{
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long'
|
||||||
|
}}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
editable={true}
|
||||||
|
selectable={true}
|
||||||
|
selectMirror={true}
|
||||||
|
dayMaxEvents={3}
|
||||||
|
weekends={weekendsVisible}
|
||||||
|
droppable={true}
|
||||||
|
dragScroll={true}
|
||||||
|
events={calendarEvents}
|
||||||
|
select={handleDateSelect}
|
||||||
|
eventClick={handleEventClick}
|
||||||
|
eventReceive={handleEventReceive}
|
||||||
|
eventDrop={handleEventDrop}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Event Modal */}
|
||||||
|
{isnewevent && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">Thêm sự kiện mới</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={oncreateeventModalClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Tiêu đề sự kiện</label>
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
type="text"
|
||||||
|
value={event_title}
|
||||||
|
onChange={(e) => setevent_title(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Màu sắc</label>
|
||||||
|
<Select
|
||||||
|
options={categoryColorOptions}
|
||||||
|
value={categoryColorOptions.find(option => option.value === category_color)}
|
||||||
|
onChange={(selectedOption) => setcategory_color(selectedOption?.value || "")}
|
||||||
|
placeholder="Chọn màu sắc"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={oncreateeventModalClose}>
|
||||||
|
Hủy
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={addnewevent}>
|
||||||
|
Thêm sự kiện
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit/Delete Event Modal */}
|
||||||
|
{iseditdelete && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">Chỉnh sửa sự kiện</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={onupdateModalClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Tiêu đề sự kiện</label>
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
type="text"
|
||||||
|
value={event_title}
|
||||||
|
onChange={(e) => setevent_title(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onupdateModalClose}>
|
||||||
|
Hủy
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-danger" onClick={removeevent}>
|
||||||
|
Xóa
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={() => {
|
||||||
|
if (calenderevent) {
|
||||||
|
calenderevent.setProp('title', event_title);
|
||||||
|
}
|
||||||
|
onupdateModalClose();
|
||||||
|
}}>
|
||||||
|
Cập nhật
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
367
src/pages/Calendar.tsx
Normal file
367
src/pages/Calendar.tsx
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
|
import FullCalendar from "@fullcalendar/react";
|
||||||
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||||
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||||
|
import interactionPlugin from "@fullcalendar/interaction";
|
||||||
|
import { Draggable } from "@fullcalendar/interaction";
|
||||||
|
import "../styles/fullcalendar.min.css";
|
||||||
|
import "../styles/calendar-custom.css";
|
||||||
|
import Select from "react-select";
|
||||||
|
|
||||||
|
const Calendar = () => {
|
||||||
|
const calendarRef = useRef<FullCalendar>(null);
|
||||||
|
const initializedRef = useRef(false);
|
||||||
|
|
||||||
|
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||||
|
const [isnewevent, setisnewevent] = useState(false);
|
||||||
|
const [iseditdelete, setiseditdelete] = useState(false);
|
||||||
|
const [event_title, setevent_title] = useState("");
|
||||||
|
const [category_color, setcategory_color] = useState("");
|
||||||
|
const [calenderevent, setcalenderevent] = useState<any>(null);
|
||||||
|
const [addneweventobj, setaddneweventobj] = useState<any>(null);
|
||||||
|
|
||||||
|
// Combined events state for calendar display - using current dates
|
||||||
|
const today = new Date();
|
||||||
|
const [calendarEvents, setCalendarEvents] = useState([
|
||||||
|
{
|
||||||
|
id: 'default-1',
|
||||||
|
title: "🎯 Existing Meeting",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
|
||||||
|
className: "bg-primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-2',
|
||||||
|
title: "📈 Weekly Review",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),
|
||||||
|
className: "bg-success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-3',
|
||||||
|
title: "🚀 Project Launch",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 9, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),
|
||||||
|
className: "bg-warning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default-4',
|
||||||
|
title: "🎉 Team Building",
|
||||||
|
start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 13, 0),
|
||||||
|
end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 18, 0),
|
||||||
|
className: "bg-info",
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initializedRef.current) {
|
||||||
|
console.log("🚫 Calendar already initialized, skipping");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let elements = Array.from(
|
||||||
|
document.getElementsByClassName("react-datepicker-wrapper")
|
||||||
|
);
|
||||||
|
elements.map((element) => element.classList.add("width-100"));
|
||||||
|
|
||||||
|
// Initialize external draggable events
|
||||||
|
const draggableEl = document.getElementById("calendar-events");
|
||||||
|
if (draggableEl) {
|
||||||
|
console.log("🚀 Initializing calendar draggable events");
|
||||||
|
|
||||||
|
new Draggable(draggableEl, {
|
||||||
|
itemSelector: ".calendar-events",
|
||||||
|
eventData: function(eventEl) {
|
||||||
|
const title = eventEl.innerText.trim();
|
||||||
|
const className = eventEl.getAttribute("data-class");
|
||||||
|
return {
|
||||||
|
title: title,
|
||||||
|
className: className,
|
||||||
|
duration: "01:00"
|
||||||
|
};
|
||||||
|
},
|
||||||
|
longPressDelay: 0,
|
||||||
|
touchTimeoutDelay: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
initializedRef.current = true;
|
||||||
|
console.log("✅ Calendar initialization completed");
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleDateSelect = useCallback((selectInfo: any) => {
|
||||||
|
console.log("📅 Date selected:", selectInfo);
|
||||||
|
setaddneweventobj(selectInfo);
|
||||||
|
setisnewevent(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventClick = useCallback((clickInfo: any) => {
|
||||||
|
console.log("🖱️ Event clicked:", clickInfo.event);
|
||||||
|
setcalenderevent(clickInfo.event);
|
||||||
|
setevent_title(clickInfo.event.title);
|
||||||
|
setiseditdelete(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventReceive = useCallback((info: any) => {
|
||||||
|
console.log("📥 External event dropped:", info);
|
||||||
|
|
||||||
|
const newEvent = {
|
||||||
|
id: `external-${Date.now()}`,
|
||||||
|
title: info.event.title,
|
||||||
|
start: info.event.start,
|
||||||
|
end: info.event.end,
|
||||||
|
className: info.event.classNames[0] || "bg-primary"
|
||||||
|
};
|
||||||
|
|
||||||
|
setCalendarEvents(prev => [...prev, newEvent]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEventDrop = useCallback((info: any) => {
|
||||||
|
console.log("🔄 Event moved:", info);
|
||||||
|
|
||||||
|
setCalendarEvents(prev =>
|
||||||
|
prev.map(event =>
|
||||||
|
event.id === info.event.id
|
||||||
|
? { ...event, start: info.event.start, end: info.event.end }
|
||||||
|
: event
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addnewevent = () => {
|
||||||
|
let calendarApi = addneweventobj.view.calendar;
|
||||||
|
|
||||||
|
calendarApi.unselect();
|
||||||
|
|
||||||
|
if (event_title) {
|
||||||
|
const newEvent = {
|
||||||
|
id: `new-${Date.now()}`,
|
||||||
|
title: event_title,
|
||||||
|
className: category_color,
|
||||||
|
start: addneweventobj.startStr,
|
||||||
|
end: addneweventobj.endStr,
|
||||||
|
allDay: addneweventobj.allDay,
|
||||||
|
};
|
||||||
|
|
||||||
|
calendarApi.addEvent(newEvent);
|
||||||
|
setCalendarEvents(prev => [...prev, newEvent]);
|
||||||
|
}
|
||||||
|
setisnewevent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onupdateModalClose = () => {
|
||||||
|
setiseditdelete(false);
|
||||||
|
setevent_title("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const oncreateeventModalClose = () => {
|
||||||
|
setevent_title("");
|
||||||
|
setisnewevent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeevent = () => {
|
||||||
|
calenderevent.remove();
|
||||||
|
setCalendarEvents(prev => prev.filter(event => event.id !== calenderevent.id));
|
||||||
|
setiseditdelete(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryColorOptions = [
|
||||||
|
{ value: "bg-danger", label: "🔴 Đỏ", color: "#dc3545" },
|
||||||
|
{ value: "bg-success", label: "🟢 Xanh lá", color: "#28a745" },
|
||||||
|
{ value: "bg-primary", label: "🔵 Xanh dương", color: "#007bff" },
|
||||||
|
{ value: "bg-info", label: "🟦 Xanh nhạt", color: "#17a2b8" },
|
||||||
|
{ value: "bg-warning", label: "🟡 Vàng", color: "#ffc107" },
|
||||||
|
{ value: "bg-purple", label: "🟣 Tím", color: "#6f42c1" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-wrapper calendar-page-wrapper">
|
||||||
|
<div className="content">
|
||||||
|
<div className="calendar-page-header">
|
||||||
|
<div className="row align-items-center w-100">
|
||||||
|
<div className="col-lg-8 col-sm-12">
|
||||||
|
<h3 className="page-title">📅 Beautiful Calendar</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-4 col-sm-12 text-end">
|
||||||
|
<button
|
||||||
|
className="calendar-create-btn"
|
||||||
|
onClick={() => setisnewevent(true)}
|
||||||
|
>
|
||||||
|
Thêm sự kiện
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-3 col-md-4">
|
||||||
|
<div className="calendar-sidebar">
|
||||||
|
<h4 className="card-title">🎯 Drag & Drop Events</h4>
|
||||||
|
<div id="calendar-events" className="mb-3">
|
||||||
|
<div className="calendar-events" data-class="bg-danger">
|
||||||
|
<i className="fas fa-circle" /> 👥 Họp
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-success">
|
||||||
|
<i className="fas fa-circle" /> 📞 Gọi điện
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-primary">
|
||||||
|
<i className="fas fa-circle" /> 💼 Công việc
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-info">
|
||||||
|
<i className="fas fa-circle" /> 🎯 Mục tiêu
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-warning">
|
||||||
|
<i className="fas fa-circle" /> ⚠️ Quan trọng
|
||||||
|
</div>
|
||||||
|
<div className="calendar-events" data-class="bg-purple">
|
||||||
|
<i className="fas fa-circle" /> 🎉 Sự kiện
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calendar-options">
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={weekendsVisible}
|
||||||
|
onChange={(e) => setWeekendsVisible(e.target.checked)}
|
||||||
|
/>
|
||||||
|
Hiển thị cuối tuần
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-9 col-md-8">
|
||||||
|
<div className="calendar-main-card">
|
||||||
|
<div className="card-body">
|
||||||
|
<FullCalendar
|
||||||
|
ref={calendarRef}
|
||||||
|
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||||
|
locale="vi"
|
||||||
|
headerToolbar={{
|
||||||
|
left: "prev,next today",
|
||||||
|
center: "title",
|
||||||
|
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||||
|
}}
|
||||||
|
buttonText={{
|
||||||
|
today: "Hôm nay",
|
||||||
|
month: "Tháng",
|
||||||
|
week: "Tuần",
|
||||||
|
day: "Ngày",
|
||||||
|
prev: "Trước",
|
||||||
|
next: "Sau"
|
||||||
|
}}
|
||||||
|
dayHeaderFormat={{ weekday: 'long' }}
|
||||||
|
titleFormat={{
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long'
|
||||||
|
}}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
editable={true}
|
||||||
|
selectable={true}
|
||||||
|
selectMirror={true}
|
||||||
|
dayMaxEvents={3}
|
||||||
|
weekends={weekendsVisible}
|
||||||
|
droppable={true}
|
||||||
|
dragScroll={true}
|
||||||
|
events={calendarEvents}
|
||||||
|
select={handleDateSelect}
|
||||||
|
eventClick={handleEventClick}
|
||||||
|
eventReceive={handleEventReceive}
|
||||||
|
eventDrop={handleEventDrop}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Event Modal */}
|
||||||
|
{isnewevent && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">Thêm sự kiện mới</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={oncreateeventModalClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Tiêu đề sự kiện</label>
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
type="text"
|
||||||
|
value={event_title}
|
||||||
|
onChange={(e) => setevent_title(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Màu sắc</label>
|
||||||
|
<Select
|
||||||
|
options={categoryColorOptions}
|
||||||
|
value={categoryColorOptions.find(option => option.value === category_color)}
|
||||||
|
onChange={(selectedOption) => setcategory_color(selectedOption?.value || "")}
|
||||||
|
placeholder="Chọn màu sắc"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={oncreateeventModalClose}>
|
||||||
|
Hủy
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={addnewevent}>
|
||||||
|
Thêm sự kiện
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit/Delete Event Modal */}
|
||||||
|
{iseditdelete && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">Chỉnh sửa sự kiện</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={onupdateModalClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<label>Tiêu đề sự kiện</label>
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
type="text"
|
||||||
|
value={event_title}
|
||||||
|
onChange={(e) => setevent_title(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onupdateModalClose}>
|
||||||
|
Hủy
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-danger" onClick={removeevent}>
|
||||||
|
Xóa
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={() => {
|
||||||
|
if (calenderevent) {
|
||||||
|
calenderevent.setProp('title', event_title);
|
||||||
|
}
|
||||||
|
onupdateModalClose();
|
||||||
|
}}>
|
||||||
|
Cập nhật
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
418
src/pages/ProjectTracker.js
Normal file
418
src/pages/ProjectTracker.js
Normal file
@ -0,0 +1,418 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Eye, Edit, Trash2, Plus, Filter, Search } from "feather-icons-react";
|
||||||
|
import Select from "react-select";
|
||||||
|
|
||||||
|
const ProjectTracker = () => {
|
||||||
|
const [projects, setProjects] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "🚀 Website Redesign",
|
||||||
|
category: "Web Development",
|
||||||
|
startDate: "2024-01-15",
|
||||||
|
endDate: "2024-03-15",
|
||||||
|
progress: 75,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 50000000,
|
||||||
|
team: ["John Doe", "Jane Smith", "Mike Johnson"],
|
||||||
|
description: "Complete redesign of company website with modern UI/UX"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "📱 Mobile App Development",
|
||||||
|
category: "Mobile Development",
|
||||||
|
startDate: "2024-02-01",
|
||||||
|
endDate: "2024-06-01",
|
||||||
|
progress: 45,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 120000000,
|
||||||
|
team: ["Sarah Wilson", "David Brown", "Lisa Chen"],
|
||||||
|
description: "Native mobile application for iOS and Android platforms"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "🔒 Security Audit",
|
||||||
|
category: "Security",
|
||||||
|
startDate: "2024-01-01",
|
||||||
|
endDate: "2024-02-01",
|
||||||
|
progress: 100,
|
||||||
|
status: "Completed",
|
||||||
|
budget: 25000000,
|
||||||
|
team: ["Alex Turner", "Emma Davis"],
|
||||||
|
description: "Comprehensive security audit and vulnerability assessment"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "☁️ Cloud Migration",
|
||||||
|
category: "Infrastructure",
|
||||||
|
startDate: "2024-03-01",
|
||||||
|
endDate: "2024-05-01",
|
||||||
|
progress: 20,
|
||||||
|
status: "Planning",
|
||||||
|
budget: 80000000,
|
||||||
|
team: ["Tom Wilson", "Rachel Green", "Chris Lee"],
|
||||||
|
description: "Migration of legacy systems to cloud infrastructure"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "📊 Data Analytics Platform",
|
||||||
|
category: "Data Science",
|
||||||
|
startDate: "2024-02-15",
|
||||||
|
endDate: "2024-07-15",
|
||||||
|
progress: 60,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 95000000,
|
||||||
|
team: ["Kevin Zhang", "Maria Garcia", "James Park"],
|
||||||
|
description: "Advanced analytics platform for business intelligence"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [filteredProjects, setFilteredProjects] = useState(projects);
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [statusFilter, setStatusFilter] = useState("");
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState("");
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [selectedProject, setSelectedProject] = useState(null);
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = projects;
|
||||||
|
|
||||||
|
if (searchTerm) {
|
||||||
|
filtered = filtered.filter(project =>
|
||||||
|
project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
project.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (statusFilter) {
|
||||||
|
filtered = filtered.filter(project => project.status === statusFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (categoryFilter) {
|
||||||
|
filtered = filtered.filter(project => project.category === categoryFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredProjects(filtered);
|
||||||
|
}, [projects, searchTerm, statusFilter, categoryFilter]);
|
||||||
|
|
||||||
|
const getStatusBadge = (status) => {
|
||||||
|
const statusConfig = {
|
||||||
|
"Completed": { bg: "#e8f5e8", color: "#28a745", border: "#c3e6cb" },
|
||||||
|
"In Progress": { bg: "#e3f2fd", color: "#1565c0", border: "#bbdefb" },
|
||||||
|
"Planning": { bg: "#fff3cd", color: "#856404", border: "#ffeaa7" },
|
||||||
|
"On Hold": { bg: "#f8d7da", color: "#721c24", border: "#f5c6cb" }
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = statusConfig[status] || statusConfig["Planning"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '6px 12px',
|
||||||
|
backgroundColor: config.bg,
|
||||||
|
color: config.color,
|
||||||
|
borderRadius: '20px',
|
||||||
|
fontSize: '13px',
|
||||||
|
fontWeight: '600',
|
||||||
|
border: `1px solid ${config.border}`,
|
||||||
|
minWidth: '100px',
|
||||||
|
textAlign: 'center',
|
||||||
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProgressBar = (progress) => {
|
||||||
|
let progressColor = "#28a745";
|
||||||
|
if (progress < 30) progressColor = "#dc3545";
|
||||||
|
else if (progress < 70) progressColor = "#ffc107";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: '100%', backgroundColor: '#e9ecef', borderRadius: '10px', height: '8px' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: `${progress}%`,
|
||||||
|
backgroundColor: progressColor,
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: '10px',
|
||||||
|
transition: 'width 0.3s ease'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<small style={{ fontSize: '12px', color: '#6c757d', marginTop: '2px', display: 'block' }}>
|
||||||
|
{progress}%
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('vi-VN', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'VND'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusOptions = [
|
||||||
|
{ value: "", label: "Tất cả trạng thái" },
|
||||||
|
{ value: "Planning", label: "📋 Planning" },
|
||||||
|
{ value: "In Progress", label: "🔄 In Progress" },
|
||||||
|
{ value: "Completed", label: "✅ Completed" },
|
||||||
|
{ value: "On Hold", label: "⏸️ On Hold" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const categoryOptions = [
|
||||||
|
{ value: "", label: "Tất cả danh mục" },
|
||||||
|
{ value: "Web Development", label: "🌐 Web Development" },
|
||||||
|
{ value: "Mobile Development", label: "📱 Mobile Development" },
|
||||||
|
{ value: "Security", label: "🔒 Security" },
|
||||||
|
{ value: "Infrastructure", label: "☁️ Infrastructure" },
|
||||||
|
{ value: "Data Science", label: "📊 Data Science" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleViewProject = (project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setIsEditing(false);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditProject = (project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setIsEditing(true);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteProject = (projectId) => {
|
||||||
|
if (window.confirm("Bạn có chắc chắn muốn xóa dự án này?")) {
|
||||||
|
setProjects(projects.filter(p => p.id !== projectId));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
setShowModal(false);
|
||||||
|
setSelectedProject(null);
|
||||||
|
setIsEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-wrapper">
|
||||||
|
<div className="content">
|
||||||
|
<div className="page-header">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-8 col-sm-12">
|
||||||
|
<h3 className="page-title">🎯 Project Tracker</h3>
|
||||||
|
<p className="text-muted">Quản lý và theo dõi tiến độ dự án</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-4 col-sm-12 text-end">
|
||||||
|
<button className="btn btn-primary">
|
||||||
|
<Plus size={16} className="me-2" />
|
||||||
|
Thêm dự án mới
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-4 col-md-6 col-sm-12 mb-3">
|
||||||
|
<div className="input-group">
|
||||||
|
<span className="input-group-text">
|
||||||
|
<Search size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Tìm kiếm dự án..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-3 col-md-6 col-sm-12 mb-3">
|
||||||
|
<Select
|
||||||
|
options={statusOptions}
|
||||||
|
value={statusOptions.find(option => option.value === statusFilter)}
|
||||||
|
onChange={(selectedOption) => setStatusFilter(selectedOption?.value || "")}
|
||||||
|
placeholder="Lọc theo trạng thái"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-3 col-md-6 col-sm-12 mb-3">
|
||||||
|
<Select
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categoryOptions.find(option => option.value === categoryFilter)}
|
||||||
|
onChange={(selectedOption) => setCategoryFilter(selectedOption?.value || "")}
|
||||||
|
placeholder="Lọc theo danh mục"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-2 col-md-6 col-sm-12 mb-3">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary w-100"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTerm("");
|
||||||
|
setStatusFilter("");
|
||||||
|
setCategoryFilter("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Filter size={16} className="me-2" />
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Projects Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Dự án</th>
|
||||||
|
<th>Danh mục</th>
|
||||||
|
<th>Ngày bắt đầu</th>
|
||||||
|
<th>Deadline</th>
|
||||||
|
<th>Tiến độ</th>
|
||||||
|
<th>Trạng thái</th>
|
||||||
|
<th>Ngân sách</th>
|
||||||
|
<th>Thao tác</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filteredProjects.map((project) => (
|
||||||
|
<tr key={project.id}>
|
||||||
|
<td>
|
||||||
|
<div>
|
||||||
|
<h6 className="mb-1">{project.name}</h6>
|
||||||
|
<small className="text-muted">
|
||||||
|
Team: {project.team.length} thành viên
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span className="badge bg-light text-dark">
|
||||||
|
{project.category}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{new Date(project.startDate).toLocaleDateString('vi-VN')}</td>
|
||||||
|
<td>{new Date(project.endDate).toLocaleDateString('vi-VN')}</td>
|
||||||
|
<td style={{ minWidth: '120px' }}>
|
||||||
|
{getProgressBar(project.progress)}
|
||||||
|
</td>
|
||||||
|
<td>{getStatusBadge(project.status)}</td>
|
||||||
|
<td>
|
||||||
|
<span style={{ fontWeight: '600', color: '#7b1fa2' }}>
|
||||||
|
{formatCurrency(project.budget)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary"
|
||||||
|
onClick={() => handleViewProject(project)}
|
||||||
|
title="Xem chi tiết"
|
||||||
|
>
|
||||||
|
<Eye size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-warning"
|
||||||
|
onClick={() => handleEditProject(project)}
|
||||||
|
title="Chỉnh sửa"
|
||||||
|
>
|
||||||
|
<Edit size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-danger"
|
||||||
|
onClick={() => handleDeleteProject(project.id)}
|
||||||
|
title="Xóa"
|
||||||
|
>
|
||||||
|
<Trash2 size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Details Modal */}
|
||||||
|
{showModal && selectedProject && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-lg modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">
|
||||||
|
{isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
|
||||||
|
</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={closeModal}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Tên dự án</h6>
|
||||||
|
<p>{selectedProject.name}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Danh mục</h6>
|
||||||
|
<p>{selectedProject.category}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Ngày bắt đầu</h6>
|
||||||
|
<p>{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Deadline</h6>
|
||||||
|
<p>{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Tiến độ</h6>
|
||||||
|
{getProgressBar(selectedProject.progress)}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Trạng thái</h6>
|
||||||
|
{getStatusBadge(selectedProject.status)}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Ngân sách</h6>
|
||||||
|
<p style={{ fontWeight: '600', color: '#7b1fa2' }}>
|
||||||
|
{formatCurrency(selectedProject.budget)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Thành viên team</h6>
|
||||||
|
<p>{selectedProject.team.join(", ")}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12">
|
||||||
|
<h6>Mô tả</h6>
|
||||||
|
<p>{selectedProject.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={closeModal}>
|
||||||
|
Đóng
|
||||||
|
</button>
|
||||||
|
{isEditing && (
|
||||||
|
<button type="button" className="btn btn-primary">
|
||||||
|
Lưu thay đổi
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectTracker;
|
||||||
431
src/pages/ProjectTracker.tsx
Normal file
431
src/pages/ProjectTracker.tsx
Normal file
@ -0,0 +1,431 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Eye, Edit, Trash2, Plus, Filter, Search } from "feather-icons-react";
|
||||||
|
import Select from "react-select";
|
||||||
|
|
||||||
|
interface Project {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
category: string;
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
progress: number;
|
||||||
|
status: string;
|
||||||
|
budget: number;
|
||||||
|
team: string[];
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProjectTracker: React.FC = () => {
|
||||||
|
const [projects, setProjects] = useState<Project[]>([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "🚀 Website Redesign",
|
||||||
|
category: "Web Development",
|
||||||
|
startDate: "2024-01-15",
|
||||||
|
endDate: "2024-03-15",
|
||||||
|
progress: 75,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 50000000,
|
||||||
|
team: ["John Doe", "Jane Smith", "Mike Johnson"],
|
||||||
|
description: "Complete redesign of company website with modern UI/UX"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "📱 Mobile App Development",
|
||||||
|
category: "Mobile Development",
|
||||||
|
startDate: "2024-02-01",
|
||||||
|
endDate: "2024-06-01",
|
||||||
|
progress: 45,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 120000000,
|
||||||
|
team: ["Sarah Wilson", "David Brown", "Lisa Chen"],
|
||||||
|
description: "Native mobile application for iOS and Android platforms"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "🔒 Security Audit",
|
||||||
|
category: "Security",
|
||||||
|
startDate: "2024-01-01",
|
||||||
|
endDate: "2024-02-01",
|
||||||
|
progress: 100,
|
||||||
|
status: "Completed",
|
||||||
|
budget: 25000000,
|
||||||
|
team: ["Alex Turner", "Emma Davis"],
|
||||||
|
description: "Comprehensive security audit and vulnerability assessment"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "☁️ Cloud Migration",
|
||||||
|
category: "Infrastructure",
|
||||||
|
startDate: "2024-03-01",
|
||||||
|
endDate: "2024-05-01",
|
||||||
|
progress: 20,
|
||||||
|
status: "Planning",
|
||||||
|
budget: 80000000,
|
||||||
|
team: ["Tom Wilson", "Rachel Green", "Chris Lee"],
|
||||||
|
description: "Migration of legacy systems to cloud infrastructure"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "📊 Data Analytics Platform",
|
||||||
|
category: "Data Science",
|
||||||
|
startDate: "2024-02-15",
|
||||||
|
endDate: "2024-07-15",
|
||||||
|
progress: 60,
|
||||||
|
status: "In Progress",
|
||||||
|
budget: 95000000,
|
||||||
|
team: ["Kevin Zhang", "Maria Garcia", "James Park"],
|
||||||
|
description: "Advanced analytics platform for business intelligence"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [filteredProjects, setFilteredProjects] = useState<Project[]>(projects);
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [statusFilter, setStatusFilter] = useState("");
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState("");
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = projects;
|
||||||
|
|
||||||
|
if (searchTerm) {
|
||||||
|
filtered = filtered.filter(project =>
|
||||||
|
project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
project.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (statusFilter) {
|
||||||
|
filtered = filtered.filter(project => project.status === statusFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (categoryFilter) {
|
||||||
|
filtered = filtered.filter(project => project.category === categoryFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredProjects(filtered);
|
||||||
|
}, [projects, searchTerm, statusFilter, categoryFilter]);
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
const statusConfig = {
|
||||||
|
"Completed": { bg: "#e8f5e8", color: "#28a745", border: "#c3e6cb" },
|
||||||
|
"In Progress": { bg: "#e3f2fd", color: "#1565c0", border: "#bbdefb" },
|
||||||
|
"Planning": { bg: "#fff3cd", color: "#856404", border: "#ffeaa7" },
|
||||||
|
"On Hold": { bg: "#f8d7da", color: "#721c24", border: "#f5c6cb" }
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = statusConfig[status as keyof typeof statusConfig] || statusConfig["Planning"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '6px 12px',
|
||||||
|
backgroundColor: config.bg,
|
||||||
|
color: config.color,
|
||||||
|
borderRadius: '20px',
|
||||||
|
fontSize: '13px',
|
||||||
|
fontWeight: '600',
|
||||||
|
border: `1px solid ${config.border}`,
|
||||||
|
minWidth: '100px',
|
||||||
|
textAlign: 'center',
|
||||||
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProgressBar = (progress: number) => {
|
||||||
|
let progressColor = "#28a745";
|
||||||
|
if (progress < 30) progressColor = "#dc3545";
|
||||||
|
else if (progress < 70) progressColor = "#ffc107";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: '100%', backgroundColor: '#e9ecef', borderRadius: '10px', height: '8px' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: `${progress}%`,
|
||||||
|
backgroundColor: progressColor,
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: '10px',
|
||||||
|
transition: 'width 0.3s ease'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<small style={{ fontSize: '12px', color: '#6c757d', marginTop: '2px', display: 'block' }}>
|
||||||
|
{progress}%
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('vi-VN', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'VND'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusOptions = [
|
||||||
|
{ value: "", label: "Tất cả trạng thái" },
|
||||||
|
{ value: "Planning", label: "📋 Planning" },
|
||||||
|
{ value: "In Progress", label: "🔄 In Progress" },
|
||||||
|
{ value: "Completed", label: "✅ Completed" },
|
||||||
|
{ value: "On Hold", label: "⏸️ On Hold" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const categoryOptions = [
|
||||||
|
{ value: "", label: "Tất cả danh mục" },
|
||||||
|
{ value: "Web Development", label: "🌐 Web Development" },
|
||||||
|
{ value: "Mobile Development", label: "📱 Mobile Development" },
|
||||||
|
{ value: "Security", label: "🔒 Security" },
|
||||||
|
{ value: "Infrastructure", label: "☁️ Infrastructure" },
|
||||||
|
{ value: "Data Science", label: "📊 Data Science" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleViewProject = (project: Project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setIsEditing(false);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditProject = (project: Project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setIsEditing(true);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteProject = (projectId: number) => {
|
||||||
|
if (window.confirm("Bạn có chắc chắn muốn xóa dự án này?")) {
|
||||||
|
setProjects(projects.filter(p => p.id !== projectId));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
setShowModal(false);
|
||||||
|
setSelectedProject(null);
|
||||||
|
setIsEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-wrapper">
|
||||||
|
<div className="content">
|
||||||
|
<div className="page-header">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-8 col-sm-12">
|
||||||
|
<h3 className="page-title">🎯 Project Tracker</h3>
|
||||||
|
<p className="text-muted">Quản lý và theo dõi tiến độ dự án</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-4 col-sm-12 text-end">
|
||||||
|
<button className="btn btn-primary">
|
||||||
|
<Plus size={16} className="me-2" />
|
||||||
|
Thêm dự án mới
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-4 col-md-6 col-sm-12 mb-3">
|
||||||
|
<div className="input-group">
|
||||||
|
<span className="input-group-text">
|
||||||
|
<Search size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Tìm kiếm dự án..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-3 col-md-6 col-sm-12 mb-3">
|
||||||
|
<Select
|
||||||
|
options={statusOptions}
|
||||||
|
value={statusOptions.find(option => option.value === statusFilter)}
|
||||||
|
onChange={(selectedOption) => setStatusFilter(selectedOption?.value || "")}
|
||||||
|
placeholder="Lọc theo trạng thái"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-3 col-md-6 col-sm-12 mb-3">
|
||||||
|
<Select
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categoryOptions.find(option => option.value === categoryFilter)}
|
||||||
|
onChange={(selectedOption) => setCategoryFilter(selectedOption?.value || "")}
|
||||||
|
placeholder="Lọc theo danh mục"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-2 col-md-6 col-sm-12 mb-3">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary w-100"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTerm("");
|
||||||
|
setStatusFilter("");
|
||||||
|
setCategoryFilter("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Filter size={16} className="me-2" />
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Projects Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Dự án</th>
|
||||||
|
<th>Danh mục</th>
|
||||||
|
<th>Ngày bắt đầu</th>
|
||||||
|
<th>Deadline</th>
|
||||||
|
<th>Tiến độ</th>
|
||||||
|
<th>Trạng thái</th>
|
||||||
|
<th>Ngân sách</th>
|
||||||
|
<th>Thao tác</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filteredProjects.map((project) => (
|
||||||
|
<tr key={project.id}>
|
||||||
|
<td>
|
||||||
|
<div>
|
||||||
|
<h6 className="mb-1">{project.name}</h6>
|
||||||
|
<small className="text-muted">
|
||||||
|
Team: {project.team.length} thành viên
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span className="badge bg-light text-dark">
|
||||||
|
{project.category}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{new Date(project.startDate).toLocaleDateString('vi-VN')}</td>
|
||||||
|
<td>{new Date(project.endDate).toLocaleDateString('vi-VN')}</td>
|
||||||
|
<td style={{ minWidth: '120px' }}>
|
||||||
|
{getProgressBar(project.progress)}
|
||||||
|
</td>
|
||||||
|
<td>{getStatusBadge(project.status)}</td>
|
||||||
|
<td>
|
||||||
|
<span style={{ fontWeight: '600', color: '#7b1fa2' }}>
|
||||||
|
{formatCurrency(project.budget)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary"
|
||||||
|
onClick={() => handleViewProject(project)}
|
||||||
|
title="Xem chi tiết"
|
||||||
|
>
|
||||||
|
<Eye size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-warning"
|
||||||
|
onClick={() => handleEditProject(project)}
|
||||||
|
title="Chỉnh sửa"
|
||||||
|
>
|
||||||
|
<Edit size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-danger"
|
||||||
|
onClick={() => handleDeleteProject(project.id)}
|
||||||
|
title="Xóa"
|
||||||
|
>
|
||||||
|
<Trash2 size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Details Modal */}
|
||||||
|
{showModal && selectedProject && (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-lg modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h4 className="modal-title">
|
||||||
|
{isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
|
||||||
|
</h4>
|
||||||
|
<button type="button" className="btn-close" onClick={closeModal}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Tên dự án</h6>
|
||||||
|
<p>{selectedProject.name}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Danh mục</h6>
|
||||||
|
<p>{selectedProject.category}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Ngày bắt đầu</h6>
|
||||||
|
<p>{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Deadline</h6>
|
||||||
|
<p>{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Tiến độ</h6>
|
||||||
|
{getProgressBar(selectedProject.progress)}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Trạng thái</h6>
|
||||||
|
{getStatusBadge(selectedProject.status)}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Ngân sách</h6>
|
||||||
|
<p style={{ fontWeight: '600', color: '#7b1fa2' }}>
|
||||||
|
{formatCurrency(selectedProject.budget)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6>Thành viên team</h6>
|
||||||
|
<p>{selectedProject.team.join(", ")}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12">
|
||||||
|
<h6>Mô tả</h6>
|
||||||
|
<p>{selectedProject.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={closeModal}>
|
||||||
|
Đóng
|
||||||
|
</button>
|
||||||
|
{isEditing && (
|
||||||
|
<button type="button" className="btn btn-primary">
|
||||||
|
Lưu thay đổi
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectTracker;
|
||||||
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="react-scripts" />
|
||||||
@ -132,14 +132,38 @@ export const weddingGuestService = {
|
|||||||
// Update wedding guest
|
// Update wedding guest
|
||||||
async updateWeddingGuest(id, guestData) {
|
async updateWeddingGuest(id, guestData) {
|
||||||
try {
|
try {
|
||||||
const response = await apiClient.put(`/WeddingGuests/${id}`, guestData);
|
console.log('🔍 API Call - Update Wedding Guest:', {
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
endpoint: `/WeddingGuests/${id}`,
|
||||||
|
method: 'POST',
|
||||||
|
data: guestData
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await apiClient.post(`/WeddingGuests/${id}`, guestData);
|
||||||
|
|
||||||
|
console.log('✅ API Response - Update Wedding Guest:', {
|
||||||
|
status: response.status,
|
||||||
|
data: response.data
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: response.data.data || response.data,
|
data: response.data.data || response.data,
|
||||||
message: response.data.message || 'Wedding guest updated successfully'
|
message: response.data.message || 'Wedding guest updated successfully'
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error updating wedding guest:', error);
|
console.error('❌ Error updating wedding guest:', {
|
||||||
|
message: error.message,
|
||||||
|
status: error.response?.status,
|
||||||
|
statusText: error.response?.statusText,
|
||||||
|
data: error.response?.data,
|
||||||
|
config: {
|
||||||
|
url: error.config?.url,
|
||||||
|
method: error.config?.method,
|
||||||
|
baseURL: error.config?.baseURL
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
success: false,
|
success: false,
|
||||||
data: null,
|
data: null,
|
||||||
@ -170,7 +194,7 @@ export const weddingGuestService = {
|
|||||||
// Update wedding guest status only
|
// Update wedding guest status only
|
||||||
async updateWeddingGuestStatus(id, status) {
|
async updateWeddingGuestStatus(id, status) {
|
||||||
try {
|
try {
|
||||||
const response = await apiClient.put(`/WeddingGuests/${id}/status`, { status });
|
const response = await apiClient.post(`/WeddingGuests/${id}/status`, { status });
|
||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: response.data.data || response.data,
|
data: response.data.data || response.data,
|
||||||
|
|||||||
312
src/styles/calendar-custom.css
Normal file
312
src/styles/calendar-custom.css
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
/* Calendar Page Wrapper */
|
||||||
|
.calendar-page-wrapper {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-page-header {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar Create Button */
|
||||||
|
.calendar-create-btn {
|
||||||
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-create-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar Sidebar */
|
||||||
|
.calendar-sidebar {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-sidebar .card-title {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Draggable Events */
|
||||||
|
.calendar-events {
|
||||||
|
background: linear-gradient(45deg, #f8f9fa, #e9ecef);
|
||||||
|
border: 2px dashed #dee2e6;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: move;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-danger"] {
|
||||||
|
background: linear-gradient(45deg, #ffebee, #ffcdd2);
|
||||||
|
border-color: #f44336;
|
||||||
|
color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-success"] {
|
||||||
|
background: linear-gradient(45deg, #e8f5e8, #c8e6c9);
|
||||||
|
border-color: #4caf50;
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-primary"] {
|
||||||
|
background: linear-gradient(45deg, #e3f2fd, #bbdefb);
|
||||||
|
border-color: #2196f3;
|
||||||
|
color: #1565c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-info"] {
|
||||||
|
background: linear-gradient(45deg, #e0f2f1, #b2dfdb);
|
||||||
|
border-color: #00bcd4;
|
||||||
|
color: #00695c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-warning"] {
|
||||||
|
background: linear-gradient(45deg, #fff8e1, #ffecb3);
|
||||||
|
border-color: #ff9800;
|
||||||
|
color: #ef6c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events[data-class="bg-purple"] {
|
||||||
|
background: linear-gradient(45deg, #f3e5f5, #e1bee7);
|
||||||
|
border-color: #9c27b0;
|
||||||
|
color: #7b1fa2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar Options */
|
||||||
|
.calendar-options {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-options label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #495057;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-options input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Calendar Card */
|
||||||
|
.calendar-main-card {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-main-card .card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FullCalendar Customizations */
|
||||||
|
.fc {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-header-toolbar {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
padding: 15px;
|
||||||
|
background: linear-gradient(45deg, #f8f9fa, #e9ecef);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button-primary {
|
||||||
|
background: linear-gradient(45deg, #667eea, #764ba2) !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 8px 16px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button-primary:hover {
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button-primary:not(:disabled):active,
|
||||||
|
.fc-button-primary:not(:disabled).fc-button-active {
|
||||||
|
background: linear-gradient(45deg, #5a6fd8, #6a42a0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day:hover {
|
||||||
|
background-color: rgba(102, 126, 234, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-day-today {
|
||||||
|
background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event {
|
||||||
|
border-radius: 8px !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 2px 6px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event:hover {
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-danger {
|
||||||
|
background: linear-gradient(45deg, #f44336, #e53935) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-success {
|
||||||
|
background: linear-gradient(45deg, #4caf50, #43a047) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-primary {
|
||||||
|
background: linear-gradient(45deg, #2196f3, #1e88e5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-info {
|
||||||
|
background: linear-gradient(45deg, #00bcd4, #00acc1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-warning {
|
||||||
|
background: linear-gradient(45deg, #ff9800, #fb8c00) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event.bg-purple {
|
||||||
|
background: linear-gradient(45deg, #9c27b0, #8e24aa) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Customizations */
|
||||||
|
.modal-content {
|
||||||
|
border-radius: 15px;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||||
|
color: white;
|
||||||
|
border-radius: 15px 15px 0 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
border-top: 1px solid #dee2e6;
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Controls */
|
||||||
|
.form-control {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
padding: 12px 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.calendar-page-wrapper {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-sidebar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-header-toolbar {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar-chunk {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation for dragging */
|
||||||
|
.fc-event-dragging {
|
||||||
|
opacity: 0.7;
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading animation */
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-loading {
|
||||||
|
animation: pulse 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
206
src/styles/fullcalendar.min.css
vendored
Normal file
206
src/styles/fullcalendar.min.css
vendored
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
/* Basic FullCalendar CSS */
|
||||||
|
.fc {
|
||||||
|
direction: ltr;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc th {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc th,
|
||||||
|
.fc td {
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-header-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar-chunk {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button-group {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.4em 0.65em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-button:not(:disabled):active,
|
||||||
|
.fc-button:not(:disabled).fc-button-active {
|
||||||
|
background-color: #007bff;
|
||||||
|
border-color: #007bff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day-number {
|
||||||
|
position: relative;
|
||||||
|
z-index: 4;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85em;
|
||||||
|
line-height: 1.3;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #3788d8;
|
||||||
|
background-color: #3788d8;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event-harness {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event-title {
|
||||||
|
padding: 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-day-today {
|
||||||
|
background-color: rgba(255, 220, 40, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-slot {
|
||||||
|
height: 1.5em;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-slot-label {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-scrollgrid {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-scrollgrid table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-col-header-cell {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day-frame {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day-top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day-events {
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-event {
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-block-event .fc-event-time {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-block-event .fc-event-title {
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-direction-ltr .fc-daygrid-event.fc-event-start,
|
||||||
|
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||||
|
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-week-number {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
top: 0;
|
||||||
|
padding: 2px;
|
||||||
|
min-width: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(208, 208, 208, 0.3);
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.fc-header-toolbar {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar-chunk {
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user