adding pilot

app/package.json

@@ -16,16 +16,13 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "^3.9.0",
+    "@noahspan/noahspan-components": "^0.5.9",
-    "@noahspan/noahspan-components": "^0.5.7",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.0"
-    "yup": "^1.4.0",
-    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@microsoft/microsoft-graph-types": "^2.40.0",

app/src/components/pilotForm/PilotForm.tsx

@@ -1,5 +1,10 @@
 import { useState } from 'react';
-import { useForm, Controller, FormProvider } from 'react-hook-form';
+import {
+  useForm,
+  Controller,
+  FormProvider,
+  FieldValues
+} from 'react-hook-form';
 import {
   Button,
   DatePicker,
@@ -11,70 +16,31 @@ import {
   Option,
   PeoplePicker,
   Select,
+  StateSelect,
   Typography
 } from '@noahspan/noahspan-components';
+import { IPilotFormProps } from './IPilotFormProps';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
 import { Person } from '@microsoft/microsoft-graph-types';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import { IPilotFormCertificates } from '../pilotFormCertificates/IPilotFormCertificates';
 import { IPilotFormEndorsements } from '../pilotFormEndorsements/IPilotFormEndorsements';
 
-interface PilotFormSchema {
+const PilotForm: React.FC<IPilotFormProps> = ({
-  id: string;
-  name: string;
-  address: string;
-  city: string;
-  state: string;
-  postalCode: string;
-  email: string;
-  phone: string;
-  lastReview: string;
-  certificates: IPilotFormCertificates[];
-  endorsements: IPilotFormEndorsements[];
-  medicalClass: string;
-  medicalExpiration: string;
-}
-
-const schema = z.object({
-  id: z.string(),
-  name: z.string(),
-  address: z.string(),
-  city: z.string(),
-  state: z.string(),
-  postalCode: z.string(),
-  email: z.string(),
-  phone: z.string(),
-  lastReview: z.string(),
-  // certificates: z.array(),
-  // endorsements: z.array(),
-  medicalClass: z.string(),
-  medicalExpiration: z.string()
-});
-
-interface PilotFormProps {
-  isDrawerOpen: boolean;
-  onOpenCloseDrawer: () => void;
-}
-
-const PilotForm: React.FC<PilotFormProps> = ({
   isDrawerOpen,
   onOpenCloseDrawer
-}: PilotFormProps) => {
+}: IPilotFormProps) => {
   const httpClient: AxiosInstance = useHttpClient();
   const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
   const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
     useState<boolean>(false);
   const { getAccessToken } = useAccessToken();
-  const methods = useForm<PilotFormSchema>({
+  const methods = useForm();
-    resolver: zodResolver(schema)
-  });
 
-  const onSubmit = (data: PilotFormSchema) => {
+  const onSubmit = (data) => {
     console.log(data);
   };
 
@@ -122,7 +88,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <hr className="my-3" />
               </div>
               <div className="col-span-1">
-                <Typography variant="h6">Name</Typography>
+                <Typography variant="h6">Name *</Typography>
               </div>
               <div className="col-span-3">
                 <Controller
@@ -151,6 +117,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <Controller
                   name="address"
                   control={methods.control}
+                  rules={{ required: true }}
                   render={({ field }) => (
                     <Input
                       className="!border-t-blue-gray-200 focus:!border-t-gray-900"
@@ -169,6 +136,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <Controller
                   name="city"
                   control={methods.control}
+                  rules={{ required: true }}
                   render={({ field }) => (
                     <Input
                       labelProps={{
@@ -187,12 +155,13 @@ const PilotForm: React.FC<PilotFormProps> = ({
                   name="state"
                   control={methods.control}
                   render={({ field }) => (
-                    <Input
+                    // <Input
-                      labelProps={{
+                    //   labelProps={{
-                        className: 'before:content-none after:content-none'
+                    //     className: 'before:content-none after:content-none'
-                      }}
+                    //   }}
-                      {...field}
+                    //   {...field}
-                    />
+                    // />
+                    <StateSelect variant="outlined" />
                   )}
                 />
               </div>
@@ -203,6 +172,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <Controller
                   name="postalCode"
                   control={methods.control}
+                  rules={{ required: true }}
                   render={({ field }) => (
                     <Input
                       labelProps={{
@@ -220,6 +190,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <Controller
                   name="email"
                   control={methods.control}
+                  rules={{ required: true }}
                   render={({ field }) => (
                     <Input
                       labelProps={{
@@ -237,6 +208,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
                 <Controller
                   name="phone"
                   control={methods.control}
+                  rules={{ required: true }}
                   render={({ field }) => (
                     <Input
                       labelProps={{

package-lock.json

@@ -74,16 +74,13 @@
         "@fortawesome/free-regular-svg-icons": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@hookform/resolvers": "^3.9.0",
+        "@noahspan/noahspan-components": "^0.5.9",
-        "@noahspan/noahspan-components": "^0.5.7",
         "axios": "^1.7.2",
         "framer-motion": "^11.1.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.4",
-        "react-router-dom": "^6.23.0",
+        "react-router-dom": "^6.23.0"
-        "yup": "^1.4.0",
-        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@microsoft/microsoft-graph-types": "^2.40.0",
@@ -100,28 +97,6 @@
         "node": ">=18.0.0"
       }
     },
-    "app/node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "app/node_modules/yup": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
-      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
-      "dependencies": {
-        "property-expr": "^2.0.5",
-        "tiny-case": "^1.0.3",
-        "toposort": "^2.0.2",
-        "type-fest": "^2.19.0"
-      }
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -2301,14 +2276,6 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
-    "node_modules/@hookform/resolvers": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
-      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
-      "peerDependencies": {
-        "react-hook-form": "^7.0.0"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3418,9 +3385,9 @@
       "link": true
     },
     "node_modules/@noahspan/noahspan-components": {
-      "version": "0.5.7",
+      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.5.9.tgz",
-      "integrity": "sha512-OrLqSVHWcN9XgP430NWPUiqc/XzWW9cpFOIrG3RW+LYnUG2uGo9GiDphvrKkeXuh+nzsAaZQ9TC2JQ+IrGp7Hw==",
+      "integrity": "sha512-McUwtMGvs13h0Jq1R2vxcRWh4c41xSwK54NbdKJhPAKfZ9GRjwWHCtxhrh43XG4SeI4GJGlnLpAw4+D6UTsmaQ==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -13166,14 +13133,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "tests": {
       "version": "1.0.0",
       "license": "ISC",