678 lines
32 KiB
TypeScript
678 lines
32 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Plus, Search, Edit, Trash2, X, Upload, Image as ImageIcon } from 'lucide-react';
|
|
import serviceService, { Service } from '../../features/hotel_services/services/serviceService';
|
|
import { toast } from 'react-toastify';
|
|
import Loading from '../../shared/components/Loading';
|
|
import Pagination from '../../shared/components/Pagination';
|
|
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
|
|
import IconPicker from '../../features/system/components/IconPicker';
|
|
import ConfirmationDialog from '../../shared/components/ConfirmationDialog';
|
|
|
|
const ServiceManagementPage: React.FC = () => {
|
|
const { formatCurrency } = useFormatCurrency();
|
|
const [services, setServices] = useState<Service[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingService, setEditingService] = useState<Service | null>(null);
|
|
const [filters, setFilters] = useState({
|
|
search: '',
|
|
status: '',
|
|
});
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalItems, setTotalItems] = useState(0);
|
|
const itemsPerPage = 5;
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
price: 0,
|
|
unit: 'time',
|
|
category: '',
|
|
slug: '',
|
|
image: '',
|
|
content: '',
|
|
sections: [] as any[],
|
|
meta_title: '',
|
|
meta_description: '',
|
|
meta_keywords: '',
|
|
status: 'active' as 'active' | 'inactive',
|
|
});
|
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
|
const [uploadingImage, setUploadingImage] = useState(false);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; id: number | null }>({ show: false, id: null });
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [filters]);
|
|
|
|
useEffect(() => {
|
|
fetchServices();
|
|
}, [filters, currentPage]);
|
|
|
|
const fetchServices = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await serviceService.getServices({
|
|
...filters,
|
|
page: currentPage,
|
|
limit: itemsPerPage,
|
|
});
|
|
setServices(response.data.services);
|
|
if (response.data.pagination) {
|
|
setTotalPages(response.data.pagination.totalPages);
|
|
setTotalItems(response.data.pagination.total);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to load services list');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
// Auto-generate slug if not provided
|
|
const dataToSubmit = {
|
|
...formData,
|
|
slug: formData.slug || formData.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
|
|
sections: formData.sections.length > 0 ? JSON.stringify(formData.sections) : null,
|
|
};
|
|
|
|
if (editingService) {
|
|
await serviceService.updateService(editingService.id, dataToSubmit);
|
|
toast.success('Service updated successfully');
|
|
} else {
|
|
await serviceService.createService(dataToSubmit);
|
|
toast.success('Service added successfully');
|
|
}
|
|
setShowModal(false);
|
|
resetForm();
|
|
fetchServices();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'An error occurred');
|
|
}
|
|
};
|
|
|
|
const handleEdit = (service: Service) => {
|
|
setEditingService(service);
|
|
|
|
// Parse sections if it's a string
|
|
let sections: any[] = [];
|
|
if (service.sections) {
|
|
if (typeof service.sections === 'string') {
|
|
try {
|
|
sections = JSON.parse(service.sections);
|
|
} catch {
|
|
sections = [];
|
|
}
|
|
} else if (Array.isArray(service.sections)) {
|
|
sections = service.sections;
|
|
}
|
|
}
|
|
|
|
setFormData({
|
|
name: service.name,
|
|
description: service.description || '',
|
|
price: service.price,
|
|
unit: service.unit || 'time',
|
|
category: service.category || '',
|
|
slug: service.slug || '',
|
|
image: service.image || '',
|
|
content: service.content || '',
|
|
sections: sections,
|
|
meta_title: service.meta_title || '',
|
|
meta_description: service.meta_description || '',
|
|
meta_keywords: service.meta_keywords || '',
|
|
status: service.status,
|
|
});
|
|
|
|
// Set image preview if image exists
|
|
if (service.image) {
|
|
setImagePreview(service.image.startsWith('http') ? service.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${service.image}`);
|
|
} else {
|
|
setImagePreview(null);
|
|
}
|
|
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleDeleteClick = (id: number) => {
|
|
setDeleteConfirm({ show: true, id });
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteConfirm.id) return;
|
|
|
|
try {
|
|
await serviceService.deleteService(deleteConfirm.id);
|
|
toast.success('Service deleted successfully');
|
|
setDeleteConfirm({ show: false, id: null });
|
|
fetchServices();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to delete service');
|
|
setDeleteConfirm({ show: false, id: null });
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setEditingService(null);
|
|
setFormData({
|
|
name: '',
|
|
description: '',
|
|
price: 0,
|
|
unit: 'time',
|
|
category: '',
|
|
slug: '',
|
|
image: '',
|
|
content: '',
|
|
sections: [],
|
|
meta_title: '',
|
|
meta_description: '',
|
|
meta_keywords: '',
|
|
status: 'active',
|
|
});
|
|
setImagePreview(null);
|
|
setImageFile(null);
|
|
};
|
|
|
|
const handleImageUpload = async (file: File) => {
|
|
try {
|
|
setUploadingImage(true);
|
|
const formData = new FormData();
|
|
formData.append('image', file);
|
|
|
|
// Use the page content image upload endpoint or create a service-specific one
|
|
const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/page-content/upload-image`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.status === 'success' && data.data?.image_url) {
|
|
setFormData(prev => ({ ...prev, image: data.data.image_url }));
|
|
setImagePreview(data.data.image_url);
|
|
toast.success('Image uploaded successfully');
|
|
} else {
|
|
throw new Error(data.message || 'Upload failed');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to upload image');
|
|
} finally {
|
|
setUploadingImage(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 md:space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-3 sm:-m-4 md:-m-6 p-4 sm:p-6 md:p-8">
|
|
{}
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 animate-fade-in">
|
|
<div>
|
|
<div className="flex items-center gap-2 sm:gap-3 mb-2">
|
|
<div className="h-1 w-12 sm:w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
|
|
<h1 className="text-xl sm:text-2xl md:text-2xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
|
|
Service Management
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-600 mt-2 sm:mt-3 text-xs sm:text-sm md:text-sm font-light">Manage hotel services</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
resetForm();
|
|
setShowModal(true);
|
|
}}
|
|
className="flex items-center justify-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg sm:rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl text-xs sm:text-sm w-full sm:w-auto"
|
|
>
|
|
<Plus className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
Add Service
|
|
</button>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in" style={{ animationDelay: '0.1s' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5 group-focus-within:text-amber-500 transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search services..."
|
|
value={filters.search}
|
|
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 placeholder-slate-400 font-medium shadow-sm hover:shadow-md"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filters.status}
|
|
onChange={(e) => setFilters({ ...filters, status: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All Statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Service Name</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Description</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Price</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Unit</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Status</th>
|
|
<th className="px-8 py-5 text-right text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-slate-100">
|
|
{services.map((service, index) => (
|
|
<tr
|
|
key={service.id}
|
|
className="hover:bg-gradient-to-r hover:from-amber-50/30 hover:to-yellow-50/30 transition-all duration-200 group border-b border-slate-100"
|
|
style={{ animationDelay: `${index * 0.05}s` }}
|
|
>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-semibold text-slate-900">{service.name}</div>
|
|
</td>
|
|
<td className="px-8 py-5">
|
|
<div className="text-sm text-slate-700 max-w-xs truncate">{service.description}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">{formatCurrency(service.price)}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm text-slate-600">{service.unit}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${
|
|
service.status === 'active'
|
|
? 'bg-gradient-to-r from-emerald-50 to-green-50 text-emerald-800 border-emerald-200'
|
|
: 'bg-gradient-to-r from-slate-50 to-gray-50 text-slate-700 border-slate-200'
|
|
}`}>
|
|
{service.status === 'active' ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => handleEdit(service)}
|
|
className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteClick(service.id)}
|
|
className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={setCurrentPage}
|
|
totalItems={totalItems}
|
|
itemsPerPage={itemsPerPage}
|
|
/>
|
|
</div>
|
|
|
|
{}
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-4 animate-fade-in">
|
|
<div className="min-h-full flex items-start justify-center py-8">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-4xl my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200 animate-scale-in">
|
|
{}
|
|
<div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-5 border-b border-slate-700">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-amber-100">
|
|
{editingService ? 'Update Service' : 'Add New Service'}
|
|
</h2>
|
|
<p className="text-amber-200/80 text-sm font-light mt-1">
|
|
{editingService ? 'Modify service information' : 'Create a new service'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="w-10 h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Service Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Price
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.price}
|
|
onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
required
|
|
min="0"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Unit
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.unit}
|
|
onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="e.g: time, hour, day..."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Category
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.category}
|
|
onChange={(e) => setFormData({ ...formData, category: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="e.g: Spa, Dining, Concierge..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Slug (URL-friendly identifier)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.slug}
|
|
onChange={(e) => {
|
|
const slug = e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
|
|
setFormData({ ...formData, slug });
|
|
}}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="auto-generated-from-name"
|
|
/>
|
|
<p className="text-xs text-slate-500 mt-1">Leave empty to auto-generate from name</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Image URL
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={formData.image}
|
|
onChange={(e) => setFormData({ ...formData, image: e.target.value })}
|
|
className="flex-1 px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="https://..."
|
|
/>
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
handleImageUpload(file);
|
|
}
|
|
}}
|
|
className="hidden"
|
|
id="image-upload"
|
|
/>
|
|
<label
|
|
htmlFor="image-upload"
|
|
className="px-4 py-3 bg-amber-500 text-white rounded-xl hover:bg-amber-600 transition-colors cursor-pointer flex items-center gap-2"
|
|
>
|
|
<Upload className="w-4 h-4" />
|
|
Upload
|
|
</label>
|
|
</div>
|
|
{imagePreview && (
|
|
<div className="mt-2">
|
|
<img src={imagePreview} alt="Preview" className="w-32 h-32 object-cover rounded-lg" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Content (HTML)
|
|
</label>
|
|
<textarea
|
|
value={formData.content}
|
|
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm font-mono text-sm"
|
|
rows={6}
|
|
placeholder="Full HTML content for service detail page..."
|
|
/>
|
|
<p className="text-xs text-slate-500 mt-1">Supports HTML formatting. This content will appear on the service detail page.</p>
|
|
</div>
|
|
|
|
{/* Sections Editor */}
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider">
|
|
Sections (Advanced Content)
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFormData({
|
|
...formData,
|
|
sections: [...formData.sections, { type: 'text', title: '', content: '', is_visible: true }]
|
|
});
|
|
}}
|
|
className="text-xs px-3 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
Add Section
|
|
</button>
|
|
</div>
|
|
<div className="space-y-3 max-h-64 overflow-y-auto p-3 bg-slate-50 rounded-xl border border-slate-200">
|
|
{formData.sections.map((section: any, sectionIndex: number) => (
|
|
<div key={sectionIndex} className="p-3 bg-white border border-slate-300 rounded-lg">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<select
|
|
value={section?.type || 'text'}
|
|
onChange={(e) => {
|
|
const updatedSections = [...formData.sections];
|
|
updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], type: e.target.value };
|
|
setFormData({ ...formData, sections: updatedSections });
|
|
}}
|
|
className="px-3 py-1.5 border border-slate-300 rounded text-sm"
|
|
>
|
|
<option value="text">Text</option>
|
|
<option value="hero">Hero</option>
|
|
<option value="image">Image</option>
|
|
<option value="gallery">Gallery</option>
|
|
<option value="quote">Quote</option>
|
|
<option value="features">Features</option>
|
|
<option value="cta">Call to Action</option>
|
|
<option value="video">Video</option>
|
|
</select>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const updatedSections = formData.sections.filter((_, i) => i !== sectionIndex);
|
|
setFormData({ ...formData, sections: updatedSections });
|
|
}}
|
|
className="text-red-600 hover:text-red-700 text-sm px-2 py-1"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={section?.title || ''}
|
|
onChange={(e) => {
|
|
const updatedSections = [...formData.sections];
|
|
updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], title: e.target.value };
|
|
setFormData({ ...formData, sections: updatedSections });
|
|
}}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded mb-2 text-sm"
|
|
placeholder="Section title"
|
|
/>
|
|
<textarea
|
|
value={section?.content || ''}
|
|
onChange={(e) => {
|
|
const updatedSections = [...formData.sections];
|
|
updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], content: e.target.value };
|
|
setFormData({ ...formData, sections: updatedSections });
|
|
}}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded text-sm"
|
|
placeholder="Section content (HTML supported)"
|
|
/>
|
|
{section?.type === 'image' && (
|
|
<input
|
|
type="url"
|
|
value={section?.image || ''}
|
|
onChange={(e) => {
|
|
const updatedSections = [...formData.sections];
|
|
updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], image: e.target.value };
|
|
setFormData({ ...formData, sections: updatedSections });
|
|
}}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded mt-2 text-sm"
|
|
placeholder="Image URL"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
{formData.sections.length === 0 && (
|
|
<p className="text-xs text-slate-500 italic text-center py-4">No sections added. Click "Add Section" to create advanced content blocks.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
SEO Meta Title
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.meta_title}
|
|
onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="Service Name - Luxury Hotel"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
SEO Meta Description
|
|
</label>
|
|
<textarea
|
|
value={formData.meta_description}
|
|
onChange={(e) => setFormData({ ...formData, meta_description: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
rows={2}
|
|
placeholder="Brief description for search engines..."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
SEO Meta Keywords
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.meta_keywords}
|
|
onChange={(e) => setFormData({ ...formData, meta_keywords: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
placeholder="keyword1, keyword2, keyword3"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Status
|
|
</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4 border-t border-slate-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowModal(false)}
|
|
className="flex-1 px-6 py-3 border-2 border-slate-300 rounded-xl text-slate-700 font-semibold hover:bg-slate-50 transition-all duration-200 shadow-sm hover:shadow-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
|
>
|
|
{editingService ? 'Update' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<ConfirmationDialog
|
|
isOpen={deleteConfirm.show}
|
|
onClose={() => setDeleteConfirm({ show: false, id: null })}
|
|
onConfirm={handleDelete}
|
|
title="Delete Service"
|
|
message="Are you sure you want to delete this service? This action cannot be undone."
|
|
confirmText="Delete"
|
|
cancelText="Cancel"
|
|
variant="danger"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ServiceManagementPage;
|