// import { useNavigate } from 'react-router-dom';
// import { DataTable, DataTableSortStatus } from 'mantine-datatable';
// import { useEffect, useState } from 'react';
// import Tippy from '@tippyjs/react';
// import 'tippy.js/dist/tippy.css';
// import sortBy from 'lodash/sortBy';
// import { useDispatch, useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { setPageTitle } from '../../store/themeConfigSlice';
// import { viewInvoices } from '../../API';
// import { FaEye, FaFileInvoiceDollar, FaSearch, FaMoneyBillWave, FaUser, FaCalendarAlt, FaBox } from 'react-icons/fa';

// const InvoiceManagement = () => {
//     const dispatch = useDispatch();
//     const navigate = useNavigate();
//     const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//     const PAGE_SIZES = [10, 20, 30, 50, 100];
//     const [page, setPage] = useState(1);
//     const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
//     const [initialRecords, setInitialRecords] = useState<any[]>([]);
//     const [recordsData, setRecordsData] = useState<any[]>([]);
//     const [totalRecords, setTotalRecords] = useState(0);
//     const [search, setSearch] = useState('');
//     const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'booking_id', direction: 'asc' });
//     const [loading, setLoading] = useState(false);

//     const viewInvoiceData = async () => {
//         setLoading(true);
//         try {
//             const data = await viewInvoices();

//             if (data.status === true) {
//                 const formatted = data.data.map((item: any, i: number) => {
//                     // Handle missing customer data
//                     const customerName = item.customer 
//                         ? `${item.customer?.firstName || ''} ${item.customer?.lastName || ''}`.trim() || 'Unknown Customer'
//                         : 'Unknown Customer';
                    
//                     // Handle missing package data
//                     const packageName = item.package 
//                         ? item.package.packageName 
//                         : 'Unknown Package';
                    
//                     // Handle date formatting
//                     let formattedDate = '-';
//                     if (item.booking.date) {
//                         try {
//                             formattedDate = new Date(item.booking.date).toLocaleDateString();
//                         } catch (e) {
//                             formattedDate = item.booking.date;
//                         }
//                     }
                    
//                     // Handle created_at date
//                     let createdAt = '-';
//                     if (item.booking.created_at) {
//                         try {
//                             createdAt = new Date(item.booking.created_at).toLocaleDateString();
//                         } catch (e) {
//                             createdAt = item.booking.created_at;
//                         }
//                     }
                    
//                     // Handle payment status
//                     const paymentStatus = item.booking.payment_status 
//                         ? capitalize(item.booking.payment_status.replace(/_/g, ' '))
//                         : 'Unknown';
                    
//                     return {
//                         id: i + 1,
//                         _id: item.booking._id,
//                         booking_id: item.booking.booking_id || 'N/A',
//                         customer_name: customerName,
//                         package_name: packageName,
//                         date: formattedDate,
//                         time: item.booking.time || 'N/A',
//                         amount: `$${item.booking.rs || 0}`,
//                         status: capitalize(item.booking.status || 'unknown'),
//                         payment_status: paymentStatus,
//                         payment_method: capitalize(item.booking.payment_method || 'unknown'),
//                         paid_amount: item.booking.paid_amount ? `$${item.booking.paid_amount}` : '$0',
//                         created_at: createdAt,
//                     };
//                 });

//                 setInitialRecords(formatted);
//                 setTotalRecords(formatted.length);
//             }
//         } catch (error) {
//             console.error('Error loading invoice data:', error);
//         } finally {
//             setLoading(false);
//         }
//     };

//     useEffect(() => {
//         dispatch(setPageTitle('Invoice Management'));
//         viewInvoiceData();
//     }, []);

//     useEffect(() => {
//         setPage(1);
//     }, [pageSize]);

//     useEffect(() => {
//         let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
//         sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

//         const filtered = sorted.filter(item =>
//             (item.booking_id?.toString() || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.customer_name || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.package_name || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.status || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.payment_status || '').toLowerCase().includes(search.toLowerCase())
//         );

//         const from = (page - 1) * pageSize;
//         const to = from + pageSize;
//         setRecordsData(filtered.slice(from, to));
//         setTotalRecords(filtered.length);
//     }, [page, pageSize, search, sortStatus, initialRecords]);

//     const handleViewClick = (invoiceId: string) => {
//         navigate(`/invoices/view/${invoiceId}`);
//     };

//     const getStatusBadge = (status: string) => {
//         const statusLower = status.toLowerCase();
//         let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
//         if (statusLower.includes('approve')) {
//             className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
//         } else if (statusLower.includes('pend')) {
//             className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
//         } else if (statusLower.includes('reject') || statusLower.includes('overdue')) {
//             className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
//         } else if (statusLower.includes('draft')) {
//             className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
//         } else {
//             className += 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100';
//         }
        
//         return <span className={className}>{status}</span>;
//     };

//     const getPaymentStatusBadge = (status: string) => {
//         const statusLower = status.toLowerCase();
//         let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
//         if (statusLower.includes('paid')) {
//             className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
//         } else if (statusLower.includes('unpaid')) {
//             className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
//         } else if (statusLower.includes('partial')) {
//             className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
//         } else {
//             className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
//         }
        
