diff --git a/src/components/dashboard/Officer_EventRequestForm.astro b/src/components/dashboard/Officer_EventRequestForm.astro index 00b0bf4..3b010b1 100644 --- a/src/components/dashboard/Officer_EventRequestForm.astro +++ b/src/components/dashboard/Officer_EventRequestForm.astro @@ -59,21 +59,9 @@ const fileManager = FileManager.getInstance();
- { - // This will be handled in the client-side script - document.dispatchEvent( - new CustomEvent("tap-section-change", { - detail: data, - }), - ); - }} - /> -
- -
@@ -122,45 +110,8 @@ const fileManager = FileManager.getInstance(); // Form visibility logic const form = document.getElementById("eventRequestForm") as HTMLFormElement; const prSection = document.getElementById("prSection"); - const asFundingSection = document.getElementById("asFundingSection"); const needsGraphicsRadios = document.getElementsByName("needsGraphics"); - // Debug log for initial state - console.log("Initial ASFundingSection state:", { - element: asFundingSection, - isHidden: asFundingSection?.classList.contains("hidden"), - display: asFundingSection?.style.display, - }); - - // Handle TAPSection changes - document.addEventListener("tap-section-change", (event: any) => { - const data = event.detail; - console.log("TAP section change event received:", data); - - if (asFundingSection) { - console.log("Found ASFundingSection element"); - if (data.as_funding_required) { - console.log("Showing AS Funding section"); - asFundingSection.classList.remove("hidden"); - asFundingSection.style.removeProperty("display"); - // Force a reflow - void asFundingSection.offsetHeight; - } else { - console.log("Hiding AS Funding section"); - asFundingSection.classList.add("hidden"); - asFundingSection.style.display = "none"; - } - - // Log the state after change - console.log("ASFundingSection state after change:", { - isHidden: asFundingSection.classList.contains("hidden"), - display: asFundingSection.style.display, - }); - } else { - console.error("ASFundingSection element not found"); - } - }); - // Show/hide PR section based on radio selection needsGraphicsRadios.forEach((radio) => { radio.addEventListener("change", (e) => { diff --git a/src/components/dashboard/Officer_EventRequestForm/TAPSection.tsx b/src/components/dashboard/Officer_EventRequestForm/TAPSection.tsx index edb75b0..57e92b0 100644 --- a/src/components/dashboard/Officer_EventRequestForm/TAPSection.tsx +++ b/src/components/dashboard/Officer_EventRequestForm/TAPSection.tsx @@ -9,9 +9,10 @@ import { Icon } from '@iconify/react'; interface TAPSectionProps { onDataChange?: (data: any) => void; onASFundingChange?: (enabled: boolean) => void; + children?: React.ReactNode; } -const TAPSection: React.FC = ({ onDataChange, onASFundingChange }) => { +const TAPSection: React.FC = ({ onDataChange, onASFundingChange, children }) => { const [expectedAttendance, setExpectedAttendance] = useState(0); const [roomBooking, setRoomBooking] = useState(''); const [needsASFunding, setNeedsASFunding] = useState(false); @@ -34,14 +35,12 @@ const TAPSection: React.FC = ({ onDataChange, onASFundingChange }; const handleASFundingChange = (enabled: boolean) => { - console.log('AS Funding change:', enabled); setNeedsASFunding(enabled); if (!enabled) { setNeedsFoodDrinks(false); onDataChange?.({ needs_food_drinks: false }); } onASFundingChange?.(enabled); - console.log('Sending data change:', { as_funding_required: enabled }); onDataChange?.({ as_funding_required: enabled }); toast(enabled ? 'AS Funding enabled - please fill out funding details.' : 'AS Funding disabled', { @@ -56,206 +55,227 @@ const TAPSection: React.FC = ({ onDataChange, onASFundingChange }; return ( - -
- - - TAP Form - - -
- + +
+ -
- - -
- -
- -
+ + TAP Form + -
- handleAttendanceChange(Number(e.target.value))} - required - /> -
- +
+ +
+ + +
+ +
+ +
- -
- - -
- -
- -
- - - -
- handleRoomBookingChange(e.target.value)} - required - /> -
- - - -
- - -
- -
- -
- -
-
+ - - {needsASFunding && ( - -
- - -
- -
- -
+ +
+ + +
+ +
+ +
-
- - -
- - )} - +
+ + +
+ + + + {needsASFunding && ( + +
+ + +
+ +
+ +
+ +
+ + +
+ + )} + +
-
- + + + + {needsASFunding && ( + + {children} + + )} + + ); }; diff --git a/src/components/dashboard/Officer_EventRequestForm/Tooltip.tsx b/src/components/dashboard/Officer_EventRequestForm/Tooltip.tsx index 604658a..5c9a983 100644 --- a/src/components/dashboard/Officer_EventRequestForm/Tooltip.tsx +++ b/src/components/dashboard/Officer_EventRequestForm/Tooltip.tsx @@ -8,6 +8,8 @@ interface TooltipProps { children: React.ReactNode; className?: string; position?: 'top' | 'bottom' | 'left' | 'right'; + icon?: string; + maxWidth?: string; } const positionStyles = { @@ -18,10 +20,10 @@ const positionStyles = { }; const arrowStyles = { - top: 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-base-300 border-l-transparent border-r-transparent border-b-transparent', - bottom: 'top-[-6px] left-1/2 -translate-x-1/2 border-b-base-300 border-l-transparent border-r-transparent border-t-transparent', - left: 'right-[-6px] top-1/2 -translate-y-1/2 border-l-base-300 border-t-transparent border-b-transparent border-r-transparent', - right: 'left-[-6px] top-1/2 -translate-y-1/2 border-r-base-300 border-t-transparent border-b-transparent border-l-transparent' + top: 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-base-200 border-l-transparent border-r-transparent border-b-transparent', + bottom: 'top-[-6px] left-1/2 -translate-x-1/2 border-b-base-200 border-l-transparent border-r-transparent border-t-transparent', + left: 'right-[-6px] top-1/2 -translate-y-1/2 border-l-base-200 border-t-transparent border-b-transparent border-r-transparent', + right: 'left-[-6px] top-1/2 -translate-y-1/2 border-r-base-200 border-t-transparent border-b-transparent border-l-transparent' }; export const Tooltip: React.FC = ({ @@ -29,7 +31,9 @@ export const Tooltip: React.FC = ({ description, children, className = '', - position = 'top' + position = 'left', + icon = 'mdi:information', + maxWidth = '350px' }) => { const [isVisible, setIsVisible] = React.useState(false); @@ -48,13 +52,21 @@ export const Tooltip: React.FC = ({ initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} - transition={{ duration: 0.1 }} - className={`absolute z-50 min-w-[320px] max-w-md p-4 bg-base-100 border border-base-300 rounded-lg shadow-lg ${positionStyles[position]}`} + transition={{ + duration: 0.15, + ease: 'easeOut' + }} + style={{ maxWidth }} + className={`absolute z-50 p-3 bg-base-200/95 border border-base-300 rounded-lg shadow-lg backdrop-blur-sm + ${positionStyles[position]}`} > -
-
-

{title}

-

{description}

+
+
+ +
+

{title}

+

{description}

+
)}