fix build npm issue

Author: NirajC-Microsoft

src/frontend/src/components/common/PlanCancellationDialog.tsx

@@ -8,6 +8,8 @@ import {
   DialogBody,
   DialogActions,
   Button,
+  DialogOpenChangeEvent,
+  DialogOpenChangeData
 } from '@fluentui/react-components';
 import { Warning20Regular } from '@fluentui/react-icons';
 import "../../styles/Panel.css";
@@ -29,7 +31,7 @@ const PlanCancellationDialog: React.FC<PlanCancellationDialogProps> = ({
   loading = false
 }) => {
   return (
-    <Dialog open={isOpen} onOpenChange={(_, data) => !data.open && onCancel()}>
+    <Dialog open={isOpen} onOpenChange={(_: DialogOpenChangeEvent, data: DialogOpenChangeData) => !data.open && onCancel()}>
       <DialogSurface>
         <DialogBody>
           <DialogTitle>

src/frontend/src/components/common/TeamSelector.tsx

@@ -19,7 +19,13 @@ import {
   RadioGroup,
   Tab,
   TabList,
-  Tooltip
+  Tooltip,
+  DialogOpenChangeEvent,
+  DialogOpenChangeData,
+  TabValue,
+  SelectTabEvent,
+  SelectTabData,
+  InputOnChangeData
 } from '@fluentui/react-components';
 import {
   ChevronUpDown16Regular,
@@ -474,15 +480,15 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
               size="small"
               disabled={true}
               className={`${styles.moreButton} ${styles.moreButtonDisabled || ''}`}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: React.MouseEvent) => e.stopPropagation()}
             />
           </Tooltip>
         ) : (
           <Button
             icon={<MoreHorizontal20Regular />}
             appearance="subtle"
             size="small"
-            onClick={(e) => handleDeleteTeam(team, e)}
+            onClick={(e: React.MouseEvent) => handleDeleteTeam(team, e)}
             className={styles.moreButton}
           />
         )}
@@ -492,7 +498,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
 
   return (
     <>
-      <Dialog open={isOpen} onOpenChange={(event, data) => handleOpenChange(data.open)}>
+      <Dialog open={isOpen} onOpenChange={(event: DialogOpenChangeEvent, data: DialogOpenChangeData) => handleOpenChange(data.open)}>
         <DialogTrigger disableButtonEnhancement>
           <Button
             appearance="subtle"
@@ -527,7 +533,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
                 <TabList
                   className={styles.tabList}
                   selectedValue={activeTab}
-                  onTabSelect={(event, data) => setActiveTab(data.value as string)}
+                  onTabSelect={(event: SelectTabEvent, data: SelectTabData) => setActiveTab(data.value as string)}
                 >
                   <Tab
                     value="teams"
@@ -559,7 +565,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
                           className={styles.searchInput}
                           placeholder="Search teams..."
                           value={searchQuery}
-                          onChange={(e, data) => {
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
                             console.log('Search changed:', data.value);
                             setSearchQuery(data.value || '');
                           }}
@@ -716,7 +722,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
         </DialogSurface>
       </Dialog>
 
-      <Dialog open={deleteConfirmOpen} onOpenChange={(event, data) => setDeleteConfirmOpen(data.open)}>
+      <Dialog open={deleteConfirmOpen} onOpenChange={(event: DialogOpenChangeEvent, data: DialogOpenChangeData) => setDeleteConfirmOpen(data.open)}>
         <DialogSurface className={styles.deleteDialogSurface}>
           <DialogContent className={styles.deleteDialogContent}>
             <DialogBody className={styles.deleteDialogBody}>

src/frontend/src/coral/components/PromptCard.tsx

@@ -37,14 +37,14 @@ const PromptCard: React.FC<PromptCardProps> = ({
         transition: "background-color 0.2s ease-in-out",
       }}
       // 🧠 Only apply hover if not disabled
-      onMouseOver={(e) => {
+      onMouseOver={(e: React.MouseEvent<HTMLDivElement>) => {
         if (!disabled) {
           e.currentTarget.style.backgroundColor =
             "var(--colorNeutralBackground3Hover)";
             e.currentTarget.style.border = "1px solid var(--colorNeutralStroke1)"; // subtle shadow on hover
         }
       }}
-      onMouseOut={(e) => {
+      onMouseOut={(e: React.MouseEvent<HTMLDivElement>) => {
         if (!disabled) {
           e.currentTarget.style.backgroundColor =
             "var(--colorNeutralBackground3)";