Account for "read only" property

src/frontend/src/components/forms/ApiForm.tsx

@@ -172,7 +172,8 @@ export function ApiForm(props: ApiFormProps) {
         required: field.required,
         placeholder: field.placeholder,
         api_url: field.api_url,
-        model: field.model
+        model: field.model,
+        read_only: field.read_only
       });
     }
 
@@ -184,6 +185,10 @@ export function ApiForm(props: ApiFormProps) {
       size="xl"
       radius="sm"
       opened={props.opened}
+      overlayProps={{
+        blur: 1,
+        opacity: 0.5
+      }}
       onClose={() => {
         props.onClose ? props.onClose() : null;
       }}

src/frontend/src/components/forms/ApiFormField.tsx

@@ -20,6 +20,7 @@ export type ApiFormFieldType = {
   icon?: ReactNode;
   fieldType?: string;
   api_url?: string;
+  read_only?: boolean;
   model?: string;
   required?: boolean;
   hidden?: boolean;
@@ -58,6 +59,8 @@ function constructField({
     def.error = null;
   }
 
+  def.disabled = def.disabled || def.read_only;
+
   // Retrieve the latest value from the form
   let value = form.values[def.name];
 

src/frontend/src/pages/Index/Home.tsx

@@ -84,6 +84,9 @@ export default function Home() {
     },
     {
       name: 'target_date'
+    },
+    {
+      name: 'status'
     }
   ];
 
@@ -96,6 +99,9 @@ export default function Home() {
     },
     {
       name: 'description'
+    },
+    {
+      name: 'status'
     }
   ];