Packages

// setSearch(e.target.value)} // /> //

// //

// {/* Table */} // {loading && ( //

// )} //

// ( // //

{description}

// // ) // }, // { accessor: 'time', title: 'Time' }, // { // accessor: 'price', // title: 'Price', // render: ({ price }) => `$${parseFloat(price).toFixed(2)}` // }, // { // accessor: 'status', // title: 'Status', // sortable: true, // render: ({ _id, status }) => ( // // handleStatusToggle(_id, status)} // /> //

// // {status === 'active' ? 'Active' : 'Inactive'} // // // ) // }, // { // accessor: 'actions', // title: 'Actions', // render: (row) => ( //

// // // // // // // // // //

// ), // }, // ]} // totalRecords={totalRecords} // recordsPerPage={pageSize} // page={page} // onPageChange={setPage} // recordsPerPageOptions={PAGE_SIZES} // onRecordsPerPageChange={setPageSize} // sortStatus={sortStatus} // onSortStatusChange={setSortStatus} // rowClassName={(record) => // `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}` // } // paginationText={({ from, to, totalRecords }) => ( // // Showing {from} to {to} of {totalRecords} entries // // )} // /> //

// {/* Add Modal */} // // setAddModalOpen(false)} className="relative z-50"> //

// // // Add New Package // //

// {/* Title */} //

// // Title // // //

// {/* Description */} //

// // Description // //

//                                 </div>

//                                 {/* Time and Price */}
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <div>
//                                         <label htmlFor="time" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                             Time
//                                         </label>
//                                         <input
//                                             id="time"
//                                             type="text"
//                                             name="time"
//                                             value={formData.time}
//                                             onChange={handleInputChange}
//                                             className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                             placeholder="e.g., 30 minutes"
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="price" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                             Price
//                                         </label>
//                                         <input
//                                             id="price"
//                                             type="number"
//                                             name="price"
//                                             value={formData.price}
//                                             onChange={handleInputChange}
//                                             className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                             placeholder="0.00"
//                                             step="0.01"
//                                             required
//                                         />
//                                     </div>
//                                 </div>
//                                 <div className="flex items-center">
//                                     <input
//                                         id="isPopular"
//                                         name="isPopular"
//                                         type="checkbox"
//                                         checked={formData.isPopular === 'Yes'}
//                                         onChange={handleCheckboxChange}
//                                         className="form-checkbox rounded"
//                                     />
//                                     <label htmlFor="isPopular" className="ml-2 text-sm font-medium dark:text-white-light">
//                                         Mark as Popular Package
//                                     </label>
//                                 </div>

//                                 {/* Categories and Lists */}
//                                 <div>
//                                     <div className="flex justify-between items-center mb-2">
//                                         <span className="block text-sm font-medium dark:text-white-light">Categories & Lists</span>
//                                         <button
//                                             type="button"
//                                             onClick={addCategory}
//                                             className="btn btn-sm btn-primary"
//                                         >
//                                             + Add Category
//                                         </button>
//                                     </div>

//                                     {formData.categories.map((category) => (
//                                         <div key={category.id} className="mb-4 p-4 border rounded-lg dark:border-gray-600">
//                                             <div className="flex items-center gap-2 mb-3">
//                                                 <input
//                                                     type="text"
//                                                     value={category.title}
//                                                     onChange={(e) => updateCategoryTitle(category.id, e.target.value)}
//                                                     className="form-input flex-1 dark:bg-gray-700 dark:text-white"
//                                                     placeholder="Category title"
//                                                 />
//                                                 <button
//                                                     type="button"
//                                                     onClick={() => removeCategory(category.id)}
//                                                     className="btn btn-sm btn-danger"
//                                                     disabled={formData.categories.length <= 1}
//                                                 >
//                                                     ×
//                                                 </button>
//                                                 <button
//                                                     type="button"
//                                                     onClick={() => addListItem(category.id)}
//                                                     className="btn btn-sm btn-primary"
//                                                 >
//                                                     + Add List
//                                                 </button>
//                                             </div>

//                                             <div className="space-y-2">
//                                                 {category.lists.map((list) => (
//                                                     <div key={list.id} className="flex items-center gap-2">
//                                                         <input
//                                                             type="text"
//                                                             value={list.text}
//                                                             onChange={(e) => updateListItem(category.id, list.id, e.target.value)}
//                                                             className="form-input flex-1 dark:bg-gray-700 dark:text-white"
//                                                             placeholder="List item"
//                                                         />
//                                                         <button
//                                                             type="button"
//                                                             onClick={() => removeListItem(category.id, list.id)}
//                                                             className="btn btn-sm btn-danger"
//                                                             disabled={category.lists.length <= 1}
//                                                         >
//                                                             ×
//                                                         </button>
//                                                     </div>
//                                                 ))}
//                                             </div>
//                                         </div>
//                                     ))}
//                                 </div>

