701 lines
28 KiB
TypeScript
701 lines
28 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Plus, Search, Edit, Trash2, X, Image as ImageIcon, Eye, EyeOff, Loader2 } from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import Loading from '../../components/common/Loading';
|
|
import Pagination from '../../components/common/Pagination';
|
|
import { ConfirmationDialog } from '../../components/common';
|
|
import bannerServiceModule from '../../services/api/bannerService';
|
|
import type { Banner } from '../../services/api/bannerService';
|
|
|
|
const {
|
|
getAllBanners,
|
|
createBanner,
|
|
updateBanner,
|
|
deleteBanner,
|
|
uploadBannerImage,
|
|
} = bannerServiceModule as any;
|
|
|
|
const BannerManagementPage: React.FC = () => {
|
|
const [banners, setBanners] = useState<Banner[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingBanner, setEditingBanner] = useState<Banner | null>(null);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; id: number | null }>({
|
|
show: false,
|
|
id: null,
|
|
});
|
|
const [filters, setFilters] = useState({
|
|
search: '',
|
|
position: '',
|
|
});
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const itemsPerPage = 10;
|
|
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
description: '',
|
|
image_url: '',
|
|
link: '',
|
|
position: 'home',
|
|
display_order: 0,
|
|
is_active: true,
|
|
start_date: '',
|
|
end_date: '',
|
|
});
|
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
|
const [uploadingImage, setUploadingImage] = useState(false);
|
|
const [useFileUpload, setUseFileUpload] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [filters]);
|
|
|
|
useEffect(() => {
|
|
fetchBanners();
|
|
}, [filters, currentPage]);
|
|
|
|
const fetchBanners = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getAllBanners({
|
|
position: filters.position || undefined,
|
|
page: currentPage,
|
|
limit: itemsPerPage,
|
|
});
|
|
|
|
let allBanners = response.data?.banners || [];
|
|
|
|
|
|
if (filters.search) {
|
|
allBanners = allBanners.filter((banner: Banner) =>
|
|
banner.title.toLowerCase().includes(filters.search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
setBanners(allBanners);
|
|
setTotalPages(Math.ceil(allBanners.length / itemsPerPage));
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to load banners');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleImageFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
|
|
if (!file.type.startsWith('image/')) {
|
|
toast.error('Please select an image file');
|
|
return;
|
|
}
|
|
|
|
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
toast.error('Image size must be less than 5MB');
|
|
return;
|
|
}
|
|
|
|
setImageFile(file);
|
|
|
|
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setImagePreview(reader.result as string);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
|
|
try {
|
|
setUploadingImage(true);
|
|
const response = await uploadBannerImage(file);
|
|
if (response.status === 'success' || response.success) {
|
|
setFormData({ ...formData, image_url: response.data.image_url });
|
|
toast.success('Image uploaded successfully');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Failed to upload image');
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
} finally {
|
|
setUploadingImage(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
|
|
if (!formData.image_url && !imageFile) {
|
|
toast.error('Please upload an image or provide an image URL');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
|
|
let imageUrl = formData.image_url;
|
|
if (imageFile && !imageUrl) {
|
|
setUploadingImage(true);
|
|
const uploadResponse = await uploadBannerImage(imageFile);
|
|
if (uploadResponse.status === 'success' || uploadResponse.success) {
|
|
imageUrl = uploadResponse.data.image_url;
|
|
} else {
|
|
throw new Error('Failed to upload image');
|
|
}
|
|
setUploadingImage(false);
|
|
}
|
|
|
|
const submitData = {
|
|
...formData,
|
|
image_url: imageUrl,
|
|
start_date: formData.start_date || undefined,
|
|
end_date: formData.end_date || undefined,
|
|
};
|
|
|
|
if (editingBanner) {
|
|
await updateBanner(editingBanner.id, submitData);
|
|
toast.success('Banner updated successfully');
|
|
} else {
|
|
await createBanner(submitData);
|
|
toast.success('Banner created successfully');
|
|
}
|
|
setShowModal(false);
|
|
resetForm();
|
|
fetchBanners();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'An error occurred');
|
|
setUploadingImage(false);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (banner: Banner) => {
|
|
setEditingBanner(banner);
|
|
setFormData({
|
|
title: banner.title || '',
|
|
description: '',
|
|
image_url: banner.image_url || '',
|
|
link: banner.link_url || '',
|
|
position: banner.position || 'home',
|
|
display_order: banner.display_order || 0,
|
|
is_active: banner.is_active ?? true,
|
|
start_date: banner.start_date ? banner.start_date.split('T')[0] : '',
|
|
end_date: banner.end_date ? banner.end_date.split('T')[0] : '',
|
|
});
|
|
setImageFile(null);
|
|
|
|
const previewUrl = banner.image_url
|
|
? (banner.image_url.startsWith('http')
|
|
? banner.image_url
|
|
: `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}/${banner.image_url}`)
|
|
: null;
|
|
setImagePreview(previewUrl);
|
|
setUseFileUpload(false);
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteConfirm.id) return;
|
|
|
|
try {
|
|
await deleteBanner(deleteConfirm.id);
|
|
toast.success('Banner deleted successfully');
|
|
setDeleteConfirm({ show: false, id: null });
|
|
fetchBanners();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Failed to delete banner');
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
title: '',
|
|
description: '',
|
|
image_url: '',
|
|
link: '',
|
|
position: 'home',
|
|
display_order: 0,
|
|
is_active: true,
|
|
start_date: '',
|
|
end_date: '',
|
|
});
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
setUseFileUpload(true);
|
|
setEditingBanner(null);
|
|
};
|
|
|
|
const toggleActive = async (banner: Banner) => {
|
|
try {
|
|
await updateBanner(banner.id, {
|
|
is_active: !banner.is_active,
|
|
});
|
|
toast.success(`Banner ${!banner.is_active ? 'activated' : 'deactivated'}`);
|
|
fetchBanners();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Failed to update banner');
|
|
}
|
|
};
|
|
|
|
if (loading && banners.length === 0) {
|
|
return <Loading fullScreen text="Loading banners..." />;
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8 flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">Banner Management</h1>
|
|
<p className="text-gray-600">Manage promotional banners and advertisements</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
resetForm();
|
|
setShowModal(true);
|
|
}}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-[#d4af37] text-white rounded-lg hover:bg-[#c9a227] transition-colors"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
<span>Add Banner</span>
|
|
</button>
|
|
</div>
|
|
|
|
{}
|
|
<div className="mb-6 bg-white p-4 rounded-lg shadow-md">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Search
|
|
</label>
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by title..."
|
|
value={filters.search}
|
|
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Position
|
|
</label>
|
|
<select
|
|
value={filters.position}
|
|
onChange={(e) => setFilters({ ...filters, position: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
|
|
>
|
|
<option value="">All Positions</option>
|
|
<option value="home">Home</option>
|
|
<option value="rooms">Rooms</option>
|
|
<option value="about">About</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Image
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Title
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Position
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Order
|
|
</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">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{banners.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="px-6 py-8 text-center text-gray-500">
|
|
No banners found
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
banners.map((banner) => (
|
|
<tr key={banner.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{banner.image_url ? (
|
|
<img
|
|
src={banner.image_url}
|
|
alt={banner.title}
|
|
className="w-16 h-16 object-cover rounded"
|
|
/>
|
|
) : (
|
|
<div className="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
|
|
<ImageIcon className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="text-sm font-medium text-gray-900">{banner.title}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-800">
|
|
{banner.position}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{banner.display_order}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<button
|
|
onClick={() => toggleActive(banner)}
|
|
className={`flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${
|
|
banner.is_active
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-gray-100 text-gray-800'
|
|
}`}
|
|
>
|
|
{banner.is_active ? (
|
|
<>
|
|
<Eye className="w-4 h-4" />
|
|
<span>Active</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<EyeOff className="w-4 h-4" />
|
|
<span>Inactive</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={() => handleEdit(banner)}
|
|
className="text-[#d4af37] hover:text-[#c9a227]"
|
|
>
|
|
<Edit className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => setDeleteConfirm({ show: true, id: banner.id })}
|
|
className="text-red-600 hover:text-red-800"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{totalPages > 1 && (
|
|
<div className="mt-6">
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={setCurrentPage}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
|
|
<div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
|
|
<div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-lg sm:text-xl md:text-2xl font-bold text-amber-100">
|
|
{editingBanner ? 'Edit Banner' : 'Create Banner'}
|
|
</h2>
|
|
<p className="text-amber-200/80 text-xs sm:text-sm font-light mt-1">
|
|
{editingBanner ? 'Modify banner information' : 'Create a new promotional banner'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setShowModal(false);
|
|
resetForm();
|
|
}}
|
|
className="w-9 h-9 sm:w-10 sm: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-5 h-5 sm:w-6 sm:h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
|
|
<form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Title *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, 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="Enter banner title"
|
|
/>
|
|
</div>
|
|
{}
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-3">
|
|
Banner Image *
|
|
</label>
|
|
|
|
<div className="flex flex-wrap gap-2 sm:gap-3 mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setUseFileUpload(true);
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
setFormData({ ...formData, image_url: '' });
|
|
}}
|
|
className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
|
|
useFileUpload
|
|
? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/30'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200 border-2 border-slate-200'
|
|
}`}
|
|
>
|
|
Upload File
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setUseFileUpload(false);
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
}}
|
|
className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
|
|
!useFileUpload
|
|
? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/30'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200 border-2 border-slate-200'
|
|
}`}
|
|
>
|
|
Use URL
|
|
</button>
|
|
</div>
|
|
|
|
{useFileUpload ? (
|
|
<div>
|
|
<label className="flex flex-col items-center justify-center w-full min-h-[140px] sm:min-h-[160px] border-2 border-slate-300 border-dashed rounded-xl cursor-pointer bg-gradient-to-br from-slate-50 to-white hover:border-amber-400 hover:bg-gradient-to-br hover:from-amber-50/50 hover:to-white transition-all duration-200">
|
|
{uploadingImage ? (
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<Loader2 className="w-8 h-8 text-amber-500 animate-spin mb-2" />
|
|
<p className="text-sm text-slate-600 font-medium">Uploading...</p>
|
|
</div>
|
|
) : imagePreview ? (
|
|
<div className="relative w-full h-full min-h-[140px] sm:min-h-[160px]">
|
|
<img
|
|
src={imagePreview}
|
|
alt="Preview"
|
|
className="w-full h-full min-h-[140px] sm:min-h-[160px] object-cover rounded-xl"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
setFormData({ ...formData, image_url: '' });
|
|
}}
|
|
className="absolute top-2 right-2 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors shadow-lg"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6 px-4">
|
|
<ImageIcon className="w-10 h-10 sm:w-12 sm:h-12 mb-3 text-slate-400" />
|
|
<p className="mb-2 text-sm sm:text-base text-slate-600 font-medium">
|
|
<span className="font-semibold">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p className="text-xs text-slate-500">PNG, JPG, GIF up to 5MB</p>
|
|
</div>
|
|
)}
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
accept="image/*"
|
|
onChange={handleImageFileChange}
|
|
/>
|
|
</label>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<input
|
|
type="url"
|
|
value={formData.image_url}
|
|
onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
|
|
placeholder="https://example.com/image.jpg"
|
|
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"
|
|
/>
|
|
{formData.image_url && (
|
|
<div className="mt-3">
|
|
<img
|
|
src={formData.image_url}
|
|
alt="Preview"
|
|
className="w-full h-40 sm:h-48 object-cover rounded-xl border-2 border-slate-200"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
rows={3}
|
|
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 resize-y"
|
|
placeholder="Enter banner description (optional)"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Link URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.link}
|
|
onChange={(e) => setFormData({ ...formData, link: e.target.value })}
|
|
placeholder="https://example.com"
|
|
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"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Position
|
|
</label>
|
|
<select
|
|
value={formData.position}
|
|
onChange={(e) => setFormData({ ...formData, position: 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 cursor-pointer"
|
|
>
|
|
<option value="home">Home</option>
|
|
<option value="rooms">Rooms</option>
|
|
<option value="about">About</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Display Order
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.display_order}
|
|
onChange={(e) => setFormData({ ...formData, display_order: parseInt(e.target.value) || 0 })}
|
|
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="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Start Date
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={formData.start_date}
|
|
onChange={(e) => setFormData({ ...formData, start_date: 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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
End Date
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={formData.end_date}
|
|
onChange={(e) => setFormData({ ...formData, end_date: 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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 p-4 bg-slate-50 rounded-xl border-2 border-slate-200">
|
|
<input
|
|
type="checkbox"
|
|
id="is_active"
|
|
checked={formData.is_active}
|
|
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
|
className="w-5 h-5 text-amber-500 bg-white border-2 border-slate-300 rounded focus:ring-amber-500/50 focus:ring-2 cursor-pointer transition-all"
|
|
/>
|
|
<label htmlFor="is_active" className="text-sm font-semibold text-slate-700 cursor-pointer">
|
|
Active
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-end gap-3 pt-4 border-t border-slate-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowModal(false);
|
|
resetForm();
|
|
}}
|
|
className="w-full sm:w-auto 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"
|
|
disabled={uploadingImage}
|
|
className="w-full sm:w-auto 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 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
|
|
>
|
|
{uploadingImage ? 'Uploading...' : editingBanner ? 'Update Banner' : 'Create Banner'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ConfirmationDialog
|
|
isOpen={deleteConfirm.show}
|
|
onClose={() => setDeleteConfirm({ show: false, id: null })}
|
|
onConfirm={handleDelete}
|
|
title="Delete Banner"
|
|
message="Are you sure you want to delete this banner? This action cannot be undone."
|
|
confirmText="Delete"
|
|
cancelText="Cancel"
|
|
variant="danger"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BannerManagementPage;
|
|
|