841 lines
36 KiB
TypeScript
841 lines
36 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Plus,
|
|
Edit,
|
|
Eye,
|
|
Search,
|
|
X,
|
|
CheckCircle,
|
|
Clock,
|
|
RefreshCw,
|
|
Play,
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import Loading from '../../../shared/components/Loading';
|
|
import Pagination from '../../../shared/components/Pagination';
|
|
import advancedRoomService, { HousekeepingTask, ChecklistItem } from '../../rooms/services/advancedRoomService';
|
|
import roomService, { Room } from '../../rooms/services/roomService';
|
|
import userService, { User as UserType } from '../../auth/services/userService';
|
|
import useAuthStore from '../../../store/useAuthStore';
|
|
import DatePicker from 'react-datepicker';
|
|
import 'react-datepicker/dist/react-datepicker.css';
|
|
|
|
const HousekeepingManagement: React.FC = () => {
|
|
const { userInfo } = useAuthStore();
|
|
const isAdmin = userInfo?.role === 'admin';
|
|
const isHousekeeping = userInfo?.role === 'housekeeping';
|
|
const [loading, setLoading] = useState(true);
|
|
const [tasks, setTasks] = useState<HousekeepingTask[]>([]);
|
|
const [rooms, setRooms] = useState<Room[]>([]);
|
|
const [staff, setStaff] = useState<UserType[]>([]);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingTask, setEditingTask] = useState<HousekeepingTask | null>(null);
|
|
const [viewingTask, setViewingTask] = useState<HousekeepingTask | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [filters, setFilters] = useState({
|
|
room_id: '',
|
|
status: '',
|
|
task_type: '',
|
|
date: '',
|
|
});
|
|
|
|
const [formData, setFormData] = useState({
|
|
room_id: '',
|
|
booking_id: '',
|
|
task_type: 'vacant' as 'checkout' | 'stayover' | 'vacant' | 'inspection' | 'turndown',
|
|
scheduled_time: new Date(),
|
|
assigned_to: '',
|
|
checklist_items: [] as ChecklistItem[],
|
|
notes: '',
|
|
estimated_duration_minutes: '',
|
|
});
|
|
|
|
const defaultChecklistItems: Record<string, string[]> = {
|
|
checkout: ['Bathroom cleaned', 'Beds made', 'Trash emptied', 'Towels replaced', 'Amenities restocked', 'Floor vacuumed'],
|
|
stayover: ['Beds made', 'Trash emptied', 'Towels replaced', 'Bathroom cleaned'],
|
|
vacant: ['Deep clean bathroom', 'Change linens', 'Vacuum and mop', 'Dust surfaces', 'Check amenities'],
|
|
inspection: ['Check all amenities', 'Test electronics', 'Check for damages', 'Verify cleanliness'],
|
|
turndown: ['Prepare bed', 'Close curtains', 'Place amenities', 'Adjust lighting'],
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchRooms();
|
|
fetchStaff();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
}, [currentPage, filters]);
|
|
|
|
// Auto-refresh every 30 seconds for real-time updates
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
fetchTasks();
|
|
}, 30000); // Refresh every 30 seconds
|
|
|
|
return () => clearInterval(interval);
|
|
}, [currentPage, filters]);
|
|
|
|
const fetchTasks = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const params: any = {
|
|
page: currentPage,
|
|
limit: 10,
|
|
include_cleaning_rooms: true // Include rooms in cleaning status
|
|
};
|
|
if (filters.room_id) params.room_id = parseInt(filters.room_id);
|
|
if (filters.status) params.status = filters.status;
|
|
if (filters.task_type) params.task_type = filters.task_type;
|
|
if (filters.date) params.date = filters.date;
|
|
|
|
const response = await advancedRoomService.getHousekeepingTasks(params);
|
|
if (response.status === 'success') {
|
|
setTasks(response.data.tasks);
|
|
setTotalPages(response.data.pagination?.total_pages || 1);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to fetch housekeeping tasks');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchRooms = async () => {
|
|
try {
|
|
const allRooms: Room[] = [];
|
|
let page = 1;
|
|
let hasMorePages = true;
|
|
|
|
while (hasMorePages) {
|
|
const response = await roomService.getRooms({ limit: 100, page });
|
|
if (response.success || response.status === 'success') {
|
|
if (response.data?.rooms) {
|
|
allRooms.push(...response.data.rooms);
|
|
|
|
// Check if there are more pages
|
|
if (response.data.pagination) {
|
|
hasMorePages = page < response.data.pagination.totalPages;
|
|
page++;
|
|
} else {
|
|
hasMorePages = false;
|
|
}
|
|
} else {
|
|
hasMorePages = false;
|
|
}
|
|
} else {
|
|
console.error('Failed to fetch rooms: Invalid response structure', response);
|
|
hasMorePages = false;
|
|
}
|
|
}
|
|
|
|
setRooms(allRooms);
|
|
} catch (error) {
|
|
console.error('Failed to fetch rooms:', error);
|
|
toast.error('Failed to load rooms. Please try again.');
|
|
}
|
|
};
|
|
|
|
const fetchStaff = async () => {
|
|
try {
|
|
const response = await userService.getUsers({ role: 'staff', limit: 100 });
|
|
if (response.data?.users) {
|
|
setStaff(response.data.users);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch staff:', error);
|
|
}
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
setEditingTask(null);
|
|
setFormData({
|
|
room_id: '',
|
|
booking_id: '',
|
|
task_type: 'vacant',
|
|
scheduled_time: new Date(),
|
|
assigned_to: '',
|
|
checklist_items: [],
|
|
notes: '',
|
|
estimated_duration_minutes: '',
|
|
});
|
|
// Ensure rooms are loaded when opening the modal
|
|
if (rooms.length === 0) {
|
|
fetchRooms();
|
|
}
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleTaskTypeChange = (type: string) => {
|
|
const items = defaultChecklistItems[type] || [];
|
|
setFormData({
|
|
...formData,
|
|
task_type: type as any,
|
|
checklist_items: items.map(item => ({ item, completed: false, notes: '' })),
|
|
});
|
|
};
|
|
|
|
const handleEdit = (task: HousekeepingTask) => {
|
|
setEditingTask(task);
|
|
setFormData({
|
|
room_id: task.room_id.toString(),
|
|
booking_id: task.booking_id?.toString() || '',
|
|
task_type: task.task_type,
|
|
scheduled_time: new Date(task.scheduled_time),
|
|
assigned_to: task.assigned_to?.toString() || '',
|
|
checklist_items: task.checklist_items || [],
|
|
notes: task.notes || '',
|
|
estimated_duration_minutes: task.estimated_duration_minutes?.toString() || '',
|
|
});
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleStartTask = async (task: HousekeepingTask) => {
|
|
if (!task.id) {
|
|
toast.error('Cannot start task: Invalid task ID');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await advancedRoomService.updateHousekeepingTask(task.id, {
|
|
status: 'in_progress',
|
|
assigned_to: userInfo?.id, // Assign to current user when starting
|
|
});
|
|
toast.success('Task started successfully');
|
|
fetchTasks();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to start task');
|
|
}
|
|
};
|
|
|
|
const handleMarkAsDone = async (task: HousekeepingTask) => {
|
|
if (!task.id) {
|
|
toast.error('Cannot complete task: Invalid task ID');
|
|
return;
|
|
}
|
|
|
|
// Double check that the task is assigned to the current user
|
|
if (!task.assigned_to) {
|
|
toast.error('Task must be assigned before it can be marked as done');
|
|
return;
|
|
}
|
|
if (task.assigned_to !== userInfo?.id) {
|
|
toast.error('Only the assigned staff member can mark this task as done');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await advancedRoomService.updateHousekeepingTask(task.id, {
|
|
status: 'completed',
|
|
checklist_items: task.checklist_items?.map(item => ({ ...item, completed: true })) || [],
|
|
});
|
|
toast.success('Task marked as completed successfully. Room is now ready for check-in.');
|
|
fetchTasks();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to mark task as done');
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (editingTask && editingTask.id) {
|
|
// For staff, only allow updating status and checklist items
|
|
if (!isAdmin) {
|
|
const data = {
|
|
status: editingTask.status,
|
|
checklist_items: formData.checklist_items,
|
|
notes: formData.notes, // Allow staff to add notes
|
|
};
|
|
await advancedRoomService.updateHousekeepingTask(editingTask.id, data);
|
|
} else {
|
|
// Admin can update all fields
|
|
const data = {
|
|
room_id: parseInt(formData.room_id),
|
|
booking_id: formData.booking_id ? parseInt(formData.booking_id) : undefined,
|
|
task_type: formData.task_type,
|
|
scheduled_time: formData.scheduled_time.toISOString(),
|
|
assigned_to: formData.assigned_to ? parseInt(formData.assigned_to) : undefined,
|
|
checklist_items: formData.checklist_items,
|
|
notes: formData.notes,
|
|
estimated_duration_minutes: formData.estimated_duration_minutes ? parseInt(formData.estimated_duration_minutes) : undefined,
|
|
status: editingTask.status,
|
|
};
|
|
await advancedRoomService.updateHousekeepingTask(editingTask.id, data);
|
|
}
|
|
toast.success('Housekeeping task updated successfully');
|
|
} else {
|
|
// Only admin and staff can create tasks
|
|
if (!isAdmin && userInfo?.role !== 'staff') {
|
|
toast.error('You do not have permission to create tasks');
|
|
return;
|
|
}
|
|
const data = {
|
|
room_id: parseInt(formData.room_id),
|
|
booking_id: formData.booking_id ? parseInt(formData.booking_id) : undefined,
|
|
task_type: formData.task_type,
|
|
scheduled_time: formData.scheduled_time.toISOString(),
|
|
assigned_to: formData.assigned_to ? parseInt(formData.assigned_to) : undefined,
|
|
checklist_items: formData.checklist_items,
|
|
notes: formData.notes,
|
|
estimated_duration_minutes: formData.estimated_duration_minutes ? parseInt(formData.estimated_duration_minutes) : undefined,
|
|
};
|
|
await advancedRoomService.createHousekeepingTask(data);
|
|
toast.success('Housekeeping task created successfully');
|
|
}
|
|
|
|
setShowModal(false);
|
|
fetchTasks();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to save housekeeping task');
|
|
}
|
|
};
|
|
|
|
const updateChecklistItem = (index: number, field: 'completed' | 'notes', value: any) => {
|
|
const updated = [...formData.checklist_items];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
setFormData({ ...formData, checklist_items: updated });
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'completed':
|
|
return 'bg-green-100 text-green-800';
|
|
case 'in_progress':
|
|
return 'bg-blue-100 text-blue-800';
|
|
case 'pending':
|
|
return 'bg-yellow-100 text-yellow-800';
|
|
case 'skipped':
|
|
return 'bg-gray-100 text-gray-800';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800';
|
|
}
|
|
};
|
|
|
|
if (loading && tasks.length === 0) {
|
|
return <Loading />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Search className="w-5 h-5 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by room..."
|
|
className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
onChange={(e) => setFilters({ ...filters, room_id: e.target.value })}
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filters.status}
|
|
onChange={(e) => setFilters({ ...filters, status: e.target.value })}
|
|
className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="skipped">Skipped</option>
|
|
</select>
|
|
<select
|
|
value={filters.task_type}
|
|
onChange={(e) => setFilters({ ...filters, task_type: e.target.value })}
|
|
className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">All Types</option>
|
|
<option value="checkout">Checkout</option>
|
|
<option value="stayover">Stayover</option>
|
|
<option value="vacant">Vacant</option>
|
|
<option value="inspection">Inspection</option>
|
|
<option value="turndown">Turndown</option>
|
|
</select>
|
|
<input
|
|
type="date"
|
|
value={filters.date}
|
|
onChange={(e) => setFilters({ ...filters, date: e.target.value })}
|
|
className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={fetchTasks}
|
|
disabled={loading}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors disabled:opacity-50"
|
|
title="Refresh tasks"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
{(isAdmin || userInfo?.role === 'staff') && (
|
|
<button
|
|
onClick={handleCreate}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>New Task</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{tasks.map((task, index) => {
|
|
const completedItems = task.checklist_items?.filter(item => item.completed).length || 0;
|
|
const totalItems = task.checklist_items?.length || 0;
|
|
const progress = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
|
|
const isRoomStatusOnly = task.is_room_status_only || task.id === null;
|
|
const isCleaningRoom = task.room_status === 'cleaning' || isRoomStatusOnly;
|
|
|
|
return (
|
|
<tr
|
|
key={task.id || `room-${task.room_id}-${index}`}
|
|
className={`hover:bg-gray-50 ${isCleaningRoom ? 'bg-amber-50/50' : ''}`}
|
|
>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{task.room_number || `Room ${task.room_id}`}
|
|
</div>
|
|
{isCleaningRoom && (
|
|
<span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-amber-100 text-amber-800 border border-amber-200">
|
|
Cleaning
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-500 capitalize">
|
|
{isRoomStatusOnly ? 'Room Status' : task.task_type}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(task.status)}`}>
|
|
{task.status.replace('_', ' ')}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{task.scheduled_time ? new Date(task.scheduled_time).toLocaleString() : 'N/A'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{task.assigned_staff_name || (isRoomStatusOnly ? 'Not Assigned' : 'Unassigned')}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{totalItems > 0 ? (
|
|
<div className="flex items-center">
|
|
<div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-gray-600">{progress}%</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-gray-400">No checklist</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<div className="flex items-center space-x-2">
|
|
{task.id && (
|
|
<button
|
|
onClick={() => setViewingTask(task)}
|
|
className="text-blue-600 hover:text-blue-900"
|
|
title="View task"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{isRoomStatusOnly ? (
|
|
// For room status entries, allow creating a task
|
|
(isAdmin || userInfo?.role === 'staff') && (
|
|
<button
|
|
onClick={() => {
|
|
setFormData({
|
|
room_id: task.room_id.toString(),
|
|
booking_id: '',
|
|
task_type: 'vacant',
|
|
scheduled_time: new Date(),
|
|
assigned_to: '',
|
|
checklist_items: [],
|
|
notes: '',
|
|
estimated_duration_minutes: '',
|
|
});
|
|
setEditingTask(null);
|
|
setShowModal(true);
|
|
}}
|
|
className="text-indigo-600 hover:text-indigo-900"
|
|
title="Create task for this room"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
</button>
|
|
)
|
|
) : (
|
|
// For actual tasks
|
|
isAdmin ? (
|
|
<button
|
|
onClick={() => handleEdit(task)}
|
|
className="text-indigo-600 hover:text-indigo-900"
|
|
title="Edit task"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</button>
|
|
) : (
|
|
// Housekeeping and staff actions
|
|
(isHousekeeping || userInfo?.role === 'staff') && (
|
|
<>
|
|
{task.status === 'pending' && !task.assigned_to && (
|
|
// Show Start button for unassigned pending tasks
|
|
<button
|
|
onClick={() => handleStartTask(task)}
|
|
className="text-blue-600 hover:text-blue-900"
|
|
title="Start cleaning this room"
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{task.assigned_to === userInfo?.id && task.status !== 'completed' && (
|
|
<>
|
|
<button
|
|
onClick={() => handleEdit(task)}
|
|
className="text-indigo-600 hover:text-indigo-900"
|
|
title="Update task"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</button>
|
|
{task.status === 'in_progress' && (
|
|
<button
|
|
onClick={() => handleMarkAsDone(task)}
|
|
className="text-green-600 hover:text-green-900"
|
|
title="Mark as done - Room ready for check-in"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
)
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="mt-4">
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={setCurrentPage}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create/Edit Modal */}
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="p-6 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
{editingTask
|
|
? (isAdmin ? 'Edit Housekeeping Task' : 'Update Task Status')
|
|
: 'New Housekeeping Task'}
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Room *</label>
|
|
<select
|
|
required
|
|
disabled={!isAdmin && editingTask !== null}
|
|
value={formData.room_id}
|
|
onChange={(e) => setFormData({ ...formData, room_id: e.target.value })}
|
|
className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${!isAdmin && editingTask !== null ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
|
>
|
|
<option value="">Select Room</option>
|
|
{rooms.map((room) => (
|
|
<option key={room.id} value={room.id}>
|
|
{room.room_number} - Floor {room.floor}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Task Type *</label>
|
|
<select
|
|
required
|
|
disabled={!isAdmin && editingTask !== null}
|
|
value={formData.task_type}
|
|
onChange={(e) => handleTaskTypeChange(e.target.value)}
|
|
className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${!isAdmin && editingTask !== null ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
|
>
|
|
<option value="checkout">Checkout</option>
|
|
<option value="stayover">Stayover</option>
|
|
<option value="vacant">Vacant</option>
|
|
<option value="inspection">Inspection</option>
|
|
<option value="turndown">Turndown</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Scheduled Time *</label>
|
|
<DatePicker
|
|
selected={formData.scheduled_time}
|
|
onChange={(date: Date | null) => date && setFormData({ ...formData, scheduled_time: date })}
|
|
showTimeSelect
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
disabled={!isAdmin && editingTask !== null}
|
|
className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${!isAdmin && editingTask !== null ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Assigned To</label>
|
|
<select
|
|
disabled={!isAdmin}
|
|
value={formData.assigned_to}
|
|
onChange={(e) => setFormData({ ...formData, assigned_to: e.target.value })}
|
|
className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${!isAdmin ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
|
>
|
|
<option value="">Unassigned</option>
|
|
{staff.map((s) => (
|
|
<option key={s.id} value={s.id}>
|
|
{s.full_name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status field - staff can update this */}
|
|
{editingTask && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Status *</label>
|
|
<select
|
|
required
|
|
value={editingTask.status}
|
|
onChange={(e) => {
|
|
if (editingTask) {
|
|
setEditingTask({ ...editingTask, status: e.target.value as any });
|
|
}
|
|
}}
|
|
className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="pending">Pending</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="skipped">Skipped</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Checklist Items</label>
|
|
<div className="space-y-2 border border-gray-200 rounded-md p-4 max-h-64 overflow-y-auto">
|
|
{formData.checklist_items.map((item, index) => (
|
|
<div key={index} className="flex items-start space-x-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={item.completed}
|
|
onChange={(e) => updateChecklistItem(index, 'completed', e.target.checked)}
|
|
className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
|
/>
|
|
<div className="flex-1">
|
|
<label className="text-sm text-gray-700">{item.item}</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Notes (optional)"
|
|
value={item.notes || ''}
|
|
onChange={(e) => updateChecklistItem(index, 'notes', e.target.value)}
|
|
className="mt-1 w-full border border-gray-300 rounded-md px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{formData.checklist_items.length === 0 && (
|
|
<p className="text-sm text-gray-500">Select a task type to load checklist items</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Estimated Duration (minutes)</label>
|
|
<input
|
|
type="number"
|
|
disabled={!isAdmin && editingTask !== null}
|
|
value={formData.estimated_duration_minutes}
|
|
onChange={(e) => setFormData({ ...formData, estimated_duration_minutes: e.target.value })}
|
|
className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${!isAdmin && editingTask !== null ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
|
|
<textarea
|
|
value={formData.notes}
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|
rows={3}
|
|
placeholder={!isAdmin && editingTask ? "Add notes about the task..." : ""}
|
|
className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowModal(false)}
|
|
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
|
|
>
|
|
{editingTask ? 'Update' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* View Modal */}
|
|
{viewingTask && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="p-6 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold text-gray-900">Task Details</h2>
|
|
<button
|
|
onClick={() => setViewingTask(null)}
|
|
className="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Room</label>
|
|
<p className="mt-1 text-sm text-gray-900">{viewingTask.room_number || `Room ${viewingTask.room_id}`}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Status</label>
|
|
<p className="mt-1">
|
|
<span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(viewingTask.status)}`}>
|
|
{viewingTask.status.replace('_', ' ')}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Type</label>
|
|
<p className="mt-1 text-sm text-gray-900 capitalize">{viewingTask.task_type}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Scheduled Time</label>
|
|
<p className="mt-1 text-sm text-gray-900">{new Date(viewingTask.scheduled_time).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{viewingTask.assigned_staff_name && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Assigned To</label>
|
|
<p className="mt-1 text-sm text-gray-900">{viewingTask.assigned_staff_name}</p>
|
|
</div>
|
|
)}
|
|
|
|
{viewingTask.checklist_items && viewingTask.checklist_items.length > 0 && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500 mb-2">Checklist</label>
|
|
<div className="space-y-2">
|
|
{viewingTask.checklist_items.map((item, index) => (
|
|
<div key={index} className="flex items-start space-x-2">
|
|
{item.completed ? (
|
|
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
|
|
) : (
|
|
<Clock className="w-5 h-5 text-gray-400 mt-0.5" />
|
|
)}
|
|
<div className="flex-1">
|
|
<p className={`text-sm ${item.completed ? 'text-gray-500 line-through' : 'text-gray-900'}`}>
|
|
{item.item}
|
|
</p>
|
|
{item.notes && (
|
|
<p className="text-xs text-gray-500 mt-1">{item.notes}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{viewingTask.notes && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Notes</label>
|
|
<p className="mt-1 text-sm text-gray-900">{viewingTask.notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end pt-4 border-t border-gray-200">
|
|
<button
|
|
onClick={() => {
|
|
setViewingTask(null);
|
|
handleEdit(viewingTask);
|
|
}}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
|
|
>
|
|
Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HousekeepingManagement;
|
|
|