//                                 {/* Actions */}
//                                 <div className="flex justify-end gap-3 mt-4">
//                                     <button
//                                         type="button"
//                                         onClick={() => setAddModalOpen(false)}
//                                         className="btn btn-outline-danger dark:text-white-light"
//                                     >
//                                         Cancel
//                                     </button>
//                                     <button type="submit" className="btn btn-primary">Save</button>
//                                 </div>
//                             </form>
//                         </Dialog.Panel>
//                     </div>
//                 </Dialog>
//             </Transition>

//             {/* Edit Modal */}
//             <Transition appear show={editModalOpen} as={Fragment}>
//                 <Dialog as="div" open={editModalOpen} onClose={() => setEditModalOpen(false)} className="relative z-50">
//                     <div className="fixed inset-0 bg-black bg-opacity-30" />
//                     <div className="fixed inset-0 flex items-center justify-center p-4">
//                         <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-2xl rounded-xl shadow-lg p-6 max-h-[90vh] overflow-y-auto">
//                             <Dialog.Title className="text-lg font-semibold mb-4 dark:text-white-light">
//                                 Edit Package
//                             </Dialog.Title>

//                             <form onSubmit={handleUpdateSubmit} className="space-y-4">
//                                 {/* Title */}
//                                 <div>
//                                     <label htmlFor="editTitle" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Title
//                                     </label>
//                                     <input
//                                         id="editTitle"
//                                         type="text"
//                                         name="title"
//                                         value={formData.title}
//                                         onChange={handleInputChange}
//                                         className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                         placeholder="Enter package title"
//                                         required
//                                     />
//                                 </div>

//                                 {/* Description */}
//                                 <div>
//                                     <label htmlFor="editDescription" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Description
//                                     </label>
//                                     <textarea
//                                         id="editDescription"
//                                         name="description"
//                                         value={formData.description}
//                                         onChange={handleInputChange}
//                                         className="form-textarea w-full dark:bg-gray-700 dark:text-white"
//                                         rows={3}
//                                         placeholder="Enter description"
//                                     />
//                                 </div>

//                                 {/* Time and Price */}
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <div>
//                                         <label htmlFor="editTime" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                             Time
//                                         </label>
//                                         <input
//                                             id="editTime"
//                                             type="text"
//                                             name="time"
//                                             value={formData.time}
//                                             onChange={handleInputChange}
//                                             className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                             placeholder="e.g., 30 minutes"
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="editPrice" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                             Price
//                                         </label>
//                                         <input
//                                             id="editPrice"
//                                             type="number"
//                                             name="price"
//                                             value={formData.price}
//                                             onChange={handleInputChange}
//                                             className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                             placeholder="0.00"
//                                             step="0.01"
//                                             required
//                                         />
//                                     </div>
//                                 </div>

//                                 <div className="flex items-center">
//                                     <input
//                                         id="isPopular"
//                                         name="isPopular"
//                                         type="checkbox"
//                                         checked={formData.isPopular === 'Yes'}
//                                         onChange={handleCheckboxChange}
//                                         className="form-checkbox rounded"
//                                     />
//                                     <label htmlFor="isPopular" className="ml-2 text-sm font-medium dark:text-white-light">
//                                         Mark as Popular Package
//                                     </label>
//                                 </div>

//                                 {/* Actions */}
//                                 <div className="flex justify-end gap-3 mt-4">
//                                     <button
//                                         type="button"
//                                         onClick={() => setEditModalOpen(false)}
//                                         className="btn btn-outline-danger dark:text-white-light"
//                                     >
//                                         Cancel
//                                     </button>
//                                     <button type="submit" className="btn btn-primary">Update</button>
//                                 </div>
//                             </form>
//                         </Dialog.Panel>
//                     </div>
//                 </Dialog>
//             </Transition>

//             {/* View Modal */}
//             <Transition appear show={viewModalOpen} as={Fragment}>
//                 <Dialog
//                     as="div"
//                     open={viewModalOpen}
//                     onClose={() => setViewModalOpen(false)}
//                     className="relative z-50"
//                 >
//                     <div className="fixed inset-0 bg-black bg-opacity-30" />
//                     <div className="fixed inset-0 flex items-center justify-center p-4">
//                         <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-3xl rounded-xl shadow-lg p-6">
//                             <Dialog.Title className="text-xl font-semibold mb-6 dark:text-white-light border-b pb-3">
//                                 Package Details
//                             </Dialog.Title>

//                             {selectedPackage && (
//                                 <div className="space-y-6">
//                                     {/* Top Section: Title & Description */}
//                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Title
//                                             </label>
//                                             <p className="mt-1 text-lg font-medium dark:text-white-light">
//                                                 {selectedPackage.title}
//                                             </p>
//                                         </div>
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Description
//                                             </label>
//                                             <p className="mt-1 dark:text-white-light">
//                                                 {selectedPackage.description}
//                                             </p>
//                                         </div>
//                                     </div>

