diff --git a/src/Components/Menu/PozoMenu.scss b/src/Components/Menu/PozoMenu.scss index cc4a096..d59b462 100644 --- a/src/Components/Menu/PozoMenu.scss +++ b/src/Components/Menu/PozoMenu.scss @@ -42,7 +42,7 @@ cursor: pointer; transition: background 0.2s, - color 0.2s ease-in-out; + color 0.2s; border-radius: 8px; margin: 1px 3px; font-size: 13px; @@ -54,10 +54,6 @@ &:hover:not(.selected):not(.active-path) { background: #394588; - .pozo-menu-label, - .pozo-menu-icon { - color: #fff; - } } &.selected { @@ -84,22 +80,16 @@ &.open { background: #050d36 !important; color: #23bbff; - // border-right: 2px solid #23bbff; font-weight: 600; width: 95%; - .pozo-menu-label, - .pozo-menu-icon { - color: #fff; - font-weight: 500; - } } &.active-path { background: #050d36 !important; color: #ffffff !important; font-weight: 600; - border-radius: 6px; - border-right: 2px solid #23bbff; + border-radius: 6px 4px 4px 6px; + border-right: 2px solid #23bbff !important; .pozo-menu-icon { color: #ffffff !important; @@ -107,7 +97,7 @@ .pozo-menu-label { color: #ffffff !important; - font-weight: 500; + font-weight: 500 !important; } .pozo-menu-arrow { @@ -152,7 +142,6 @@ display: flex; justify-content: center; align-items: center; - color: #ffffffb4; @media (max-width: 500px) { font-size: 1rem !important; margin-right: 0; @@ -161,7 +150,7 @@ .pozo-menu-label { flex: 1; - color: #ffffffb4; + color: #ffffff; font-size: 12px; font-weight: 400; word-break: break-word; @@ -415,7 +404,7 @@ color: #fff; .pozo-menu-item { - color: rgba(255, 255, 255, 0.85); + color: #ffffffd9; &:hover { background: #1890ff; diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx index 3deda70..0ce872b 100644 --- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx +++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx @@ -45,7 +45,7 @@ import { FaParking, } from 'react-icons/fa'; import { CiMenuBurger } from 'react-icons/ci'; -import { IoCloseOutline } from 'react-icons/io5'; +import { IoClose, IoCloseOutline } from 'react-icons/io5'; import { FaCalendar } from 'react-icons/fa6'; import { RiPrinterFill } from 'react-icons/ri'; import { GiShoppingBag } from 'react-icons/gi'; @@ -542,6 +542,7 @@ const BSNavbar3 = ({ optionNames }) => { {renderWithTooltip(, 'Add Customer')} )} + {offerOption && ( diff --git a/src/Pages/SlotManagement/SlotManagement.jsx b/src/Pages/SlotManagement/SlotManagement.jsx index edd421b..7a720a9 100644 --- a/src/Pages/SlotManagement/SlotManagement.jsx +++ b/src/Pages/SlotManagement/SlotManagement.jsx @@ -24,7 +24,7 @@ import { Divider, TreeSelect, Avatar, - List + List, } from 'antd'; import { PlusOutlined, @@ -39,18 +39,25 @@ import { TeamOutlined, CloseCircleOutlined, UserOutlined, - EditOutlined + EditOutlined, } from '@ant-design/icons'; import moment from 'moment'; -import { getCategories, getProductListBasedSubcat, getSubCategories, GlobalCategories, GlobalProductBasedSubcat, GlobalSubCategories, PutSlotBlock } from '../../Features/SlotManagement/SlotManagement'; +import { + getCategories, + getProductListBasedSubcat, + getSubCategories, + GlobalCategories, + GlobalProductBasedSubcat, + GlobalSubCategories, + PutSlotBlock, +} from '../../Features/SlotManagement/SlotManagement'; import { getSession } from '../../Services/Others'; import { DropDowns } from '../../Components/Forms/DropDown'; import { InputField } from '../../Components/Forms/InputField'; -import "./SlotManagement.scss" +import './SlotManagement.scss'; import { changeBreadCrumb } from '../../Features/AppPage/CenterPage'; import Buttons from '../../Components/Forms/Buttons'; - const { Option } = Select; const { Panel } = Collapse; const { RangePicker } = DatePicker; @@ -67,7 +74,7 @@ const SlotManagementForm = () => { // UseSlectors const CategoriesData = useSelector(GlobalCategories); const SubCategoriesData = useSelector(GlobalSubCategories); - const ProductList = useSelector(GlobalProductBasedSubcat) + const ProductList = useSelector(GlobalProductBasedSubcat); // States const [form] = Form.useForm(); @@ -78,7 +85,7 @@ const SlotManagementForm = () => { const [actionMode, setActionMode] = useState(null); const [closureType, setClosureType] = useState(null); const [dateRange, setDateRange] = useState([]); - console.log(closureType, "closureType") + console.log(closureType, 'closureType'); const [selectedDays, setSelectedDays] = useState({ monday: false, tuesday: false, @@ -86,7 +93,7 @@ const SlotManagementForm = () => { thursday: false, friday: false, saturday: false, - sunday: false + sunday: false, }); const [priceChangeType, setPriceChangeType] = useState('full'); const [SlotChangeType, setSlotChangeType] = useState('all'); @@ -105,32 +112,31 @@ const SlotManagementForm = () => { const [slotPrices, setSlotPrices] = useState({}); const [types, setTypes] = useState([]); - const items = [ + const items = [ { name: 'Home', link: `${subDirectory}app-page/home`, }, - + { name: 'Slot Management', link: `${subDirectory}setting/slot-management-list`, }, ]; useEffect(() => { - try { - dispatch(changeBreadCrumb({ items: items })); - } catch (err) { - console.log(err, 'err'); - } - - }, []); + try { + dispatch(changeBreadCrumb({ items: items })); + } catch (err) { + console.log(err, 'err'); + } + }, []); // Mock data for branches const branches = [ { id: 1, name: 'Main Sports Center', address: '123 Main St, City' }, { id: 2, name: 'North Branch', address: '456 North Ave, City' }, { id: 3, name: 'South Complex', address: '789 South Rd, City' }, { id: 4, name: 'East Arena', address: '321 East Blvd, City' }, - { id: 5, name: 'West Facility', address: '654 West St, City' } + { id: 5, name: 'West Facility', address: '654 West St, City' }, ]; // Mock data for categories and sub-categories @@ -138,46 +144,104 @@ const SlotManagementForm = () => { { id: 1, name: 'Sports' }, { id: 2, name: 'Fitness' }, { id: 3, name: 'Wellness' }, - { id: 4, name: 'Entertainment' } + { id: 4, name: 'Entertainment' }, ]; const subCategories = { - 1: [ // Sports + 1: [ + // Sports { id: 101, name: 'Cricket' }, { id: 102, name: 'Football' }, { id: 103, name: 'Tennis' }, { id: 104, name: 'Badminton' }, - { id: 105, name: 'Swimming' } + { id: 105, name: 'Swimming' }, ], - 2: [ // Fitness + 2: [ + // Fitness { id: 201, name: 'Gym' }, { id: 202, name: 'Yoga' }, { id: 203, name: 'Zumba' }, - { id: 204, name: 'Pilates' } + { id: 204, name: 'Pilates' }, ], - 3: [ // Wellness + 3: [ + // Wellness { id: 301, name: 'Spa' }, { id: 302, name: 'Massage' }, - { id: 303, name: 'Meditation' } + { id: 303, name: 'Meditation' }, ], - 4: [ // Entertainment + 4: [ + // Entertainment { id: 401, name: 'Movie' }, - { id: 402, name: 'Games' } - ] + { id: 402, name: 'Games' }, + ], }; // Mock data for facilities const facilities = [ - { id: 1, name: 'Cricket Ground A', categoryId: 1, subCategoryId: 101, branchId: 1 }, - { id: 2, name: 'Cricket Ground B', categoryId: 1, subCategoryId: 101, branchId: 1 }, - { id: 3, name: 'Football Field', categoryId: 1, subCategoryId: 102, branchId: 2 }, - { id: 4, name: 'Tennis Court 1', categoryId: 1, subCategoryId: 103, branchId: 1 }, - { id: 5, name: 'Tennis Court 2', categoryId: 1, subCategoryId: 103, branchId: 3 }, - { id: 6, name: 'Badminton Court', categoryId: 1, subCategoryId: 104, branchId: 2 }, - { id: 7, name: 'Swimming Pool', categoryId: 1, subCategoryId: 105, branchId: 4 }, + { + id: 1, + name: 'Cricket Ground A', + categoryId: 1, + subCategoryId: 101, + branchId: 1, + }, + { + id: 2, + name: 'Cricket Ground B', + categoryId: 1, + subCategoryId: 101, + branchId: 1, + }, + { + id: 3, + name: 'Football Field', + categoryId: 1, + subCategoryId: 102, + branchId: 2, + }, + { + id: 4, + name: 'Tennis Court 1', + categoryId: 1, + subCategoryId: 103, + branchId: 1, + }, + { + id: 5, + name: 'Tennis Court 2', + categoryId: 1, + subCategoryId: 103, + branchId: 3, + }, + { + id: 6, + name: 'Badminton Court', + categoryId: 1, + subCategoryId: 104, + branchId: 2, + }, + { + id: 7, + name: 'Swimming Pool', + categoryId: 1, + subCategoryId: 105, + branchId: 4, + }, { id: 8, name: 'Gym Area', categoryId: 2, subCategoryId: 201, branchId: 1 }, - { id: 9, name: 'Yoga Studio', categoryId: 2, subCategoryId: 202, branchId: 2 }, - { id: 10, name: 'Spa Center', categoryId: 3, subCategoryId: 301, branchId: 1 } + { + id: 9, + name: 'Yoga Studio', + categoryId: 2, + subCategoryId: 202, + branchId: 2, + }, + { + id: 10, + name: 'Spa Center', + categoryId: 3, + subCategoryId: 301, + branchId: 1, + }, ]; // Mock data for coaches @@ -190,7 +254,7 @@ const SlotManagementForm = () => { categoryId: 1, subCategoryId: 101, facilities: [1, 2], - branchId: 1 + branchId: 1, }, { id: 2, @@ -200,7 +264,7 @@ const SlotManagementForm = () => { categoryId: 1, subCategoryId: 101, facilities: [1], - branchId: 1 + branchId: 1, }, { id: 3, @@ -210,7 +274,7 @@ const SlotManagementForm = () => { categoryId: 1, subCategoryId: 103, facilities: [4, 5], - branchId: 1 + branchId: 1, }, { id: 4, @@ -220,7 +284,7 @@ const SlotManagementForm = () => { categoryId: 1, subCategoryId: 102, facilities: [3], - branchId: 2 + branchId: 2, }, { id: 5, @@ -230,30 +294,67 @@ const SlotManagementForm = () => { categoryId: 1, subCategoryId: 105, facilities: [7], - branchId: 4 - } + branchId: 4, + }, ]; - // Closure types configuration const closureTypes = { block: [ - { value: 'full_branch', label: 'Full Branch Block', icon: , color: 'red' }, - { value: 'category', label: 'Category Block', icon: , color: 'orange' }, - { value: 'subcategory', label: 'Sub-Category Block', icon: , color: 'volcano' }, - { value: 'product', label: 'Facility Block', color: 'gold' } + { + value: 'full_branch', + label: 'Full Branch Block', + icon: , + color: 'red', + }, + { + value: 'category', + label: 'Category Block', + icon: , + color: 'orange', + }, + { + value: 'subcategory', + label: 'Sub-Category Block', + icon: , + color: 'volcano', + }, + { value: 'product', label: 'Facility Block', color: 'gold' }, ], priceChange: [ - - { value: 'product', label: 'Facility Price Change', icon: , color: 'purple' }, - + { + value: 'product', + label: 'Facility Price Change', + icon: , + color: 'purple', + }, ], holiday: [ - { value: 'full_branch', label: 'Full Branch Holiday', icon: , color: 'red' }, - { value: 'category', label: 'Category Holiday', icon: , color: 'orange' }, - { value: 'subcategory', label: 'Sub-Category Holiday', icon: , color: 'volcano' }, - { value: 'product', label: 'Facility Holiday', icon: , color: 'gold' } - ] + { + value: 'full_branch', + label: 'Full Branch Holiday', + icon: , + color: 'red', + }, + { + value: 'category', + label: 'Category Holiday', + icon: , + color: 'orange', + }, + { + value: 'subcategory', + label: 'Sub-Category Holiday', + icon: , + color: 'volcano', + }, + { + value: 'product', + label: 'Facility Holiday', + icon: , + color: 'gold', + }, + ], }; // const types = closureTypes[actionMode] || []; useEffect(() => { @@ -264,30 +365,28 @@ const SlotManagementForm = () => { AppId, }; dispatch(getCategories(baseData)); - } - , []); -useEffect(() => { - if(types?.length == 1){ - const singleOption = types[0]; - form.setFieldsValue({ closureType: singleOption.value }); - handleClosureTypeChange(singleOption.value); - } - -}, [types]); + }, []); + useEffect(() => { + if (types?.length == 1) { + const singleOption = types[0]; + form.setFieldsValue({ closureType: singleOption.value }); + handleClosureTypeChange(singleOption.value); + } + }, [types]); // Slot Price update useEffect(() => { - setSlotPrices(prev => { + setSlotPrices((prev) => { const updated = { ...prev }; - selectedSlots.forEach(slot => { + selectedSlots.forEach((slot) => { if (!updated[slot]) { updated[slot] = { fullSlotPrice: Number(newPrice) || 0, - individualPrice: Number(individualDefaultPrice) || 0 + individualPrice: Number(individualDefaultPrice) || 0, }; } }); // Remove prices for deselected slots - Object.keys(updated).forEach(slot => { + Object.keys(updated).forEach((slot) => { if (!selectedSlots.includes(slot)) { delete updated[slot]; } @@ -296,29 +395,29 @@ useEffect(() => { }); }, [selectedSlots, newPrice, individualDefaultPrice]); const handleFullSlotPriceChange = (slot, value) => { - setSlotPrices(prev => ({ + setSlotPrices((prev) => ({ ...prev, [slot]: { ...prev[slot], - fullSlotPrice: value - } + fullSlotPrice: value, + }, })); }; const handleIndividualPriceChange = (slot, value) => { - setSlotPrices(prev => ({ + setSlotPrices((prev) => ({ ...prev, [slot]: { ...prev[slot], - individualPrice: value - } + individualPrice: value, + }, })); }; // Day selection handlers const handleDayChange = (day) => { - setSelectedDays(prev => ({ + setSelectedDays((prev) => ({ ...prev, - [day]: !prev[day] + [day]: !prev[day], })); }; @@ -332,7 +431,7 @@ useEffect(() => { thursday: true, friday: true, saturday: true, - sunday: true + sunday: true, }); } else { setSelectedDays({ @@ -342,34 +441,38 @@ useEffect(() => { thursday: false, friday: false, saturday: false, - sunday: false + sunday: false, }); } }; // Update select all when individual days change useEffect(() => { - const allSelected = Object.values(selectedDays).every(day => day); + const allSelected = Object.values(selectedDays).every((day) => day); setSelectAllDays(allSelected); }, [selectedDays]); // Handle category change const handleCategoryChange = async (value) => { - console.log("Category value", value); + console.log('Category value', value); setSelectedCategory(value); form.setFieldsValue({ category: value, - }); - + // Fetch sub-categories based on selected category - let data = { CompId: CompId, BranchId: BranchId, AppId: AppId, ProdCat: value }; + let data = { + CompId: CompId, + BranchId: BranchId, + AppId: AppId, + ProdCat: value, + }; await dispatch(getSubCategories(data)); setSelectedSubCategory(null); setSelectedFacility(null); form.setFieldsValue({ subCategory: undefined, - facility: undefined + facility: undefined, }); }; @@ -378,9 +481,13 @@ useEffect(() => { setSelectedSubCategory(value); form.setFieldsValue({ subCategory: value, - }); - let data = { CompId: CompId, BranchId: BranchId, AppId: AppId, ProdSubCat: value }; + let data = { + CompId: CompId, + BranchId: BranchId, + AppId: AppId, + ProdSubCat: value, + }; await dispatch(getProductListBasedSubcat(data)); setSelectedFacility(null); form.setFieldsValue({ facility: undefined }); @@ -389,31 +496,37 @@ useEffect(() => { // Handle facility change const handleFacilityChange = (value) => { setSelectedFacility(value); - form.setFieldsValue({ + form.setFieldsValue({ facility: value, - }); // Auto-populate category and sub-category based on facility - const facilityData = ProductList.find(f => f.ProdId === value); + const facilityData = ProductList.find((f) => f.ProdId === value); - let datawithinward = facilityData?.ProductDetail?.[0]?.ProdVariantDetails?.flatMap(item => item.StockDetails.map(stock => ({ - ...item, - ProdInwardDtlId: stock.InwardDtlId, - }))) - setSlots(facilityData?.ProductDetail?.[0]?.ProdVariantDetails?.length > 0 ? datawithinward : []); + let datawithinward = + facilityData?.ProductDetail?.[0]?.ProdVariantDetails?.flatMap((item) => + item.StockDetails.map((stock) => ({ + ...item, + ProdInwardDtlId: stock.InwardDtlId, + })) + ); + setSlots( + facilityData?.ProductDetail?.[0]?.ProdVariantDetails?.length > 0 + ? datawithinward + : [] + ); }; // Handle coach change const handleCoachChange = (value) => { setSelectedCoach(value); // Auto-populate category, sub-category, and facility based on coach - const coachData = coaches.find(c => c.id === value); + const coachData = coaches.find((c) => c.id === value); if (coachData) { setSelectedCategory(coachData.categoryId); setSelectedSubCategory(coachData.subCategoryId); form.setFieldsValue({ category: coachData.categoryId, - subCategory: coachData.subCategoryId + subCategory: coachData.subCategoryId, }); } }; @@ -421,7 +534,7 @@ useEffect(() => { // Handle action mode change const handleActionModeChange = (value) => { setActionMode(value); - form.setFieldsValue({ actionMode: value }); + form.setFieldsValue({ actionMode: value }); setTypes(closureTypes[value] || []); setClosureType(null); setSlotChangeType('all'); @@ -440,7 +553,7 @@ useEffect(() => { setWeekendPrice(0); setIndividualSlotPrices({}); } - + if (value !== 'block' && value !== 'priceChange') { setSelectedSlots([]); } @@ -451,9 +564,9 @@ useEffect(() => { const handleClosureTypeChange = (value) => { setClosureType(value); form.setFieldsValue({ - closureType: value + closureType: value, }); - + // Reset selections when closure type changes setSelectedCategory(null); setSelectedSubCategory(null); @@ -468,16 +581,16 @@ useEffect(() => { subCategory: undefined, product: undefined, coach: undefined, - branches: undefined + branches: undefined, }); }; // Handle slot selection const handleSlotSelection = (slot) => { if (selectedSlots.includes(slot)) { - setSelectedSlots(selectedSlots.filter(s => s !== slot)); + setSelectedSlots(selectedSlots.filter((s) => s !== slot)); // Remove from individual prices when deselected - setIndividualSlotPrices(prev => { + setIndividualSlotPrices((prev) => { const newPrices = { ...prev }; delete newPrices[slot]; return newPrices; @@ -485,17 +598,17 @@ useEffect(() => { } else { setSelectedSlots([...selectedSlots, slot]); // Initialize with base price when selected - setIndividualSlotPrices(prev => ({ + setIndividualSlotPrices((prev) => ({ ...prev, - [slot]: newPrice || 0 + [slot]: newPrice || 0, })); } }; const to12Hour = (timeStr) => { - if (!timeStr) return ""; - let [h, m] = timeStr.split(":"); + if (!timeStr) return ''; + let [h, m] = timeStr.split(':'); h = parseInt(h, 10); - const suffix = h >= 12 ? "PM" : "AM"; + const suffix = h >= 12 ? 'PM' : 'AM'; h = h % 12 || 12; // 0 → 12 return `${h}${suffix}`; }; @@ -506,10 +619,10 @@ useEffect(() => { setSelectedSlots([]); setIndividualSlotPrices({}); } else { - setSelectedSlots([...Slots?.map(slot => slot.ProdInwardDtlId)]); + setSelectedSlots([...Slots?.map((slot) => slot.ProdInwardDtlId)]); // Initialize all with base price const initialPrices = {}; - Slots.forEach(slot => { + Slots.forEach((slot) => { initialPrices[slot] = newPrice || 0; }); setIndividualSlotPrices(initialPrices); @@ -518,16 +631,16 @@ useEffect(() => { // Handle individual slot price change const handleIndividualSlotPriceChange = (slot, price) => { - setIndividualSlotPrices(prev => ({ + setIndividualSlotPrices((prev) => ({ ...prev, - [slot]: price + [slot]: price, })); }; // Apply base price to all selected slots const applyBasePriceToAllSlots = () => { const updatedPrices = {}; - selectedSlots.forEach(slot => { + selectedSlots.forEach((slot) => { updatedPrices[slot] = newPrice; }); setIndividualSlotPrices(updatedPrices); @@ -542,7 +655,7 @@ useEffect(() => { thursday: 'Thu', friday: 'Fri', saturday: 'Sat', - sunday: 'Sun' + sunday: 'Sun', }; const selected = Object.entries(selectedDays) @@ -568,8 +681,12 @@ useEffect(() => { // Get closure type display text const getClosureTypeText = () => { - const allClosureTypes = [...closureTypes.block, ...closureTypes.priceChange, ...closureTypes.holiday]; - const type = allClosureTypes.find(t => t.value === closureType); + const allClosureTypes = [ + ...closureTypes.block, + ...closureTypes.priceChange, + ...closureTypes.holiday, + ]; + const type = allClosureTypes.find((t) => t.value === closureType); return type ? type.label : 'No Type Selected'; }; @@ -577,10 +694,12 @@ useEffect(() => { const getFilteredFacilities = () => { let filtered = facilities; if (selectedCategory) { - filtered = filtered.filter(f => f.categoryId === selectedCategory); + filtered = filtered.filter((f) => f.categoryId === selectedCategory); } if (selectedSubCategory) { - filtered = filtered.filter(f => f.subCategoryId === selectedSubCategory); + filtered = filtered.filter( + (f) => f.subCategoryId === selectedSubCategory + ); } return filtered; }; @@ -589,21 +708,22 @@ useEffect(() => { const getFilteredCoaches = () => { let filtered = coaches; if (selectedCategory) { - filtered = filtered.filter(c => c.categoryId === selectedCategory); + filtered = filtered.filter((c) => c.categoryId === selectedCategory); } if (selectedSubCategory) { - filtered = filtered.filter(c => c.subCategoryId === selectedSubCategory); + filtered = filtered.filter( + (c) => c.subCategoryId === selectedSubCategory + ); } return filtered; }; // Check if time slot selection should be shown const ShouldCategoryShow = () => { if (closureType !== 'full_branch' && actionMode && closureType) { - return true; } return false; - } + }; const ShouldSubCategoryShow = () => { if (actionMode && closureType && selectedCategory) { if (closureType === 'subcategory' || closureType === 'product') { @@ -611,11 +731,10 @@ useEffect(() => { } else { return false; } - } return false; - } + }; const ShouldFacilityShow = () => { if (actionMode && closureType && selectedSubCategory) { if (closureType === 'product') { @@ -623,11 +742,10 @@ useEffect(() => { } else { return false; } - } return false; - } + }; // Check if time slot selection should be shown const shouldShowTimeSlotSelection = () => { if (actionMode === 'block' || actionMode === 'priceChange') { @@ -645,20 +763,22 @@ useEffect(() => { }; const showslotselection = () => { if (actionMode === 'block' || actionMode === 'priceChange') { - - return dateRange?.length > 0 && closureType == 'product' && selectedFacility; + return ( + dateRange?.length > 0 && closureType == 'product' && selectedFacility + ); } return false; - } + }; // Check if reason input should be shown const shouldShowReasonInput = () => { - return actionMode === 'block' && closureType && closureType !== 'priceChange'; + return ( + actionMode === 'block' && closureType && closureType !== 'priceChange' + ); }; // Check if individual slot price table should be shown const shouldShowIndividualSlotPriceTable = () => { - return actionMode === 'priceChange' && - selectedSlots.length > 0; + return actionMode === 'priceChange' && selectedSlots.length > 0; }; // Apply management action @@ -666,7 +786,8 @@ useEffect(() => { if (!actionMode || !closureType || !dateRange || dateRange.length === 0) { Modal.error({ title: 'Validation Error', - content: 'Please fill all required fields: Slot Action, Activity Type, and Date Range', + content: + 'Please fill all required fields: Slot Action, Activity Type, and Date Range', }); return; } @@ -680,7 +801,10 @@ useEffect(() => { // return; // } - if ((closureType === 'category' || closureType === 'subcategory') && !selectedCategory) { + if ( + (closureType === 'category' || closureType === 'subcategory') && + !selectedCategory + ) { Modal.error({ title: 'Validation Error', content: `Please select category for ${closureType} `, @@ -696,7 +820,10 @@ useEffect(() => { return; } - if ((closureType === 'product' || closureType === 'individual_slot') && !selectedFacility) { + if ( + (closureType === 'product' || closureType === 'individual_slot') && + !selectedFacility + ) { Modal.error({ title: 'Validation Error', content: 'Please select facility', @@ -713,7 +840,10 @@ useEffect(() => { } // Check for day selection for time slot operations - if (shouldShowDaySelection() && !Object.values(selectedDays).some(day => day)) { + if ( + shouldShowDaySelection() && + !Object.values(selectedDays).some((day) => day) + ) { Modal.error({ title: 'Validation Error', content: 'Please select at least one day for time slot operations', @@ -722,7 +852,7 @@ useEffect(() => { } // Check for slot selection for individual time slot operations - if ((SlotChangeType === 'individual') && selectedSlots.length === 0) { + if (SlotChangeType === 'individual' && selectedSlots.length === 0) { Modal.error({ title: 'Validation Error', content: 'Please select at least one time slot', @@ -743,12 +873,17 @@ useEffect(() => { // if (priceChangeType === 'full') { // Check if all selected slots have valid prices - const invalidSlots = selectedSlots?.filter(slot => - !slotPrices[slot] || Number(slotPrices[slot]?.fullSlotPrice) <= 0 + const invalidSlots = selectedSlots?.filter( + (slot) => + !slotPrices[slot] || Number(slotPrices[slot]?.fullSlotPrice) <= 0 + ); + console.log( + selectedSlots?.filter( + (slot) => + !slotPrices[slot] || Number(slotPrices[slot]?.fullSlotPrice) <= 0 + ), + 'selectedSlots?.filter' ); - console.log(selectedSlots?.filter(slot => - !slotPrices[slot] || Number(slotPrices[slot]?.fullSlotPrice) <= 0 - ), "selectedSlots?.filter") if (invalidSlots.length > 0) { Modal.error({ title: 'Validation Error', @@ -768,60 +903,60 @@ useEffect(() => { return; } let slotDetails = { - "AppId": AppId, - "CompId": CompId, - "BranchId": BranchId, - "ModeOfException": SlotChangeType == 'individual' ? 'slot' : closureType, - "ExceptionType": actionMode, - "Reason": closureReason, - "IsHoliday": actionMode == "holiday" ? 'Y' : 'N', - "DayOfWeek": - Object.entries(selectedDays).filter(([_, selected]) => selected).map(([day]) => day), + AppId: AppId, + CompId: CompId, + BranchId: BranchId, + ModeOfException: SlotChangeType == 'individual' ? 'slot' : closureType, + ExceptionType: actionMode, + Reason: closureReason, + IsHoliday: actionMode == 'holiday' ? 'Y' : 'N', + DayOfWeek: Object.entries(selectedDays) + .filter(([_, selected]) => selected) + .map(([day]) => day), - "SlotDetails": + SlotDetails: SlotChangeType === 'individual' - ? selectedSlots?.map(inwardId => ({ - ProdCat: selectedCategory || null, - ProdSubCat: selectedSubCategory || null, - ProdId: selectedFacility || null, - InwardDtlId: inwardId, - ExceptionFrom: dateRange[0]?.format('YYYY-MM-DD'), - ExceptionTo: dateRange[1]?.format('YYYY-MM-DD'), - NewPrice: slotPrices[inwardId]?.fullSlotPrice || 0, - SinglePrice: slotPrices[inwardId]?.individualPrice || 0 - })) - : [ - { + ? selectedSlots?.map((inwardId) => ({ ProdCat: selectedCategory || null, ProdSubCat: selectedSubCategory || null, ProdId: selectedFacility || null, - InwardDtlId: null, + InwardDtlId: inwardId, ExceptionFrom: dateRange[0]?.format('YYYY-MM-DD'), ExceptionTo: dateRange[1]?.format('YYYY-MM-DD'), - NewPrice: newPrice || 0, - SinglePrice: individualDefaultPrice || 0 - } - ], - "UpdatedBy": UserId - } + NewPrice: slotPrices[inwardId]?.fullSlotPrice || 0, + SinglePrice: slotPrices[inwardId]?.individualPrice || 0, + })) + : [ + { + ProdCat: selectedCategory || null, + ProdSubCat: selectedSubCategory || null, + ProdId: selectedFacility || null, + InwardDtlId: null, + ExceptionFrom: dateRange[0]?.format('YYYY-MM-DD'), + ExceptionTo: dateRange[1]?.format('YYYY-MM-DD'), + NewPrice: newPrice || 0, + SinglePrice: individualDefaultPrice || 0, + }, + ], + UpdatedBy: UserId, + }; - console.log("Management Record", slotDetails); - let response = await dispatch(PutSlotBlock(slotDetails)).unwrap() - console.log("response", response); + console.log('Management Record', slotDetails); + let response = await dispatch(PutSlotBlock(slotDetails)).unwrap(); + console.log('response', response); if (response?.data?.statusCode == 1) { - navigate(`${subDirectory}setting/slot-management-list`, { + navigate(`${subDirectory}setting/slot-management-list`, { state: { Notiffy: { messageType: 'success', - messageData:`${getActionModeText()} - ${getClosureTypeText()} applied successfully!`, + messageData: `${getActionModeText()} - ${getClosureTypeText()} applied successfully!`, }, }, }); - // Modal.success({ - // title: 'Success', - // content: `${getActionModeText()} - ${getClosureTypeText()} applied successfully!`, - // }); - + // Modal.success({ + // title: 'Success', + // content: `${getActionModeText()} - ${getClosureTypeText()} applied successfully!`, + // }); } // Modal.success({ @@ -839,8 +974,13 @@ useEffect(() => { setClosureType(null); setDateRange([]); setSelectedDays({ - monday: false, tuesday: false, wednesday: false, thursday: false, - friday: false, saturday: false, sunday: false + monday: false, + tuesday: false, + wednesday: false, + thursday: false, + friday: false, + saturday: false, + sunday: false, }); setSelectedSlots([]); setSelectedBranches([]); @@ -862,32 +1002,47 @@ useEffect(() => { okText: 'Yes', cancelText: 'No', onOk() { - setManagementHistory(prev => prev.filter(record => record.id !== id)); - } + setManagementHistory((prev) => + prev.filter((record) => record.id !== id) + ); + }, }); }; // Toggle management record status const toggleManagementStatus = (id) => { - setManagementHistory(prev => prev.map(record => - record.id === id - ? { ...record, status: record.status === 'active' ? 'inactive' : 'active' } - : record - )); + setManagementHistory((prev) => + prev.map((record) => + record.id === id + ? { + ...record, + status: record.status === 'active' ? 'inactive' : 'active', + } + : record + ) + ); }; - // Calculate summary statistics const calculateSummary = () => { - const activeRecords = managementHistory.filter(record => record.status === 'active'); - const blockedSlots = activeRecords.filter(record => record.action === 'block').length; - const priceChanges = activeRecords.filter(record => record.action === 'priceChange').length; - const holidayBlocks = activeRecords.filter(record => record.action === 'holiday').length; + const activeRecords = managementHistory.filter( + (record) => record.status === 'active' + ); + const blockedSlots = activeRecords.filter( + (record) => record.action === 'block' + ).length; + const priceChanges = activeRecords.filter( + (record) => record.action === 'priceChange' + ).length; + const holidayBlocks = activeRecords.filter( + (record) => record.action === 'holiday' + ).length; // Count by closure type const closureTypeCounts = {}; - activeRecords.forEach(record => { - closureTypeCounts[record.closureType] = (closureTypeCounts[record.closureType] || 0) + 1; + activeRecords.forEach((record) => { + closureTypeCounts[record.closureType] = + (closureTypeCounts[record.closureType] || 0) + 1; }); return { @@ -895,14 +1050,12 @@ useEffect(() => { priceChanges, holidayBlocks, total: activeRecords.length, - closureTypeCounts + closureTypeCounts, }; }; const summary = calculateSummary(); - - // Slot price management columns const slotPriceColumns = [ { @@ -928,9 +1081,11 @@ useEffect(() => { value={slotPrices[record.slot]?.fullSlotPrice || 0} min={0} style={{ width: 120 }} - formatter={value => `₹ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} - parser={value => value.replace(/₹\s?|(,*)/g, '')} - onChange={value => handleFullSlotPriceChange(record.slot, value)} + formatter={(value) => + `₹ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } + parser={(value) => value.replace(/₹\s?|(,*)/g, '')} + onChange={(value) => handleFullSlotPriceChange(record.slot, value)} placeholder="Full Slot Price" /> ), @@ -944,40 +1099,38 @@ useEffect(() => { value={slotPrices[record.slot]?.individualPrice || 0} min={0} style={{ width: 120 }} - formatter={value => `₹ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} - parser={value => value.replace(/₹\s?|(,*)/g, '')} - onChange={value => handleIndividualPriceChange(record.slot, value)} + formatter={(value) => + `₹ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } + parser={(value) => value.replace(/₹\s?|(,*)/g, '')} + onChange={(value) => handleIndividualPriceChange(record.slot, value)} placeholder="Individual Price" /> ), }, ]; - + const BasicActionType = [ { label: 'Block', value: 'block', icon: }, { label: 'Price Change', value: 'priceChange', icon: }, { label: 'Holiday', value: 'holiday', icon: }, ]; const PriceTypeChange = (e) => { - setPriceChangeType(e.target.value) + setPriceChangeType(e.target.value); setNewPrice(null); - } + }; const SlotTypeChange = (e) => { - setSlotChangeType(e.target.value) - } + setSlotChangeType(e.target.value); + }; const navigatelist = () => { - navigate(`${subDirectory}setting/slot-management-list`) - } + navigate(`${subDirectory}setting/slot-management-list`); + }; return (
- -

- Slot Management -

- +

Slot Management

{/*
View SlotDetails @@ -996,16 +1149,17 @@ useEffect(() => {
- ({ value: option.value, - label: option.label + label: option.label, }))} label={} className="field-DropDown" @@ -1013,31 +1167,31 @@ useEffect(() => { // editstate?.UOM || SelectedUom ? true : false // } onChangeFunction={handleActionModeChange} - // valueData={SelectedUom} - // disabled={formType == 'edit' ? true : false} + // valueData={SelectedUom} + // disabled={formType == 'edit' ? true : false} />
- {actionMode && + {actionMode && (
({ value: option.value, - label: option.label + label: option.label, }))} label={} className="field-DropDown" - isOnchanges={ - closureType ? true : false - } + isOnchanges={closureType ? true : false} onChangeFunction={handleClosureTypeChange} valueData={closureType} - // disabled={formType == 'edit' ? true : false} + // disabled={formType == 'edit' ? true : false} /> {/* */}
- } - {closureType && + )} + {closureType && (
current && current < moment().startOf('day')} + disabledDate={(current) => + current && current < moment().startOf('day') + } />
- } + )} {/*
*/} -
{/* Closure Specific Fields */} -
- {ShouldCategoryShow() && +
+ {ShouldCategoryShow() && ( { ({ value: option.ProdCat, - label: option.ProdCatName + label: option.ProdCatName, }))} label={} className="field-DropDown" - isOnchanges={ - selectedCategory ? true : false - } + isOnchanges={selectedCategory ? true : false} onChangeFunction={handleCategoryChange} valueData={selectedCategory} - // disabled={formType == 'edit' ? true : false} + // disabled={formType == 'edit' ? true : false} /> - - } + )} {ShouldSubCategoryShow() && ( ({ value: option.ProdSubCat, - label: option.ProdSubCatName + label: option.ProdSubCatName, }))} label={} className="field-DropDown" - isOnchanges={ - selectedSubCategory ? true : false - } + isOnchanges={selectedSubCategory ? true : false} onChangeFunction={handleSubCategoryChange} valueData={selectedSubCategory} - // disabled={formType == 'edit' ? true : false} + // disabled={formType == 'edit' ? true : false} /> )} - {ShouldFacilityShow() && + {ShouldFacilityShow() && ( { ({ value: option.ProdId, - label: option.ProdName + label: option.ProdName, }))} label={} className="field-DropDown" - isOnchanges={ - selectedFacility ? true : false - } + isOnchanges={selectedFacility ? true : false} onChangeFunction={handleFacilityChange} valueData={selectedFacility} - // disabled={formType == 'edit' ? true : false} + // disabled={formType == 'edit' ? true : false} /> {/* */} - } - {showslotselection() && + )} + {showslotselection() && (
- + SlotTypeChange(e)} value={SlotChangeType} @@ -1182,7 +1331,7 @@ useEffect(() => {
- } + )}
{/* {renderClosureSpecificFields()} */} @@ -1190,9 +1339,13 @@ useEffect(() => { {/* Reason Input for Block Actions */} {shouldShowReasonInput() && ( Reason for Block} - rules={[{ required: true, message: 'Please provide a reason for the block' }]} + label={} + rules={[ + { + required: true, + message: 'Please provide a reason for the block', + }, + ]} >