Forced merge: merge ai-dev into master

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/components/FormImagePicker.tsx

@@ -64,38 +64,49 @@ const FormImagePicker = ({
   const showFilename = !isRoundIcon && file;
 
   return (
-    <div className='flex items-stretch justify-start relative'>
-      <label className='inline-flex'>
-        <BaseButton
-          className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
-            showFilename ? 'rounded-r-none' : ''
-          }`}
-          iconSize={isRoundIcon ? 24 : undefined}
-          label={isRoundIcon ? null : label}
-          icon={loading ? mdiReload : icon}
-          iconClassName={loading && 'animate-spin'}
-          color={color}
-          roundedFull={isRoundIcon}
-          asAnchor
+    <div>
+      {file && (
+        <img
+          src={file.url || URL.createObjectURL(file)}
+          alt="Preview"
+          className="mb-4 max-h-48 object-contain"
         />
-        <input
-          type='file'
-          className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
-          onChange={handleFileChange}
-          accept={accept}
-          disabled={loading}
-        />
-      </label>
-      {showFilename && !loading && (
-        <div
-          className={` ${cornersRight} px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor} dark:bg-slate-800 border-gray-200 dark:border-slate-700 border  `}
-        >
-          <span className='text-ellipsis max-w-full line-clamp-1'>
-            {file.name}
-          </span>
-        </div>
       )}
+      <div className='flex items-stretch justify-start relative'>
+        <label className='inline-flex'>
+          <BaseButton
+            className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
+              showFilename ? 'rounded-r-none' : ''
+            }`}
+            iconSize={isRoundIcon ? 24 : undefined}
+            label={isRoundIcon ? null : label}
+            icon={loading ? mdiReload : icon}
+            iconClassName={loading && 'animate-spin'}
+            color={color}
+            roundedFull={isRoundIcon}
+            asAnchor
+          />
+          <input
+            type='file'
+            className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
+            onChange={handleFileChange}
+            accept={accept}
+            capture
+            disabled={loading}
+          />
+        </label>
+        {showFilename && !loading && (
+          <div
+            className={` ${cornersRight} px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor} dark:bg-slate-800 border-gray-200 dark:border-slate-700 border  `}
+          >
+            <span className='text-ellipsis max-w-full line-clamp-1'>
+              {file.name}
+            </span>
+          </div>
+        )}
+      </div>
     </div>
+
   );
 };
 

frontend/src/pages/bottles/bottles-edit.tsx

@@ -202,12 +202,14 @@ const EditBottlesPage = () => {
                   path={'bottles/picture'}
                   name='picture'
                   id='picture'
+                  accept='image/*'
+                  capture
                   schema={{
                     size: undefined,
                     formats: undefined,
                   }}
                   component={FormImagePicker}
-                ></Field>
+                />
               </FormField>
 
               <FormField label='Age'>

frontend/src/pages/bottles/bottles-new.tsx

@@ -91,6 +91,21 @@ const BottlesNew = () => {
             onSubmit={(values) => handleSubmit(values)}
           >
             <Form>
+              <FormField label='Picture'>
+                <Field
+                  label='Picture'
+                  color='info'
+                  icon={mdiUpload}
+                  path='bottles/picture'
+                  name='picture'
+                  id='picture'
+                  accept='image/*'
+                  capture
+                  schema={{ size: undefined, formats: undefined }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+
               <FormField label='Name'>
                 <Field name='name' placeholder='Name' />
               </FormField>
@@ -169,21 +184,6 @@ const BottlesNew = () => {
                 <Field name='barcode' placeholder='Barcode' />
               </FormField>
 
-              <FormField>
-                <Field
-                  label='Picture'
-                  color='info'
-                  icon={mdiUpload}
-                  path={'bottles/picture'}
-                  name='picture'
-                  id='picture'
-                  schema={{
-                    size: undefined,
-                    formats: undefined,
-                  }}
-                  component={FormImagePicker}
-                ></Field>
-              </FormField>
 
               <FormField label='Age'>
                 <Field type='number' name='age' placeholder='Age' />