//                                     {/* Middle Section: Time & Price */}
//                                     <div className="grid grid-cols-2 md:grid-cols-4 gap-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
//                                                 Time
//                                             </label>
//                                             <p className="mt-1 font-semibold dark:text-white-light">
//                                                 {selectedPackage.time}
//                                             </p>
//                                         </div>
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
//                                                 Price
//                                             </label>
//                                             <p className="mt-1 font-semibold dark:text-white-light">
//                                                 ${parseFloat(selectedPackage.price).toFixed(2)}
//                                             </p>
//                                         </div>
//                                     </div>
//                                     <div>
//                                         <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                             Popular Package
//                                         </label>
//                                         <p className="mt-1 dark:text-white-light">
//                                             {selectedPackage.isPopular === 'Yes' ? 'Yes' : 'No'}
//                                         </p>
//                                     </div>
//                                     {/* Categories Section */}
//                                     {selectedPackage.categories?.length > 0 && (
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
//                                                 Categories & Lists
//                                             </label>
//                                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//                                                 {selectedPackage.categories.map((category, catIndex) => (
//                                                     <div
//                                                         key={catIndex}
//                                                         className="p-4 border rounded-lg dark:border-gray-600"
//                                                     >
//                                                         <h4 className="font-medium dark:text-white-light mb-2">
//                                                             {category.title}
//                                                         </h4>
//                                                         <ul className="list-disc list-inside space-y-1 text-sm">
//                                                             {category.lists.map((list, listIndex) => (
//                                                                 <li
//                                                                     key={listIndex}
//                                                                     className="dark:text-white-light"
//                                                                 >
//                                                                     {typeof list === 'string' ? list : list.text}
//                                                                 </li>
//                                                             ))}
//                                                         </ul>
//                                                     </div>
//                                                 ))}
//                                             </div>
//                                         </div>
//                                     )}

//                                     {/* Footer */}
//                                     <div className="flex justify-end pt-4 border-t">
//                                         <button
//                                             type="button"
//                                             onClick={() => setViewModalOpen(false)}
//                                             className="btn btn-primary"
//                                         >
//                                             Close
//                                         </button>
//                                     </div>
//                                 </div>
//                             )}
//                         </Dialog.Panel>
//                     </div>
//                 </Dialog>
//             </Transition>
//         </div>
//     );
// };

// export default PackageManagement;

// import { useEffect, useState, Fragment } from 'react';
// import { DataTable } from 'mantine-datatable';
// import sortBy from 'lodash/sortBy';
// import Swal from 'sweetalert2';
// import { showMessage } from '../../general';
// import { base_url, getPackagesList, createPackages, updatePackages, editPackages, deletePackages, toggleActiveInActivePackages, getHeadingsList } from '../../API';
// import Tippy from '@tippyjs/react';
// import 'tippy.js/dist/tippy.css';
// import { Dialog, Transition } from '@headlessui/react';
// import { useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { v4 as uuidv4 } from 'uuid';

// interface ListItem {
//     id: string;
//     text: string;
// }

// interface CategoryItem {
//     id: string;
//     title: string;
//     lists: ListItem[];
// }

// interface HeadingItem {
//     _id: number;
//     title: string;
//     type: string;
//     multiselect: boolean;
// }

// interface PackageFormData {
//     title: string;
//     description: string;
//     time: string;
//     isPopular: string;
//     price: string;
//     heading_id: string;
//     heading_title: string;
//     type: string;
//     multiselect: boolean;
//     categories: CategoryItem[];
// }

// const PackageManagement = () => {
//     const [packages, setPackages] = useState([]);
//     const [loading, setLoading] = useState(true);
//     const [error, setError] = useState(null);

//     // Table state
//     const PAGE_SIZES = [10, 20, 30, 50, 100];
//     const [page, setPage] = useState(1);
//     const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
//     const [records, setRecords] = useState([]);
//     const [totalRecords, setTotalRecords] = useState(0);
//     const [search, setSearch] = useState('');
//     const [sortStatus, setSortStatus] = useState({
//         columnAccessor: 'title',
//         direction: 'asc',
//     });
//     const [editLoading, setEditLoading] = useState(false);
//     const [viewLoading, setViewLoading] = useState(false);

//     // Modal states
//     const [addModalOpen, setAddModalOpen] = useState(false);
//     const [editModalOpen, setEditModalOpen] = useState(false);
//     const [viewModalOpen, setViewModalOpen] = useState(false);
//     const [selectedPackage, setSelectedPackage] = useState(null);

//     const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//     // Headings state
//     const [headings, setHeadings] = useState<HeadingItem[]>([]);