//         return <span className={className}>{status}</span>;
//     };

//     return (
//         <div className="relative">
//             <div className="panel  ">
//                 <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
//                     <div>
//                         <h5 className="font-semibold text-lg dark:text-white-light">Invoice Management</h5>
//                         {/* <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage and view all customer invoices</p> */}
//                     </div>
//                     <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
//                         <div className="relative flex-1">
//                             <input
//                                 type="text"
//                                 className="form-input w-full pl-10 pr-4 py-2 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                 placeholder="Search invoices..."
//                                 value={search}
//                                 onChange={(e) => setSearch(e.target.value)}
//                             />
//                             <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
//                                 <FaSearch className="h-5 w-5 text-gray-400" />
//                             </div>
//                         </div>
//                     </div>
//                 </div>

//                 {loading ? (
//                     <div className="flex justify-center items-center h-64">
//                         <div className="w-12 h-12 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
                         
//                     </div>
//                 ) : (
//                     <div className="datatables">
//                         <DataTable
//                             highlightOnHover
//                             className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
//                             records={recordsData}
//                             columns={[
//                                 {
//                                     accessor: 'booking_id',
//                                     title: 'Invoice ID',
//                                     sortable: true,
//                                     render: ({ booking_id }) => (
//                                         <div className="flex items-center">
//                                             {/* <div className="p-2 rounded-full bg-primary/10 dark:bg-primary-dark/20 mr-3">
//                                                 <FaFileInvoiceDollar className="h-5 w-5 text-primary-DEFAULT dark:text-primary-light" />
//                                             </div> */}
//                                             <span className="font-semibold text-primary-DEFAULT dark:text-primary-light">
//                                                 #{booking_id}
//                                             </span>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'customer_name',
//                                     title: 'Customer',
//                                     sortable: true,
//                                     render: ({ customer_name }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary-dark-light flex items-center justify-center mr-3">
//                                                 <span className="text-primary-DEFAULT dark:text-primary-light font-semibold">
//                                                     {customer_name.charAt(0)}
//                                                 </span>
//                                             </div>
//                                             <Tippy content={customer_name} placement="top" arrow={false}>
//                                                 <span className="truncate max-w-[150px] inline-block font-medium dark:text-white-light">
//                                                     {customer_name}
//                                                 </span>
//                                             </Tippy>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'package_name',
//                                     title: 'Package',
//                                     sortable: true,
//                                     render: ({ package_name }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-8 h-8 rounded-full bg-secondary/10 dark:bg-secondary-dark-light flex items-center justify-center mr-2">
//                                                 <FaBox className="h-3 w-3 text-secondary-DEFAULT dark:text-secondary-light" />
//                                             </div>
//                                             <span className="text-gray-600 dark:text-gray-300 truncate max-w-[120px]">
//                                                 {package_name}
//                                             </span>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'date',
//                                     title: 'Date & Time',
//                                     sortable: true,
//                                     render: ({ date, time }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-8 h-8 rounded-full bg-info/10 dark:bg-info-dark-light flex items-center justify-center mr-2">
//                                                 <FaCalendarAlt className="h-3 w-3 text-info-DEFAULT dark:text-info-light" />
//                                             </div>
//                                             <div>
//                                                 <div className="font-medium text-gray-600 dark:text-gray-300">{date}</div>
//                                                 <div className="text-xs text-gray-400">{time}</div>
//                                             </div>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'amount',
//                                     title: 'Amount',
//                                     sortable: true,
//                                     render: ({ amount }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-8 h-8 rounded-full bg-success/10 dark:bg-success-dark-light flex items-center justify-center mr-2">
//                                                 <FaMoneyBillWave className="h-3 w-3 text-success-DEFAULT dark:text-success-light" />
//                                             </div>
//                                             <span className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">{amount}</span>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'payment_status',
//                                     title: 'Payment Status',
//                                     sortable: true,
//                                     render: ({ payment_status }) => getPaymentStatusBadge(payment_status)
//                                 },
//                                 {
//                                     accessor: 'status',
//                                     title: 'Status',
//                                     sortable: true,
//                                     render: ({ status }) => getStatusBadge(status)
//                                 },
//                                 {
//                                     accessor: 'action',
//                                     title: 'Actions',
//                                     titleClassName: '!text-center',
//                                     render: (row) => (
//                                         <div className="flex items-center w-max mx-auto gap-3">
//                                             <Tippy content="View Invoice">
//                                                 <button
//                                                     className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                                     onClick={() => handleViewClick(row._id)}
//                                                 >
//                                                     <svg className="w-5 h-5 text-gray-500 hover:text-primary dark:text-gray-300 dark:hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
//                                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
//                                                     </svg>
//                                                 </button>
//                                             </Tippy>
//                                         </div>
//                                     ),
//                                 },
//                             ]}
//                             totalRecords={totalRecords}
//                             recordsPerPage={pageSize}
//                             page={page}
//                             onPageChange={setPage}
//                             recordsPerPageOptions={PAGE_SIZES}
//                             onRecordsPerPageChange={setPageSize}
//                             sortStatus={sortStatus}
//                             onSortStatusChange={setSortStatus}
//                             minHeight={200}
//                             rowClassName={(record) =>
//                                 `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}`
//                             }
//                             paginationText={({ from, to, totalRecords }) => (
//                                 <span className="dark:text-white-light">
//                                     Showing {from} to {to} of {totalRecords} entries
//                                 </span>
//                             )}
//                         />
//                     </div>
//                 )}
//             </div>
//         </div>
//     );
// };

