gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-29 17:23:06 +02:00
parent fb16d7ae34
commit 24b40450dd
23 changed files with 1911 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
Frontend/src/pages/admin/PageContentDashboard.tsx
View File

@@ -2349,101 +2349,110 @@ const PageContentDashboard: React.FC = () => {
{/* Banner Modal */}
{showBannerModal && (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowBannerModal(false)}></div>
<div className="flex min-h-full items-center justify-center p-4">
<div className="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
<h3 className="text-2xl font-extrabold text-gray-900">
{editingBanner ? 'Edit Banner' : 'Add Banner'}
</h3>
<button
onClick={() => {
setShowBannerModal(false);
resetBannerForm();
}}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
<X className="w-6 h-6" />
</button>
<div className="fixed inset-0 bg-black/70 backdrop-blur-md" onClick={() => setShowBannerModal(false)}></div>
<div className="flex min-h-full items-center justify-center p-3 sm:p-4">
<div className="relative 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>
<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-amber-100">
{editingBanner ? 'Edit Banner' : 'Add Banner'}
</h3>
<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={() => {
setShowBannerModal(false);
resetBannerForm();
}}
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>
<form onSubmit={handleBannerSubmit} className="p-6 space-y-6">
<div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
<form onSubmit={handleBannerSubmit} className="p-4 sm:p-6 space-y-5 sm:space-y-6">
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Title *</label>
<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={bannerFormData.title}
onChange={(e) => setBannerFormData({ ...bannerFormData, title: e.target.value })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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="Banner title"
/>
</div>
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Description (Optional)</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Description (Optional)</label>
<textarea
value={bannerFormData.description}
onChange={(e) => setBannerFormData({ ...bannerFormData, description: e.target.value })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 min-h-[100px] resize-y"
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 min-h-[100px] resize-y text-slate-700 font-medium shadow-sm"
placeholder="Banner description text that appears below the title"
rows={3}
/>
<p className="text-xs text-gray-500 mt-1">This description will appear below the title on the banner</p>
<p className="text-xs text-slate-500 mt-1">This description will appear below the title on the banner</p>
</div>
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Link (Optional)</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Link (Optional)</label>
<input
type="url"
value={bannerFormData.link_url}
onChange={(e) => setBannerFormData({ ...bannerFormData, link_url: e.target.value })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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="https://example.com"
/>
</div>
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Display Order</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Display Order</label>
<input
type="number"
min="0"
value={bannerFormData.display_order}
onChange={(e) => setBannerFormData({ ...bannerFormData, display_order: parseInt(e.target.value) || 0 })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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 className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Start Date (Optional)</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Start Date (Optional)</label>
<input
type="date"
value={bannerFormData.start_date}
onChange={(e) => setBannerFormData({ ...bannerFormData, start_date: e.target.value })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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-sm font-semibold text-gray-700 mb-2">End Date (Optional)</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">End Date (Optional)</label>
<input
type="date"
value={bannerFormData.end_date}
onChange={(e) => setBannerFormData({ ...bannerFormData, end_date: e.target.value })}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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>
<div className="flex items-center gap-4 mb-3">
<div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-4">
<button
type="button"
onClick={() => setUseFileUpload(true)}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
useFileUpload
? 'bg-purple-500 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? '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
@@ -2451,10 +2460,10 @@ const PageContentDashboard: React.FC = () => {
<button
type="button"
onClick={() => setUseFileUpload(false)}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
!useFileUpload
? 'bg-purple-500 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? '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'
}`}
>
Image URL
@@ -2463,8 +2472,8 @@ const PageContentDashboard: React.FC = () => {
{useFileUpload ? (
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Banner Image *</label>
<div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-purple-400 transition-colors">
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Banner Image *</label>
<div className="border-2 border-dashed border-slate-300 rounded-xl p-4 sm:p-6 text-center hover:border-amber-400 transition-all duration-200 bg-gradient-to-br from-slate-50 to-white">
<input
type="file"
accept="image/*"
@@ -2480,27 +2489,27 @@ const PageContentDashboard: React.FC = () => {
<img
src={imagePreview}
alt="Preview"
className="max-w-full max-h-64 rounded-lg mb-4"
className="max-w-full max-h-48 sm:max-h-64 rounded-lg mb-4 border-2 border-slate-200"
/>
) : (
<>
<Upload className="w-12 h-12 text-gray-400 mb-4" />
<span className="text-gray-600 font-medium">Click to upload image</span>
<span className="text-gray-500 text-sm mt-1">PNG, JPG up to 5MB</span>
<Upload className="w-10 h-10 sm:w-12 sm:h-12 text-slate-400 mb-3" />
<span className="text-slate-600 font-medium text-sm sm:text-base">Click to upload image</span>
<span className="text-slate-500 text-xs sm:text-sm mt-1">PNG, JPG up to 5MB</span>
</>
)}
</label>
{uploadingImage && (
<div className="mt-4 flex items-center justify-center gap-2 text-purple-600">
<div className="mt-4 flex items-center justify-center gap-2 text-amber-600">
<Loader2 className="w-5 h-5 animate-spin" />
<span className="text-sm">Uploading...</span>
<span className="text-sm font-medium">Uploading...</span>
</div>
)}
</div>
</div>
) : (
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Image URL *</label>
<label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Image URL *</label>
<input
type="url"
required
@@ -2509,14 +2518,14 @@ const PageContentDashboard: React.FC = () => {
setBannerFormData({ ...bannerFormData, image_url: e.target.value });
setImagePreview(e.target.value);
}}
className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
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="https://example.com/image.jpg"
/>
{imagePreview && (
<img
src={imagePreview}
alt="Preview"
className="mt-4 max-w-full max-h-64 rounded-lg"
className="mt-4 max-w-full max-h-48 sm:max-h-64 rounded-lg border-2 border-slate-200"
onError={() => setImagePreview(null)}
/>
)}
@@ -2524,21 +2533,21 @@ const PageContentDashboard: React.FC = () => {
)}
</div>
<div className="flex items-center gap-3 pt-4 border-t border-gray-200">
<div className="flex flex-col sm:flex-row items-center gap-3 pt-4 border-t border-slate-200">
<button
type="button"
onClick={() => {
setShowBannerModal(false);
resetBannerForm();
}}
className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-all duration-200"
className="w-full sm:flex-1 px-6 py-3 border-2 border-slate-300 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition-all duration-200 shadow-sm hover:shadow-md"
>
Cancel
</button>
<button
type="submit"
disabled={uploadingImage}
className="flex-1 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
className="w-full sm: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 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{uploadingImage ? (
<>
@@ -2548,12 +2557,13 @@ const PageContentDashboard: React.FC = () => {
) : (
<>
<Save className="w-5 h-5" />
{editingBanner ? 'Update Banner' : 'Create Banner'}
{editingBanner ? 'Update Banner' : 'Add Banner'}
</>
)}
</button>
</div>
</form>
</form>
</div>
</div>
</div>
</div>