Add jit admin

src/components/CippCards/CippButtonCard.jsx

@@ -1,12 +1,18 @@
 import React from "react";
-import { Card, CardHeader, CardContent, CardActions, Skeleton } from "@mui/material";
+import { Card, CardHeader, CardContent, CardActions, Skeleton, Box } from "@mui/material";
 
 export default function CippButtonCard({ title, CardButton, children, isFetching = false }) {
   return (
-    <Card sx={{ width: "100%" }}>
-      <CardHeader title={title} />
-      <CardContent sx={{ padding: "1rem" }}>{isFetching ? <Skeleton /> : children}</CardContent>
-      {CardButton && <CardActions>{CardButton}</CardActions>}
-    </Card>
+    <Box
+      sx={{
+        py: 4,
+      }}
+    >
+      <Card>
+        <CardHeader title={title} />
+        <CardContent>{isFetching ? <Skeleton /> : children}</CardContent>
+        {CardButton && <CardActions>{CardButton}</CardActions>}
+      </Card>
+    </Box>
   );
 }

src/components/CippCards/CippChartCard.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import {
   Box,
   Card,

src/components/CippComponents/CippAutocomplete.jsx

@@ -81,7 +81,7 @@ export const CippAutoComplete = (props) => {
   return (
     <Autocomplete
       key={defaultValue}
-      disabled={disabled}
+      disabled={disabled || actionGetRequest.isFetching}
       popupIcon={
         props.isFetching || actionGetRequest.isFetching ? (
           <CircularProgress color="inherit" size={20} />

src/components/CippComponents/CippFormComponent.jsx

@@ -1,4 +1,14 @@
-import { Radio, Switch, TextField, Typography, Checkbox, FormControlLabel } from "@mui/material";
+import {
+  Radio,
+  Switch,
+  TextField,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+  RadioGroup,
+} from "@mui/material";
 import { CippAutoComplete } from "./CippAutocomplete";
 import { Controller, useFormState } from "react-hook-form";
 import { DateTimePicker } from "@mui/x-date-pickers"; // Make sure to install @mui/x-date-pickers
@@ -104,9 +114,23 @@ export const CippFormComponent = (props) => {
     case "radio":
       return (
         <>
-          <div>
-            <Radio {...other} {...formControl.register(name, { ...validators })} label={label} />
-          </div>
+          <FormControl>
+            <FormLabel>{label}</FormLabel>
+            <RadioGroup {...other}>
+              {props.options.map((option, idx) => {
+                return (
+                  <FormControlLabel
+                    key={`${option.value}-${idx}`}
+                    value={option.value}
+                    defaultValue={option.value}
+                    control={<Radio />}
+                    label={option.label}
+                    {...formControl.register(name, { ...validators })}
+                  />
+                );
+              })}
+            </RadioGroup>
+          </FormControl>
           <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message

src/components/CippComponents/CippFormCondition.jsx

@@ -2,8 +2,7 @@ import { useWatch } from "react-hook-form";
 
 export const CippFormCondition = (props) => {
   const { field, compareType = "is", compareValue, children, formControl } = props;
-  const watcher = useWatch({ control: formControl.control, name: field });
-
+  let watcher = useWatch({ control: formControl.control, name: field });
   switch (compareType) {
     case "is":
       if (watcher === compareValue) {

src/components/CippComponents/CippFormDomainSelector.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { CippFormComponent } from "./CippFormComponent";
+import { useWatch } from "react-hook-form";
+
+export const CippFormDomainSelector = ({
+  formControl,
+  name,
+  label,
+  allTenants = false,
+  type = "multiple",
+  ...other
+}) => {
+  const currentTenant = useWatch({ control: formControl.control, name: "tenantFilter" });
+  return (
+    <CippFormComponent
+      name={name}
+      label={label}
+      type="autoComplete"
+      formControl={formControl}
+      multiple={false}
+      api={{
+        autoSelectFirstItem: true,
+        tenantFilter: currentTenant?.value,
+        queryKey: `ListDomains-${currentTenant?.value}`,
+        url: "/api/ListGraphRequest",
+        dataKey: "Results",
+        labelField: (option) => `${option.id}`,
+        valueField: "id",
+        data: {
+          Endpoint: "domains",
+          manualPagination: true,
+          $count: true,
+          $top: 99,
+        },
+      }}
+    />
+  );
+};

src/components/CippComponents/CippFormTenantSelector.jsx

@@ -1,7 +1,12 @@
 import React from "react";
 import { CippFormComponent } from "./CippFormComponent";
 
-export const CippFormTenantSelector = ({ formControl, allTenants = false, type = "multiple" }) => {
+export const CippFormTenantSelector = ({
+  formControl,
+  allTenants = false,
+  type = "multiple",
+  ...other
+}) => {
   return (
     <CippFormComponent
       type="autoComplete"
@@ -20,6 +25,7 @@ export const CippFormTenantSelector = ({ formControl, allTenants = false, type =
       validators={{
         required: { value: true, message: "This field is required" },
       }}
+      {...other}
     />
   );
 };

src/components/CippComponents/CippFormUserSelector.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { CippFormComponent } from "./CippFormComponent";
+import { useWatch } from "react-hook-form";
+
+export const CippFormUserSelector = ({
+  formControl,
+  name,
+  label,
+  allTenants = false,
+  multiple = false,
+  type = "multiple",
+  ...other
+}) => {
+  const currentTenant = useWatch({ control: formControl.control, name: "tenantFilter" });
+  return (
+    <CippFormComponent
+      name={name}
+      label={label}
+      type="autoComplete"
+      formControl={formControl}
+      multiple={multiple}
+      api={{
+        tenantFilter: currentTenant ? currentTenant.value : undefined,
+        url: "/api/ListGraphRequest",
+        dataKey: "Results",
+        labelField: (option) => `${option.displayName} (${option.userPrincipalName})`,
+        valueField: "id",
+        queryKey: `ListUsers-${currentTenant?.value}`,
+        data: {
+          Endpoint: "users",
+          manualPagination: true,
+          $select: "id,userPrincipalName,displayName",
+          $count: true,
+          $orderby: "displayName",
+          $top: 999,
+        },
+      }}
+    />
+  );
+};

src/components/CippFormPages/CippFormPage.jsx

@@ -0,0 +1,72 @@
+import { useRouter } from "next/router";
+import {
+  Box,
+  Container,
+  Stack,
+  Button,
+  SvgIcon,
+  Typography,
+  Card,
+  CardContent,
+  CardActions,
+} from "@mui/material";
+import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
+import Head from "next/head";
+
+const CippFormPage = (props) => {
+  const { title, backButtonTitle, formPageType = "Add", children, formControl, ...other } = props;
+  const router = useRouter();
+
+  const handleBackClick = () => {
+    router.back(); // Navigate to the previous page when the button is clicked
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <Box
+        sx={{
+          flexGrow: 1,
+          py: 4,
+        }}
+      >
+        <Container maxWidth="lg">
+          <Stack spacing={4}>
+            <Stack spacing={2}>
+              <div>
+                <Button
+                  color="inherit"
+                  onClick={handleBackClick} // Go back to the previous page
+                  startIcon={
+                    <SvgIcon fontSize="small">
+                      <ArrowLeftIcon />
+                    </SvgIcon>
+                  }
+                >
+                  {backButtonTitle}
+                </Button>
+              </div>
+              <div>
+                <Typography variant="h4">
+                  {formPageType} - {title}
+                </Typography>
+              </div>
+            </Stack>
+            <Card>
+              <CardContent>{children}</CardContent>
+              <CardActions sx={{ justifyContent: "flex-end" }}>
+                <Button type="submit" variant="contained">
+                  Submit
+                </Button>
+              </CardActions>
+            </Card>
+          </Stack>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default CippFormPage;