From 2a345880740466a3fcfd90cd20f29ff00ff50eab Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Thu, 20 Feb 2025 01:46:56 -0800
Subject: [PATCH] fix some errors

---
 .../dashboard/Officer_EventRequestForm.astro  |  55 +--
 .../Officer_EventRequestForm/TAPSection.tsx   | 406 +++++++++---------
 .../Officer_EventRequestForm/Tooltip.tsx      |  34 +-
 3 files changed, 239 insertions(+), 256 deletions(-)

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();
     </div>
 
     <div id="tapSection">
-      <TAPSection
-        client:load
-        onDataChange={(data) => {
-          // This will be handled in the client-side script
-          document.dispatchEvent(
-            new CustomEvent("tap-section-change", {
-              detail: data,
-            }),
-          );
-        }}
-      />
-    </div>
-
-    <div id="asFundingSection" class="hidden">
-      <ASFundingSection client:load />
+      <TAPSection client:load>
+        <ASFundingSection client:load />
+      </TAPSection>
     </div>
 
     <div class="flex justify-end space-x-4 mt-8">
@@ -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<TAPSectionProps> = ({ onDataChange, onASFundingChange }) => {
+const TAPSection: React.FC<TAPSectionProps> = ({ onDataChange, onASFundingChange, children }) => {
     const [expectedAttendance, setExpectedAttendance] = useState<number>(0);
     const [roomBooking, setRoomBooking] = useState<string>('');
     const [needsASFunding, setNeedsASFunding] = useState<boolean>(false);
@@ -34,14 +35,12 @@ const TAPSection: React.FC<TAPSectionProps> = ({ 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<TAPSectionProps> = ({ onDataChange, onASFundingChange
     };
 
     return (
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="card bg-base-100/95 backdrop-blur-md shadow-lg hover:shadow-xl transition-all duration-300"
-        >
-            <div className="card-body">
-                <motion.h2
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ delay: 0.2 }}
-                    className="card-title text-xl mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent flex items-center gap-2"
-                >
-                    <Icon icon="mdi:clipboard-text-outline" className="h-6 w-6" />
-                    TAP Form
-                </motion.h2>
-
-                <div className="space-y-8">
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.4 }}
-                        className="form-control w-full"
+        <>
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="card bg-base-100/95 backdrop-blur-md shadow-lg hover:shadow-xl transition-all duration-300"
+            >
+                <div className="card-body">
+                    <motion.h2
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.2 }}
+                        className="card-title text-xl mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent flex items-center gap-2"
                     >
-                        <div className="flex items-center justify-between mb-2">
-                            <label className="label">
-                                <span className="label-text font-medium text-lg flex items-center gap-2">
-                                    <Icon icon="mdi:account-group" className="h-5 w-5 text-primary" />
-                                    Expected Attendance
-                                </span>
-                            </label>
-                            <Tooltip
-                                title={tooltips.attendance.title}
-                                description={tooltips.attendance.description}
-                                position="left"
-                            >
-                                <div className="badge badge-primary badge-outline p-3 cursor-help">
-                                    <Icon icon="mdi:information-outline" className="h-4 w-4" />
-                                </div>
-                            </Tooltip>
-                        </div>
+                        <Icon icon="mdi:clipboard-text-outline" className="h-6 w-6" />
+                        TAP Form
+                    </motion.h2>
 
-                        <div className="relative group">
-                            <input
-                                type="number"
-                                min="0"
-                                className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
-                                value={expectedAttendance || ''}
-                                onChange={(e) => handleAttendanceChange(Number(e.target.value))}
-                                required
-                            />
-                        </div>
-                    </motion.div>
+                    <div className="space-y-8">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.4 }}
+                            className="form-control w-full"
+                        >
+                            <div className="flex items-center justify-between mb-2">
+                                <label className="label">
+                                    <span className="label-text font-medium text-lg flex items-center gap-2">
+                                        <Icon icon="mdi:account-group" className="h-5 w-5 text-primary" />
+                                        Expected Attendance
+                                    </span>
+                                </label>
+                                <Tooltip
+                                    title={tooltips.attendance.title}
+                                    description={tooltips.attendance.description}
+                                    position="left"
+                                >
+                                    <div className="badge badge-primary badge-outline p-3 cursor-help">
+                                        <Icon icon="mdi:information-outline" className="h-4 w-4" />
+                                    </div>
+                                </Tooltip>
+                            </div>
 
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.5 }}
-                        className="form-control w-full"
-                    >
-                        <div className="flex items-center justify-between mb-2">
-                            <label className="label">
-                                <span className="label-text font-medium text-lg flex items-center gap-2">
-                                    <Icon icon="mdi:office-building-outline" className="h-5 w-5 text-primary" />
-                                    Room Booking
-                                </span>
-                            </label>
-                            <Tooltip
-                                title={tooltips.room.title}
-                                description={tooltips.room.description}
-                                position="left"
-                            >
-                                <div className="badge badge-primary badge-outline p-3 cursor-help">
-                                    <Icon icon="mdi:information-outline" className="h-4 w-4" />
-                                </div>
-                            </Tooltip>
-                        </div>
-
-                        <InfoCard
-                            title={infoNotes.room.title}
-                            items={infoNotes.room.items}
-                            type="info"
-                            className="mb-4"
-                        />
-
-                        <div className="relative group">
-                            <input
-                                type="text"
-                                placeholder="Enter room number and building (e.g. EBU1 2315)"
-                                className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
-                                value={roomBooking}
-                                onChange={(e) => handleRoomBookingChange(e.target.value)}
-                                required
-                            />
-                        </div>
-                    </motion.div>
-
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.6 }}
-                        className="form-control w-full"
-                    >
-                        <div className="flex items-center justify-between mb-2">
-                            <label className="label">
-                                <span className="label-text font-medium text-lg flex items-center gap-2">
-                                    <Icon icon="mdi:cash" className="h-5 w-5 text-primary" />
-                                    AS Funding
-                                </span>
-                            </label>
-                            <Tooltip
-                                title={tooltips.asFunding.title}
-                                description={tooltips.asFunding.description}
-                                position="left"
-                            >
-                                <div className="badge badge-primary badge-outline p-3 cursor-help">
-                                    <Icon icon="mdi:information-outline" className="h-4 w-4" />
-                                </div>
-                            </Tooltip>
-                        </div>
-
-                        <div className="flex flex-col gap-2">
-                            <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                            <div className="relative group">
                                 <input
