💄 style(time-slot): Add chart display

packages/ui/src/custom-components/dynamic-Inputs.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 interface FieldConfig extends Omit<EnhancedInputProps, 'type'> {
   name: string;
-  type: 'text' | 'number' | 'select';
+  type: 'text' | 'number' | 'select' | 'time';
   options?: { label: string; value: string }[];
   internal?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,7 +53,7 @@ export function ObjectInput<T extends Record<string, any>>({
   };
 
   return (
-    <div className='flex flex-1 gap-4'>
+    <div className='flex flex-1 flex-wrap gap-4'>
       {fields.map(({ name, type, options, ...fieldProps }) => (
         <div key={name} className='flex-1'>
           {type === 'select' && options ? (
@@ -127,6 +127,12 @@ export function ArrayInput<T extends Record<string, any>>({
     onChange(modifiedItems);
   };
 
+  useEffect(() => {
+    if (value.length > 0) {
+      setDisplayItems(value);
+    }
+  }, [value]);
+
   return (
     <div className='flex flex-col gap-4'>
       {displayItems.map((item, index) => (

packages/ui/src/custom-components/enhanced-input.tsx

@@ -76,7 +76,9 @@ export function EnhancedInput({
       className={cn('border-input flex w-full items-center rounded-md border', className)}
       suppressHydrationWarning
     >
-      {prefix && <div className='bg-muted mr-px flex h-9 items-center px-3'>{prefix}</div>}
+      {prefix && (
+        <div className='bg-muted mr-px flex h-9 items-center text-nowrap px-3'>{prefix}</div>
+      )}
       <Input
         {...props}
         value={value}
@@ -84,7 +86,9 @@ export function EnhancedInput({
         onChange={handleChange}
         onBlur={handleBlur}
       />
-      {suffix && <div className='bg-muted ml-px flex h-9 items-center px-3'>{suffix}</div>}
+      {suffix && (
+        <div className='bg-muted ml-px flex h-9 items-center text-nowrap px-3'>{suffix}</div>
+      )}
     </div>
   );
 }