1588 lines
91 KiB
TypeScript
1588 lines
91 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
FileText,
|
|
CreditCard,
|
|
Tag,
|
|
Search,
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
Eye,
|
|
Filter,
|
|
Sparkles,
|
|
ChevronRight,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import Loading from '../../shared/components/Loading';
|
|
import EmptyState from '../../shared/components/EmptyState';
|
|
import Pagination from '../../shared/components/Pagination';
|
|
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
|
|
import { useCurrency } from '../../features/payments/contexts/CurrencyContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import invoiceService, { Invoice } from '../../features/payments/services/invoiceService';
|
|
import paymentService from '../../features/payments/services/paymentService';
|
|
import type { Payment } from '../../features/payments/services/paymentService';
|
|
import promotionService, { Promotion } from '../../features/loyalty/services/promotionService';
|
|
import { getRoomTypes } from '../../features/rooms/services/roomService';
|
|
import { formatDate } from '../../shared/utils/format';
|
|
|
|
interface RoomType {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
type BusinessTab = 'overview' | 'invoices' | 'payments' | 'promotions';
|
|
|
|
const BusinessDashboardPage: React.FC = () => {
|
|
const { formatCurrency } = useFormatCurrency();
|
|
const { currency } = useCurrency();
|
|
const navigate = useNavigate();
|
|
const [activeTab, setActiveTab] = useState<BusinessTab>('overview');
|
|
|
|
|
|
const [invoices, setInvoices] = useState<Invoice[]>([]);
|
|
const [invoicesLoading, setInvoicesLoading] = useState(true);
|
|
const [invoiceFilters, setInvoiceFilters] = useState({
|
|
search: '',
|
|
status: '',
|
|
});
|
|
const [invoicesCurrentPage, setInvoicesCurrentPage] = useState(1);
|
|
const [invoicesTotalPages, setInvoicesTotalPages] = useState(1);
|
|
const [invoicesTotalItems, setInvoicesTotalItems] = useState(0);
|
|
const invoicesPerPage = 10;
|
|
|
|
|
|
const [payments, setPayments] = useState<Payment[]>([]);
|
|
const [paymentsLoading, setPaymentsLoading] = useState(true);
|
|
const [paymentFilters, setPaymentFilters] = useState({
|
|
search: '',
|
|
method: '',
|
|
from: '',
|
|
to: '',
|
|
});
|
|
const [paymentsCurrentPage, setPaymentsCurrentPage] = useState(1);
|
|
const [paymentsTotalPages, setPaymentsTotalPages] = useState(1);
|
|
const [paymentsTotalItems, setPaymentsTotalItems] = useState(0);
|
|
const paymentsPerPage = 5;
|
|
|
|
|
|
const [promotions, setPromotions] = useState<Promotion[]>([]);
|
|
const [promotionsLoading, setPromotionsLoading] = useState(true);
|
|
const [showPromotionModal, setShowPromotionModal] = useState(false);
|
|
const [editingPromotion, setEditingPromotion] = useState<Promotion | null>(null);
|
|
const [promotionFilters, setPromotionFilters] = useState({
|
|
search: '',
|
|
status: '',
|
|
type: '',
|
|
});
|
|
const [promotionsCurrentPage, setPromotionsCurrentPage] = useState(1);
|
|
const [promotionsTotalPages, setPromotionsTotalPages] = useState(1);
|
|
const [promotionsTotalItems, setPromotionsTotalItems] = useState(0);
|
|
const promotionsPerPage = 5;
|
|
|
|
const [promotionFormData, setPromotionFormData] = useState({
|
|
code: '',
|
|
name: '',
|
|
description: '',
|
|
discount_type: 'percentage' as 'percentage' | 'fixed',
|
|
discount_value: 0,
|
|
min_booking_amount: 0,
|
|
max_discount_amount: 0,
|
|
min_stay_days: 0,
|
|
max_stay_days: 0,
|
|
advance_booking_days: 0,
|
|
max_advance_booking_days: 0,
|
|
allowed_check_in_days: [] as number[],
|
|
allowed_check_out_days: [] as number[],
|
|
allowed_room_type_ids: [] as number[],
|
|
excluded_room_type_ids: [] as number[],
|
|
min_guests: 0,
|
|
max_guests: 0,
|
|
first_time_customer_only: false,
|
|
repeat_customer_only: false,
|
|
blackout_dates: [] as string[],
|
|
start_date: '',
|
|
end_date: '',
|
|
usage_limit: 0,
|
|
status: 'active' as 'active' | 'inactive' | 'expired',
|
|
});
|
|
|
|
const [roomTypes, setRoomTypes] = useState<RoomType[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'invoices') {
|
|
fetchInvoices();
|
|
} else if (activeTab === 'payments') {
|
|
fetchPayments();
|
|
} else if (activeTab === 'promotions') {
|
|
fetchPromotions();
|
|
}
|
|
}, [activeTab, invoiceFilters, invoicesCurrentPage, paymentFilters, paymentsCurrentPage, promotionFilters, promotionsCurrentPage]);
|
|
|
|
useEffect(() => {
|
|
fetchRoomTypes();
|
|
}, []);
|
|
|
|
const fetchRoomTypes = async () => {
|
|
try {
|
|
const response = await getRoomTypes();
|
|
if (response.success && response.data.room_types) {
|
|
setRoomTypes(response.data.room_types);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Failed to fetch room types:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'invoices') {
|
|
setInvoicesCurrentPage(1);
|
|
}
|
|
}, [invoiceFilters]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'payments') {
|
|
setPaymentsCurrentPage(1);
|
|
}
|
|
}, [paymentFilters]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'promotions') {
|
|
setPromotionsCurrentPage(1);
|
|
}
|
|
}, [promotionFilters]);
|
|
|
|
|
|
const fetchInvoices = async () => {
|
|
try {
|
|
setInvoicesLoading(true);
|
|
const response = await invoiceService.getInvoices({
|
|
status: invoiceFilters.status || undefined,
|
|
page: invoicesCurrentPage,
|
|
limit: invoicesPerPage,
|
|
});
|
|
|
|
if (response.status === 'success' && response.data) {
|
|
let invoiceList = response.data.invoices || [];
|
|
|
|
// Client-side filtering for search (only on current page results)
|
|
// Note: This is a limitation - search only works on current page
|
|
// For full search functionality, backend needs to support search parameter
|
|
if (invoiceFilters.search) {
|
|
invoiceList = invoiceList.filter((inv) =>
|
|
inv.invoice_number.toLowerCase().includes(invoiceFilters.search.toLowerCase()) ||
|
|
inv.customer_name.toLowerCase().includes(invoiceFilters.search.toLowerCase()) ||
|
|
inv.customer_email.toLowerCase().includes(invoiceFilters.search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
setInvoices(invoiceList);
|
|
// Only update pagination if not searching (to avoid incorrect counts)
|
|
if (!invoiceFilters.search) {
|
|
setInvoicesTotalPages(response.data.total_pages || 1);
|
|
setInvoicesTotalItems(response.data.total || 0);
|
|
} else {
|
|
// When searching, keep original pagination but show filtered count
|
|
setInvoicesTotalPages(response.data.total_pages || 1);
|
|
setInvoicesTotalItems(response.data.total || 0);
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to load invoices');
|
|
} finally {
|
|
setInvoicesLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteInvoice = async (id: number) => {
|
|
if (!window.confirm('Are you sure you want to delete this invoice?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await invoiceService.deleteInvoice(id);
|
|
toast.success('Invoice deleted successfully');
|
|
fetchInvoices();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to delete invoice');
|
|
}
|
|
};
|
|
|
|
const getInvoiceStatusBadge = (status: string) => {
|
|
const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
|
|
draft: { bg: 'bg-gradient-to-r from-slate-50 to-gray-50', text: 'text-slate-700', label: 'Draft', border: 'border-slate-200' },
|
|
sent: { bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', text: 'text-blue-800', label: 'Sent', border: 'border-blue-200' },
|
|
paid: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Paid', border: 'border-emerald-200' },
|
|
overdue: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: 'Overdue', border: 'border-rose-200' },
|
|
cancelled: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: '❌ Canceled', border: 'border-rose-200' },
|
|
};
|
|
return badges[status] || badges.draft;
|
|
};
|
|
|
|
|
|
const fetchPayments = async () => {
|
|
try {
|
|
setPaymentsLoading(true);
|
|
const response = await paymentService.getPayments({
|
|
...paymentFilters,
|
|
page: paymentsCurrentPage,
|
|
limit: paymentsPerPage,
|
|
});
|
|
setPayments(response.data.payments);
|
|
if (response.data.pagination) {
|
|
setPaymentsTotalPages(response.data.pagination.totalPages);
|
|
setPaymentsTotalItems(response.data.pagination.total);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to load payments list');
|
|
} finally {
|
|
setPaymentsLoading(false);
|
|
}
|
|
};
|
|
|
|
const getPaymentMethodBadge = (method: string) => {
|
|
const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
|
|
cash: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Cash', border: 'border-emerald-200' },
|
|
bank_transfer: { bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', text: 'text-blue-800', label: 'Bank transfer', border: 'border-blue-200' },
|
|
stripe: { bg: 'bg-gradient-to-r from-indigo-50 to-purple-50', text: 'text-indigo-800', label: 'Stripe', border: 'border-indigo-200' },
|
|
paypal: { bg: 'bg-gradient-to-r from-blue-50 to-cyan-50', text: 'text-blue-800', label: 'PayPal', border: 'border-blue-200' },
|
|
credit_card: { bg: 'bg-gradient-to-r from-purple-50 to-pink-50', text: 'text-purple-800', label: 'Credit card', border: 'border-purple-200' },
|
|
};
|
|
const badge = badges[method] || badges.cash;
|
|
return (
|
|
<span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
|
|
{badge.label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const getPaymentStatusBadge = (status: string) => {
|
|
const statusConfig: Record<string, { bg: string; text: string; label: string; border: string }> = {
|
|
completed: {
|
|
bg: 'bg-gradient-to-r from-emerald-50 to-green-50',
|
|
text: 'text-emerald-800',
|
|
label: '✅ Paid',
|
|
border: 'border-emerald-200'
|
|
},
|
|
pending: {
|
|
bg: 'bg-gradient-to-r from-amber-50 to-yellow-50',
|
|
text: 'text-amber-800',
|
|
label: '⏳ Pending',
|
|
border: 'border-amber-200'
|
|
},
|
|
failed: {
|
|
bg: 'bg-gradient-to-r from-rose-50 to-red-50',
|
|
text: 'text-rose-800',
|
|
label: '❌ Failed',
|
|
border: 'border-rose-200'
|
|
},
|
|
refunded: {
|
|
bg: 'bg-gradient-to-r from-slate-50 to-gray-50',
|
|
text: 'text-slate-700',
|
|
label: '💰 Refunded',
|
|
border: 'border-slate-200'
|
|
},
|
|
};
|
|
const config = statusConfig[status] || statusConfig.pending;
|
|
return (
|
|
<span className={`px-3 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${config.bg} ${config.text} ${config.border}`}>
|
|
{config.label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
|
|
const fetchPromotions = async () => {
|
|
try {
|
|
setPromotionsLoading(true);
|
|
const response = await promotionService.getPromotions({
|
|
...promotionFilters,
|
|
page: promotionsCurrentPage,
|
|
limit: promotionsPerPage,
|
|
});
|
|
setPromotions(response.data.promotions);
|
|
if (response.data.pagination) {
|
|
setPromotionsTotalPages(response.data.pagination.totalPages);
|
|
setPromotionsTotalItems(response.data.pagination.total);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to load promotions list');
|
|
} finally {
|
|
setPromotionsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePromotionSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
// Prepare data, converting empty arrays to undefined and 0 values to undefined for optional fields
|
|
const submitData: any = {
|
|
...promotionFormData,
|
|
min_stay_days: promotionFormData.min_stay_days || undefined,
|
|
max_stay_days: promotionFormData.max_stay_days || undefined,
|
|
advance_booking_days: promotionFormData.advance_booking_days || undefined,
|
|
max_advance_booking_days: promotionFormData.max_advance_booking_days || undefined,
|
|
min_guests: promotionFormData.min_guests || undefined,
|
|
max_guests: promotionFormData.max_guests || undefined,
|
|
allowed_check_in_days: promotionFormData.allowed_check_in_days?.length ? promotionFormData.allowed_check_in_days : undefined,
|
|
allowed_check_out_days: promotionFormData.allowed_check_out_days?.length ? promotionFormData.allowed_check_out_days : undefined,
|
|
allowed_room_type_ids: promotionFormData.allowed_room_type_ids?.length ? promotionFormData.allowed_room_type_ids : undefined,
|
|
excluded_room_type_ids: promotionFormData.excluded_room_type_ids?.length ? promotionFormData.excluded_room_type_ids : undefined,
|
|
blackout_dates: promotionFormData.blackout_dates?.length ? promotionFormData.blackout_dates : undefined,
|
|
min_booking_amount: promotionFormData.min_booking_amount || undefined,
|
|
max_discount_amount: promotionFormData.max_discount_amount || undefined,
|
|
usage_limit: promotionFormData.usage_limit || undefined,
|
|
};
|
|
|
|
if (editingPromotion) {
|
|
await promotionService.updatePromotion(editingPromotion.id, submitData);
|
|
toast.success('Promotion updated successfully');
|
|
} else {
|
|
await promotionService.createPromotion(submitData);
|
|
toast.success('Promotion added successfully');
|
|
}
|
|
setShowPromotionModal(false);
|
|
resetPromotionForm();
|
|
fetchPromotions();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'An error occurred');
|
|
}
|
|
};
|
|
|
|
const handleEditPromotion = (promotion: Promotion) => {
|
|
setEditingPromotion(promotion);
|
|
setPromotionFormData({
|
|
code: promotion.code,
|
|
name: promotion.name,
|
|
description: promotion.description || '',
|
|
discount_type: promotion.discount_type,
|
|
discount_value: promotion.discount_value,
|
|
min_booking_amount: promotion.min_booking_amount || 0,
|
|
max_discount_amount: promotion.max_discount_amount || 0,
|
|
min_stay_days: promotion.min_stay_days || 0,
|
|
max_stay_days: promotion.max_stay_days || 0,
|
|
advance_booking_days: promotion.advance_booking_days || 0,
|
|
max_advance_booking_days: promotion.max_advance_booking_days || 0,
|
|
allowed_check_in_days: promotion.allowed_check_in_days || [],
|
|
allowed_check_out_days: promotion.allowed_check_out_days || [],
|
|
allowed_room_type_ids: promotion.allowed_room_type_ids || [],
|
|
excluded_room_type_ids: promotion.excluded_room_type_ids || [],
|
|
min_guests: promotion.min_guests || 0,
|
|
max_guests: promotion.max_guests || 0,
|
|
first_time_customer_only: promotion.first_time_customer_only || false,
|
|
repeat_customer_only: promotion.repeat_customer_only || false,
|
|
blackout_dates: promotion.blackout_dates || [],
|
|
start_date: promotion.start_date?.split('T')[0] || '',
|
|
end_date: promotion.end_date?.split('T')[0] || '',
|
|
usage_limit: promotion.usage_limit || 0,
|
|
status: promotion.status,
|
|
});
|
|
setShowPromotionModal(true);
|
|
};
|
|
|
|
const handleDeletePromotion = async (id: number) => {
|
|
if (!window.confirm('Are you sure you want to delete this promotion?')) return;
|
|
|
|
try {
|
|
await promotionService.deletePromotion(id);
|
|
toast.success('Promotion deleted successfully');
|
|
fetchPromotions();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || 'Unable to delete promotion');
|
|
}
|
|
};
|
|
|
|
const resetPromotionForm = () => {
|
|
setEditingPromotion(null);
|
|
setPromotionFormData({
|
|
code: '',
|
|
name: '',
|
|
description: '',
|
|
discount_type: 'percentage',
|
|
discount_value: 0,
|
|
min_booking_amount: 0,
|
|
max_discount_amount: 0,
|
|
min_stay_days: 0,
|
|
max_stay_days: 0,
|
|
advance_booking_days: 0,
|
|
max_advance_booking_days: 0,
|
|
allowed_check_in_days: [],
|
|
allowed_check_out_days: [],
|
|
allowed_room_type_ids: [],
|
|
excluded_room_type_ids: [],
|
|
min_guests: 0,
|
|
max_guests: 0,
|
|
first_time_customer_only: false,
|
|
repeat_customer_only: false,
|
|
blackout_dates: [],
|
|
start_date: '',
|
|
end_date: '',
|
|
usage_limit: 0,
|
|
status: 'active',
|
|
});
|
|
};
|
|
|
|
const getPromotionStatusBadge = (status: string) => {
|
|
const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
|
|
active: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Active', border: 'border-emerald-200' },
|
|
inactive: { bg: 'bg-gradient-to-r from-slate-50 to-gray-50', text: 'text-slate-700', label: 'Inactive', border: 'border-slate-200' },
|
|
expired: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: 'Expired', border: 'border-rose-200' },
|
|
};
|
|
const badge = badges[status] || badges.active;
|
|
return (
|
|
<span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
|
|
{badge.label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'overview' as BusinessTab, label: 'Overview', icon: FileText },
|
|
{ id: 'invoices' as BusinessTab, label: 'Invoices', icon: FileText },
|
|
{ id: 'payments' as BusinessTab, label: 'Payments', icon: CreditCard },
|
|
{ id: 'promotions' as BusinessTab, label: 'Promotions', icon: Tag },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
|
|
<div className="max-w-7xl mx-auto px-2 sm:px-3 md:px-4 lg:px-6 xl:px-8 py-2 sm:py-4 md:py-6 lg:py-8 space-y-3 sm:space-y-4 md:space-y-6 lg:space-y-8 animate-fade-in">
|
|
{}
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-emerald-400/5 via-transparent to-purple-600/5 rounded-3xl blur-3xl"></div>
|
|
<div className="relative bg-white/80 backdrop-blur-xl rounded-xl sm:rounded-2xl md:rounded-3xl shadow-2xl border border-emerald-200/30 p-3 sm:p-4 md:p-6 lg:p-8">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 sm:gap-6 md:gap-8">
|
|
<div className="flex items-start gap-3 sm:gap-4 md:gap-5">
|
|
<div className="relative flex-shrink-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-purple-600 rounded-xl sm:rounded-2xl blur-lg opacity-50"></div>
|
|
<div className="relative p-2.5 sm:p-3 md:p-4 rounded-xl sm:rounded-2xl bg-gradient-to-br from-emerald-500 via-emerald-500 to-purple-600 shadow-xl border border-emerald-400/50">
|
|
<FileText className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-white" />
|
|
<div className="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-gradient-to-br from-green-300 to-emerald-500 rounded-full shadow-lg animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 sm:space-y-3 flex-1">
|
|
<div className="flex items-center gap-2 sm:gap-3 flex-wrap">
|
|
<h1 className="text-2xl sm:text-3xl md:text-3xl font-extrabold bg-gradient-to-r from-slate-900 via-emerald-700 to-slate-900 bg-clip-text text-transparent">
|
|
Business Dashboard
|
|
</h1>
|
|
<Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-emerald-500 animate-pulse" />
|
|
</div>
|
|
<p className="text-gray-600 text-xs sm:text-sm md:text-sm max-w-2xl leading-relaxed">
|
|
Manage invoices, payments, and promotional campaigns
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 pt-4 sm:pt-6 md:pt-8 border-t border-gradient-to-r from-transparent via-emerald-200/30 to-transparent">
|
|
<div className="overflow-x-auto -mx-2 sm:-mx-3 px-2 sm:px-3 scrollbar-hide">
|
|
<div className="flex gap-2 sm:gap-3 min-w-max sm:min-w-0 sm:flex-wrap">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`
|
|
group relative flex items-center gap-1.5 sm:gap-2 md:gap-3 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3.5 rounded-lg sm:rounded-xl font-semibold text-xs sm:text-sm flex-shrink-0
|
|
transition-all duration-300 overflow-hidden
|
|
${
|
|
isActive
|
|
? 'bg-gradient-to-r from-emerald-500 via-emerald-500 to-purple-600 text-white shadow-xl shadow-emerald-500/40 scale-105'
|
|
: 'bg-white/80 text-gray-700 border border-gray-200/60 hover:border-emerald-300/60 hover:bg-gradient-to-r hover:from-emerald-50/50 hover:to-purple-50/30 hover:shadow-lg hover:scale-102'
|
|
}
|
|
`}
|
|
>
|
|
{isActive && (
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
|
|
)}
|
|
<Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 transition-transform duration-300 flex-shrink-0 ${isActive ? 'text-white' : 'text-gray-600 group-hover:text-emerald-600 group-hover:scale-110'}`} />
|
|
<span className="relative z-10 whitespace-nowrap">{tab.label}</span>
|
|
{isActive && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-1 bg-gradient-to-r from-green-300 via-emerald-400 to-purple-400"></div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{activeTab === 'overview' && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
|
|
<div
|
|
onClick={() => setActiveTab('invoices')}
|
|
className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-blue-300/60 overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400/10 to-transparent rounded-bl-full"></div>
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
|
<div className="relative p-3.5 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg border border-blue-400/50 group-hover:scale-110 transition-transform">
|
|
<FileText className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-gray-900 text-xl mb-1">Invoices</h3>
|
|
<div className="h-1 w-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-600 text-sm leading-relaxed">
|
|
Manage and track all invoices and billing
|
|
</p>
|
|
<div className="pt-5 border-t border-gray-100">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-500 font-medium">View Invoices</span>
|
|
<ChevronRight className="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setActiveTab('payments')}
|
|
className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-emerald-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-emerald-300/60 overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-400/10 to-transparent rounded-bl-full"></div>
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
|
<div className="relative p-3.5 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-lg border border-emerald-400/50 group-hover:scale-110 transition-transform">
|
|
<CreditCard className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-gray-900 text-xl mb-1">Payments</h3>
|
|
<div className="h-1 w-12 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-600 text-sm leading-relaxed">
|
|
Track payment transactions and revenue
|
|
</p>
|
|
<div className="pt-5 border-t border-gray-100">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-500 font-medium">View Payments</span>
|
|
<ChevronRight className="w-5 h-5 text-emerald-600 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setActiveTab('promotions')}
|
|
className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-purple-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-purple-300/60 overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-400/10 to-transparent rounded-bl-full"></div>
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
|
<div className="relative p-3.5 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg border border-purple-400/50 group-hover:scale-110 transition-transform">
|
|
<Tag className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-gray-900 text-xl mb-1">Promotions</h3>
|
|
<div className="h-1 w-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-600 text-sm leading-relaxed">
|
|
Manage discount codes and campaigns
|
|
</p>
|
|
<div className="pt-5 border-t border-gray-100">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-500 font-medium">View Promotions</span>
|
|
<ChevronRight className="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{activeTab === 'invoices' && (
|
|
<div className="space-y-8">
|
|
{}
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-200/40">
|
|
<FileText className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<h2 className="text-3xl font-extrabold text-gray-900">Invoice Management</h2>
|
|
</div>
|
|
<p className="text-gray-600 text-base max-w-2xl leading-relaxed">
|
|
Manage and track all invoices and billing information
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => navigate('/admin/invoices/create')}
|
|
className="group relative px-8 py-4 bg-gradient-to-r from-emerald-500 via-emerald-500 to-purple-600 text-white font-semibold rounded-xl shadow-xl shadow-emerald-500/30 hover:shadow-2xl hover:shadow-emerald-500/40 transition-all duration-300 hover:scale-105 overflow-hidden"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
|
|
<div className="relative flex items-center gap-3">
|
|
<Plus className="w-5 h-5" />
|
|
Create Invoice
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
|
|
<Filter className="w-5 h-5 text-amber-600" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900">Filters</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-emerald-500 transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search invoices..."
|
|
value={invoiceFilters.search}
|
|
onChange={(e) => setInvoiceFilters({ ...invoiceFilters, search: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={invoiceFilters.status}
|
|
onChange={(e) => setInvoiceFilters({ ...invoiceFilters, status: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All Statuses</option>
|
|
<option value="draft">Draft</option>
|
|
<option value="sent">Sent</option>
|
|
<option value="paid">Paid</option>
|
|
<option value="overdue">Overdue</option>
|
|
<option value="cancelled">Canceled</option>
|
|
</select>
|
|
<div className="flex items-center gap-3 px-4 py-3.5 bg-gradient-to-r from-gray-50 to-white border-2 border-gray-200 rounded-xl">
|
|
<Filter className="w-5 h-5 text-emerald-600" />
|
|
<span className="text-sm font-semibold text-gray-700">
|
|
{invoicesTotalItems} invoice{invoicesTotalItems !== 1 ? 's' : ''}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{invoicesLoading && invoices.length === 0 ? (
|
|
<Loading fullScreen text="Loading invoices..." />
|
|
) : (
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Invoice #</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Customer</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Booking</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Amount</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Due Date</th>
|
|
<th className="px-8 py-5 text-right text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-100">
|
|
{invoices.length > 0 ? (
|
|
invoices.map((invoice) => {
|
|
const statusBadge = getInvoiceStatusBadge(invoice.status);
|
|
return (
|
|
<tr key={invoice.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="flex items-center gap-3">
|
|
<FileText className="w-5 h-5 text-emerald-600" />
|
|
<span className="text-sm font-bold text-gray-900 font-mono">{invoice.invoice_number}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5">
|
|
<div className="text-sm font-semibold text-gray-900">{invoice.customer_name}</div>
|
|
<div className="text-sm text-gray-500">{invoice.customer_email}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<span className="text-sm font-medium text-emerald-600">#{invoice.booking_id}</span>
|
|
</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(invoice.total_amount)}
|
|
</div>
|
|
{invoice.balance_due > 0 && (
|
|
<div className="text-xs text-rose-600 font-medium mt-1">
|
|
Due: {formatCurrency(invoice.balance_due)}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<span className={`px-4 py-1.5 text-xs font-semibold rounded-full border shadow-sm ${statusBadge.bg} ${statusBadge.text} ${statusBadge.border}`}>
|
|
{statusBadge.label}
|
|
</span>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap text-sm text-gray-600">
|
|
{formatDate(invoice.due_date, 'short')}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => navigate(`/admin/invoices/${invoice.id}`)}
|
|
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="View"
|
|
>
|
|
<Eye className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/admin/invoices/${invoice.id}/edit`)}
|
|
className="p-2 rounded-lg text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 transition-all duration-200 shadow-sm hover:shadow-md border border-indigo-200 hover:border-indigo-300"
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteInvoice(invoice.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>
|
|
);
|
|
})
|
|
) : (
|
|
<tr>
|
|
<td colSpan={7} className="px-8 py-12 text-center">
|
|
<EmptyState title="No invoices found" description="Create your first invoice to get started" />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{invoicesTotalPages > 1 && (
|
|
<div className="px-6 py-4 border-t border-gray-200">
|
|
<Pagination
|
|
currentPage={invoicesCurrentPage}
|
|
totalPages={invoicesTotalPages}
|
|
onPageChange={setInvoicesCurrentPage}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{activeTab === 'payments' && (
|
|
<div className="space-y-8">
|
|
{}
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 rounded-xl bg-gradient-to-br from-emerald-500/10 to-green-500/10 border border-emerald-200/40">
|
|
<CreditCard className="w-6 h-6 text-emerald-600" />
|
|
</div>
|
|
<h2 className="text-3xl font-extrabold text-gray-900">Payment Management</h2>
|
|
</div>
|
|
<p className="text-gray-600 text-base max-w-2xl leading-relaxed">
|
|
Track payment transactions and revenue streams
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
|
|
<Filter className="w-5 h-5 text-amber-600" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900">Filters</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-emerald-500 transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={paymentFilters.search}
|
|
onChange={(e) => setPaymentFilters({ ...paymentFilters, search: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={paymentFilters.method}
|
|
onChange={(e) => setPaymentFilters({ ...paymentFilters, method: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All methods</option>
|
|
<option value="cash">Cash</option>
|
|
<option value="stripe">Stripe</option>
|
|
<option value="credit_card">Credit card</option>
|
|
</select>
|
|
<input
|
|
type="date"
|
|
value={paymentFilters.from}
|
|
onChange={(e) => setPaymentFilters({ ...paymentFilters, from: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md"
|
|
placeholder="From date"
|
|
/>
|
|
<input
|
|
type="date"
|
|
value={paymentFilters.to}
|
|
onChange={(e) => setPaymentFilters({ ...paymentFilters, to: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md"
|
|
placeholder="To date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{paymentsLoading && payments.length === 0 ? (
|
|
<Loading fullScreen text="Loading payments..." />
|
|
) : (
|
|
<>
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Transaction ID</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Booking Number</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Customer</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Method</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Type</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Amount</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Payment Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-100">
|
|
{payments.map((payment) => (
|
|
<tr key={payment.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-bold text-gray-900 font-mono">{payment.transaction_id || `PAY-${payment.id}`}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-semibold text-emerald-600">{payment.booking?.booking_number}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{payment.booking?.user?.name || 'N/A'}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
{getPaymentMethodBadge(payment.payment_method)}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
{payment.payment_type === 'deposit' ? (
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 border border-amber-200">
|
|
Deposit (20%)
|
|
</span>
|
|
) : payment.payment_type === 'remaining' ? (
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 border border-blue-200">
|
|
Remaining
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
|
|
Full Payment
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
{getPaymentStatusBadge(payment.payment_status)}
|
|
</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(payment.amount)}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm text-gray-600">
|
|
{new Date(payment.payment_date || payment.createdAt || '').toLocaleDateString('en-US')}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Pagination
|
|
currentPage={paymentsCurrentPage}
|
|
totalPages={paymentsTotalPages}
|
|
onPageChange={setPaymentsCurrentPage}
|
|
totalItems={paymentsTotalItems}
|
|
itemsPerPage={paymentsPerPage}
|
|
/>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-gradient-to-r from-emerald-500 via-emerald-600 to-purple-600 rounded-2xl shadow-2xl p-8 text-white">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2 text-emerald-100">Total Revenue</h3>
|
|
<p className="text-4xl font-bold">
|
|
{formatCurrency(payments
|
|
.filter(p => p.payment_status === 'completed')
|
|
.reduce((sum, p) => sum + p.amount, 0))}
|
|
</p>
|
|
<p className="text-sm mt-3 text-emerald-100/90">
|
|
Total {payments.filter(p => p.payment_status === 'completed').length} paid transaction{payments.filter(p => p.payment_status === 'completed').length !== 1 ? 's' : ''}
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/20 backdrop-blur-sm p-6 rounded-2xl">
|
|
<div className="text-5xl font-bold text-white/80">{payments.filter(p => p.payment_status === 'completed').length}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{activeTab === 'promotions' && (
|
|
<div className="space-y-8">
|
|
{}
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 rounded-xl bg-gradient-to-br from-purple-500/10 to-pink-500/10 border border-purple-200/40">
|
|
<Tag className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
<h2 className="text-3xl font-extrabold text-gray-900">Promotion Management</h2>
|
|
</div>
|
|
<p className="text-gray-600 text-base max-w-2xl leading-relaxed">
|
|
Manage discount codes and promotional campaigns
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
resetPromotionForm();
|
|
setShowPromotionModal(true);
|
|
}}
|
|
className="group relative px-8 py-4 bg-gradient-to-r from-purple-500 via-purple-500 to-pink-600 text-white font-semibold rounded-xl shadow-xl shadow-purple-500/30 hover:shadow-2xl hover:shadow-purple-500/40 transition-all duration-300 hover:scale-105 overflow-hidden"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
|
|
<div className="relative flex items-center gap-3">
|
|
<Plus className="w-5 h-5" />
|
|
Add Promotion
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
|
|
<Filter className="w-5 h-5 text-amber-600" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900">Filters</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-purple-500 transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by code or name..."
|
|
value={promotionFilters.search}
|
|
onChange={(e) => setPromotionFilters({ ...promotionFilters, search: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={promotionFilters.type}
|
|
onChange={(e) => setPromotionFilters({ ...promotionFilters, type: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All Types</option>
|
|
<option value="percentage">Percentage</option>
|
|
<option value="fixed">Fixed Amount</option>
|
|
</select>
|
|
<select
|
|
value={promotionFilters.status}
|
|
onChange={(e) => setPromotionFilters({ ...promotionFilters, status: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-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>
|
|
|
|
{}
|
|
{promotionsLoading && promotions.length === 0 ? (
|
|
<Loading fullScreen text="Loading promotions..." />
|
|
) : (
|
|
<div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Code</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Program Name</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Value</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Period</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Used</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
|
|
<th className="px-8 py-5 text-right text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-100">
|
|
{promotions.map((promotion) => (
|
|
<tr key={promotion.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg">
|
|
<Tag className="w-4 h-4 text-purple-600" />
|
|
</div>
|
|
<span className="text-sm font-mono font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent">{promotion.code}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5">
|
|
<div className="text-sm font-semibold text-gray-900">{promotion.name}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{promotion.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">
|
|
{promotion.discount_type === 'percentage'
|
|
? `${promotion.discount_value}%`
|
|
: formatCurrency(promotion.discount_value)}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-xs text-gray-600">
|
|
{promotion.start_date ? new Date(promotion.start_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
|
|
<span className="text-gray-400 mx-1">→</span>
|
|
{promotion.end_date ? new Date(promotion.end_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-700">
|
|
<span className="text-purple-600 font-semibold">{promotion.used_count || 0}</span>
|
|
<span className="text-gray-400 mx-1">/</span>
|
|
<span className="text-gray-600">{promotion.usage_limit || '∞'}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
{getPromotionStatusBadge(promotion.status)}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => handleEditPromotion(promotion)}
|
|
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={() => handleDeletePromotion(promotion.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={promotionsCurrentPage}
|
|
totalPages={promotionsTotalPages}
|
|
onPageChange={setPromotionsCurrentPage}
|
|
totalItems={promotionsTotalItems}
|
|
itemsPerPage={promotionsPerPage}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
{showPromotionModal && (
|
|
<div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4">
|
|
<div className="min-h-full flex items-center justify-center py-4">
|
|
<div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-5xl w-full my-4 flex flex-col border border-gray-200" style={{ maxHeight: 'calc(100vh - 2rem)' }}>
|
|
<div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 border-b border-slate-700 flex-shrink-0">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-purple-100 mb-1">
|
|
{editingPromotion ? 'Update Promotion' : 'Add New Promotion'}
|
|
</h2>
|
|
<p className="text-purple-200/80 text-xs sm:text-sm font-light">
|
|
{editingPromotion ? 'Modify promotion details' : 'Create a new promotion program'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowPromotionModal(false)}
|
|
className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl text-purple-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-purple-400"
|
|
>
|
|
<X className="w-5 h-5 sm:w-6 sm:h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto min-h-0">
|
|
<form onSubmit={handlePromotionSubmit} className="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-5 md:space-y-6">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Code <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={promotionFormData.code}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, code: e.target.value.toUpperCase() })}
|
|
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 text-gray-700 font-medium shadow-sm font-mono"
|
|
placeholder="e.g: SUMMER2024"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Program Name <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={promotionFormData.name}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, name: 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 text-gray-700 font-medium shadow-sm"
|
|
placeholder="e.g: Summer Sale"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={promotionFormData.description}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, 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 text-gray-700 font-medium shadow-sm"
|
|
rows={3}
|
|
placeholder="Detailed description of the program..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Discount Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={promotionFormData.discount_type}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, discount_type: e.target.value as 'percentage' | 'fixed' })}
|
|
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 text-gray-700 font-medium shadow-sm cursor-pointer"
|
|
>
|
|
<option value="percentage">Percentage (%)</option>
|
|
<option value="fixed">Fixed Amount ({currency})</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Discount Value <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.discount_value}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, discount_value: parseFloat(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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
max={promotionFormData.discount_type === 'percentage' ? 100 : undefined}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Minimum Order Value ({currency})
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.min_booking_amount}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, min_booking_amount: parseFloat(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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Maximum Discount ({currency})
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.max_discount_amount}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, max_discount_amount: parseFloat(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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enterprise Booking Conditions Section */}
|
|
<div className="border-t-2 border-purple-200 pt-6 mt-6">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<div className="h-1 w-8 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full"></div>
|
|
Enterprise Booking Conditions
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mb-6">Configure advanced conditions for when this promotion applies</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Minimum Stay (nights)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.min_stay_days || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, min_stay_days: 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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
placeholder="0 = no minimum"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Minimum number of nights required for booking</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Advance Booking (days)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.advance_booking_days || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, advance_booking_days: 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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
placeholder="0 = no requirement"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Minimum days in advance the booking must be made</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Maximum Stay (nights)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.max_stay_days || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, max_stay_days: 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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
placeholder="0 = no maximum"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Maximum number of nights allowed for booking</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Max Advance Booking (days)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.max_advance_booking_days || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, max_advance_booking_days: 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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
placeholder="0 = no maximum"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Maximum days in advance the booking can be made</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Allowed Check-in Days
|
|
</label>
|
|
<div className="grid grid-cols-7 gap-2">
|
|
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => (
|
|
<label key={day} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={promotionFormData.allowed_check_in_days?.includes(index) || false}
|
|
onChange={(e) => {
|
|
const current = promotionFormData.allowed_check_in_days || [];
|
|
if (e.target.checked) {
|
|
setPromotionFormData({ ...promotionFormData, allowed_check_in_days: [...current, index] });
|
|
} else {
|
|
setPromotionFormData({ ...promotionFormData, allowed_check_in_days: current.filter(d => d !== index) });
|
|
}
|
|
}}
|
|
className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-xs text-gray-700">{day}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">Leave empty to allow all days</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Allowed Check-out Days
|
|
</label>
|
|
<div className="grid grid-cols-7 gap-2">
|
|
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => (
|
|
<label key={day} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={promotionFormData.allowed_check_out_days?.includes(index) || false}
|
|
onChange={(e) => {
|
|
const current = promotionFormData.allowed_check_out_days || [];
|
|
if (e.target.checked) {
|
|
setPromotionFormData({ ...promotionFormData, allowed_check_out_days: [...current, index] });
|
|
} else {
|
|
setPromotionFormData({ ...promotionFormData, allowed_check_out_days: current.filter(d => d !== index) });
|
|
}
|
|
}}
|
|
className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-xs text-gray-700">{day}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">Leave empty to allow all days</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Allowed Room Types
|
|
</label>
|
|
<select
|
|
multiple
|
|
value={promotionFormData.allowed_room_type_ids?.map(String) || []}
|
|
onChange={(e) => {
|
|
const selected = Array.from(e.target.selectedOptions, option => parseInt(option.value));
|
|
setPromotionFormData({ ...promotionFormData, allowed_room_type_ids: selected });
|
|
}}
|
|
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 text-gray-700 font-medium shadow-sm"
|
|
size={4}
|
|
>
|
|
{roomTypes.map(rt => (
|
|
<option key={rt.id} value={rt.id}>{rt.name}</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple. Leave empty to allow all room types.</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Excluded Room Types
|
|
</label>
|
|
<select
|
|
multiple
|
|
value={promotionFormData.excluded_room_type_ids?.map(String) || []}
|
|
onChange={(e) => {
|
|
const selected = Array.from(e.target.selectedOptions, option => parseInt(option.value));
|
|
setPromotionFormData({ ...promotionFormData, excluded_room_type_ids: selected });
|
|
}}
|
|
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 text-gray-700 font-medium shadow-sm"
|
|
size={4}
|
|
>
|
|
{roomTypes.map(rt => (
|
|
<option key={rt.id} value={rt.id}>{rt.name}</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple. These room types cannot use this promotion.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Minimum Guests
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.min_guests || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, min_guests: 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 text-gray-700 font-medium shadow-sm"
|
|
min="1"
|
|
placeholder="0 = no minimum"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Minimum number of guests required</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Maximum Guests
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.max_guests || ''}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, max_guests: 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 text-gray-700 font-medium shadow-sm"
|
|
min="1"
|
|
placeholder="0 = no maximum"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Maximum number of guests allowed</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={promotionFormData.first_time_customer_only || false}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, first_time_customer_only: e.target.checked, repeat_customer_only: e.target.checked ? false : promotionFormData.repeat_customer_only })}
|
|
className="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-sm font-semibold text-gray-700">First-Time Customer Only</span>
|
|
</label>
|
|
<p className="text-xs text-gray-500 mt-1 ml-8">Only available to first-time customers</p>
|
|
</div>
|
|
<div>
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={promotionFormData.repeat_customer_only || false}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, repeat_customer_only: e.target.checked, first_time_customer_only: e.target.checked ? false : promotionFormData.first_time_customer_only })}
|
|
className="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-sm font-semibold text-gray-700">Repeat Customer Only</span>
|
|
</label>
|
|
<p className="text-xs text-gray-500 mt-1 ml-8">Only available to returning customers</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Blackout Dates
|
|
</label>
|
|
<textarea
|
|
value={promotionFormData.blackout_dates?.join('\n') || ''}
|
|
onChange={(e) => {
|
|
const dates = e.target.value.split('\n').filter(d => d.trim()).map(d => d.trim());
|
|
setPromotionFormData({ ...promotionFormData, blackout_dates: dates });
|
|
}}
|
|
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 text-gray-700 font-medium shadow-sm"
|
|
rows={3}
|
|
placeholder="Enter dates (one per line) in YYYY-MM-DD format Example: 2024-12-25 2024-12-31 2025-01-01"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Dates when promotion doesn't apply. One date per line (YYYY-MM-DD format).</p>
|
|
</div>
|
|
|
|
{/* Dates & Status Section */}
|
|
<div className="border-t-2 border-purple-200 pt-6 mt-6">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<div className="h-1 w-8 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full"></div>
|
|
Promotion Period & Status
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Start Date <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={promotionFormData.start_date}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, 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 text-gray-700 font-medium shadow-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
End Date <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={promotionFormData.end_date}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, 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 text-gray-700 font-medium shadow-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Usage Limit (0 = unlimited)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={promotionFormData.usage_limit}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, usage_limit: parseInt(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 text-gray-700 font-medium shadow-sm"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
|
Status
|
|
</label>
|
|
<select
|
|
value={promotionFormData.status}
|
|
onChange={(e) => setPromotionFormData({ ...promotionFormData, status: e.target.value as 'active' | 'inactive' })}
|
|
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 text-gray-700 font-medium shadow-sm cursor-pointer"
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sticky bottom-0 bg-white border-t border-gray-200 mt-8 -mx-4 sm:-mx-6 md:-mx-8 px-4 sm:px-6 md:px-8 py-4 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPromotionModal(false)}
|
|
className="px-8 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-semibold hover:bg-gray-50 transition-all duration-200 shadow-sm hover:shadow-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-8 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"
|
|
>
|
|
{editingPromotion ? 'Update' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BusinessDashboardPage;
|
|
|