// function capitalize(text: string): string {
//     if (!text) return '';
//     return text.toLowerCase().charAt(0).toUpperCase() + text.slice(1);
// }

// export default InvoiceManagement;






// import { useNavigate } from 'react-router-dom';
// import { DataTable, DataTableSortStatus } from 'mantine-datatable';
// import { useEffect, useState } from 'react';
// import Tippy from '@tippyjs/react';
// import 'tippy.js/dist/tippy.css';
// import sortBy from 'lodash/sortBy';
// import { useDispatch, useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { setPageTitle } from '../../store/themeConfigSlice';
// import { viewInvoices } from '../../API';
// import { FaEye, FaFileInvoiceDollar, FaSearch, FaMoneyBillWave, FaUser, FaCalendarAlt, FaBox, FaPlusCircle } from 'react-icons/fa';

// const InvoiceManagement = () => {
//     const dispatch = useDispatch();
//     const navigate = useNavigate();
//     const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//     const PAGE_SIZES = [10, 20, 30, 50, 100];
//     const [page, setPage] = useState(1);
//     const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
//     const [initialRecords, setInitialRecords] = useState<any[]>([]);
//     const [recordsData, setRecordsData] = useState<any[]>([]);
//     const [totalRecords, setTotalRecords] = useState(0);
//     const [search, setSearch] = useState('');
//     const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'booking_id', direction: 'asc' });
//     const [loading, setLoading] = useState(false);

//     const viewInvoiceData = async () => {
//         setLoading(true);
//         try {
//             const data = await viewInvoices();

//             if (data.status === true) {
//                 const formatted = data.data.map((item: any, i: number) => {
//                     // Handle missing customer data
//                     const customerName = item.customer 
//                         ? `${item.customer?.firstName || ''} ${item.customer?.lastName || ''}`.trim() || 'Unknown Customer'
//                         : 'Unknown Customer';
                    
//                     // Get package details from booking
//                     const packageName = item.booking.package?.name || 'Unknown Package';
//                     const packagePrice = parseFloat(item.booking.package?.price) || 0;
                    
//                     // Use rs as total amount (already includes package + addons)
//                     const totalAmount = parseFloat(item.booking.rs) || 0;
                    
//                     // Handle date formatting
//                     let formattedDate = '-';
//                     if (item.booking.date) {
//                         try {
//                             formattedDate = new Date(item.booking.date).toLocaleDateString();
//                         } catch (e) {
//                             formattedDate = item.booking.date;
//                         }
//                     }
                    
//                     // Handle created_at date
//                     let createdAt = '-';
//                     if (item.booking.created_at) {
//                         try {
//                             createdAt = new Date(item.booking.created_at).toLocaleDateString();
//                         } catch (e) {
//                             createdAt = item.booking.created_at;
//                         }
//                     }
                    
//                     // Handle payment status
//                     const paymentStatus = item.booking.payment_status 
//                         ? capitalize(item.booking.payment_status.replace(/_/g, ' '))
//                         : 'Unknown';
                    
//                     return {
//                         id: i + 1,
//                         _id: item.booking._id,
//                         booking_id: item.booking.booking_id || 'N/A',
//                         customer_name: customerName,
//                         package_name: packageName,
//                         package_price: packagePrice,
//                         date: formattedDate,
//                         time: item.booking.time || 'N/A',
//                         amount: totalAmount,
//                         formatted_amount: `$${totalAmount.toFixed(2)}`,
//                         status: capitalize(item.booking.status || 'unknown'),
//                         payment_status: paymentStatus,
//                         payment_method: capitalize(item.booking.payment_method || 'unknown'),
//                         paid_amount: item.booking.paid_amount ? `$${item.booking.paid_amount}` : '$0',
//                         created_at: createdAt,
//                         addons: item.booking.addon_id,
//                         base_package_price: packagePrice
//                     };
//                 });

//                 setInitialRecords(formatted);
//                 setTotalRecords(formatted.length);
//             }
//         } catch (error) {
//             console.error('Error loading invoice data:', error);
//         } finally {
//             setLoading(false);
//         }
//     };

//     useEffect(() => {
//         dispatch(setPageTitle('Invoice Management'));
//         viewInvoiceData();
//     }, []);

//     useEffect(() => {
//         setPage(1);
//     }, [pageSize]);

//     useEffect(() => {
//         let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
//         sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

//         const filtered = sorted.filter(item =>
//             (item.booking_id?.toString() || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.customer_name || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.package_name || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.status || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.payment_status || '').toLowerCase().includes(search.toLowerCase())
//         );

//         const from = (page - 1) * pageSize;
//         const to = from + pageSize;
//         setRecordsData(filtered.slice(from, to));
//         setTotalRecords(filtered.length);
//     }, [page, pageSize, search, sortStatus, initialRecords]);

