added ImageUpload and other input types.

src_generic/components/GenericForm.tsx

@@ -13,6 +13,8 @@ import {
   Divider,
 } from '@mui/material';
 import { ResourceConfig, ResourceField } from '../types/config';
+import { useUpload } from '../providers/UploadProvider';
+import ImageUploadField from './fields/ImageUploadField';
 
 interface GenericFormProps {
   config: ResourceConfig;
@@ -27,9 +29,10 @@ export default function GenericForm({
   initialData = {},
   onSave,
   onCancel,
-  loading,
+  loading: saving,
 }: GenericFormProps) {
   const [formData, setFormData] = React.useState(initialData);
+  const { uploadFile, uploading } = useUpload();
 
   const handleChange = (key: string, value: any) => {
     setFormData((prev: any) => ({ ...prev, [key]: value }));
@@ -53,16 +56,18 @@ export default function GenericForm({
           name={key}
           field={field}
           value={formData[key]}
-          onChange={(val) => handleChange(key, val)}
+          onChange={(val: any) => handleChange(key, val)}
           disabled={field.readOnly}
+          uploadFile={uploadFile}
+          uploading={uploading}
         />
       ))}
 
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
-        <Button variant="outlined" onClick={onCancel} disabled={loading}>
+        <Button variant="outlined" onClick={onCancel} disabled={saving}>
           Cancel
         </Button>
-        <Button variant="contained" type="submit" loading={loading} disabled={loading}>
+        <Button variant="contained" type="submit" loading={saving} disabled={saving || uploading}>
           Save {config.label}
         </Button>
       </Box>
@@ -70,9 +75,23 @@ export default function GenericForm({
   );
 }
 
-function FormField({ name, field, value, onChange, disabled }: any) {
+function FormField({ name, field, value, onChange, disabled, uploadFile, uploading }: any) {
   const label = field.label;
 
+  if (field.type === 'image') {
+    return (
+      <ImageUploadField
+        label={label}
+        value={value}
+        onUpload={async (file) => {
+          const url = await uploadFile(file);
+          if (url) onChange(url);
+        }}
+        uploading={uploading}
+      />
+    );
+  }
+
   if (field.type === 'boolean') {
     return (
       <FormControlLabel
@@ -108,6 +127,36 @@ function FormField({ name, field, value, onChange, disabled }: any) {
     );
   }
 
+  if (field.type === 'datetime') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type="datetime-local"
+        InputLabelProps={{ shrink: true }}
+        value={value ? new Date(value).toISOString().slice(0, 16) : ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
+  if (field.type === 'date') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type="date"
+        InputLabelProps={{ shrink: true }}
+        value={value ? new Date(value).toISOString().split('T')[0] : ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
   if (field.type === 'markdown' || field.type === 'string') {
     return (
       <TextField
@@ -137,21 +186,6 @@ function FormField({ name, field, value, onChange, disabled }: any) {
     );
   }
 
-  if (field.type === 'date') {
-    return (
-      <TextField
-        fullWidth
-        label={label}
-        type="date"
-        InputLabelProps={{ shrink: true }}
-        value={value ? new Date(value).toISOString().split('T')[0] : ''}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        required={field.required}
-      />
-    );
-  }
-
   return (
     <TextField
       fullWidth