//     // Form state
//     const getEmptyForm = (): PackageFormData => ({
//         title: '',
//         description: '',
//         time: '',
//         price: '',
//         isPopular: 'No',
//         heading_id: '',
//         heading_title: '',
//         type: '',
//         multiselect: false,
//         categories: [
//             {
//                 id: uuidv4(),
//                 title: '',
//                 lists: [{ id: uuidv4(), text: '' }]
//             }
//         ]
//     });

//     const [formData, setFormData] = useState<PackageFormData>(getEmptyForm());

//     // Reset form when add modal opens
//     useEffect(() => {
//         if (addModalOpen) {
//             setFormData(getEmptyForm());
//         }
//     }, [addModalOpen]);

//     // Cleanup on unmount
//     useEffect(() => {
//         return () => {
//             setFormData(getEmptyForm());
//             setSelectedPackage(null);
//         };
//     }, []);

//     // Fetch headings
//     useEffect(() => {
//         const fetchHeadings = async () => {
//             try {
//                 const response = await getHeadingsList();
//                 if (response.status === true) {
//                     setHeadings(response.data);
//                 } else {
//                     showMessage(response.message || 'Failed to load headings.', 'error');
//                 }
//             } catch (err) {
//                 showMessage('Error while fetching headings', 'error');
//             }
//         };
//         fetchHeadings();
//     }, []);

//     // Fetch packages
//     const fetchPackages = async () => {
//         setLoading(true);
//         try {
//             const companyId = localStorage.getItem('company_id');
//             const response = await getPackagesList(companyId);

//             if (response.status === true) {
//                 // Handle both array and empty response formats
//                 const packagesData = Array.isArray(response.data) ? response.data : [];
//                 setPackages(packagesData);
//                 setTotalRecords(packagesData.length);
//             } else {
//                 // Handle "No records found" case
//                 if (response.message === "No records found") {
//                     setPackages([]);
//                     setTotalRecords(0);
//                 } else {
//                     setError(response.message || 'Failed to load package data.');
//                 }
//             }
//         } catch (err) {
//             setError(err.message);
//             setPackages([]);
//             setTotalRecords(0);
//         } finally {
//             setLoading(false);
//         }
//     };

//     useEffect(() => {
//         fetchPackages();
//     }, []);

//     // Records filter/sort/paginate
//     useEffect(() => {
//         if (!packages || !packages.length) {
//             setRecords([]);
//             setTotalRecords(0);
//             return;
//         }

//         let sorted = sortBy(packages, sortStatus.columnAccessor);
//         sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

//         const filtered = sorted.filter(
//             (pkg) =>
//                 (pkg.title || '').toLowerCase().includes(search.toLowerCase()) ||
//                 (pkg.description || '').toLowerCase().includes(search.toLowerCase())
//         );

//         const newTotal = filtered.length;
//         const maxPage = Math.max(1, Math.ceil(newTotal / pageSize));

//         if (page > maxPage) {
//             setPage(maxPage);
//             return;
//         }

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

//     // Input handler
//     const handleInputChange = (e) => {
//         const { name, value } = e.target;
//         setFormData((prev) => ({
//             ...prev,
//             [name]: value,
//         }));
//     };

//     // Heading change handler
// const handleHeadingChange = (e) => {
//   const selectedTitle = e.target.value;
//   const selectedHeading = headings.find(h => h.title === selectedTitle);

//   setFormData(prev => ({
//     ...prev,
//     heading_title: selectedTitle,
//     heading_id: selectedHeading ? selectedHeading._id.toString() : '',
//     type: selectedHeading ? selectedHeading.type : '',
//     multiselect: selectedHeading ? selectedHeading.multiselect : false
//   }));
// };

//     const handleIsPopularChange = (e) => {
//         const { checked } = e.target;
//         setFormData((prev) => ({
//             ...prev,
//             isPopular: checked ? 'Yes' : 'No',
//         }));
//     };

//     const handleMultiselectChange = (e) => {
//         const { checked } = e.target;
//         setFormData((prev) => ({
//             ...prev,
//             multiselect: checked,
//         }));
//     };

//     // Add new category
//     const addCategory = () => {
//         setFormData(prev => ({
//             ...prev,
//             categories: [
//                 ...prev.categories,
//                 {
//                     id: uuidv4(),
//                     title: '',
//                     lists: [{ id: uuidv4(), text: '' }]
//                 }
//             ]
//         }));
//     };

//     // Update category title
//     const updateCategoryTitle = (id: string, title: string) => {
//         setFormData(prev => ({
//             ...prev,
//             categories: prev.categories.map(cat =>
//                 cat.id === id ? { ...cat, title } : cat
//             )
//         }));
//     };