//     const handleViewClick = (invoiceId: string) => {
//         navigate(`/invoices/view/${invoiceId}`);
//     };

//     const getStatusBadge = (status: string) => {
//         const statusLower = status.toLowerCase();
//         let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
//         if (statusLower.includes('approve')) {
//             className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
//         } else if (statusLower.includes('pend')) {
//             className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
//         } else if (statusLower.includes('reject') || statusLower.includes('overdue')) {
//             className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
//         } else if (statusLower.includes('draft')) {
//             className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
//         } else {
//             className += 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100';
//         }
        
//         return <span className={className}>{status}</span>;
//     };

//     const getPaymentStatusBadge = (status: string) => {
//         const statusLower = status.toLowerCase();
//         let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
//         if (statusLower.includes('paid')) {
//             className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
//         } else if (statusLower.includes('unpaid')) {
//             className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
//         } else if (statusLower.includes('partial')) {
//             className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
//         } else {
//             className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
//         }
        
//         return <span className={className}>{status}</span>;
//     };

//     const PackageTooltipContent = ({ package_name, package_price, addons, amount }: any) => {
//         return (
//             <div className="p-3 rounded-lg shadow-lg max-w-xs">
//                 <h4 className="font-semibold text-primary dark:text-primary-light mb-2">Package Details</h4>
                
//                 <div className="mb-3">
//                     <div className="flex justify-between items-center py-1 border-b border-gray-100 dark:border-gray-700 gap-2">
//                         <span className="text-sm font-medium">{package_name}</span>
//                         <span className="text-sm font-semibold"> ${package_price.toFixed(2)}</span>
//                     </div>
//                 </div>
                
//                 {addons && addons.length > 0 && (
//                     <>
//                         <h5 className="font-medium text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">
//                             <FaPlusCircle className="mr-1" /> Addons
//                         </h5>
//                         <div className="max-h-40 overflow-y-auto">
//                             {addons.map((addon: any, index: number) => (
//                                 <div key={index} className="flex justify-between items-center py-1 text-xs">
//                                     <span className="truncate max-w-[160px]">{addon.name}</span>
//                                     <span className="font-medium ml-2">${parseFloat(addon.price).toFixed(2)}</span>
//                                 </div>
//                             ))}
//                         </div>
//                     </>
//                 )}
                
//                 <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center font-semibold">
//                     <span>Total:</span>
//                     <span>${amount.toFixed(2)}</span>
//                 </div>
//             </div>
//         );
//     };

//     return (
//         <div className="relative">
//             <div className="panel">
//                 <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
//                     <div>
//                         <h5 className="font-semibold text-lg dark:text-white-light">Invoice Management</h5>
//                     </div>
//                     <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
//                         <div className="relative flex-1">
//                             <input
//                                 type="text"
//                                 className="form-input w-full pl-10 pr-4 py-2 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                 placeholder="Search invoices..."
//                                 value={search}
//                                 onChange={(e) => setSearch(e.target.value)}
//                             />
//                             <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
//                                 <FaSearch className="h-5 w-5 text-gray-400" />
//                             </div>
//                         </div>
//                     </div>
//                 </div>

//                 {loading ? (
//                       <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
//             <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
//           </div>
//                 ) : (
//                     <div className="datatables">
//                         <DataTable
//                             highlightOnHover
//                             className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
//                             records={recordsData}
//                             columns={[
//                                 {
//                                     accessor: 'booking_id',
//                                     title: 'Invoice ID',
//                                     sortable: true,
//                                     render: ({ booking_id }) => (
//                                         <div className="flex items-center">
//                                             <span className="font-semibold text-primary-DEFAULT dark:text-primary-light">
//                                                 #{booking_id}
//                                             </span>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'customer_name',
//                                     title: 'Customer',
//                                     sortable: true,
//                                     render: ({ customer_name }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary-dark-light flex items-center justify-center mr-3">
//                                                 <span className="text-primary-DEFAULT dark:text-primary-light font-semibold">
//                                                     {customer_name.charAt(0)}
//                                                 </span>
//                                             </div>
//                                             <Tippy content={customer_name} placement="top" arrow={false}>
//                                                 <span className="truncate max-w-[150px] inline-block font-medium dark:text-white-light">
//                                                     {customer_name}
//                                                 </span>
//                                             </Tippy>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'package_name',
//                                     title: 'Package',
//                                     sortable: true,
//                                     render: (row) => (
//                                         <Tippy
//                                             content={
//                                                 <PackageTooltipContent
//                                                     package_name={row.package_name}
//                                                     package_price={row.package_price}
//                                                     addons={row.addons}
//                                                     amount={row.amount}
//                                                 />
//                                             }
//                                             interactive={true}
//                                             placement="top"
//                                             arrow={true}
//                                             appendTo={document.body}
                                               
