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",
|
||||
coupons:"/coupons",
|
||||
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 EnhancedLoaders from "../feature-module/uiinterface/enhanced-loaders";
|
||||
import WeddingGuestList from "../feature-module/inventory/weddingGuestList";
|
||||
import EditWeddingGuest from "../feature-module/inventory/editWeddingGuest";
|
||||
import AddWeddingGuest from "../feature-module/inventory/addWeddingGuest";
|
||||
import ProductList2 from "../feature-module/inventory/productlist2";
|
||||
import ProductList3 from "../feature-module/inventory/productlist3";
|
||||
import { all_routes } from "./all_routes";
|
||||
@ -1451,6 +1453,20 @@ export const publicRoutes = [
|
||||
element: <WeddingGuestList />,
|
||||
route: Route,
|
||||
},
|
||||
{
|
||||
id: 117.3,
|
||||
path: routes.editWeddingGuest,
|
||||
name: "editWeddingGuest",
|
||||
element: <EditWeddingGuest />,
|
||||
route: Route,
|
||||
},
|
||||
{
|
||||
id: 117.4,
|
||||
path: routes.addWeddingGuest,
|
||||
name: "addWeddingGuest",
|
||||
element: <AddWeddingGuest />,
|
||||
route: Route,
|
||||
},
|
||||
{
|
||||
id: 118,
|
||||
path: "/",
|
||||
|
||||
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,
|
||||
Eye,
|
||||
Filter,
|
||||
GitMerge,
|
||||
Sliders,
|
||||
StopCircle,
|
||||
Trash2,
|
||||
|
||||
@ -13,6 +13,7 @@ const WeddingGuestList = () => {
|
||||
const [guestData, setGuestData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
const [isDarkTheme, setIsDarkTheme] = useState(false);
|
||||
|
||||
// Pagination state
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -367,6 +368,84 @@ const WeddingGuestList = () => {
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
// Theme detection with multiple approaches
|
||||
useEffect(() => {
|
||||
const checkTheme = () => {
|
||||
const htmlElement = document.documentElement;
|
||||
const bodyElement = document.body;
|
||||
|
||||
// Get all possible theme indicators
|
||||
const layoutMode = htmlElement.getAttribute('data-layout-mode');
|
||||
const dataTheme = htmlElement.getAttribute('data-theme');
|
||||
const bodyClass = bodyElement.className;
|
||||
const colorSchema = localStorage.getItem('colorschema');
|
||||
|
||||
// Check multiple ways to detect dark mode
|
||||
const isDarkByLayoutMode = layoutMode === 'dark_mode';
|
||||
const isDarkByDataTheme = dataTheme === 'dark';
|
||||
const isDarkByLocalStorage = colorSchema === 'dark_mode';
|
||||
const isDarkByBodyClass = bodyClass.includes('dark') || bodyClass.includes('dark-mode');
|
||||
|
||||
// Use any method that indicates dark mode
|
||||
const isDark = isDarkByLayoutMode || isDarkByDataTheme || isDarkByLocalStorage || isDarkByBodyClass;
|
||||
|
||||
console.log('🎨 Theme debug:', {
|
||||
layoutMode,
|
||||
dataTheme,
|
||||
bodyClass,
|
||||
colorSchema,
|
||||
isDarkByLayoutMode,
|
||||
isDarkByDataTheme,
|
||||
isDarkByLocalStorage,
|
||||
isDarkByBodyClass,
|
||||
finalIsDark: isDark
|
||||
});
|
||||
|
||||
setIsDarkTheme(isDark);
|
||||
};
|
||||
|
||||
// Initial check
|
||||
checkTheme();
|
||||
|
||||
// Check again after a short delay to catch late theme application
|
||||
setTimeout(checkTheme, 100);
|
||||
setTimeout(checkTheme, 500);
|
||||
|
||||
// Listen for all possible theme changes
|
||||
const observer = new MutationObserver(() => {
|
||||
console.log('🔄 DOM mutation detected, rechecking theme...');
|
||||
checkTheme();
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-layout-mode', 'data-theme', 'class']
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class', 'data-theme']
|
||||
});
|
||||
|
||||
// Listen for localStorage changes
|
||||
const handleStorageChange = (e) => {
|
||||
if (e.key === 'colorschema') {
|
||||
console.log('📦 localStorage colorschema changed:', e.newValue);
|
||||
setTimeout(checkTheme, 50);
|
||||
}
|
||||
};
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
// Also check periodically as fallback
|
||||
const interval = setInterval(checkTheme, 2000);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Load data on component mount
|
||||
useEffect(() => {
|
||||
loadGuests();
|
||||
@ -496,14 +575,23 @@ const WeddingGuestList = () => {
|
||||
render: (_, record) => (
|
||||
<div className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Edit
|
||||
size={16}
|
||||
style={{ cursor: 'pointer', color: '#1890ff', marginRight: '8px' }}
|
||||
onClick={() => {
|
||||
// TODO: Navigate to edit page
|
||||
message.info('Edit functionality will be implemented');
|
||||
}}
|
||||
/>
|
||||
<Link to={`/edit-wedding-guest/${record.id}`}>
|
||||
<Edit
|
||||
size={16}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
color: isDarkTheme ? '#ffffff' : '#666666',
|
||||
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
|
||||
size={16}
|
||||
style={{ cursor: 'pointer', color: '#ff4d4f' }}
|
||||
@ -533,16 +621,128 @@ const WeddingGuestList = () => {
|
||||
<div className="page-wrapper">
|
||||
<style>
|
||||
{`
|
||||
.wedding-guest-search-input input {
|
||||
color: #000000 !important;
|
||||
background-color: #ffffff !important;
|
||||
/* Dynamic theme styling for wedding guest list */
|
||||
.card.table-list-card {
|
||||
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||
}
|
||||
|
||||
.wedding-guest-search-input input,
|
||||
.wedding-guest-search-input .ant-input {
|
||||
color: #000000 !important;
|
||||
background-color: #ffffff !important;
|
||||
color: ${isDarkTheme ? '#ffffff' : '#000000'} !important;
|
||||
background-color: ${isDarkTheme ? '#1f1f1f' : '#ffffff'} !important;
|
||||
border-color: ${isDarkTheme ? '#434343' : '#d9d9d9'} !important;
|
||||
}
|
||||
|
||||
.wedding-guest-search-input .ant-input::placeholder {
|
||||
color: #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>
|
||||
|
||||
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
|
||||
async updateWeddingGuest(id, guestData) {
|
||||
try {
|
||||
const response = await apiClient.put(`/WeddingGuests/${id}`, guestData);
|
||||
console.log('🔍 API Call - Update Wedding Guest:', {
|
||||
baseURL: API_BASE_URL,
|
||||
endpoint: `/WeddingGuests/${id}`,
|
||||
method: 'POST',
|
||||
data: guestData
|
||||
});
|
||||
|
||||
const response = await apiClient.post(`/WeddingGuests/${id}`, guestData);
|
||||
|
||||
console.log('✅ API Response - Update Wedding Guest:', {
|
||||
status: response.status,
|
||||
data: response.data
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: response.data.data || response.data,
|
||||
message: response.data.message || 'Wedding guest updated successfully'
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error updating wedding guest:', error);
|
||||
console.error('❌ Error updating wedding guest:', {
|
||||
message: error.message,
|
||||
status: error.response?.status,
|
||||
statusText: error.response?.statusText,
|
||||
data: error.response?.data,
|
||||
config: {
|
||||
url: error.config?.url,
|
||||
method: error.config?.method,
|
||||
baseURL: error.config?.baseURL
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
success: false,
|
||||
data: null,
|
||||
@ -170,7 +194,7 @@ export const weddingGuestService = {
|
||||
// Update wedding guest status only
|
||||
async updateWeddingGuestStatus(id, status) {
|
||||
try {
|
||||
const response = await apiClient.put(`/WeddingGuests/${id}/status`, { status });
|
||||
const response = await apiClient.post(`/WeddingGuests/${id}/status`, { status });
|
||||
return {
|
||||
success: true,
|
||||
data: response.data.data || response.data,
|
||||
|
||||
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