//     // Add new list item to category
//     const addListItem = (categoryId: string) => {
//         setFormData(prev => ({
//             ...prev,
//             categories: prev.categories.map(cat =>
//                 cat.id === categoryId
//                     ? { ...cat, lists: [...cat.lists, { id: uuidv4(), text: '' }] }
//                     : cat
//             )
//         }));
//     };

//     // Update list item
//     const updateListItem = (categoryId: string, listId: string, value: string) => {
//         setFormData(prev => ({
//             ...prev,
//             categories: prev.categories.map(cat => {
//                 if (cat.id === categoryId) {
//                     return {
//                         ...cat,
//                         lists: cat.lists.map(list =>
//                             list.id === listId ? { ...list, text: value } : list
//                         )
//                     };
//                 }
//                 return cat;
//             })
//         }));
//     };

//     // Remove category
//     const removeCategory = (id: string) => {
//         if (formData.categories.length <= 1) return;

//         setFormData(prev => ({
//             ...prev,
//             categories: prev.categories.filter(cat => cat.id !== id)
//         }));
//     };

//     // Remove list item
//     const removeListItem = (categoryId: string, listId: string) => {
//         setFormData(prev => ({
//             ...prev,
//             categories: prev.categories.map(cat => {
//                 if (cat.id === categoryId && cat.lists.length > 1) {
//                     return {
//                         ...cat,
//                         lists: cat.lists.filter(list => list.id !== listId)
//                     };
//                 }
//                 return cat;
//             })
//         }));
//     };

//     const handleCheckboxChange = (e) => {
//         const { name, checked } = e.target;
//         setFormData((prev) => ({
//             ...prev,
//             [name]: checked ? true : false,
//         }));
//     };

//     // Add Package
//     const handleAddSubmit = async (e) => {
//         e.preventDefault();
//         try {
//             const payload = {
//                 ...formData,
//                 categories: formData.categories
//                     .filter(cat => cat.title.trim() !== '')
//                     .map(cat => ({
//                         title: cat.title,
//                         lists: cat.lists
//                             .filter(list => list.text.trim() !== '')
//                             .map(list => list.text)
//                     }))
//                     .filter(cat => cat.lists.length > 0)
//             };

//             const res = await createPackages(payload);
//             if (res.status === true) {
//                 showMessage('Package created successfully', 'success');
//                 setAddModalOpen(false);
//                 setFormData(getEmptyForm());
//                 fetchPackages();
//             } else {
//                 showMessage(res.message || 'Failed to create package', 'error');
//             }
//         } catch (err) {
//             showMessage('Error while creating package', 'error');
//         }
//     };

//     // Edit Package - Fetch package data
//     const handleEditClick = async (packageId) => {
//         if (!packageId) {
//             showMessage('Package ID is missing', 'error');
//             return;
//         }
//         setEditLoading(true);

//         try {
//             const response = await editPackages(packageId);
//             if (response.status === true) {
//                 const packageData = response.data;

//                 // Ensure each category and list has a unique ID
//                 const categoriesWithIds = packageData.categories && packageData.categories.length > 0
//                     ? packageData.categories.map(cat => ({
//                         id: uuidv4(),
//                         title: cat.title || '',
//                         lists: (cat.lists || []).map(list => ({
//                             id: uuidv4(),
//                             text: typeof list === 'string' ? list : list.text || ''
//                         }))
//                     }))
//                     : [{ id: uuidv4(), title: '', lists: [{ id: uuidv4(), text: '' }] }];

//               setFormData({
//   title: packageData.title || '',
//   description: packageData.description || '',
//   time: packageData.time || '',
//   price: packageData.price || '',
//   isPopular: packageData.isPopular || 'No',
//   heading_id: packageData.heading_id?.toString() || '',
//   heading_title: packageData.heading_title || '', // Make sure this is set
//   type: packageData.type || '',
//   multiselect: packageData.multiselect || false,
//   categories: categoriesWithIds
// });
//                 setSelectedPackage(packageData);
//                 setEditModalOpen(true);
//             } else {
//                 showMessage(response.message || 'Failed to fetch package data', 'error');
//             }
//         } catch (err) {
//             console.error('Error fetching package:', err);
//             showMessage('Error while fetching package data', 'error');
//             setEditLoading(false);
//         } finally {
//             setEditLoading(false);
//         }
//     };

//     // Update Package
//     const handleUpdateSubmit = async (e) => {
//         e.preventDefault();
//         try {
//             const payload = {
//                 ...formData,
//                 id: selectedPackage._id,
//                 // Filter out empty lists and categories
//                 categories: formData.categories
//                     .filter(cat => cat.title.trim() !== '')
//                     .map(cat => ({
//                         title: cat.title,
//                         lists: cat.lists
//                             .filter(list => list.text.trim() !== '')
//                             .map(list => list.text)
//                     }))
//                     .filter(cat => cat.lists.length > 0)
//             };