//                                         >
//                                             <div className="flex items-center cursor-help">
//                                                 <div className="w-8 h-8 rounded-full bg-secondary/10 dark:bg-secondary-dark-light flex items-center justify-center mr-2">
//                                                     <FaBox className="h-3 w-3 text-secondary-DEFAULT dark:text-secondary-light" />
//                                                 </div>
//                                                 <span className="text-gray-600 dark:text-gray-300 truncate max-w-[120px] underline decoration-dotted">
//                                                     {row.package_name}
//                                                 </span>
//                                             </div>
//                                         </Tippy>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'date',
//                                     title: 'Date & Time',
//                                     sortable: true,
//                                     render: ({ date, time }) => (
//                                         <div className="flex items-center">
//                                             <div className="w-8 h-8 rounded-full bg-info/10 dark:bg-info-dark-light flex items-center justify-center mr-2">
//                                                 <FaCalendarAlt className="h-3 w-3 text-info-DEFAULT dark:text-info-light" />
//                                             </div>
//                                             <div>
//                                                 <div className="font-medium text-gray-600 dark:text-gray-300">{date}</div>
//                                                 <div className="text-xs text-gray-400">{time}</div>
//                                             </div>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'formatted_amount',
//                                     title: 'Total Amount',
//                                     sortable: true,
//                                     render: (row) => (
//                                         <Tippy
//                                             content={
//                                                 <PackageTooltipContent
//                                                     package_name={row.package_name}
//                                                     package_price={row.package_price}
//                                                     addons={row.addons}
//                                                     amount={row.amount}
//                                                 />
//                                             }
//                                               placement="top"
//                                             arrow={true}
//                                             appendTo={document.body}
//                                         >
//                                             <div className="flex items-center cursor-help">
//                                                 <div className="w-8 h-8 rounded-full bg-success/10 dark:bg-success-dark-light flex items-center justify-center mr-2">
//                                                     <FaMoneyBillWave className="h-3 w-3 text-success-DEFAULT dark:text-success-light" />
//                                                 </div>
//                                                 <span className="font-semibold text-secondary-DEFAULT dark:text-secondary-light underline decoration-dotted">
//                                                     ${row.amount.toFixed(2)}
//                                                 </span>
//                                             </div>
//                                         </Tippy>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'payment_status',
//                                     title: 'Payment Status',
//                                     sortable: true,
//                                     render: ({ payment_status }) => getPaymentStatusBadge(payment_status)
//                                 },
//                                 {
//                                     accessor: 'status',
//                                     title: 'Status',
//                                     sortable: true,
//                                     render: ({ status }) => getStatusBadge(status)
//                                 },
//                                 {
//                                     accessor: 'action',
//                                     title: 'Actions',
//                                     titleClassName: '!text-center',
//                                     render: (row) => (
//                                         <div className="flex items-center w-max mx-auto gap-3">
//                                             <Tippy content="View Invoice">
//                                                 <button
//                                                     className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                                     onClick={() => handleViewClick(row._id)}
//                                                 >
//                                                     <svg className="w-5 h-5 text-gray-500 hover:text-primary dark:text-gray-300 dark:hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
//                                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
//                                                     </svg>
//                                                 </button>
//                                             </Tippy>
//                                         </div>
//                                     ),
//                                 },
//                             ]}
//                             totalRecords={totalRecords}
//                             recordsPerPage={pageSize}
//                             page={page}
//                             onPageChange={setPage}
//                             recordsPerPageOptions={PAGE_SIZES}
//                             onRecordsPerPageChange={setPageSize}
//                             sortStatus={sortStatus}
//                             onSortStatusChange={setSortStatus}
//                             minHeight={200}
//                             rowClassName={(record) =>
//                                 `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}`
//                             }
//                             paginationText={({ from, to, totalRecords }) => (
//                                 <span className="dark:text-white-light">
//                                     Showing {from} to {to} of {totalRecords} entries
//                                 </span>
//                             )}
//                         />
//                     </div>
//                 )}
//             </div>
//         </div>
//     );
// };

// function capitalize(text: string): string {
//     if (!text) return '';
//     return text.toLowerCase().charAt(0).toUpperCase() + text.slice(1);
// }

// export default InvoiceManagement;




import { useNavigate } from 'react-router-dom';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import sortBy from 'lodash/sortBy';
import { useDispatch, useSelector } from 'react-redux';
import { IRootState } from '../../store';
import { setPageTitle } from '../../store/themeConfigSlice';
import { viewInvoices } from '../../API';
import { FaEye, FaFileInvoiceDollar, FaSearch, FaMoneyBillWave, FaUser, FaCalendarAlt, FaBox, FaPlusCircle } from 'react-icons/fa';
import { useLoader } from '../../store/LoaderProvider';

const InvoiceManagement = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

    const PAGE_SIZES = [10, 20, 30, 50, 100];
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
    const [initialRecords, setInitialRecords] = useState<any[]>([]);
    const [recordsData, setRecordsData] = useState<any[]>([]);
    const [totalRecords, setTotalRecords] = useState(0);
    const [search, setSearch] = useState('');
    const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'booking_id', direction: 'asc' });
    const [loading, setLoading] = useState(false);

   const { showLoader, hideLoader } = useLoader();
//     const viewInvoiceData = async () => {
//         setLoading(true);
//         try {
//             const data = await viewInvoices();

