Sửa hiển thị điểm đầu và điểm cuối của chặng

This commit is contained in:
2026-06-14 09:28:33 +07:00
parent ed437cdb0f
commit 14bf43487e
17 changed files with 189 additions and 12 deletions
+10 -3
View File
@@ -1,6 +1,6 @@
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { format, differenceInMinutes, parseISO } from 'date-fns';
import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus } from 'lucide-react';
import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
import { useTourStore } from './useTourStore.js';
const TimeVariance = ({ planned, actual }) => {
if (!actual)
@@ -25,7 +25,7 @@ const formatTravelTime = (minutes) => {
return mins > 0 ? `${hours} giờ ${mins} phút` : `${hours} giờ`;
};
export const ItineraryTimeline = () => {
const { currentTour, legs, optimizeRouting, userRole, activeLegId, setActiveLegId, addLeg, updateLeg, deleteLeg } = useTourStore();
const { currentTour, legs, optimizeRouting, userRole, activeLegId, setActiveLegId, addLeg, updateLeg, deleteLeg, initializeLegs } = useTourStore();
const toggleComplete = async (locationId) => {
console.log("Toggle status for location:", locationId);
};
@@ -35,6 +35,13 @@ export const ItineraryTimeline = () => {
await addLeg(currentTour.id, { note });
}
};
const handleDeclareLegs = async () => {
const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
const count = parseInt(countStr || "0");
if (count > 0 && currentTour) {
await initializeLegs(currentTour.id, count);
}
};
const handleEditLeg = async (leg) => {
const note = window.prompt("Sửa ghi chú chặng:", leg.note || "");
if (note !== null) {
@@ -54,7 +61,7 @@ export const ItineraryTimeline = () => {
const activeLeg = legs.find(l => l.id === activeLegId) || legs[0];
return (_jsxs("div", { className: "max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen", children: [_jsx("div", { className: "sticky top-[136px] z-20 bg-gray-50/80 backdrop-blur-sm pb-4 mb-4", children: _jsxs("div", { className: "flex overflow-x-auto gap-2 px-2 no-scrollbar py-2", children: [legs.map((leg) => (_jsxs("button", { onClick: () => setActiveLegId(leg.id), className: `flex-shrink-0 px-6 py-2.5 rounded-2xl text-xs font-black uppercase tracking-widest transition-all border ${activeLegId === leg.id
? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-100 scale-105'
: 'bg-white text-gray-400 border-gray-100 hover:border-gray-200'}`, children: ["Ch\u1EB7ng ", leg.sequence] }, leg.id))), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsx("button", { onClick: handleAddLeg, className: "flex-shrink-0 p-2.5 rounded-2xl bg-white text-blue-600 border border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center w-12", children: _jsx(Plus, { className: "w-5 h-5" }) }))] }) }), _jsx("div", { className: "px-2", children: activeLeg && (_jsx("div", { className: "relative animate-in fade-in slide-in-from-right-4 duration-300", children: (() => {
: 'bg-white text-gray-400 border-gray-100 hover:border-gray-200'}`, children: ["Ch\u1EB7ng ", leg.sequence] }, leg.id))), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs("button", { onClick: handleDeclareLegs, className: "flex-shrink-0 px-4 py-2.5 rounded-2xl bg-blue-50 text-blue-600 border border-dashed border-blue-200 hover:bg-blue-100 transition-all flex items-center gap-2 text-xs font-bold", title: "Khai b\u00E1o nhanh s\u1ED1 l\u01B0\u1EE3ng ch\u1EB7ng", children: [_jsx(List, { className: "w-4 h-4" }), " Khai b\u00E1o s\u1ED1 ch\u1EB7ng"] })), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsx("button", { onClick: handleAddLeg, className: "flex-shrink-0 p-2.5 rounded-2xl bg-white text-blue-600 border border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center w-12", children: _jsx(Plus, { className: "w-5 h-5" }) }))] }) }), _jsx("div", { className: "px-2", children: activeLeg && (_jsx("div", { className: "relative animate-in fade-in slide-in-from-right-4 duration-300", children: (() => {
const leg = activeLeg;
const totalDwellMinutes = leg.locations.reduce((acc, loc) => {
if (loc.plannedStart && loc.plannedEnd) {