//             const res = await updatePackages(payload);
//             if (res.status === true) {
//                 showMessage('Package updated successfully', 'success');
//                 setEditModalOpen(false);
//                 setFormData(getEmptyForm());
//                 setSelectedPackage(null);
//                 fetchPackages();
//             } else {
//                 showMessage(res.message || 'Failed to update package', 'error');
//             }
//         } catch (err) {
//             showMessage('Error while updating package', 'error');
//         }
//     };

//     // Delete Package with SweetAlert2 confirmation
//     const handleDeleteClick = async (pkg) => {
//         const result = await Swal.fire({
//             title: 'Are you sure?',
//             text: `Package "${pkg.title}" will be permanently deleted!`,
//             icon: 'warning',
//             showCancelButton: true,
//             confirmButtonColor: '#e7515a',
//             cancelButtonColor: '#2196f3',
//             confirmButtonText: 'Yes, delete it!',
//             customClass: {
//                 confirmButton: 'bg-[#5c4d2f] text-white px-4 py-2 rounded hover:bg-[#4a3e27]',
//                 cancelButton: 'px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
//                 actions: 'space-x-3'
//             },
//             buttonsStyling: false
//         });

//         if (result.isConfirmed) {
//             try {
//                 const res = await deletePackages(pkg._id);
//                 if (res.status === true) {
//                     showMessage('Package deleted successfully', 'success');

//                     // Update local state immediately for better UX
//                     const updatedPackages = packages.filter(item => item._id !== pkg._id);
//                     setPackages(updatedPackages);

//                     // Show success confirmation
//                     Swal.fire({
//                         title: 'Deleted!',
//                         text: 'Your package has been deleted.',
//                         icon: 'success',
//                         confirmButtonText: 'OK',
//                         customClass: {
//                             confirmButton: 'bg-[#5c4d2f] text-white px-4 py-2 rounded hover:bg-[#4a3e27]'
//                         },
//                         buttonsStyling: false
//                     });
//                 } else {
//                     showMessage(res.message || 'Failed to delete package', 'error');
//                 }
//             } catch (err) {
//                 showMessage('Error while deleting package', 'error');
//             }
//         }
//     };

//     // Toggle Package Status
//     const handleStatusToggle = async (packageId, currentStatus) => {
//         try {
//             const newStatus = currentStatus === 'active' ? 'inactive' : 'active';

//             const payload = {
//                 id: packageId,
//                 type: 'package',
//                 status: newStatus
//             };

//             // Assuming you have this API function
//             const res = await toggleActiveInActivePackages(payload);

//             if (res.status === true) {
//                 showMessage(`Package ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`, 'success');

//                 // Update local state immediately for better UX
//                 setPackages(prevPackages =>
//                     prevPackages.map(pkg =>
//                         pkg._id === packageId ? { ...pkg, status: newStatus } : pkg
//                     )
//                 );
//             } else {
//                 showMessage(res.message || 'Failed to update package status', 'error');
//             }
//         } catch (err) {
//             showMessage('Error while updating package status', 'error');
//         }
//     };

//     return (
//         <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">Packages</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"
//                             placeholder="Search packages..."
//                             value={search}
//                             onChange={(e) => setSearch(e.target.value)}
//                         />
//                         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
//                             <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
//                             </svg>
//                         </div>
//                     </div>

//                     <button className="btn btn-primary" onClick={() => setAddModalOpen(true)}>
//                         + Add Package
//                     </button>
//                 </div>
//             </div>

//             {/* Table */}
//             {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={records}
//                     columns={[
//                         { accessor: 'title', title: 'Title', sortable: true },
//                         {
//                             accessor: 'description',
//                             title: 'Description',
//                             render: ({ description }) => (
//                                 <Tippy content={description}>
//                                     <div className="max-w-xs truncate">{description}</div>
//                                 </Tippy>
//                             )
//                         },
//                         { accessor: 'time', title: 'Time' },
//                         {
//                             accessor: 'price',
//                             title: 'Price',
//                             render: ({ price }) => `$${parseFloat(price).toFixed(2)}`
//                         },
//                         {
//                             accessor: 'status',
//                             title: 'Status',
//                             sortable: true,
//                             render: ({ _id, status }) => (
//                                 <label className="relative inline-flex items-center cursor-pointer">
//                                     <input
//                                         type="checkbox"
//                                         className="sr-only peer"
//                                         checked={status === 'active'}
//                                         onChange={() => handleStatusToggle(_id, status)}
//                                     />
//                                     <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 
// dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 
// peer-checked:after:translate-x-full peer-checked:after:border-white 
// after:content-[''] after:absolute after:top-[2px] after:left-[2px] 
// after:bg-white after:border-gray-300 after:border after:rounded-full 
// after:h-5 after:w-5 after:transition-all dark:border-gray-600 
// peer-checked:bg-primary"></div>