//             if (data.status === true) {
//                 const formatted = data.data.map((item: any, i: number) => {
//                     // Handle missing customer data
//                     const customerName = item.customer 
//                         ? `${item.customer?.firstName || ''} ${item.customer?.lastName || ''}`.trim() || 'Unknown Customer'
//                         : 'Unknown Customer';
                    
//                     // Get package details from booking - separate main package from addons
//                     const packages = item.booking.package || [];
                    
//                     // Find the main package (type "package")
//                     const mainPackage = packages.find((p: any) => p.type === "package") || {};
//                     const packageName = mainPackage.name || '  Package';
//                     const packagePrice = parseFloat(mainPackage.price) || 0;
                    
//                     // Find all addons (anything that's not type "package")
//                     const addons = packages.filter((p: any) => p.type !== "package");
                    
//                     // Calculate total amount from all packages
//                     const totalAmount = packages.reduce((sum: number, p: any) => {
//                         return sum + (parseFloat(p.price) || 0);
//                     }, 0);
                    
//                     // Handle date formatting
//                     let formattedDate = '-';
//                     if (item.booking.date) {
//                         try {
//                             formattedDate = new Date(item.booking.date).toLocaleDateString();
//                         } catch (e) {
//                             formattedDate = item.booking.date;
//                         }
//                     }
                    
//                     // Handle created_at date
//                     let createdAt = '-';
//                     if (item.booking.created_at) {
//                         try {
//                             createdAt = new Date(item.booking.created_at).toLocaleDateString();
//                         } catch (e) {
//                             createdAt = item.booking.created_at;
//                         }
//                     }
                    
//                     // Handle payment status
//                     const paymentStatus = item.booking.payment_status 
//                         ? capitalize(item.booking.payment_status.replace(/_/g, ' '))
//                         : 'Unknown';
                    
//                     return {
//                         id: i + 1,
//                         _id: item.booking._id,
//                         booking_id: item.booking.booking_id || 'N/A',
//                         customer_name: customerName,
//                         package_name: packageName,
//                         package_price: packagePrice,
//                         date: formattedDate,
//                         time: item.booking.time || 'N/A',
//                         amount: totalAmount,
//                         formatted_amount: `$${totalAmount.toFixed(2)}`,
//                         status: capitalize(item.booking.status || 'unknown'),
//                         payment_status: paymentStatus,
//                         payment_method: capitalize(item.booking.payment_method || 'unknown'),
//                         paid_amount: item.booking.paid_amount ? `$${item.booking.paid_amount}` : '$0',
//                         created_at: createdAt,
//                         addons: addons, // Now we have the proper addons array
//                         base_package_price: packagePrice
//                     };
//                 });
// console.log("Invoice Data ", formatted)
//                 setInitialRecords(formatted);
//                 setTotalRecords(formatted.length);
//             }
//         } catch (error) {
//             console.error('Error loading invoice data:', error);
//         } finally {
//             setLoading(false);
//         }
//     };



