@orchestrator-ui/orchestrator-ui-components 7.5.1 → 7.7.0

package/src/components/WfoPydanticForm/fields/WfoInteger.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import _ from 'lodash';
 import type { PydanticFormControlledElement } from 'pydantic-forms';
@@ -31,14 +31,33 @@ export const WfoInteger: PydanticFormControlledElement = ({ pydanticFormField, o
   // this is imposed by react-hook-form. We try to detect this and extract the actual value
   const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
   const fieldValue = _.isObject(value) && _.has(value, fieldName) ? _.get(value, fieldName) : value;
+  const [userInput, setUserInput] = React.useState<string>();
+
+  useEffect(() => {
+    if (fieldValue !== undefined && fieldValue !== null) {
+      setUserInput(fieldValue);
+    } else {
+      setUserInput('');
+    }
+  }, [fieldValue, value]);
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    if (value === null && newValue !== value) {
+      onChange(parseInt(newValue));
+    }
+    setUserInput(newValue);
+  };
 
   return (
     <EuiFieldNumber
+      placeholder="Enter a number"
       data-testid={pydanticFormField.id}
       css={formFieldBaseStyle}
       name={pydanticFormField.id}
-      onChange={(event) => onChange(event.target.value ? parseInt(event.target.value) : null)}
-      value={fieldValue}
+      onBlur={(event) => onChange(event.target.value ? parseInt(event.target.value) : null)}
+      onChange={handleOnChange}
+      value={userInput}
       disabled={disabled}
     />
   );

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -9,7 +9,7 @@ import { WfoPopover } from '@/components';
 import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField } from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { PolicyResource } from '@/configuration/policy-resources';
-import { usePolicy } from '@/hooks';
+import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
 import { WorkflowTarget } from '@/types';
