Add API

frontend/dashboard/src/components/hook-form/RHFAutocomplete.tsx

@@ -0,0 +1,41 @@
+import { Autocomplete, TextField, TextFieldProps } from '@mui/material';
+import { useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+interface IProps {
+    options: any[];
+    name: string;
+    label?: string;
+}
+
+export default function RHFAutocomplete({ name, options, label, ...other }: IProps & TextFieldProps) {
+    const { control } = useFormContext();
+    console.log(control)
+    
+    const [value, setValue] = useState<string | null>(options[0]);
+    const [inputValue, setInputValue] = useState('');
+
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+                <Autocomplete
+                    {...field}
+                    options={options}
+                    value={value}
+                    onChange={(event: any, newValue: string | null) => {
+                        // console.log('fuck', newValue)
+                        setValue(newValue.id);
+                    }}
+                    inputValue={inputValue}
+                    onInputChange={(event, newInputValue) => {
+                        setInputValue(newInputValue);
+                    }}
+                    renderInput={(params) => <TextField {...params} label={label ?? name} />}
+                    {...other}
+                    />
+            )}
+        />
+    );
+}

frontend/dashboard/src/pages/Corporates/Form.tsx

@@ -41,6 +41,7 @@ import {
 import { Corporate } from '../../@types/corporates';
 import axios from '../../utils/axios';
 import { fCurrency } from '../../utils/formatNumber';
+import RHFAutocomplete from '../../components/hook-form/RHFAutocomplete';
 
 const LabelStyle = styled(Typography)(({ theme }) => ({
   ...theme.typography.subtitle2,
@@ -256,6 +257,22 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       "label" : "Sub Corporate"
     },
   ]
+
+  const options = [
+    {
+      "label" : "Something",
+      "id" : "Something"
+    },
+    {
+      "label" : "Syalalalal",
+      "id" : "Syalalalal"
+    },
+    {
+      "label" : "Lilili",
+      "id" : "Lilili"
+    },
+  ]
+
   const handleTypeChange = (event: SelectChangeEvent) => {
     setValue('type', event.target.value)
   }
@@ -269,6 +286,10 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
           <Card sx={{ p: 3 }}>
             <Stack spacing={3}>
               <Grid item xs={12}><Typography variant='h5'>Corporate Profile</Typography></Grid>
+              
+              {values.name}
+
+              <RHFAutocomplete name='name' label="Labelnya" options={options} />
 
               <RHFSelect name="type" label="Type" placeholder="Type">
                 <option value="" />