-                                    type="radio"
-                                    name="as_funding"
-                                    className="radio radio-primary"
-                                    checked={needsASFunding}
-                                    onChange={() => handleASFundingChange(true)}
+                                    type="number"
+                                    min="0"
+                                    className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
+                                    value={expectedAttendance || ''}
+                                    onChange={(e) => handleAttendanceChange(Number(e.target.value))}
+                                    required
                                 />
-                                <span className="label-text">Yes, I need AS Funding</span>
-                            </label>
-                            <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                            </div>
+                        </motion.div>
+
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.5 }}
+                            className="form-control w-full"
+                        >
+                            <div className="flex items-center justify-between mb-2">
+                                <label className="label">
+                                    <span className="label-text font-medium text-lg flex items-center gap-2">
+                                        <Icon icon="mdi:office-building-outline" className="h-5 w-5 text-primary" />
+                                        Room Booking
+                                    </span>
+                                </label>
+                                <Tooltip
+                                    title={tooltips.room.title}
+                                    description={tooltips.room.description}
+                                    position="left"
+                                >
+                                    <div className="badge badge-primary badge-outline p-3 cursor-help">
+                                        <Icon icon="mdi:information-outline" className="h-4 w-4" />
+                                    </div>
+                                </Tooltip>
+                            </div>
+
+                            <InfoCard
+                                title={infoNotes.room.title}
+                                items={infoNotes.room.items}
+                                type="info"
+                                className="mb-4"
+                            />
+
+                            <div className="relative group">
                                 <input
-                                    type="radio"
-                                    name="as_funding"
-                                    className="radio radio-primary"
-                                    checked={!needsASFunding}
-                                    onChange={() => handleASFundingChange(false)}
+                                    type="text"
+                                    placeholder="Enter room number and building (e.g. EBU1 2315)"
+                                    className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
+                                    value={roomBooking}
+                                    onChange={(e) => handleRoomBookingChange(e.target.value)}
+                                    required
                                 />
-                                <span className="label-text">No, I don't need AS Funding</span>
-                            </label>
-                        </div>
-                    </motion.div>
+                            </div>
+                        </motion.div>
 
-                    <AnimatePresence mode="wait">
-                        {needsASFunding && (
-                            <motion.div
-                                initial={{ opacity: 0, height: 0 }}
-                                animate={{ opacity: 1, height: 'auto' }}
-                                exit={{ opacity: 0, height: 0 }}
-                                transition={{ duration: 0.3 }}
-                                className="form-control w-full overflow-hidden"
-                            >
-                                <div className="flex items-center justify-between mb-2">
-                                    <label className="label">
-                                        <span className="label-text font-medium text-lg flex items-center gap-2">
-                                            <Icon icon="mdi:food" className="h-5 w-5 text-primary" />
-                                            Food/Drinks
-                                        </span>
-                                    </label>
-                                    <Tooltip
-                                        title={tooltips.food.title}
-                                        description={tooltips.food.description}
-                                        position="left"
-                                    >
-                                        <div className="badge badge-primary badge-outline p-3 cursor-help">
-                                            <Icon icon="mdi:information-outline" className="h-4 w-4" />
-                                        </div>
-                                    </Tooltip>
-                                </div>
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.6 }}
+                            className="form-control w-full"
+                        >
+                            <div className="flex items-center justify-between mb-2">
+                                <label className="label">
+                                    <span className="label-text font-medium text-lg flex items-center gap-2">
+                                        <Icon icon="mdi:cash" className="h-5 w-5 text-primary" />
+                                        AS Funding
+                                    </span>
+                                </label>
+                                <Tooltip
+                                    title={tooltips.asFunding.title}
+                                    description={tooltips.asFunding.description}
+                                    position="left"
+                                >
+                                    <div className="badge badge-primary badge-outline p-3 cursor-help">
+                                        <Icon icon="mdi:information-outline" className="h-4 w-4" />
+                                    </div>
+                                </Tooltip>
+                            </div>
 