//                                     <span className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
//                                         {status === 'active' ? 'Active' : 'Inactive'}
//                                     </span>
//                                 </label>
//                             )
//                         },
//                         {
//                             accessor: 'actions',
//                             title: 'Actions',
//                             render: (row) => (
//                                 <div className="flex items-center ">
//                                     <Tippy content="View">
//                                         <button
//                                             className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                             onClick={() => { setSelectedPackage(row); setViewModalOpen(true); }}
//                                         >
//                                             <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>
//                                     <Tippy content="Edit">
//                                         <button
//                                             className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                             onClick={() => handleEditClick(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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
//                                             </svg>
//                                         </button>
//                                     </Tippy>
//                                     <Tippy content="Delete">
//                                         <button
//                                             className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                             onClick={() => handleDeleteClick(row)}
//                                         >
//                                             <svg className="w-5 h-5 text-gray-500 hover:text-danger dark:text-gray-300 dark:hover:text-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
//                                             </svg>
//                                         </button>
//                                     </Tippy>
//                                 </div>
//                             ),
//                         },
//                     ]}
//                     totalRecords={totalRecords}
//                     recordsPerPage={pageSize}
//                     page={page}
//                     onPageChange={setPage}
//                     recordsPerPageOptions={PAGE_SIZES}
//                     onRecordsPerPageChange={setPageSize}
//                     sortStatus={sortStatus}
//                     onSortStatusChange={setSortStatus}
//                     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>

//             {/* Add Modal */}
//             <Transition appear show={addModalOpen} as={Fragment}>
//                 <Dialog as="div" open={addModalOpen} onClose={() => setAddModalOpen(false)} className="relative z-50">
//                     <div className="fixed inset-0 bg-black bg-opacity-30" />
//                     <div className="fixed inset-0 flex items-center justify-center p-4">
//                         <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-2xl rounded-xl shadow-lg p-6 max-h-[90vh] overflow-y-auto">
//                             <Dialog.Title className="text-lg font-semibold mb-4 dark:text-white-light">
//                                 Add New Package
//                             </Dialog.Title>

//                             <form onSubmit={handleAddSubmit} className="space-y-4">

//                                 {/* Package Type (Auto-filled) */}
//                                 <div>
//                                     <label htmlFor="type" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Package Type
//                                     </label>
//                                     <input
//                                         id="type"
//                                         type="text"
//                                         name="type"
//                                         value={formData.type}
//                                         readOnly
//                                         className="form-input w-full dark:bg-gray-700 dark:text-white cursor-not-allowed"
//                                         placeholder="Auto-filled based on heading"
//                                     />
//                                 </div>

//                                 <div>
//                                     <div className="flex items-center">
//                                         <input
//                                             id="multiselect"
//                                             name="multiselect"
//                                             type="checkbox"
//                                             checked={formData.multiselect}
//                                             onChange={handleMultiselectChange}
//                                             className="form-checkbox rounded"
//                                         />
//                                         <label htmlFor="multiselect" className="ml-2 text-sm font-medium dark:text-white-light">
//                                             Multi Select
//                                         </label>
//                                     </div>
//                                 </div>
//                                 {/* Title */}
//                                 <div>
//                                     <label htmlFor="title" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Title
//                                     </label>
//                                     <input
//                                         id="title"
//                                         type="text"
//                                         name="title"
//                                         value={formData.title}
//                                         onChange={handleInputChange}
//                                         className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                         placeholder="Enter package title"
//                                         required
//                                     />
//                                 </div>

//                                 {/* Description */}
//                                 <div>
//                                     <label htmlFor="description" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Description
//                                     </label>
//                                     <textarea
//                                         id="description"
//                                         name="description"
//                                         value={formData.description}
//                                         onChange={handleInputChange}
//                                         className="form-textarea w-full dark:bg-gray-700 dark:text-white"
//                                         rows={3}
//                                         placeholder="Enter description"
//                                     />
//                                 </div>

//                                 {/* Checkboxes */}
//                                 <div className="space-y-2">
//                                     <div className="flex items-center">
//                                         <input
//                                             id="isPopular"
//                                             name="isPopular"
//                                             type="checkbox"
//                                             checked={formData.isPopular === 'Yes'}
//                                             onChange={handleIsPopularChange}
//                                             className="form-checkbox rounded"
//                                         />
//                                         <label htmlFor="isPopular" className="ml-2 text-sm font-medium dark:text-white-light">
//                                             Mark as Popular Package
//                                         </label>
//                                     </div>

//                                 </div>

//                             <form onSubmit={handleUpdateSubmit} className="space-y-4">

