Feat: Improve metadata logic (#12730)

### What problem does this PR solve?

Feat: Improve metadata logic

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/dynamic-form.tsx

@@ -834,6 +834,7 @@ const DynamicForm = {
       useImperativeHandle(
         ref,
         () => ({
+          form: form,
           submit: () => {
             form.handleSubmit((values) => {
               const filteredValues = filterActiveValues(values);
@@ -938,7 +939,6 @@ const DynamicForm = {
   ) as <T extends FieldValues>(
     props: DynamicFormProps<T> & { ref?: React.Ref<DynamicFormRef> },
   ) => React.ReactElement,
-
   SavingButton: ({
     submitLoading,
     buttonText,
@@ -1015,4 +1015,6 @@ const DynamicForm = {
   },
 };
 
+DynamicForm.Root.displayName = 'DynamicFormRoot';
+
 export { DynamicForm };

web/src/components/ui/input-date.tsx

@@ -0,0 +1,108 @@
+import { Calendar } from '@/components/originui/calendar';
+import { Input } from '@/components/ui/input';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { Locale } from 'date-fns';
+import dayjs from 'dayjs';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+
+interface DateInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onChange'
+> {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  showTimeSelect?: boolean;
+  dateFormat?: string;
+  timeFormat?: string;
+  showTimeSelectOnly?: boolean;
+  showTimeInput?: boolean;
+  timeInputLabel?: string;
+  locale?: Locale; // Support for internationalization
+}
+
+const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  (
+    {
+      className,
+      value,
+      onChange,
+      dateFormat = 'DD/MM/YYYY',
+      timeFormat = 'HH:mm:ss',
+      showTimeSelect = false,
+      showTimeSelectOnly = false,
+      showTimeInput = false,
+      timeInputLabel = '',
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleDateSelect = (date: Date | undefined) => {
+      onChange?.(date);
+      setOpen(false);
+    };
+
+    // Determine display format based on the type of date picker
+    let displayFormat = dateFormat;
+    if (showTimeSelect) {
+      displayFormat = `${dateFormat} ${timeFormat}`;
+    } else if (showTimeSelectOnly) {
+      displayFormat = timeFormat;
+    }
+
+    // Format the date according to the specified format
+    const formattedValue = React.useMemo(() => {
+      return value && !isNaN(value.getTime())
+        ? dayjs(value).format(displayFormat)
+        : '';
+    }, [value, displayFormat]);
+
+    return (
+      <div className="grid gap-2">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <div className="relative">
+              <Input
+                ref={ref}
+                value={formattedValue}
+                readOnly
+                className={cn(
+                  'bg-bg-card hover:text-text-primary border-border-button w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] cursor-pointer',
+                  className,
+                )}
+                {...props}
+              />
+              <CalendarIcon
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground/80 group-hover:text-foreground shrink-0 transition-colors"
+                size={16}
+              />
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-2" align="start">
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={handleDateSelect}
+              initialFocus
+              {...(showTimeSelect && {
+                showTimeInput,
+                timeInputLabel,
+              })}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+);
+
+DateInput.displayName = 'DateInput';
+
+export { DateInput };

web/src/components/ui/input-select.tsx

@@ -1,5 +1,6 @@
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';
 import { X } from 'lucide-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,10 +18,12 @@ export interface InputSelectOption {
 export interface InputSelectProps {
   /** Options for the select component */
   options?: InputSelectOption[];
-  /** Selected values - string for single select, array for multi select */
-  value?: string | string[];
+  /** Selected values - type depends on the input type */
+  value?: string | string[] | number | number[] | Date | Date[];
   /** Callback when value changes */
-  onChange?: (value: string | string[]) => void;
+  onChange?: (
+    value: string | string[] | number | number[] | Date | Date[],
+  ) => void;
   /** Placeholder text */
   placeholder?: string;
   /** Additional class names */
@@ -29,6 +32,8 @@ export interface InputSelectProps {
   style?: React.CSSProperties;
   /** Whether to allow multiple selections */
   multi?: boolean;
+  /** Type of input: text, number, date, or datetime */
+  type?: 'text' | 'number' | 'date' | 'datetime';
 }
 
 const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
@@ -41,6 +46,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
       className,
       style,
       multi = false,
+      type = 'text',
     },
     ref,
   ) => {
@@ -50,36 +56,108 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
     const inputRef = React.useRef<HTMLInputElement>(null);
     const { t } = useTranslation();
 
-    // Normalize value to array for consistent handling
-    const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
+    // Normalize value to array for consistent handling based on type
+    const normalizedValue = React.useMemo(() => {
+      if (Array.isArray(value)) {
+        return value;
+      } else if (value !== undefined && value !== null) {
+        if (type === 'number') {
+          return typeof value === 'number' ? [value] : [Number(value)];
+        } else if (type === 'date' || type === 'datetime') {
+          return value instanceof Date ? [value] : [new Date(value as any)];
+        } else {
+          return typeof value === 'string' ? [value] : [String(value)];
+        }
+      } else {
+        return [];
+      }
+    }, [value, type]);
 
     /**
      * Removes a tag from the selected values
      * @param tagValue - The value of the tag to remove
      */
-    const handleRemoveTag = (tagValue: string) => {
-      const newValue = normalizedValue.filter((v) => v !== tagValue);
+    const handleRemoveTag = (tagValue: any) => {
+      let newValue: any[];
+
+      if (type === 'number') {
+        newValue = (normalizedValue as number[]).filter((v) => v !== tagValue);
+      } else if (type === 'date' || type === 'datetime') {
+        newValue = (normalizedValue as Date[]).filter(
+          (v) => v.getTime() !== tagValue.getTime(),
+        );
+      } else {
+        newValue = (normalizedValue as string[]).filter((v) => v !== tagValue);
+      }
+
       // Return single value if not multi-select, otherwise return array
-      onChange?.(multi ? newValue : newValue[0] || '');
+      let result: string | number | Date | string[] | number[] | Date[];
+      if (multi) {
+        result = newValue;
+      } else {
+        if (type === 'number') {
+          result = newValue[0] || 0;
+        } else if (type === 'date' || type === 'datetime') {
+          result = newValue[0] || new Date();
+        } else {
+          result = newValue[0] || '';
+        }
+      }
+
+      onChange?.(result);
     };
 
     /**
      * Adds a tag to the selected values
      * @param optionValue - The value of the tag to add
      */
-    const handleAddTag = (optionValue: string) => {
-      let newValue: string[];
+    const handleAddTag = (optionValue: any) => {
+      let newValue: any[];
 
       if (multi) {
         // For multi-select, add to array if not already included
-        if (!normalizedValue.includes(optionValue)) {
-          newValue = [...normalizedValue, optionValue];
-          onChange?.(newValue);
+        if (type === 'number') {
+          const numValue =
+            typeof optionValue === 'number' ? optionValue : Number(optionValue);
+          if (
+            !(normalizedValue as number[]).includes(numValue) &&
+            !isNaN(numValue)
+          ) {
+            newValue = [...(normalizedValue as number[]), numValue];
+            onChange?.(newValue as number[]);
+          }
+        } else if (type === 'date' || type === 'datetime') {
+          const dateValue =
+            optionValue instanceof Date ? optionValue : new Date(optionValue);
+          if (
+            !(normalizedValue as Date[]).some(
+              (d) => d.getTime() === dateValue.getTime(),
+            )
+          ) {
+            newValue = [...(normalizedValue as Date[]), dateValue];
+            onChange?.(newValue as Date[]);
+          }
+        } else {
+          if (!(normalizedValue as string[]).includes(optionValue)) {
+            newValue = [...(normalizedValue as string[]), optionValue];
+            onChange?.(newValue as string[]);
+          }
         }
       } else {
         // For single-select, replace the value
-        newValue = [optionValue];
-        onChange?.(optionValue);
+        if (type === 'number') {
+          const numValue =
+            typeof optionValue === 'number' ? optionValue : Number(optionValue);
+          if (!isNaN(numValue)) {
+            onChange?.(numValue);
+          }
+        } else if (type === 'date' || type === 'datetime') {
+          const dateValue =
+            optionValue instanceof Date ? optionValue : new Date(optionValue);
+          onChange?.(dateValue);
+        } else {
+          onChange?.(optionValue);
+        }
       }
 
       setInputValue('');
@@ -89,16 +167,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = e.target.value;
       setInputValue(newValue);
-      setOpen(newValue.length > 0); // Open popover when there's input
-
-      // If input matches an option exactly, add it
-      const matchedOption = options.find(
-        (opt) => opt.label.toLowerCase() === newValue.toLowerCase(),
-      );
-
-      if (matchedOption && !normalizedValue.includes(matchedOption.value)) {
-        handleAddTag(matchedOption.value);
-      }
+      setOpen(!!newValue); // Open popover when there's input
     };
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -111,9 +180,37 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
         const newValue = [...normalizedValue];
         newValue.pop();
         // Return single value if not multi-select, otherwise return array
-        onChange?.(multi ? newValue : newValue[0] || '');
+        let result: string | number | Date | string[] | number[] | Date[];
+        if (multi) {
+          result = newValue;
+        } else {
+          if (type === 'number') {
+            result = newValue[0] || 0;
+          } else if (type === 'date' || type === 'datetime') {
+            result = newValue[0] || new Date();
+          } else {
+            result = newValue[0] || '';
+          }
+        }
+
+        onChange?.(result);
       } else if (e.key === 'Enter' && inputValue.trim() !== '') {
         e.preventDefault();
+
+        let valueToAdd: any;
+
+        if (type === 'number') {
+          const numValue = Number(inputValue);
+          if (isNaN(numValue)) return; // Don't add invalid numbers
+          valueToAdd = numValue;
+        } else if (type === 'date' || type === 'datetime') {
+          const dateValue = new Date(inputValue);
+          if (isNaN(dateValue.getTime())) return; // Don't add invalid dates
+          valueToAdd = dateValue;
+        } else {
+          valueToAdd = inputValue;
+        }
+
         // Add input value as a new tag if it doesn't exist in options
         const matchedOption = options.find(
           (opt) => opt.label.toLowerCase() === inputValue.toLowerCase(),
@@ -124,10 +221,16 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
         } else {
           // If not in options, create a new tag with the input value
           if (
-            !normalizedValue.includes(inputValue) &&
+            !normalizedValue.some((v) =>
+              type === 'number'
+                ? Number(v) === Number(valueToAdd)
+                : type === 'date' || type === 'datetime'
+                  ? new Date(v as any).getTime() === valueToAdd.getTime()
+                  : String(v) === valueToAdd,
+            ) &&
             inputValue.trim() !== ''
           ) {
-            handleAddTag(inputValue);
+            handleAddTag(valueToAdd);
           }
         }
       } else if (e.key === 'Escape') {
@@ -160,26 +263,68 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
 
     // Filter options to exclude already selected ones (only for multi-select)
     const availableOptions = multi
-      ? options.filter((option) => !normalizedValue.includes(option.value))
+      ? options.filter(
+          (option) =>
+            !normalizedValue.some((v) =>
+              type === 'number'
+                ? Number(v) === Number(option.value)
+                : type === 'date' || type === 'datetime'
+                  ? new Date(v as any).getTime() ===
+                    new Date(option.value).getTime()
+                  : String(v) === option.value,
+            ),
+        )
       : options;
 
     const filteredOptions = availableOptions.filter(
       (option) =>
         !inputValue ||
-        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+        option.label
+          .toLowerCase()
+          .includes(inputValue.toString().toLowerCase()),
     );
 
     // If there are no matching options but there is an input value, create a new option with the input value
-    const hasMatchingOptions = filteredOptions.length > 0;
-    const showInputAsOption =
-      inputValue &&
-      !hasMatchingOptions &&
-      !normalizedValue.includes(inputValue);
+    const showInputAsOption = React.useMemo(() => {
+      if (!inputValue) return false;
+
+      const hasLabelMatch = options.some(
+        (option) =>
+          option.label.toLowerCase() === inputValue.toString().toLowerCase(),
+      );
+
+      let isAlreadySelected = false;
+      if (type === 'number') {
+        const numValue = Number(inputValue);
+        isAlreadySelected =
+          !isNaN(numValue) && (normalizedValue as number[]).includes(numValue);
+      } else if (type === 'date' || type === 'datetime') {
+        const dateValue = new Date(inputValue);
+        isAlreadySelected =
+          !isNaN(dateValue.getTime()) &&
+          (normalizedValue as Date[]).some(
+            (d) => d.getTime() === dateValue.getTime(),
+          );
+      } else {
+        isAlreadySelected = (normalizedValue as string[]).includes(inputValue);
+      }
+      console.log(
+        'showInputAsOption',
+        hasLabelMatch,
+        isAlreadySelected,
+        inputValue.toString().trim(),
+      );
+      return (
+        !hasLabelMatch &&
+        !isAlreadySelected &&
+        inputValue.toString().trim() !== ''
+      );
+    }, [inputValue, options, normalizedValue, type]);
 
     const triggerElement = (
       <div
         className={cn(
-          'flex flex-wrap items-center gap-1 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 min-h-[40px] cursor-text',
+          'flex flex-wrap items-center gap-1 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-1 min-h-8 cursor-text',
           'outline-none transition-colors',
           'focus-within:outline-none focus-within:ring-1 focus-within:ring-accent-primary',
           className,
@@ -189,14 +334,22 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
       >
         {/* Render selected tags - only show tags if multi is true or if single select has a value */}
         {multi &&
-          normalizedValue.map((tagValue) => {
-            const option = options.find((opt) => opt.value === tagValue) || {
-              value: tagValue,
-              label: tagValue,
+          normalizedValue.map((tagValue, index) => {
+            const option = options.find((opt) =>
+              type === 'number'
+                ? Number(opt.value) === Number(tagValue)
+                : type === 'date' || type === 'datetime'
+                  ? new Date(opt.value).getTime() ===
+                    new Date(tagValue).getTime()
+                  : String(opt.value) === String(tagValue),
+            ) || {
+              value: String(tagValue),
+              label: String(tagValue),
             };
+
             return (
               <div
-                key={tagValue}
+                key={`${tagValue}-${index}`}
                 className="flex items-center bg-bg-card text-text-primary rounded px-2 py-1 text-xs mr-1 mb-1 border border-border-card"
               >
                 {option.label}
@@ -215,11 +368,22 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
           })}
 
         {/* For single select, show the selected value as text instead of a tag */}
-        {!multi && normalizedValue[0] && (
-          <div className="flex items-center mr-2 max-w-full">
+        {!multi && !isEmpty(normalizedValue[0]) && (
+          <div className={cn('flex items-center max-w-full')}>
             <div className="flex-1  truncate">
-              {options.find((opt) => opt.value === normalizedValue[0])?.label ||
-                normalizedValue[0]}
+              {options.find((opt) =>
+                type === 'number'
+                  ? Number(opt.value) === Number(normalizedValue[0])
+                  : type === 'date' || type === 'datetime'
+                    ? new Date(opt.value).getTime() ===
+                      new Date(normalizedValue[0]).getTime()
+                    : String(opt.value) === String(normalizedValue[0]),
+              )?.label ||
+                (type === 'number'
+                  ? String(normalizedValue[0])
+                  : type === 'date' || type === 'datetime'
+                    ? new Date(normalizedValue[0] as any).toLocaleString()
+                    : String(normalizedValue[0]))}
             </div>
             <button
               type="button"
@@ -235,19 +399,37 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
         )}
 
         {/* Input field for adding new tags - hide if single select and value is already selected, or in multi select when not focused */}
-        {(multi ? isFocused : multi || !normalizedValue[0]) && (
+        {(multi ? isFocused : multi || isEmpty(normalizedValue[0])) && (
           <Input
             ref={inputRef}
-            type="text"
-            value={inputValue}
+            type={
+              type === 'date'
+                ? 'date'
+                : type === 'datetime'
+                  ? 'datetime-local'
+                  : type === 'number'
+                    ? 'number'
+                    : 'text'
+            }
+            value={
+              type === 'number' && inputValue
+                ? String(inputValue)
+                : type === 'date' || type === 'datetime'
+                  ? inputValue
+                  : inputValue
+            }
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder={
-              (multi ? normalizedValue.length === 0 : !normalizedValue[0])
+              (
+                multi
+                  ? normalizedValue.length === 0
+                  : isEmpty(normalizedValue[0])
+              )
                 ? placeholder
                 : ''
             }
-            className="flex-grow min-w-[50px] border-none px-1 py-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 h-auto !w-fit"
+            className="flex-grow min-w-[50px] border-none px-1 py-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 h-auto "
             onClick={(e) => e.stopPropagation()}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
@@ -272,7 +454,19 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
                 <div
                   key={option.value}
                   className="px-4 py-2 hover:bg-border-button cursor-pointer text-text-secondary w-full truncate"
-                  onClick={() => handleAddTag(option.value)}
+                  onClick={() => {
+                    let optionValue: any;
+                    if (type === 'number') {
+                      optionValue = Number(option.value);
+                      if (isNaN(optionValue)) return; // Skip invalid numbers
+                    } else if (type === 'date' || type === 'datetime') {
+                      optionValue = new Date(option.value);
+                      if (isNaN(optionValue.getTime())) return; // Skip invalid dates
+                    } else {
+                      optionValue = option.value;
+                    }
+                    handleAddTag(optionValue);
+                  }}
                 >
                   {option.label}
                 </div>
@@ -281,9 +475,17 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
               <div
                 key={inputValue}
                 className="px-4 py-2 hover:bg-border-button cursor-pointer text-text-secondary w-full truncate"
-                onClick={() => handleAddTag(inputValue)}
+                onClick={() =>
+                  handleAddTag(
+                    type === 'number'
+                      ? Number(inputValue)
+                      : type === 'date' || type === 'datetime'
+                        ? new Date(inputValue)
+                        : inputValue,
+                  )
+                }
               >
-                {t('common.add')} &quot;{inputValue}&#34;
+                {t('common.add')} &quot;{inputValue}&quot;
               </div>
             )}
             {filteredOptions.length === 0 && !showInputAsOption && (