-                                <div className="flex flex-col gap-2">
-                                    <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
-                                        <input
-                                            type="radio"
-                                            name="food_drinks"
-                                            className="radio radio-primary"
-                                            checked={needsFoodDrinks}
-                                            onChange={() => handleFoodDrinksChange(true)}
-                                        />
-                                        <span className="label-text">Yes, I need food/drinks</span>
-                                    </label>
-                                    <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
-                                        <input
-                                            type="radio"
-                                            name="food_drinks"
-                                            className="radio radio-primary"
-                                            checked={!needsFoodDrinks}
-                                            onChange={() => handleFoodDrinksChange(false)}
-                                        />
-                                        <span className="label-text">No, I don't need food/drinks</span>
-                                    </label>
-                                </div>
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
+                            <div className="flex flex-col gap-2">
+                                <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                                    <input
+                                        type="radio"
+                                        name="as_funding"
+                                        className="radio radio-primary"
+                                        checked={needsASFunding}
+                                        onChange={() => handleASFundingChange(true)}
+                                    />
+                                    <span className="label-text">Yes, I need AS Funding</span>
+                                </label>
+                                <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                                    <input
+                                        type="radio"
+                                        name="as_funding"
+                                        className="radio radio-primary"
+                                        checked={!needsASFunding}
+                                        onChange={() => handleASFundingChange(false)}
+                                    />
+                                    <span className="label-text">No, I don't need AS Funding</span>
+                                </label>
+                            </div>
+                        </motion.div>
+
+                        <AnimatePresence mode="wait">
+                            {needsASFunding && (
+                                <motion.div
+                                    initial={{ opacity: 0, height: 0 }}
+                                    animate={{ opacity: 1, height: 'auto' }}
+                                    exit={{ opacity: 0, height: 0 }}
+                                    transition={{ duration: 0.3 }}
+                                    className="form-control w-full overflow-hidden"
+                                >
+                                    <div className="flex items-center justify-between mb-2">
+                                        <label className="label">
+                                            <span className="label-text font-medium text-lg flex items-center gap-2">
+                                                <Icon icon="mdi:food" className="h-5 w-5 text-primary" />
+                                                Food/Drinks
+                                            </span>
+                                        </label>
+                                        <Tooltip
+                                            title={tooltips.food.title}
+                                            description={tooltips.food.description}
+                                            position="left"
+                                        >
+                                            <div className="badge badge-primary badge-outline p-3 cursor-help">
+                                                <Icon icon="mdi:information-outline" className="h-4 w-4" />
+                                            </div>
+                                        </Tooltip>
+                                    </div>
+
+                                    <div className="flex flex-col gap-2">
+                                        <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                                            <input
+                                                type="radio"
+                                                name="food_drinks"
+                                                className="radio radio-primary"
+                                                checked={needsFoodDrinks}
+                                                onChange={() => handleFoodDrinksChange(true)}
+                                            />
+                                            <span className="label-text">Yes, I need food/drinks</span>
+                                        </label>
+                                        <label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
+                                            <input
+                                                type="radio"
+                                                name="food_drinks"
+                                                className="radio radio-primary"
+                                                checked={!needsFoodDrinks}
+                                                onChange={() => handleFoodDrinksChange(false)}
+                                            />
+                                            <span className="label-text">No, I don't need food/drinks</span>
+                                        </label>
+                                    </div>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
                 </div>
-            </div>
-        </motion.div>
+            </motion.div>
+
+            <AnimatePresence mode="popLayout">
+                {needsASFunding && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0, y: -20 }}
+                        animate={{ opacity: 1, height: 'auto', y: 0 }}
+                        exit={{ opacity: 0, height: 0, y: -20 }}
+                        transition={{
+                            duration: 0.3,
+                            height: { duration: 0.4 },
+                            opacity: { duration: 0.3 },
+                            y: { duration: 0.3 }
+                        }}
+                        className="mt-8"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </>
     );
 };
 
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<TooltipProps> = ({
@@ -29,7 +31,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
     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<TooltipProps> = ({
                         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]}`}
                     >
-                        <div className={`absolute w-0 h-0 border-4 ${arrowStyles[position]}`} />
-                        <div className="space-y-2">
-                            <p className="font-medium text-base">{title}</p>
-                            <p className="text-sm leading-relaxed text-base-content/80">{description}</p>
+                        <div className={`absolute w-0 h-0 border-[6px] ${arrowStyles[position]}`} />
+                        <div className="flex items-start gap-2">
+                            <Icon icon={icon} className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
+                            <div>
+                                <h3 className="font-medium text-base text-base-content">{title}</h3>
+                                <p className="text-sm leading-relaxed text-base-content/80 mt-0.5 whitespace-pre-wrap">{description}</p>
+                            </div>
                         </div>
                     </motion.div>
                 )}