diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..291cdb8
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,21 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html, body, #root {
+ height: 100%;
+}
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..1fd12b7
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+ document.getElementById('root') as HTMLElement
+);
+root.render(
+
+
+
+);
diff --git a/src/pages/Calendar.js b/src/pages/Calendar.js
new file mode 100644
index 0000000..e45d305
--- /dev/null
+++ b/src/pages/Calendar.js
@@ -0,0 +1,367 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { Draggable } from "@fullcalendar/interaction";
+import "../styles/fullcalendar.min.css";
+import "../styles/calendar-custom.css";
+import Select from "react-select";
+
+const Calendar = () => {
+ const calendarRef = useRef(null);
+ const initializedRef = useRef(false);
+
+ const [weekendsVisible, setWeekendsVisible] = useState(true);
+ const [isnewevent, setisnewevent] = useState(false);
+ const [iseditdelete, setiseditdelete] = useState(false);
+ const [event_title, setevent_title] = useState("");
+ const [category_color, setcategory_color] = useState("");
+ const [calenderevent, setcalenderevent] = useState(null);
+ const [addneweventobj, setaddneweventobj] = useState(null);
+
+ // Combined events state for calendar display - using current dates
+ const today = new Date();
+ const [calendarEvents, setCalendarEvents] = useState([
+ {
+ id: 'default-1',
+ title: "🎯 Existing Meeting",
+ start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
+ end: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
+ className: "bg-primary",
+ },
+ {
+ id: 'default-2',
+ title: "📈 Weekly Review",
+ start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 14, 0),
+ end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 15, 30),
+ className: "bg-success",
+ },
+ {
+ id: 'default-3',
+ title: "🚀 Project Launch",
+ start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 9, 0),
+ end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3, 17, 0),
+ className: "bg-warning",
+ },
+ {
+ id: 'default-4',
+ title: "🎉 Team Building",
+ start: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 13, 0),
+ end: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 18, 0),
+ className: "bg-info",
+ }
+ ]);
+
+ useEffect(() => {
+ if (initializedRef.current) {
+ console.log("🚫 Calendar already initialized, skipping");
+ return;
+ }
+
+ let elements = Array.from(
+ document.getElementsByClassName("react-datepicker-wrapper")
+ );
+ elements.map((element) => element.classList.add("width-100"));
+
+ // Initialize external draggable events
+ const draggableEl = document.getElementById("calendar-events");
+ if (draggableEl) {
+ console.log("🚀 Initializing calendar draggable events");
+
+ new Draggable(draggableEl, {
+ itemSelector: ".calendar-events",
+ eventData: function(eventEl) {
+ const title = eventEl.innerText.trim();
+ const className = eventEl.getAttribute("data-class");
+ return {
+ title: title,
+ className: className,
+ duration: "01:00"
+ };
+ },
+ longPressDelay: 0,
+ touchTimeoutDelay: 0
+ });
+
+ initializedRef.current = true;
+ console.log("✅ Calendar initialization completed");
+ }
+ }, []);
+
+ const handleDateSelect = useCallback((selectInfo) => {
+ console.log("📅 Date selected:", selectInfo);
+ setaddneweventobj(selectInfo);
+ setisnewevent(true);
+ }, []);
+
+ const handleEventClick = useCallback((clickInfo) => {
+ console.log("🖱️ Event clicked:", clickInfo.event);
+ setcalenderevent(clickInfo.event);
+ setevent_title(clickInfo.event.title);
+ setiseditdelete(true);
+ }, []);
+
+ const handleEventReceive = useCallback((info) => {
+ console.log("📥 External event dropped:", info);
+
+ const newEvent = {
+ id: `external-${Date.now()}`,
+ title: info.event.title,
+ start: info.event.start,
+ end: info.event.end,
+ className: info.event.classNames[0] || "bg-primary"
+ };
+
+ setCalendarEvents(prev => [...prev, newEvent]);
+ }, []);
+
+ const handleEventDrop = useCallback((info) => {
+ console.log("🔄 Event moved:", info);
+
+ setCalendarEvents(prev =>
+ prev.map(event =>
+ event.id === info.event.id
+ ? { ...event, start: info.event.start, end: info.event.end }
+ : event
+ )
+ );
+ }, []);
+
+ const addnewevent = () => {
+ let calendarApi = addneweventobj.view.calendar;
+
+ calendarApi.unselect();
+
+ if (event_title) {
+ const newEvent = {
+ id: `new-${Date.now()}`,
+ title: event_title,
+ className: category_color,
+ start: addneweventobj.startStr,
+ end: addneweventobj.endStr,
+ allDay: addneweventobj.allDay,
+ };
+
+ calendarApi.addEvent(newEvent);
+ setCalendarEvents(prev => [...prev, newEvent]);
+ }
+ setisnewevent(false);
+ };
+
+ const onupdateModalClose = () => {
+ setiseditdelete(false);
+ setevent_title("");
+ };
+
+ const oncreateeventModalClose = () => {
+ setevent_title("");
+ setisnewevent(false);
+ };
+
+ const removeevent = () => {
+ calenderevent.remove();
+ setCalendarEvents(prev => prev.filter(event => event.id !== calenderevent.id));
+ setiseditdelete(false);
+ };
+
+ const categoryColorOptions = [
+ { value: "bg-danger", label: "🔴 Đỏ", color: "#dc3545" },
+ { value: "bg-success", label: "🟢 Xanh lá", color: "#28a745" },
+ { value: "bg-primary", label: "🔵 Xanh dương", color: "#007bff" },
+ { value: "bg-info", label: "🟦 Xanh nhạt", color: "#17a2b8" },
+ { value: "bg-warning", label: "🟡 Vàng", color: "#ffc107" },
+ { value: "bg-purple", label: "🟣 Tím", color: "#6f42c1" },
+ ];
+
+ return (
+
+
+
+
+
+
📅 Beautiful Calendar
+
+
+
+
+
+
+
+
+
+
🎯 Drag & Drop Events
+
+
+ 👥 Họp
+
+
+ 📞 Gọi điện
+
+
+ 💼 Công việc
+
+
+ 🎯 Mục tiêu
+
+
+ ⚠️ Quan trọng
+
+
+ 🎉 Sự kiện
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Add Event Modal */}
+ {isnewevent && (
+
+
+
+
+
Thêm sự kiện mới
+
+
+
+
+
+
+ setevent_title(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Edit/Delete Event Modal */}
+ {iseditdelete && (
+
+
+
+
+
Chỉnh sửa sự kiện
+
+
+
+
+
+
+ setevent_title(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Calendar;
diff --git a/src/pages/Calendar.tsx b/src/pages/Calendar.tsx
new file mode 100644
index 0000000..9418c08
--- /dev/null
+++ b/src/pages/Calendar.tsx
@@ -0,0 +1,367 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { Draggable } from "@fullcalendar/interaction";
+import "../styles/fullcalendar.min.css";
+import "../styles/calendar-custom.css";
+import Select from "react-select";
+
+const Calendar = () => {
+ const calendarRef = useRef
(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: 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 (
+
+
+
+
+
+
📅 Beautiful Calendar
+
+
+
+
+
+
+
+
+
+
🎯 Drag & Drop Events
+
+
+ 👥 Họp
+
+
+ 📞 Gọi điện
+
+
+ 💼 Công việc
+
+
+ 🎯 Mục tiêu
+
+
+ ⚠️ Quan trọng
+
+
+ 🎉 Sự kiện
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Add Event Modal */}
+ {isnewevent && (
+
+
+
+
+
Thêm sự kiện mới
+
+
+
+
+
+
+ setevent_title(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Edit/Delete Event Modal */}
+ {iseditdelete && (
+
+
+
+
+
Chỉnh sửa sự kiện
+
+
+
+
+
+
+ setevent_title(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
🎯 Project Tracker
+
Quản lý và theo dõi tiến độ dự án
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Projects Table */}
+
+
+
+
+
+
+ | Dự án |
+ Danh mục |
+ Ngày bắt đầu |
+ Deadline |
+ Tiến độ |
+ Trạng thái |
+ Ngân sách |
+ Thao tác |
+
+
+
+ {filteredProjects.map((project) => (
+
+ |
+
+ {project.name}
+
+ Team: {project.team.length} thành viên
+
+
+ |
+
+
+ {project.category}
+
+ |
+ {new Date(project.startDate).toLocaleDateString('vi-VN')} |
+ {new Date(project.endDate).toLocaleDateString('vi-VN')} |
+
+ {getProgressBar(project.progress)}
+ |
+ {getStatusBadge(project.status)} |
+
+
+ {formatCurrency(project.budget)}
+
+ |
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* Project Details Modal */}
+ {showModal && selectedProject && (
+
+
+
+
+
+ {isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
+
+
+
+
+
+
+
Tên dự án
+
{selectedProject.name}
+
+
+
Danh mục
+
{selectedProject.category}
+
+
+
Ngày bắt đầu
+
{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}
+
+
+
Deadline
+
{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}
+
+
+
Tiến độ
+ {getProgressBar(selectedProject.progress)}
+
+
+
Trạng thái
+ {getStatusBadge(selectedProject.status)}
+
+
+
Ngân sách
+
+ {formatCurrency(selectedProject.budget)}
+
+
+
+
Thành viên team
+
{selectedProject.team.join(", ")}
+
+
+
Mô tả
+
{selectedProject.description}
+
+
+
+
+
+ {isEditing && (
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+
+
🎯 Project Tracker
+
Quản lý và theo dõi tiến độ dự án
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Projects Table */}
+
+
+
+
+
+
+ | Dự án |
+ Danh mục |
+ Ngày bắt đầu |
+ Deadline |
+ Tiến độ |
+ Trạng thái |
+ Ngân sách |
+ Thao tác |
+
+
+
+ {filteredProjects.map((project) => (
+
+ |
+
+ {project.name}
+
+ Team: {project.team.length} thành viên
+
+
+ |
+
+
+ {project.category}
+
+ |
+ {new Date(project.startDate).toLocaleDateString('vi-VN')} |
+ {new Date(project.endDate).toLocaleDateString('vi-VN')} |
+
+ {getProgressBar(project.progress)}
+ |
+ {getStatusBadge(project.status)} |
+
+
+ {formatCurrency(project.budget)}
+
+ |
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* Project Details Modal */}
+ {showModal && selectedProject && (
+
+
+
+
+
+ {isEditing ? "Chỉnh sửa dự án" : "Chi tiết dự án"}
+
+
+
+
+
+
+
Tên dự án
+
{selectedProject.name}
+
+
+
Danh mục
+
{selectedProject.category}
+
+
+
Ngày bắt đầu
+
{new Date(selectedProject.startDate).toLocaleDateString('vi-VN')}
+
+
+
Deadline
+
{new Date(selectedProject.endDate).toLocaleDateString('vi-VN')}
+
+
+
Tiến độ
+ {getProgressBar(selectedProject.progress)}
+
+
+
Trạng thái
+ {getStatusBadge(selectedProject.status)}
+
+
+
Ngân sách
+
+ {formatCurrency(selectedProject.budget)}
+
+
+
+
Thành viên team
+
{selectedProject.team.join(", ")}
+
+
+
Mô tả
+
{selectedProject.description}
+
+
+
+
+
+ {isEditing && (
+
+ )}
+
+
+
+
+ )}
+
+