fix(dashboard): Boolean fields in DetailPage now show correct value (#4186)

packages/dashboard/src/lib/framework/page/detail-page.tsx

@@ -1,25 +1,20 @@
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { DefaultInputForType } from '@/vdb/framework/form-engine/default-input-for-type.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Trans } from '@lingui/react/macro';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { toast } from 'sonner';
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import {
     FieldInfo,
     getEntityName,
     getOperationVariablesFields,
 } from '../document-introspection/get-document-structure.js';
-
-import { NumberInput } from '@/vdb/components/data-input/number-input.js';
-import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
-import { FormControl } from '@/vdb/components/ui/form.js';
-import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -97,6 +92,18 @@ export interface DetailPageFieldProps<
     field: ControllerRenderProps<TFieldValues, TName>;
 }
 
+/**
+ * Maps GraphQL schema types (PascalCase) to form engine types (lowercase)
+ */
+const graphqlTypeMap: Record<string, string> = {
+    Int: 'int',
+    Float: 'float',
+    Boolean: 'boolean',
+    DateTime: 'datetime',
+    String: 'string',
+    ID: 'string',
+};
+
 /**
  * Renders form input components based on field type
  */
@@ -104,33 +111,13 @@ function FieldInputRenderer<
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({ fieldInfo, field }: DetailPageFieldProps<TFieldValues, TName>) {
-    switch (fieldInfo.type) {
-        case 'Int':
-        case 'Float':
-            return (
-                <FormControl>
-                    <NumberInput {...field} />
-                </FormControl>
-            );
-        case 'DateTime':
-            return (
-                <FormControl>
-                    <DateTimeInput {...field} />
-                </FormControl>
-            );
-        case 'Boolean':
-            return (
-                <FormControl>
-                    <Checkbox value={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-            );
-        default:
-            return (
-                <FormControl>
-                    <Input {...field} />
-                </FormControl>
-            );
-    }
+    const type = graphqlTypeMap[fieldInfo.type] ?? 'string';
+    return (
+        <DefaultInputForType
+            {...field}
+            fieldDef={{ type, name: fieldInfo.name } as any}
+        />
+    );
 }
 
 /**
@@ -219,7 +206,6 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer fieldInfo={fieldInfo} field={field} />
                                         )}
@@ -237,7 +223,6 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer fieldInfo={fieldInfo} field={field} />
                                         )}