@@ -35,6 +35,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   compactMode = false,
 }) => {
   const t = useTranslations('subscriptions.detail.actions');
+  const { theme } = useOrchestratorTheme();
   const [isPopoverOpen, setPopover] = useState<boolean>(false);
   const router = useRouter();
   const disableQuery = isLoading || (!isPopoverOpen && compactMode);
@@ -59,7 +60,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   const button =
     compactMode ?
       <EuiButtonIcon
-        iconType={() => <WfoDotsHorizontal />}
+        iconType={() => <WfoDotsHorizontal color={theme.colors.textDisabled} />}
         onClick={onButtonClick}
         aria-label="Row context menu"
         isLoading={isLoading}

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 import {
+  PATH_TASKS,
   SubscriptionKeyValueBlock,
   WfoCustomerDescriptionsField,
   WfoInSyncField,
   WfoSubscriptionDetailNoteEdit,
   WfoSubscriptionStatusBadge,
 } from '@/components';
-import { SubscriptionDetail } from '@/types';
+import { SubscriptionDetail, WorkflowTarget } from '@/types';
 import { formatDate } from '@/utils';
 
 interface WfoSubscriptionDetailSectionProps {
@@ -19,8 +21,17 @@ interface WfoSubscriptionDetailSectionProps {
 export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscriptionDetailSectionProps) => {
   const t = useTranslations('subscriptions.detail');
 
-  const { subscriptionId, product, description, startDate, endDate, status, customer, customerDescriptions } =
-    subscriptionDetail;
+  const {
+    subscriptionId,
+    product,
+    description,
+    startDate,
+    endDate,
+    status,
+    customer,
+    customerDescriptions,
+    processes,
+  } = subscriptionDetail;
 
   const subscriptionDetailBlockData = [
     {
@@ -52,6 +63,26 @@ export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscrip
       key: t('insync'),
       value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
     },
+    {
+      key: t('lastRunValidation'),
+      value: (() => {
+        const lastValidate = processes?.page
+          ?.filter((process) => process.workflowTarget.toLowerCase() === WorkflowTarget.VALIDATE.toLowerCase())
+          .slice(-1)[0];
+
+        if (!lastValidate) {
+          return t('noValidateWorkflows');
+        }
+
+        const processUrl = `${PATH_TASKS}/${lastValidate.processId}`;
+
+        return (
+          <Link href={processUrl}>
+            {lastValidate.lastStatus} ({formatDate(lastValidate.startedAt)})
+          </Link>
+        );
+      })(),
+    },
     {
       key: t('customer'),
       value: subscriptionDetail && subscriptionDetail.customer ? `${customer?.fullname}` : '-',

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -80,6 +80,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
   const subscriptionList = mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
 
   const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> = {
+    actions: {
+      columnType: ColumnType.CONTROL,
+      width: '50px',
+      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
+    },
     subscriptionId: {
       columnType: ColumnType.DATA,
       label: t('id'),
@@ -104,11 +109,12 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     insync: {
       columnType: ColumnType.DATA,
       label: t('insync'),
-      width: '80px',
+      width: '75px',
       renderData: (value) => <WfoInsyncIcon inSync={value} />,
     },
     productName: {
       columnType: ColumnType.DATA,
+      width: '260px',
       label: t('product'),
     },
     tag: {
@@ -128,7 +134,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     startDate: {
       columnType: ColumnType.DATA,
       label: t('startDate'),
-      width: '120px',
+      width: '100px',
       renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -137,7 +143,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     endDate: {
       columnType: ColumnType.DATA,
       label: t('endDate'),
-      width: '120px',
+      width: '100px',
       renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -159,12 +165,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         );
       },
     },
-    actions: {
-      columnType: ColumnType.CONTROL,
-      label: t('actions'),
-      width: '80px',
-      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
-    },
     metadata: {
       columnType: ColumnType.DATA,
       label: t('metadata'),

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -81,7 +81,7 @@ export const WfoAdvancedTable = <T extends object>({
       width: '36px',
       renderControl: (row) => (
         <EuiFlexItem css={{ cursor: 'pointer' }} onClick={() => setSelectedDataForDetailModal(row)}>
-          <WfoArrowsExpand color={theme.colors.borderBasePlain} />
+          <WfoArrowsExpand color={theme.colors.textDisabled} />
         </EuiFlexItem>
       ),
     },

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -24,7 +24,7 @@ export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID, showCopyIcon
         <EuiCopy textToCopy={UUID}>
           {(copy) => (
             <div className={COPY_ICON_CLASS} onClick={copy} css={clickable}>
-              <WfoClipboardCopy width={16} height={16} color={theme.colors.backgroundBaseDisabled} />
+              <WfoClipboardCopy width={16} height={16} color={theme.colors.backgroundBaseAccent} />
             </div>
           )}
         </EuiCopy>

package/src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx

@@ -7,15 +7,16 @@ import { useGetOrchestratorConfig } from '@/hooks';
 
 interface WfoTitleWithWebsocketBadgeProps {
   title: string;
+  wsUrl?: string;
 }
 
-export const WfoTitleWithWebsocketBadge = ({ title }: WfoTitleWithWebsocketBadgeProps) => {
+export const WfoTitleWithWebsocketBadge = ({ title, wsUrl = undefined }: WfoTitleWithWebsocketBadgeProps) => {
   const { useWebSockets } = useGetOrchestratorConfig();
 
   const pageTitle =
     useWebSockets ?
       <>
-        {title} <WfoWebsocketStatusBadge />
+        {title} <WfoWebsocketStatusBadge wsUrl={wsUrl} />
       </>
     : title;
 

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -17,6 +17,7 @@ import { getStepContent } from '../stepListUtils';
 import { getWorkflowStepsStyles } from '../styles';
 import { CodeView, WfoCodeViewSelector } from './WfoCodeViewSelector';
 import { WfoStepForm } from './WfoStepForm';
+import { useStepDetailOverride } from './useStepDetailOverride';
 
 export interface WfoStepProps {
   stepListItem: StepListItem;
@@ -58,6 +59,7 @@ export const WfoStep = React.forwardRef(
       stepRowStyle,
       getStepToggleExpandStyle,
     } = useWithOrchestratorTheme(getWorkflowStepsStyles);
+    const { overrideStepDetail } = useStepDetailOverride();
     const t = useTranslations('processes.steps');
     const hasHtmlMail = Object.prototype.hasOwnProperty.call(step?.stateDelta || {}, 'confirmation_mail');
 
@@ -104,55 +106,70 @@ export const WfoStep = React.forwardRef(
       },
       [setCodeView],
     );
-
+    const shouldExpand: boolean = isExpanded && hasStepContent;
     return (
       <div ref={ref}>
         <EuiPanel>
           <EuiFlexGroup css={getStepHeaderStyle(hasStepContent)} onClick={() => hasStepContent && onToggleStepDetail()}>
             <WfoStepStatusIcon stepStatus={step.status} isStartStep={isStartStep} />
 
-            <EuiFlexItem grow={0}>
-              <EuiText css={stepListContentBoldTextStyle}>{step.name}</EuiText>
-              <EuiText>
-                {step.status} {step.completed && `- ${formatDate(step.completed)}`}
-              </EuiText>
-            </EuiFlexItem>
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem css={{ flexDirection: 'row' }}>
+                <EuiFlexItem grow={0}>
+                  <EuiText css={stepListContentBoldTextStyle}>{step.name}</EuiText>
+                  <EuiText>
+                    {step.status} {step.completed && `- ${formatDate(step.completed)}`}
+                  </EuiText>
+                </EuiFlexItem>
 
-            <EuiFlexGroup css={stepRowStyle}>
-              {step.completed && (
-                <>
-                  {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
-                  <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
-                    <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
-                    <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={0} css={getStepToggleExpandStyle(hasStepContent)}>
-                    {(isExpanded && <WfoChevronUp color={theme.colors.textParagraph} />) || (
-                      <WfoChevronDown color={theme.colors.textParagraph} />
-                    )}
-                  </EuiFlexItem>
-                </>
-              )}
+                <EuiFlexGroup css={stepRowStyle}>
+                  {step.completed && (
+                    <>
+                      {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
+                      <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
+                        <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
+                        <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={0} css={getStepToggleExpandStyle(hasStepContent)}>
+                        {(isExpanded && <WfoChevronUp color={theme.colors.textParagraph} />) || (
+                          <WfoChevronDown color={theme.colors.textParagraph} />
+                        )}
+                      </EuiFlexItem>
+                    </>
+                  )}
+                </EuiFlexGroup>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {overrideStepDetail?.stepHeader && <overrideStepDetail.stepHeader step={step} />}
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexGroup>
-          {hasStepContent
-            && !hasHtmlMail
-            && isExpanded
-            && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
-            : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
-            : <WfoMonacoCodeBlock data={stepContent} />)}
-          {isExpanded && hasHtmlMail && (
-            <div css={stepEmailContainerStyle}>
-              {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
-            </div>
-          )}
-          {step.status === StepStatus.SUSPEND && userInputForm && (
-            <WfoStepForm
-              userInputForm={userInputForm}
-              isTask={isTask}
-              processId={processId ?? ''}
-              userPermissions={userPermissions}
-            />
+          {shouldExpand && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={1}>
+                {overrideStepDetail?.stepBody && <overrideStepDetail.stepBody step={step} />}
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {shouldExpand
+                  && !hasHtmlMail
+                  && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
+                  : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
+                  : <WfoMonacoCodeBlock data={stepContent} />)}
+                {isExpanded && hasHtmlMail && (
+                  <div css={stepEmailContainerStyle}>
+                    {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
+                  </div>
+                )}
+                {step.status === StepStatus.SUSPEND && userInputForm && (
+                  <WfoStepForm
+                    userInputForm={userInputForm}
+                    isTask={isTask}
+                    processId={processId ?? ''}
+                    userPermissions={userPermissions}
+                  />
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
           )}
         </EuiPanel>
       </div>

package/src/components/WfoWorkflowSteps/WfoStep/useStepDetailOverride.ts

@@ -0,0 +1,9 @@
+import { useAppSelector } from '@/rtk/hooks';
+
+export const useStepDetailOverride = () => {
+  const overrideStepDetail = useAppSelector((state) => state.orchestratorComponentOverride?.stepDetail);
+
+  return {
+    overrideStepDetail,
+  };
+};

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -69,7 +69,6 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
         <EuiText css={stepListContentBoldTextStyle}>{t(isTask ? 'taskSteps' : 'workflowSteps')}</EuiText>
         {!showRaw && <WfoTextAnchor text={allDetailToggleText} onClick={onToggleAllDetailsIsOpen} />}
       </EuiFlexGroup>
-
       {/* Right side: view options */}
       <EuiFlexGroup justifyContent="flexEnd" direction="row" css={stepListOptionsContainerStyle} gutterSize="s">
         {showTracebackButton && (

package/src/configuration/constants.ts

@@ -35,3 +35,6 @@ export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
 export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
 export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';
 export const METADATA_SCHEDULES_ENDPOINT = 'schedules';
+
+//search
+export const SEARCH_QUERY_RESULTS_ENDPOINT = 'search/queries';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.5.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.7.0';

package/src/hooks/useAgentPlanEvents.ts

@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+
+import type { AgentSubscriber } from '@ag-ui/client';
+// @ts-expect-error - v2 subpath exists but TypeScript moduleResolution doesn't recognize it
+import { useAgent } from '@copilotkit/react-core/v2';
+
+/** AG-UI custom event names emitted by the backend agent. */
+enum AgentEvent {
+  PLAN_CREATED = 'PLAN_CREATED',
+  STEP_ACTIVE = 'AGENT_STEP_ACTIVE',
+}
+
+/** The backend step name used for the planning phase (not a real task). */
+const PLANNER_STEP_NAME = 'Planner';
+
+export type ToolCallState = {
+  id: string;
+  name: string;
+  status: 'executing' | 'complete';
+};
+
+export type PlanStep = {
+  step_name: string;
+  reasoning: string | null;
+  status: 'pending' | 'active' | 'completed';
+  tool_calls: ToolCallState[];
+};
+
+export type PlanExecutionState = {
+  planning: boolean;
+  steps: PlanStep[];
+};
+
+const initialState: PlanExecutionState = {
+  planning: false,
+  steps: [],
+};
+
+const updateSteps = (
+  steps: PlanStep[],
+  predicate: (step: PlanStep) => boolean,
+  updater: (step: PlanStep) => PlanStep,
+): PlanStep[] => steps.map((step) => (predicate(step) ? updater(step) : step));
+
+export function useAgentPlanEvents(agentId: string = 'query_agent'): PlanExecutionState {
+  const { agent } = useAgent({ agentId });
+  const [executionState, setExecutionState] = useState<PlanExecutionState>(initialState);
+
+  useEffect(() => {
+    if (!agent) {
+      return;
+    }
+
+    const subscriber: AgentSubscriber = {
+      onCustomEvent: (params) => {
+        const event = params?.event;
+        if (!event) return;
+
+        if (event.name === AgentEvent.PLAN_CREATED) {
+          const tasks = event.value as Array<{
+            skillName: string;
+            reasoning: string;
+          }>;
+          if (!Array.isArray(tasks)) return;
+
+          setExecutionState({
+            planning: false,
+            steps: tasks.map((task) => ({
+              step_name: task.skillName,
+              reasoning: task.reasoning,
+              status: 'pending' as const,
+              tool_calls: [],
+            })),
+          });
+          return;
+        }
+
+        if (event.name === AgentEvent.STEP_ACTIVE) {
+          const stepName = event.value?.step;
+          if (!stepName) return;
+
+          if (stepName === PLANNER_STEP_NAME) {
+            setExecutionState((prev) => ({
+              ...prev,
+              planning: true,
+            }));
+            return;
+          }
+
+          const reasoning = event.value?.reasoning ?? null;
+
+          setExecutionState((prev) => {
+            // Mark previous active step as completed
+            const steps = updateSteps(
+              prev.steps,
+              (step) => step.status === 'active',
+              (step) => ({ ...step, status: 'completed' as const }),
+            );
+
+            // If step already exists (from PLAN_CREATED), activate it
+            const existingIndex = steps.findIndex((step) => step.step_name === stepName);
+            if (existingIndex >= 0) {
+              steps[existingIndex] = {
+                ...steps[existingIndex],
+                status: 'active',
+                reasoning: reasoning ?? steps[existingIndex].reasoning,
+              };
+            } else {
+              steps.push({
+                step_name: stepName,
+                reasoning,
+                status: 'active',
+                tool_calls: [],
+              });
+            }
+
+            return { planning: false, steps };
+          });
+        }
+      },
+
+      onToolCallStartEvent: ({ event }) => {
+        setExecutionState((prev) => {
+          const currentStep = prev.steps.find((step) => step.status === 'active');
+          if (!currentStep) return prev;
+
+          return {
+            ...prev,
+            steps: updateSteps(
+              prev.steps,
+              (step) => step.step_name === currentStep.step_name,
+              (step) => ({
+                ...step,
+                tool_calls: [
+                  ...step.tool_calls,
+                  {
+                    id: event.toolCallId,
+                    name: event.toolCallName,
+                    status: 'executing' as const,
+                  },
+                ],
+              }),
+            ),
+          };
+        });
+      },
+
+      onToolCallEndEvent: ({ event }) => {
+        setExecutionState((prev) => ({
+          ...prev,
+          steps: updateSteps(
+            prev.steps,
+            (step) => step.tool_calls.some((toolCall) => toolCall.id === event.toolCallId),
+            (step) => ({
+              ...step,
+              tool_calls: step.tool_calls.map((toolCall) =>
+                toolCall.id === event.toolCallId ? { ...toolCall, status: 'complete' as const } : toolCall,
+              ),
+            }),
+          ),
+        }));
+      },
+
+      onRunStartedEvent: () => {
+        setExecutionState(initialState);
+      },
+
+      onRunFinishedEvent: () => {
+        setExecutionState((prev) => ({
+          planning: false,
+          steps: updateSteps(
+            prev.steps,
+            (step) => step.status === 'active',
+            (step) => ({ ...step, status: 'completed' as const }),
+          ),
+        }));
+      },
+    };
+
+    const subscription = agent.subscribe(subscriber);
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [agent]);
+
+  return executionState;
+}

package/src/messages/en-GB.json

@@ -390,6 +390,8 @@
       "subscriptionId": "Subscription ID",
       "description": "Description",
       "startDate": "Start date",
+      "lastRunValidation": "Most recent validate",
+      "noValidateWorkflows": "No validate workflows have been run recently",
       "insync": "In sync",
       "customer": "Customer",
       "customerUuid": "Customer UUID",
@@ -558,6 +560,11 @@
         "get_valid_operators": "I'm getting valid operators",
         "set_temporal_grouping": "I'm setting temporal grouping"
       },
+      "planProgress": {
+        "planning": "Planning...",
+        "completed": "Plan completed",
+        "executing": "Executing plan ({completed}/{total})"
+      },
       "visualization": {
         "noDataAvailable": "No data available for visualization.",
         "invalidDataStructure": "Invalid data structure."

package/src/messages/nl-NL.json

@@ -389,6 +389,8 @@
       "subscriptionId": "Subscription ID",
       "description": "Beschrijving",
       "startDate": "Startdatum",
+      "lastRunValidation": "Meest recente validate",
+      "noValidateWorkflows": "Er zijn recentelijk geen validate workflows uitgevoerd",
       "insync": "In sync",
       "customer": "Klant",
       "customerUuid": "Klant UUID",