adding heroui 3

client/package.json

@@ -14,7 +14,8 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.0",
-    "@heroui/react": "^2.8.5",
+    "@heroui/react": "^3.0.0-beta.2",
+    "@heroui/styles": "^3.0.0-beta.2",
     "@noahspan/noahspan-components": "^2.0.0-alpha-14",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.13",
@@ -25,8 +26,8 @@
     "framer-motion": "^12.23.24",
     "leaflet": "^1.9.4",
     "oidc-spa": "^7.2.4",
-    "react": "^19.1.1",
+    "react": "^19.2.0",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.51.4",
     "react-leaflet": "^4",
     "react-leaflet-kml": "^2.1.2",

client/src/App.tsx

@@ -3,21 +3,20 @@ import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
 import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
-import { HeroUIProvider } from '@heroui/react';
 import { useHref, useNavigate } from 'react-router-dom';
 
 const App = () => {
   const navigate = useNavigate();
 
   return (
-    <HeroUIProvider navigate={navigate} useHref={useHref}>
+    <>
       <SiteNav />
       <Routes>
         <Route path='/' element={<Flights />} />
         <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
       </Routes>
-    </HeroUIProvider>
+    </>
   );
 };
 

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionItem, Card, CardBody, CardHeader } from '@heroui/react'
+import { Accordion, AccordionItem, Card, CardContent, CardHeader } from '@heroui/react'
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
 
@@ -15,7 +15,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
               <CardHeader>
                 <h2 className='font-bold text-2xl'>{formattedDate}</h2>
               </CardHeader>
-              <CardBody>    
+              <CardContent>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
                   <div className='mb-5'>
                     <TrackMap
@@ -25,8 +25,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                     />
                   </div>
                 }
-                <Accordion variant='bordered'>
+                <Accordion variant='surface'>
-                  <AccordionItem key='1' title='Details'>
+                  <AccordionItem key='1'>
                     <div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
                       <div className='col-span-6 font-bold'>
                         <span>Aircraft Make and Model</span>
@@ -66,7 +66,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                   </AccordionItem>
                 </Accordion>
 
-              </CardBody>
+              </CardContent>
             </Card>
           </div>
         )

client/src/components/logbookDrawer/LogbookDrawer.tsx

@@ -102,36 +102,35 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 </div>
               )}
               <Tabs 
-                color='default'
-                fullWidth={true}
                 onSelectionChange={onSelectedKeyChanged}
                 selectedKey={activeTab as string}
-                variant='solid'
               >
-                <Tab
+                <Tabs.ListContainer>
-                  key='time'
+                  <Tabs.List>
-                  title={
+                    <Tabs.Tab
-                    <div className="flex items-center space-x-2">
+                      id='time'
+                    >
                       <FontAwesomeIcon icon={faClock} />
-                      <span>Time</span>
+                      Time
-                    </div>
+                      <Tabs.Indicator />
-                  }
+                    </Tabs.Tab>
-                >
-                  <LogForm />
-                </Tab>
                     {logbookContext.state.formMode !== FormMode.ADD &&
-                  <Tab
+                      <Tabs.Tab
-                    key='tracks'
+                        id='tracks'
-                    title={
-                      <div className="flex items-center space-x-2">
-                        <FontAwesomeIcon icon={faMapLocationDot} />
-                        <span>Tracks</span>
-                      </div>
-                    }
                       >
-                    <TracksForm />
+                        <FontAwesomeIcon icon={faMapLocationDot} />
-                  </Tab>
+                        Tracks
+                        <Tabs.Indicator />
+                      </Tabs.Tab>
                     }
