add create formularium func

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx

@@ -8,19 +8,156 @@ import useSettings from '../../../../hooks/useSettings';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../../utils/axios';
-import { LaravelPaginatedData } from '../../../../@types/paginated-data';
-import { Icd } from '../../../../@types/diagnosis';
-import BasePagination from '../../../../components/BasePagination';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import InfoDetail from "./InfoDetail";
 import { DetailCorpFormularium } from "./Types";
-import DialogUpdateStatus from '../../DialogUpdateStatus';
-
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
+import { RHFSelect, FormProvider } from '@/components/hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import { CorporateFormulariumList } from "./Types";
 
 export default function CategoryDetail(props: DetailCorpFormularium) {
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+  
   const [open, setOpen] = React.useState(false);
   const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState<CorporateFormulariumList | null>(null);
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+
+  const handleActivate = (isOpen: boolean, dataValue: CorporateFormulariumList) => {
+    console.log(dataValue)
+    setDialogOpen(isOpen)
+    setDataValue(dataValue)
+    setDescriptionValue('Are you sure to inactive this service ?')
+    setUrl(url)
+  };
+
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema)
+  })
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = async (row : any) => {
+    try {
+      handleUpdate(dataValue?.active, dataValue?.id) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+  
+  const handleUpdate = (active: string, id: number) => {
+    console.log(active)
+    axios
+      .put(`/corporates/${id}/formulariums-update-status/${id}`, {
+        active: active, 
+        reason: reason
+      })
+      .then((res) => {
+        window.location.reload();
+      });
+  }
+  
+  const getContent = () => (
+    <>
+      <Stack paddingX={2} paddingY={2}>
+        <Typography variant='subtitle1'>Are you sure to {dataValue?.active === "1" ? 'Inactive' : 'Active'} this Formularium ?</Typography>
+        <Stack>
+          <Card>
+            <Grid container paddingX={2} paddingY={2}>
+              <Grid item xs={5} md={5}>
+                <Typography variant='inherit'>Formularium Name</Typography>
+              </Grid>
+              <Grid item xs={7}>
+                <Typography variant='subtitle1'>{dataValue?.category}</Typography>
+              </Grid>
+            </Grid>
+          </Card>
+
+          <Typography marginTop={5} marginBottom={3} variant='subtitle1'>Reason for Update</Typography>
+          <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+            <RHFSelect 
+            name='reason'
+            label="Reason for update"
+            >
+              <option value=""></option>
+              <option value="Agreement changed">Agreement changed</option>
+              <option value="Endorsement">Endorsement</option>
+              <option value="Renewal">Renewal</option>
+              <option value="Wrong Setting">Wrong Setting</option>
+            </RHFSelect>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{xs: 'column', md: 'row'}}
+              spacing={2}
+              marginTop={5}
+            >
+              <Stack direction="row" spacing={1}>
+                <Button
+                  sx={{ boxShadow: 'none'}}
+                  variant='outlined'
+                  size='medium'
+                  fullWidth={true}
+                  onClick={() => setDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                {dataValue?.active == "1" ?
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='error'
+                  >
+                    Inactive
+                  </LoadingButton> :
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='success'
+                  >
+                    Active
+                  </LoadingButton>
+                }
+              </Stack>
+            </Stack>
+          </FormProvider>
+        </Stack>
+      </Stack>
+    </>
+  );
 
   return (
     <React.Fragment>
@@ -41,7 +178,14 @@ export default function CategoryDetail(props: DetailCorpFormularium) {
                     <FindInPageOutlined />
                     Detail
                   </MenuItem>
-                  <MenuItem onClick={() => setDialogOpen(!isDialogOpen)}>
+                  <MenuItem onClick={() => handleActivate(true, {
+                    id: 0,
+                    formulaurium_category_id: 0,
+                    category: '-',
+                    description: '-',
+                    active: '1'
+                  })
+                  }>
                     <CachedOutlined />
                     Update Status
                   </MenuItem>
@@ -59,11 +203,14 @@ export default function CategoryDetail(props: DetailCorpFormularium) {
         </TableRow>
 
         {/* TODO: dialog update status */}
-        {/* <DialogUpdateStatus 
+        <DialogUpdateStatus 
           openDialog={isDialogOpen} 
-          setOpenDialog={setDialogOpen}
-          id={0}
-        /> */}
+          setOpenDialog={setDialogOpen} 
+          description={dataDescription}
+          title={titles}
+          data={dataValue}
+          content={getContent()}
+        />
     </React.Fragment>
   )
 }

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

@@ -1,26 +1,56 @@
+import * as Yup from 'yup';
 import { useForm } from "react-hook-form";
 import { FormProvider, RHFSelect } from "../../../../components/hook-form";
 import { Button, Card, Grid, Typography } from "@mui/material";
 import { Stack, fontWeight } from "@mui/system";
 import { useNavigate, useParams } from "react-router";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { DetailCorpFormularium } from "./Types";
 import axios from "@/utils/axios";
+import { LoadingButton } from "@mui/lab";
+import { enqueueSnackbar } from "notistack";
+import { yupResolver } from '@hookform/resolvers/yup';
 
 
 export default function CorporateFormulariumCreateForm() {
   const navigate = useNavigate();
   const { corporate_id } = useParams();
-  const methods = useForm([
-    // methods Logic??
-  ]);
+
+  const NewCorporaeFormulariumSchema = Yup.object().shape({
+    id: Yup.string().required('required'),
+  });
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporaeFormulariumSchema),
+  });
 
   const onSubmit = async (data: any) => {
-    // logic onSubmit
+    await axios
+      .post(`/corporates/${corporate_id}/formulariums`, data)
+      .then((res) => {
+        console.log(res.data.message)
+        enqueueSnackbar('Formularium created successfully', { variant: 'success'})
+      })
+      .then((res) => {
+        navigate(`/corporates/${corporate_id}/formulariums/`, { replace: true })
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) {
+            setError(key, {message: value[0]});
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed: '+ response.data.message, { variant: "error"})
+        }
+      });
   };
 
   const {
+    setError,
     handleSubmit,
+    formState: { isSubmitting }
   } = methods;
 
   // Data Dummy
@@ -47,15 +77,10 @@ export default function CorporateFormulariumCreateForm() {
         <Card sx={{p:2}}>
           <Stack spacing={3}>
             <Typography variant="h6">Formularium Name*</Typography>
-            <RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
-              {/* {options.map((option, index) => (
-                <option key={index} value={option}>
-                  {option}
-                </option>
-              ))} */}
+            <RHFSelect name="id" label="Category" placeholder="Category" fullWidth={true}>
               <option value=""/>
               {dataDropdownData?.map((item, index) => (
-                <option key={index} value={item.name}>
+                <option key={index} value={item.id}>
                   {item.name}
                 </option>
               ))}
@@ -79,7 +104,9 @@ export default function CorporateFormulariumCreateForm() {
               Cancel
             </Button>
             
-            <Button
+            <LoadingButton
+              loading={isSubmitting}
+              type='submit'
               variant="contained"
               sx={{
                 p: 1,
@@ -93,7 +120,7 @@ export default function CorporateFormulariumCreateForm() {
               }}
             >
               Create
-            </Button>
+            </LoadingButton>
           </Grid>
         </Stack>
       </Grid>