update
This commit is contained in:
Iliyan Angelov
677
Frontend/src/pages/admin/BannerManagementPage.tsx
Normal file
677
Frontend/src/pages/admin/BannerManagementPage.tsx
Normal file
@@ -0,0 +1,677 @@
|
||||
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';
|
||||
|
||||
// Extract functions from default export - workaround for TypeScript cache issue
|
||||
// All functions are properly exported in bannerService.ts
|
||||
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 || [];
|
||||
|
||||
// Filter by search if provided
|
||||
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;
|
||||
|
||||
// Validate file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (max 5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
toast.error('Image size must be less than 5MB');
|
||||
return;
|
||||
}
|
||||
|
||||
setImageFile(file);
|
||||
|
||||
// Create preview
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setImagePreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// Upload image immediately
|
||||
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();
|
||||
|
||||
// Validate image URL or file
|
||||
if (!formData.image_url && !imageFile) {
|
||||
toast.error('Please upload an image or provide an image URL');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// If there's a file but no URL yet, upload it first
|
||||
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 || '',
|
||||
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);
|
||||
// Normalize image URL for preview (handle both relative and absolute URLs)
|
||||
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); // When editing, show URL by default
|
||||
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>
|
||||
|
||||
{/* Filters */}
|
||||
<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>
|
||||
|
||||
{/* Banners Table */}
|
||||
<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>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-6">
|
||||
<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 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{editingBanner ? 'Edit Banner' : 'Create Banner'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
resetForm();
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Title *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: 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]"
|
||||
/>
|
||||
</div>
|
||||
{/* Image Upload/URL Section */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Banner Image *
|
||||
</label>
|
||||
|
||||
{/* Toggle between file upload and URL */}
|
||||
<div className="flex space-x-4 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setUseFileUpload(true);
|
||||
setImageFile(null);
|
||||
setImagePreview(null);
|
||||
setFormData({ ...formData, image_url: '' });
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
useFileUpload
|
||||
? 'bg-[#d4af37] text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
Upload File
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setUseFileUpload(false);
|
||||
setImageFile(null);
|
||||
setImagePreview(null);
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
!useFileUpload
|
||||
? 'bg-[#d4af37] text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
Use URL
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{useFileUpload ? (
|
||||
<div>
|
||||
<label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
|
||||
{uploadingImage ? (
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<Loader2 className="w-8 h-8 text-[#d4af37] animate-spin mb-2" />
|
||||
<p className="text-sm text-gray-500">Uploading...</p>
|
||||
</div>
|
||||
) : imagePreview ? (
|
||||
<div className="relative w-full h-full">
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
className="w-full h-32 object-cover rounded-lg"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setImageFile(null);
|
||||
setImagePreview(null);
|
||||
setFormData({ ...formData, image_url: '' });
|
||||
}}
|
||||
className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<ImageIcon className="w-10 h-10 mb-2 text-gray-400" />
|
||||
<p className="mb-2 text-sm text-gray-500">
|
||||
<span className="font-semibold">Click to upload</span> or drag and drop
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">PNG, JPG, GIF up to 5MB</p>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept="image/*"
|
||||
onChange={handleImageFileChange}
|
||||
disabled={uploadingImage}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<input
|
||||
type="url"
|
||||
required={!imageFile}
|
||||
value={formData.image_url}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, image_url: e.target.value });
|
||||
setImagePreview(e.target.value || null);
|
||||
}}
|
||||
placeholder="https://example.com/image.jpg"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
|
||||
/>
|
||||
{imagePreview && (
|
||||
<div className="mt-3 relative">
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
className="w-full h-32 object-cover rounded-lg border border-gray-300"
|
||||
onError={() => setImagePreview(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Position
|
||||
</label>
|
||||
<select
|
||||
value={formData.position}
|
||||
onChange={(e) => setFormData({ ...formData, 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="home">Home</option>
|
||||
<option value="rooms">Rooms</option>
|
||||
<option value="about">About</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
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-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">
|
||||
Link URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.link}
|
||||
onChange={(e) => setFormData({ ...formData, link: 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]"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
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-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
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-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{editingBanner && (
|
||||
<div>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.is_active}
|
||||
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
||||
className="rounded border-gray-300 text-[#d4af37] focus:ring-[#d4af37]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700">Active</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end space-x-4 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
resetForm();
|
||||
}}
|
||||
className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-[#d4af37] text-white rounded-lg hover:bg-[#c9a227]"
|
||||
>
|
||||
{editingBanner ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<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;
|
||||
|
||||
Reference in New Issue
Block a user