+                  </Tabs.List>
+                </Tabs.ListContainer>
+                <Tabs.Panel id='time'>
+                  <LogForm />
+                </Tabs.Panel>
+                <Tabs.Panel id='tracks'>
+                  <TracksForm />
+                </Tabs.Panel>
               </Tabs>
             </DrawerBody>
             {activeTab !== 'tracks' &&
@@ -139,24 +138,24 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 <div className='grid grid-cols-12 gap-3'>
                   <div className='col-span-12 justify-self-end self-center'>
                     <Button
-                      disabled={
+                      isDisabled={
                         logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
                           ? logbookContext.state.isFormDisabled
                           : false
                       }
-                      startContent={<FontAwesomeIcon icon={faXmark} />}
                       onPress={onCancel}
                     >
+                      <FontAwesomeIcon icon={faXmark} />
                       {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
                     </Button>
                     {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
                       <Button
                         className='ml-[10px]'
-                        color='primary'
+                        isDisabled={logbookContext.state.isFormDisabled}
-                        disabled={logbookContext.state.isFormDisabled}
-                        startContent={<FontAwesomeIcon icon={faSave} />}
                         type="submit"
+                        variant='primary'
                       >
+                        <FontAwesomeIcon icon={faSave} />
                         Save
                       </Button>
                     )}

client/src/components/pilots/Pilots.tsx

@@ -10,7 +10,7 @@ import { UserRole } from '../../enums/userRole';
 import httpClient from '../../httpClient/httpClient'
 import { ScreenSize } from '../../enums/screenSize';
 import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
-import { Alert, Button, Dropdown, DropdownItem, DropdownSection, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell, DropdownTrigger, DropdownMenu } from '@heroui/react'
+import { Alert, Button, Dropdown, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
 
@@ -133,38 +133,40 @@ const Pilots: React.FC<unknown> = () => {
       case 'actions': {
         return (
           <Dropdown>
-            <DropdownTrigger>
+            <Dropdown.Trigger>
-              <Button isIconOnly variant='light' size='lg'>
+              <Button isIconOnly size='lg'>
                 <FontAwesomeIcon icon={faEllipsisVertical} />
               </Button>
-            </DropdownTrigger>
+            </Dropdown.Trigger>
-            <DropdownMenu>
+            <Dropdown.Popover>
-              <DropdownSection showDivider>
+              <Dropdown.Menu>
-                <DropdownItem 
+                <Dropdown.Section>
+                  <Dropdown.Item 
                     key='edit'
                     onPress={() => onOpenClosePilotForm(FormMode.EDIT, pilot.id)}
-                  startContent={<FontAwesomeIcon icon={faPen} />}
                   >
+                    <FontAwesomeIcon icon={faPen} />
                     Edit
-                </DropdownItem>
+                  </Dropdown.Item>
-                <DropdownItem 
+                  <Dropdown.Item 
                     key='view'
                     onPress={() => onOpenClosePilotForm(FormMode.VIEW, pilot.id)}
-                  startContent={<FontAwesomeIcon icon={faEye} />}  
                   >
+                    <FontAwesomeIcon icon={faEye} />
                     View
-                </DropdownItem>
+                  </Dropdown.Item>
-              </DropdownSection>
+                </Dropdown.Section>
-                <DropdownSection>
+                  <Dropdown.Section>
-                  <DropdownItem 
+                    <Dropdown.Item 
                       key='Delete'
                       onPress={() => onDeletePilot(pilot.id)}
-                    startContent={<FontAwesomeIcon icon={faTrash} />}
                     >
+                      <FontAwesomeIcon icon={faTrash} />
                       Delete
-                  </DropdownItem>
+                    </Dropdown.Item>
-                </DropdownSection>
+                  </Dropdown.Section>
-            </DropdownMenu>
+              </Dropdown.Menu>
+            </Dropdown.Popover>
           </Dropdown>
         )
       }

client/src/components/tracksForm/TracksForm.tsx

@@ -120,7 +120,7 @@ const TracksForm = () => {
           return (
             <>
               <div className='col-span-10'>
-                <Input isDisabled={state.isDisabled} key={index} type='text' value={filename}/>
+                <Input disabled={state.isDisabled} key={index} type='text' value={filename}/>
               </div>
               <div className='col-span-2'>
                 <Button isDisabled={state.isDisabled} key={index} isIconOnly onPress={() => onDeleteTrack(track.id, filename, index)}><FontAwesomeIcon icon={faTrash} /></Button>

client/src/globals.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@import "@heroui/styles";
+@plugin "@tailwindcss/typography";
+
+
+
+
+
+

client/src/main.tsx

@@ -5,7 +5,7 @@ import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import LogbookContextProvider from './context/logbookContext/LogbookContextProvider.tsx'
 import { BrowserRouter } from 'react-router-dom';
 import { OidcProvider } from './auth/oidcConfig.ts';
-import './styles.css';
+import './globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <OidcProvider>

client/src/styles.css

@@ -1,15 +0,0 @@
-@import "tailwindcss";
-@plugin './hero.ts';
-/* Note: You may need to change the path to fit your project structure */
-@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
-@plugin "@tailwindcss/typography";
-
-@theme inline {
-  --color-primary: #000000;
-}
-
-
-
-
-