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

src_generic/components/fields/ImageUploadField.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Box, Button, Avatar, CircularProgress, Typography } from "@mui/material";
+import { config } from "../../config";
+
+interface ImageUploadFieldProps {
+  label?: string;
+  value: string;
+  uploading?: boolean;
+  onUpload: (file: File) => void;
+  size?: number;
+}
+
+export default function ImageUploadField({
+  label = "Upload Image",
+  value,
+  uploading = false,
+  onUpload,
+  size = 64,
+}: ImageUploadFieldProps) {
+
+  const imgSrc = value
+    ? config.baseUrl.replace(/\/+$/, "") +
+      "/" +
+      value.replace(/^\/+/, "")
+    : "";
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: 3 }}>
+      <Typography variant="caption" color="text.secondary">{label}</Typography>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+        <Avatar
+          src={imgSrc}
+          sx={{ width: size, height: size, borderRadius: 2 }}
+        />
+
+        <Button
+          variant="outlined"
+          component="label"
+          disabled={uploading}
+          startIcon={uploading && <CircularProgress size={16} />}
+        >
+          {uploading ? "Uploading..." : "Choose File"}
+          <input
+            type="file"
+            accept="image/*"
+            hidden
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) onUpload(file);
+            }}
+          />
+        </Button>
+      </Box>
+    </Box>
+  );
+}