Service delivery reporting features

CHANGELOG.md

@@ -3,6 +3,20 @@
 
 [//]: # (Note that version headers need to start with "## " characters to be picked up by some automated scripts)
 
+## 5.17.0
+
+### Changes
+
+- Added form branches and arrays
+- Added option to generate report
+- Updated form extraction workflow following changes in the backend
+- Consolidation of form parsing methods
+- Improve dark mode design for the registry
+
+### Bug Fixes
+
+- Fix missing functions for action buttons
+
 ## 5.16.15
 
 ### Bug Fixes

VERSION

@@ -1 +1 @@
-5.16.15
+5.17.0

code/package.json

@@ -1,6 +1,6 @@
 {
     "name": "viz",
-    "version": "5.16.15",
+    "version": "5.17.0",
     "private": true,
     "type": "module",
     "jest": {

code/src/types/form.ts

@@ -8,31 +8,44 @@ export const PROPERTY_GROUP_TYPE = "PropertyGroup";
 export const ONTOLOGY_CONCEPT_ROOT = "root";
 export const FORM_IDENTIFIER = "form";
 
-interface RegistryFieldValue {
+export interface SparqlResponseField {
   value: string;
   type: string;
   dataType: string;
   lang: string;
 }
 
-export type RegistryFieldValues = Record<string, RegistryFieldValue>;
+export type RegistryFieldValues = Record<string, SparqlResponseField | SparqlResponseField[]>;
 
 export type OntologyConceptMappings = Record<string, OntologyConcept[]>;
 
 export type OntologyConcept = {
-  type: RegistryFieldValue;
-  label: RegistryFieldValue;
-  description: RegistryFieldValue;
-  parent?: RegistryFieldValue;
+  type: SparqlResponseField;
+  label: SparqlResponseField;
+  description: SparqlResponseField;
+  parent?: SparqlResponseField;
 };
 
 export interface FormOptionType {
   label: string;
   value: string;
 }
 
+export interface FormArrayItemOption {
+  fieldId: string;
+  label: string;
+  placeholder?: string
+}
+
 export type FormTemplate = {
   "@context": Record<string, string>;
+  node: NodeShape[];
+  property: PropertyShapeOrGroup[];
+};
+
+export interface NodeShape {
+  label: JsonLdLiteral;
+  comment: JsonLdLiteral;
   property: PropertyShapeOrGroup[];
 };
 
@@ -45,12 +58,12 @@ export interface PropertyShape {
   description: JsonLdLiteral;
   order: number;
   fieldId?: string; // Not present but appended after
-  defaultValue?: RegistryFieldValue;
+  defaultValue?: SparqlResponseField | SparqlResponseField[];
   group?: JsonLdInstance;
   datatype?: string;
   class?: JsonLdInstance;
-  dependentOn?: JsonLdInstance;
-  in?: JsonLdInstance;
+  dependentOn?: DependentInstance;
+  in?: JsonLdInstance[];
   minCount?: JsonLdLiteral;
   maxCount?: JsonLdLiteral;
   minInclusive?: JsonLdLiteral;
@@ -69,6 +82,12 @@ export interface PropertyGroup {
   comment: JsonLdLiteral;
   order: number;
   property: PropertyShape[];
+  multipleProperty?: PropertyShape[];
+}
+
+interface DependentInstance {
+  "@id": string;
+  label?: string;
 }
 
 interface JsonLdInstance {
@@ -105,4 +124,5 @@ export interface RegistryTaskOption {
   id: string;
   contract: string;
   status: string;
+  date: string;
 }

code/src/ui/css/globals.css

@@ -26,6 +26,11 @@
         --border-primary: #b6b6bf;
         --border-secondary: #a5a5b3;
         --border-tertiary: #9898af;
+
+        /* Button */
+        --description-box: #a9d9d1;
+        --button-color-secondary: #18677a;
+        --button-color-secondary-hover: #0B4452;
     }
 }
 
@@ -55,6 +60,11 @@
         --border-primary: #434b55;
         --border-secondary: #6c7989;
         --border-tertiary: #7f8ea1;
+
+        /* Button */
+        --description-box: #2B816F;
+        --button-color-secondary: #7ACADB;
+        --button-color-secondary-hover: #35A7C0;
     }
 }
 
@@ -78,7 +88,7 @@
     /* Button colors */
     --button-color-primary: #83C38D;
     --button-color-primary-active: #65A671;
-    --description-box: #a9d9d1;
+    --alert-color: 191, 74, 42;
 }
 
 * {
@@ -119,6 +129,9 @@ img {
     background-color: transparent !important;
 }
 
+ul {
+    list-style-type: none;
+}
 
 /**
     Constants for our own CSS classes (across all themes).

code/src/ui/graphic/table/registry/actions/registry-table-action.tsx

@@ -57,6 +57,7 @@ export default function RegistryRowActions(props: Readonly<RegistryRowActionsPro
         id: recordId,
         status: status,
         contract: props.row.contract,
+        date: props.row.date,
       });
     } else {
       // Move to the view modal page for the specific record

code/src/ui/graphic/table/registry/registry-table-component.tsx

@@ -138,7 +138,6 @@ export default function RegistryTableComponent(props: Readonly<RegistryTableComp
       </div>
       {task && <TaskModal
         entityType={props.entityType}
-        date={selectedDate}
         registryAgentApi={props.registryAgentApi}
         isOpen={isTaskModalOpen}
         task={task}

code/src/ui/graphic/table/registry/registry-table.tsx

@@ -85,8 +85,13 @@ export default function RegistryTable(props: Readonly<RegistryTableProps>) {
     // Extract only the value into the data to simplify
     return props.instances.map((instance) => {
       const flattenInstance: Record<string, string> = {};
-      Object.keys(instance).map((field) => {
-        flattenInstance[field] = instance[field].value;
+      Object.keys(instance).forEach((field) => {
+        const fieldValue = instance[field];
+        if (Array.isArray(fieldValue)) {
+          flattenInstance[field] = fieldValue[0]?.value; // Handle array of SparqlResponseField
+        } else {
+          flattenInstance[field] = fieldValue?.value;
+        }
       });
       return flattenInstance;
     });

code/src/ui/graphic/table/registry/ribbon/summary.module.css

@@ -1,14 +1,12 @@
 .container {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .action { 
-  height: 0.5rem;
-  width: 99%;
-  margin-top: -0.25rem !important;
-  margin-left: 0.5rem;
-  justify-content: start !important;
+  margin-left: 0;
 }
 
 @media only screen and (max-width: 480px) {
@@ -19,6 +17,5 @@
 
   .action { 
     width: 50%;
-    margin-left: 0;
   }
 }

code/src/ui/graphic/table/registry/ribbon/summary.tsx

@@ -4,10 +4,10 @@ import { useEffect, useState } from 'react';
 
 import { Routes } from 'io/config/routes';
 import { RegistryFieldValues } from 'types/form';
-import { getData } from 'utils/server-actions';
+import RedirectButton from 'ui/interaction/action/redirect/redirect-button';
 import Accordion from 'ui/text/accordion/accordion';
 import AccordionField from 'ui/text/accordion/accordion-field';
-import RedirectButton from 'ui/interaction/action/redirect/redirect-button';
+import { getData } from 'utils/server-actions';
 
 interface SummarySectionProps {
   id: string;
@@ -31,8 +31,8 @@ export default function SummarySection(props: Readonly<SummarySectionProps>) {
     const fetchData = async (): Promise<void> => {
       setIsLoading(true);
       try {
-        const contract: RegistryFieldValues[] = await getData(props.registryAgentApi, props.entityType, props.id, null, true);
-        setContract(contract[0]);
+        const contractRes: RegistryFieldValues[] = await getData(props.registryAgentApi, props.entityType, props.id, null, true);
+        setContract(contractRes[0]);
         setIsLoading(false);
       } catch (error) {
         console.error("Error fetching instances", error);
@@ -47,7 +47,7 @@ export default function SummarySection(props: Readonly<SummarySectionProps>) {
         title="Description"
         isLoading={isLoading}
       >{contract && Object.keys(contract).map((field, index) => {
-        if (field != "id" && contract[field].value) {
+        if (field != "id" && !Array.isArray(contract[field]) && contract[field].value) {
           return <AccordionField
             key={field + index}
             name={field}

code/src/ui/graphic/table/registry/ribbon/table-ribbon.tsx

@@ -61,10 +61,10 @@ export default function TableRibbon(props: Readonly<TableRibbonProps>) {
           url={`${Routes.REGISTRY_PENDING}/${props.entityType}`}
           isActive={props.lifecycleStage == Routes.REGISTRY_PENDING}
           isHoverableDisabled={true}
+          isTransparent={true}
           className={styles["registry-nav-button"]}
           styling={{
             active: styles["active-state"],
-            text: styles["transparent-button-text"],
           }}
         />
         <RedirectButton
@@ -73,10 +73,10 @@ export default function TableRibbon(props: Readonly<TableRibbonProps>) {
           url={`${Routes.REGISTRY_ACTIVE}/${props.entityType}`}
           isActive={props.lifecycleStage == Routes.REGISTRY_ACTIVE || props.lifecycleStage == Routes.REGISTRY_TASK_DATE}
           isHoverableDisabled={true}
+          isTransparent={true}
           className={styles["registry-nav-button"]}
           styling={{
             active: styles["active-state"],
-            text: styles["transparent-button-text"],
           }}
         />
         <RedirectButton
@@ -85,10 +85,10 @@ export default function TableRibbon(props: Readonly<TableRibbonProps>) {
           url={`${Routes.REGISTRY_ARCHIVE}/${props.entityType}`}
           isActive={props.lifecycleStage == Routes.REGISTRY_ARCHIVE}
           isHoverableDisabled={true}
+          isTransparent={true}
           className={styles["registry-nav-button"]}
           styling={{
             active: styles["active-state"],
-            text: styles["transparent-button-text"],
           }}
         />
       </div>
@@ -99,10 +99,7 @@ export default function TableRibbon(props: Readonly<TableRibbonProps>) {
         <ClickActionButton
           icon={"cached"}
           onClick={triggerRefresh}
-          className={styles["transparent-button"]}
-          styling={{
-            text: styles["transparent-button-text"],
-          }}
+          isTransparent={true}
         />
         <div className={styles["action-ribbon"]}>
           {(authorised || !isKeycloakEnabled) &&
@@ -152,12 +149,18 @@ export default function TableRibbon(props: Readonly<TableRibbonProps>) {
                 isActive={props.lifecycleStage == Routes.REGISTRY_TASK_DATE}
               />
             )}
-          {props.lifecycleStage == Routes.REGISTRY_REPORT && (
+          {props.lifecycleStage == Routes.REGISTRY_REPORT && (<>
             <ReturnButton
               icon="first_page"
               label={`back to ${props.entityType}s`}
             />
-          )}
+            <RedirectButton
+              icon="print"
+              label="generate report"
+              url={`${Routes.REGISTRY_EDIT}/pricing/${props.path}`}
+              isActive={false}
+            />
+          </>)}
           <DownloadButton instances={props.instances} />
         </div>
       </div>

code/src/ui/graphic/table/registry/ribbon/table.ribbon.module.css

@@ -48,26 +48,6 @@
   background: transparent;
 }
 
-.transparent-button {
-  background: none !important;
-  border: none !important;
-}
-
-.transparent-button:hover {
-  background: none !important;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-.transparent-button-text {
-  font-size: var(--font-size-secondary-text);
-  color: var(--text-color-primary) !important;
-}
-
-.transparent-button-text:hover {
-  color: var(--text-color-links-hover) !important;
-}
-
 @media only screen and (max-width: 480px) {
   .menu {
     justify-content: flex-start;