//                                 {/* Title */}
//                                 <div>
//                                     <label htmlFor="editTitle" className="block text-sm font-medium mb-1 dark:text-white-light">
//                                         Title
//                                     </label>
//                                     <input
//                                         id="editTitle"
//                                         type="text"
//                                         name="title"
//                                         value={formData.title}
//                                         onChange={handleInputChange}
//                                         className="form-input w-full dark:bg-gray-700 dark:text-white"
//                                         placeholder="Enter package title"
//                                         required
//                                     />
//                                 </div>

//                                 {/* Checkboxes */}
//                                 <div className="space-y-2">
//                                     <div className="flex items-center">
//                                         <input
//                                             id="isPopular"
//                                             name="isPopular"
//                                             type="checkbox"
//                                             checked={formData.isPopular === 'Yes'}
//                                             onChange={handleCheckboxChange}
//                                             className="form-checkbox rounded"
//                                         />
//                                         <label htmlFor="isPopular" className="ml-2 text-sm font-medium dark:text-white-light">
//                                             Mark as Popular Package
//                                         </label>
//                                     </div>

//                                 </div>

//                             {selectedPackage && (
//                                 <div className="space-y-6">

//                                     {/* Heading and Type */}
//                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Heading
//                                             </label>
//                                             <p className="mt-1 dark:text-white-light">
//                                                 {headings.find(h => h._id === selectedPackage.heading_id)?.title || 'N/A'}
//                                             </p>
//                                         </div>
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Package Type
//                                             </label>
//                                             <p className="mt-1 dark:text-white-light">
//                                                 {selectedPackage.type || 'N/A'}
//                                             </p>
//                                         </div>
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Multi Select
//                                             </label>
//                                             <div className="mt-1 flex items-center">
//                                                 <input
//                                                     type="checkbox"
//                                                     checked={selectedPackage.multiselect}
//                                                     readOnly
//                                                     className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
//                                                 />
//                                                 <span className="ml-2 text-sm dark:text-white-light">
//                                                     {selectedPackage.multiselect ? 'Enabled' : 'Disabled'}
//                                                 </span>
//                                             </div>
//                                         </div>

//                                     </div>

//                                     {/* Top Section: Title & Description */}
//                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Title
//                                             </label>
//                                             <p className="mt-1 text-lg font-medium dark:text-white-light">
//                                                 {selectedPackage.title}
//                                             </p>
//                                         </div>
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Description
//                                             </label>
//                                             <p className="mt-1 dark:text-white-light">
//                                                 {selectedPackage.description}
//                                             </p>
//                                         </div>
//                                     </div>

//                                     {/* Popular and Multiselect */}
//                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
//                                                 Popular Package
//                                             </label>
//                                             <p className="mt-1 dark:text-white-light">
//                                                 {selectedPackage.isPopular === 'Yes' ? 'Yes' : 'No'}
//                                             </p>
//                                         </div>

//                                     </div>

//                                     {/* Categories Section */}
//                                     {selectedPackage.categories?.length > 0 && (
//                                         <div>
//                                             <label className="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
//                                                 Categories & Lists
//                                             </label>
//                                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//                                                 {selectedPackage.categories.map((category, catIndex) => (
//                                                     <div
//                                                         key={catIndex}
//                                                         className="p-4 border rounded-lg dark:border-gray-600"
//                                                     >
//                                                         <h4 className="font-medium dark:text-white-light mb-2">
//                                                             {category.title}
//                                                         </h4>
//                                                         <ul className="list-disc list-inside space-y-1 text-sm">
//                                                             {category.lists.map((list, listIndex) => (
//                                                                 <li
//                                                                     key={listIndex}
//                                                                     className="dark:text-white-light"
//                                                                 >
//                                                                     {typeof list === 'string' ? list : list.text}
//                                                                 </li>
//                                                             ))}
//                                                         </ul>
//                                                     </div>
//                                                 ))}
//                                             </div>
//                                         </div>
//                                     )}

// export default PackageManagement;

// interface ListItem {
//     id: string;
//     text: string;
// }

// interface CategoryItem {
//     id: string;
//     title: string;
//     lists: ListItem[];
// }

// interface HeadingItem {
//     _id: number;
//     title: string;
//     type: string;
//     multiselect: boolean;
// }

// const PackageManagement = () => {
//     const [packages, setPackages] = useState([]);
//     const [loading, setLoading] = useState(true);
//     const [error, setError] = useState(null);

//     // Table state
//     const PAGE_SIZES = [10, 20, 30, 50, 100];
//     const [page, setPage] = useState(1);
//     const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
//     const [records, setRecords] = useState([]);
//     const [totalRecords, setTotalRecords] = useState(0);
//     const [search, setSearch] = useState('');
//     const [sortStatus, setSortStatus] = useState({
//         columnAccessor: 'title',
//         direction: 'asc',
//     });
//     const [editLoading, setEditLoading] = useState(false);
//     const [viewLoading, setViewLoading] = useState(false);