[pull] main from KelvinTegelaar:main

.gitignore

@@ -31,3 +31,4 @@ app.log
 
 # AI rules
 .*/rules
+AGENTS.md

package.json

@@ -89,6 +89,8 @@
     "react-leaflet": "5.0.0",
     "react-leaflet-markercluster": "^5.0.0-rc.0",
     "react-markdown": "10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^3.0.1",
     "react-media-hook": "^0.5.0",
     "react-papaparse": "^4.4.0",
     "react-quill": "^2.0.0",
@@ -112,4 +114,4 @@
     "eslint": "9.35.0",
     "eslint-config-next": "15.5.2"
   }
-}
+}

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.5.2"
-}
+  "version": "8.6.0"
+}

src/api/ApiCall.jsx

@@ -21,6 +21,8 @@ export function ApiGetCall(props) {
     refetchOnReconnect = true,
     keepPreviousData = false,
     refetchInterval = false,
+    responseType = "json",
+    convertToDataUrl = false,
   } = props;
   const queryClient = useQueryClient();
   const dispatch = useDispatch();
@@ -107,9 +109,22 @@ export function ApiGetCall(props) {
           headers: {
             "Content-Type": "application/json",
           },
+          responseType: responseType,
         });
+
+        let responseData = response.data;
+
+        // Convert blob to data URL if requested
+        if (convertToDataUrl && responseType === "blob" && response.data) {
+          responseData = await new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.readAsDataURL(response.data);
+          });
+        }
+
         if (onResult) {
-          onResult(response.data); // Emit each result as it arrives
+          onResult(responseData); // Emit each result as it arrives
         }
         if (relatedQueryKeys) {
           const clearKeys = Array.isArray(relatedQueryKeys) ? relatedQueryKeys : [relatedQueryKeys];
@@ -137,7 +152,7 @@ export function ApiGetCall(props) {
             });
           }, 1000);
         }
-        return response.data;
+        return responseData;
       }
     },
     staleTime: staleTime,

src/components/CippComponents/CippAddEditTenantGroups.jsx

@@ -1,53 +1,96 @@
 import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
-import { Stack, Typography } from "@mui/material";
-import CippFormSection from "/src/components/CippFormPages/CippFormSection";
+import { Typography } from "@mui/material";
+import { Grid } from "@mui/system";
 import { CippFormTenantSelector } from "./CippFormTenantSelector";
+import { CippFormCondition } from "./CippFormCondition";
+import CippTenantGroupRuleBuilder from "./CippTenantGroupRuleBuilder";
 
-const CippAddEditTenantGroups = ({ formControl, initialValues, title, backButtonTitle }) => {
+const CippAddEditTenantGroups = ({ formControl, initialValues, title, backButtonTitle, hideSubmitButton = false }) => {
   return (
-    <CippFormSection
-      formControl={formControl}
-      title={title}
-      backButtonTitle={backButtonTitle}
-      postUrl="/api/ExecTenantGroup"
-      relatedQueryKeys={["TenantGroupListPage"]}
-      resetForm={false}
-      customDataformatter={(values) => {
-        return {
-          ...values,
-          Action: "AddEdit",
-        };
-      }}
-      initialValues={initialValues}
-    >
+    <>
       <Typography variant="h6">Properties</Typography>
-      <Stack spacing={1} sx={{ mt: 2 }}>
-        <CippFormComponent
-          type="textField"
-          name="groupName"
-          label="Group Name"
-          placeholder="Enter the name for this group."
-          formControl={formControl}
-          required
-        />
-        <CippFormComponent
-          type="textField"
-          name="groupDescription"
-          label="Group Description"
-          placeholder="Enter a description for this group."
-          formControl={formControl}
-        />
-        <CippFormTenantSelector
-          formControl={formControl}
-          multiple={true}
-          required={false}
-          disableClearable={false}
-          name="members"
-          valueField="customerId"
-          placeholder="Select members to add to this group."
-        />
-      </Stack>
-    </CippFormSection>
+      <Grid container spacing={2} sx={{ mt: 1 }}>
+        <Grid size={{ xs: 12 }}>
+          <CippFormComponent
+            type="textField"
+            name="groupName"
+            label="Group Name"
+            placeholder="Enter the name for this group."
+            formControl={formControl}
+            required
+            fullWidth
+            validators={{
+              required: "Group name is required",
+              minLength: {
+                value: 2,
+                message: "Group name must be at least 2 characters long"
+              }
+            }}
+          />
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <CippFormComponent
+            type="textField"
+            name="groupDescription"
+            label="Group Description"
+            placeholder="Enter a description for this group."
+            formControl={formControl}
+            fullWidth
+          />
+        </Grid>
+
+        {/* Group Type Selection */}
+        <Grid size={{ xs: 12 }}>
+          <CippFormComponent
+            type="radio"
+            name="groupType"
+            label="Group Type"
+            options={[
+              { label: "Static", value: "static" },
+              { label: "Dynamic", value: "dynamic" }
+            ]}
+            formControl={formControl}
+            required
+            defaultValue="static"
+          />
+        </Grid>
+
+        {/* Static Group Members - Show only when Static is selected */}
+        <Grid size={{ xs: 12 }}>
+          <CippFormCondition
+            formControl={formControl}
+            field="groupType"
+            compareType="is"
+            compareValue="static"
+          >
+            <CippFormTenantSelector
+              formControl={formControl}
+              multiple={true}
+              required={false}
+              disableClearable={false}
+              name="members"
+              valueField="customerId"
+              placeholder="Select members to add to this group."
+            />
+          </CippFormCondition>
+        </Grid>
+
+        {/* Dynamic Group Rules - Show only when Dynamic is selected */}
+        <Grid size={{ xs: 12 }}>
+          <CippFormCondition
+            formControl={formControl}
+            field="groupType"
+            compareType="is"
+            compareValue="dynamic"
+          >
+            <CippTenantGroupRuleBuilder
+              formControl={formControl}
+              name="dynamicRules"
+            />
+          </CippFormCondition>
+        </Grid>
+      </Grid>
+    </>
   );
 };