const viewInvoiceData = async () => {
    showLoader();
    try {

        const loginUser = localStorage.getItem("email")
        const data = await viewInvoices(loginUser);

        if (data.status === true) {
            const formatted = data.data.map((item: any, i: number) => {
                // Handle missing customer data
                const customerName = item.customer 
                    ? `${item.customer?.firstName || ''} ${item.customer?.lastName || ''}`.trim() || 'Unknown Customer'
                    : 'Unknown Customer';
                
                // Get package details from booking - separate main package from addons
                const packages = item.booking.package || [];
                
                // Find the main package (type "package")
                const mainPackage = packages.find((p: any) => p.type === "package") || {};
                
                // Get the first available package name if main package name is empty
                let packageName = mainPackage.name || '';
                
                // If main package name is empty/null, try to get the first available package name
                if (!packageName && packages.length > 0) {
                    // Find the first package with a name
                    const firstNamedPackage = packages.find((p: any) => p.name && p.name.trim() !== '');
                    packageName = firstNamedPackage?.name || 'Package';
                } else if (!packageName) {
                    packageName = 'Package';
                }
                
                const packagePrice = parseFloat(mainPackage.price) || 0;
                
                // Find all addons (anything that's not type "package")
                const addons = packages.filter((p: any) => p.type !== "package");
                
                // Calculate total amount from all packages
                const totalAmount = packages.reduce((sum: number, p: any) => {
                    return sum + (parseFloat(p.price) || 0);
                }, 0);
                
                // Handle date formatting
                let formattedDate = '-';
                if (item.booking.date) {
                    try {
                        formattedDate = new Date(item.booking.date).toLocaleDateString();
                    } catch (e) {
                        formattedDate = item.booking.date;
                    }
                }
                
                // Handle created_at date
                let createdAt = '-';
                if (item.booking.created_at) {
                    try {
                        createdAt = new Date(item.booking.created_at).toLocaleDateString();
                    } catch (e) {
                        createdAt = item.booking.created_at;
                    }
                }
                
                // Handle payment status
                const paymentStatus = item.booking.payment_status 
                    ? capitalize(item.booking.payment_status.replace(/_/g, ' '))
                    : 'Unknown';
                
                return {
                    id: i + 1,
                    _id: item.booking._id,
                    booking_id: item.booking.booking_id || 'N/A',
                    customer_name: customerName,
                    package_name: packageName,
                    package_price: packagePrice,
                    date: formattedDate,
                    time: item.booking.time || 'N/A',
                    amount: totalAmount,
                    formatted_amount: `$${totalAmount.toFixed(2)}`,
                    status: capitalize(item.booking.status || 'unknown'),
                    payment_status: paymentStatus,
                    payment_method: capitalize(item.booking.payment_method || 'unknown'),
                    paid_amount: item.booking.paid_amount ? `$${item.booking.paid_amount}` : '$0',
                    created_at: createdAt,
                    addons: addons, // Now we have the proper addons array
                    base_package_price: packagePrice
                };
            });
            
            setInitialRecords(formatted);
            setTotalRecords(formatted.length);
        }
    } catch (error) {
        console.error('Error loading invoice data:', error);
    } finally {
        hideLoader();
    }
};


    useEffect(() => {
        dispatch(setPageTitle('Invoice Management'));
        viewInvoiceData();
    }, []);

    useEffect(() => {
        setPage(1);
    }, [pageSize]);

    useEffect(() => {
        let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
        sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

        const filtered = sorted.filter(item =>
            (item.booking_id?.toString() || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.customer_name || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.package_name || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.status || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.payment_status || '').toLowerCase().includes(search.toLowerCase())
        );

        const from = (page - 1) * pageSize;
        const to = from + pageSize;
        setRecordsData(filtered.slice(from, to));
        setTotalRecords(filtered.length);
    }, [page, pageSize, search, sortStatus, initialRecords]);

    const handleViewClick = (invoiceId: string) => {
        navigate(`/invoices/view/${invoiceId}`);
    };

    const getStatusBadge = (status: string) => {
        const statusLower = status.toLowerCase();
        let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
        if (statusLower.includes('approve')) {
            className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
        } else if (statusLower.includes('pend')) {
            className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
        } else if (statusLower.includes('reject') || statusLower.includes('overdue')) {
            className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
        } else if (statusLower.includes('draft')) {
            className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
        } else {
            className += 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100';
        }
        
        return <span className={className}>{status}</span>;
    };

    const getPaymentStatusBadge = (status: string) => {
        const statusLower = status.toLowerCase();
        let className = 'px-3 py-1 rounded-full text-xs font-semibold ';
        
        if (statusLower.includes('paid')) {
            className += 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100';
        } else if (statusLower.includes('unpaid')) {
            className += 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100';
        } else if (statusLower.includes('partial')) {
            className += 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100';
        } else {
            className += 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
        }
        
        return <span className={className}>{status}</span>;
    };

    const PackageTooltipContent = ({ package_name, package_price, addons, amount }: any) => {
        return (
            <div className="p-3 rounded-lg shadow-lg max-w-xs">
                <h4 className="font-semibold text-primary dark:text-primary-light mb-2">Package Details</h4>
                
                <div className="mb-3">
                    <div className="flex justify-between items-center py-1 border-b border-gray-100 dark:border-gray-700 gap-2">
                        <span className="text-sm font-medium">{package_name}</span>
                        <span className="text-sm font-semibold"> ${package_price.toFixed(2)}</span>
                    </div>
                </div>
                
                {addons && addons.length > 0 && (
                    <>
                        <h5 className="font-medium text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">
                            <FaPlusCircle className="mr-1" /> Additional Packages
                        </h5>
                        <div className="max-h-40 overflow-y-auto">
                            {addons.map((addon: any, index: number) => (
                                <div key={index} className="flex justify-between items-center py-1 text-xs">
                                    <span className="truncate max-w-[160px]">{addon.name}</span>
                                    <span className="font-medium ml-2">${parseFloat(addon.price).toFixed(2)}</span>
                                </div>
                            ))}
                        </div>
                    </>
                )}
                
                <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center font-semibold">
                    <span>Total:</span>
                    <span>${amount.toFixed(2)}</span>
                </div>
            </div>
        );
    };

    return (
        <div className="relative">
            <div className="panel">
                <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
                    <div>
                        <h5 className="font-semibold text-lg dark:text-white-light">Invoice Management</h5>
                    </div>
                    <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
                        <div className="relative flex-1">
                            <input
                                type="text"
                                className="form-input w-full pl-10 pr-4 py-2 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                placeholder="Search invoices..."
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                            />
                            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <FaSearch className="h-5 w-5 text-gray-400" />
                            </div>
                        </div>
                    </div>
                </div>

                {loading ? (
                    <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
                        <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
                    </div>
                ) : (
                    <div className="datatables">
                        <DataTable
                            highlightOnHover
                            className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
                            records={recordsData}
                            columns={[
                                {
                                    accessor: 'booking_id',
                                    title: 'Invoice ID',
                                    sortable: true,
                                    render: ({ booking_id }) => (
                                        <div className="flex items-center">
                                            <span className="font-semibold text-primary-DEFAULT dark:text-primary-light">
                                                #{booking_id}
                                            </span>
                                        </div>
                                    )
                                },
                                {
                                    accessor: 'customer_name',
                                    title: 'Customer',
                                    sortable: true,
                                    render: ({ customer_name }) => (
                                        <div className="flex items-center">
                                            <div className="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary-dark-light flex items-center justify-center mr-3">
                                                <span className="text-primary-DEFAULT dark:text-primary-light font-semibold">
                                                    {customer_name.charAt(0)}
                                                </span>
                                            </div>
                                            <Tippy content={customer_name} placement="top" arrow={false}>
                                                <span className="truncate max-w-[150px] inline-block font-medium dark:text-white-light">
                                                    {customer_name}
                                                </span>
                                            </Tippy>
                                        </div>
                                    )
                                },
                                {
                                    accessor: 'package_name',
                                    title: 'Package',
                                    sortable: true,
                                    render: (row) => (
                                        <Tippy
                                            content={
                                                <PackageTooltipContent
                                                    package_name={row.package_name}
                                                    package_price={row.package_price}
                                                    addons={row.addons}
                                                    amount={row.amount}
                                                />
                                            }
                                            interactive={true}
                                            placement="top"
                                            arrow={true}
                                            appendTo={document.body}
                                        >
                                            <div className="flex items-center cursor-help">
                                                <div className="w-8 h-8 rounded-full bg-secondary/10 dark:bg-secondary-dark-light flex items-center justify-center mr-2">
                                                    <FaBox className="h-3 w-3 text-secondary-DEFAULT dark:text-secondary-light" />
                                                </div>
                                                <span className="text-gray-600 dark:text-gray-300 truncate max-w-[120px] underline decoration-dotted">
                                                    {row.package_name}
                                                </span>
                                            </div>
                                        </Tippy>
                                    )
                                },
                                {
                                    accessor: 'date',
                                    title: 'Date & Time',
                                    sortable: true,
                                    render: ({ date, time }) => (
                                        <div className="flex items-center">
                                            <div className="w-8 h-8 rounded-full bg-info/10 dark:bg-info-dark-light flex items-center justify-center mr-2">
                                                <FaCalendarAlt className="h-3 w-3 text-info-DEFAULT dark:text-info-light" />
                                            </div>
                                            <div>
                                                <div className="font-medium text-gray-600 dark:text-gray-300">{date}</div>
                                                <div className="text-xs text-gray-400">{time}</div>
                                            </div>
                                        </div>
                                    )
                                },
                                {
                                    accessor: 'formatted_amount',
                                    title: 'Total Amount',
                                    sortable: true,
                                    render: (row) => (
                                        <Tippy
                                            content={
                                                <PackageTooltipContent
                                                    package_name={row.package_name}
                                                    package_price={row.package_price}
                                                    addons={row.addons}
                                                    amount={row.amount}
                                                />
                                            }
                                            placement="top"
                                            arrow={true}
                                            appendTo={document.body}
                                        >
                                            <div className="flex items-center cursor-help">
                                                <div className="w-8 h-8 rounded-full bg-success/10 dark:bg-success-dark-light flex items-center justify-center mr-2">
                                                    <FaMoneyBillWave className="h-3 w-3 text-success-DEFAULT dark:text-success-light" />
                                                </div>
                                                <span className="font-semibold text-secondary-DEFAULT dark:text-secondary-light underline decoration-dotted">
                                                    ${row.amount.toFixed(2)}
                                                </span>
                                            </div>
                                        </Tippy>
                                    )
                                },
                                {
                                    accessor: 'payment_status',
                                    title: 'Payment Status',
                                    sortable: true,
                                    render: ({ payment_status }) => getPaymentStatusBadge(payment_status)
                                },
                                {
                                    accessor: 'status',
                                    title: 'Status',
                                    sortable: true,
                                    render: ({ status }) => getStatusBadge(status)
                                },
                                {
                                    accessor: 'action',
                                    title: 'Actions',
                                    titleClassName: '!text-center',
                                    render: (row) => (
                                        <div className="flex items-center w-max mx-auto gap-3">
                                            <Tippy content="View Invoice">
                                                <button
                                                    className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                                    onClick={() => handleViewClick(row._id)}
                                                >
                                                    <svg className="w-5 h-5 text-gray-500 hover:text-primary dark:text-gray-300 dark:hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                    </svg>
                                                </button>
                                            </Tippy>
                                        </div>
                                    ),
                                },
                            ]}
                            totalRecords={totalRecords}
                            recordsPerPage={pageSize}
                            page={page}
                            onPageChange={setPage}
                            recordsPerPageOptions={PAGE_SIZES}
                            onRecordsPerPageChange={setPageSize}
                            sortStatus={sortStatus}
                            onSortStatusChange={setSortStatus}
                            minHeight={200}
                            rowClassName={(record) =>
                                `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}`
                            }
                            paginationText={({ from, to, totalRecords }) => (
                                <span className="dark:text-white-light">
                                    Showing {from} to {to} of {totalRecords} entries
                                </span>
                            )}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

function capitalize(text: string): string {
    if (!text) return '';
    return text
        .split(' ') // Split by spaces
        .map(word => 
            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
        )
        .join(' '); // Join back into a single string
}

export default InvoiceManagement;