manual entry use case: database and upload flow

Author: SCGR-1

frontend/src/components/upload/FileUploadSection.tsx

@@ -9,11 +9,12 @@ interface FileUploadSectionProps {
   file: File | null;
   preview: string | null;
   imageType: string;
+  isManualMode: boolean;
   onFileChange: (file: File | undefined) => void;
   onRemoveImage: (index: number) => void;
   onAddImage: () => void;
   onImageTypeChange: (value: string | undefined) => void;
-
+  onManualModeChange: (value: boolean) => void;
   onChangeFile?: (file: File | undefined) => void;
 }
 
@@ -22,11 +23,12 @@ export default function FileUploadSection({
   file,
   preview,
   imageType,
+  isManualMode,
   onFileChange,
   onRemoveImage,
   onAddImage,
   onImageTypeChange,
-
+  onManualModeChange,
   onChangeFile,
 }: FileUploadSectionProps) {
   const onDrop = (e: DragEvent<HTMLDivElement>) => {
@@ -71,6 +73,23 @@ export default function FileUploadSection({
           />
         </Container>
       </div>
+
+      {/* Manual / Generate Mode Selection */}
+      <div className="flex justify-center">
+        <Container withInternalPadding className="bg-transparent border-none shadow-none">
+          <SegmentInput
+            name="mode"
+            value={isManualMode ? 'manual' : 'generate'}
+            onChange={(value) => onManualModeChange(value === 'manual')}
+            options={[
+              { key: 'manual', label: 'Manual' },
+              { key: 'generate', label: 'Generate' }
+            ]}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+          />
+        </Container>
+      </div>
 
              <div
          className={`${styles.dropZone} ${file ? styles.hasFile : ''}`}

frontend/src/components/upload/GeneratedTextSection.tsx

@@ -7,6 +7,7 @@ interface GeneratedTextSectionProps {
   description: string;
   analysis: string;
   recommendedActions: string;
+  isManualMode?: boolean;
   onDescriptionChange: (value: string | undefined) => void;
   onAnalysisChange: (value: string | undefined) => void;
   onRecommendedActionsChange: (value: string | undefined) => void;
@@ -22,6 +23,7 @@ export default function GeneratedTextSection({
   description,
   analysis,
   recommendedActions,
+  isManualMode = false,
   onDescriptionChange,
   onAnalysisChange,
   onRecommendedActionsChange,
@@ -37,9 +39,15 @@ export default function GeneratedTextSection({
 
   // Update local state when props change (e.g., when AI generates new content)
   useEffect(() => {
-    const formattedText = `Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`;
-    setTextareaValue(formattedText);
-  }, [description, analysis, recommendedActions]);
+    // For manual mode, don't show placeholders - use empty strings
+    if (isManualMode) {
+      const formattedText = `Description:\n${description}\n\nAnalysis:\n${analysis}\n\nRecommended Actions:\n${recommendedActions}`;
+      setTextareaValue(formattedText);
+    } else {
+      const formattedText = `Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`;
+      setTextareaValue(formattedText);
+    }
+  }, [description, analysis, recommendedActions, isManualMode]);
 
   const handleTextChange = (value: string | undefined) => {
     if (value !== undefined) {
@@ -84,7 +92,7 @@ export default function GeneratedTextSection({
             value={textareaValue}
             onChange={handleTextChange}
             rows={12}
-            placeholder="AI-generated content will appear here..."
+            placeholder={isManualMode ? "" : "AI-generated content will appear here..."}
           />
         </div>
       </div>

frontend/src/components/upload/MetadataFormSection.tsx

@@ -116,7 +116,6 @@ export default function MetadataFormSection({
             value={title}
             onChange={onTitleChange}
             placeholder="Enter a title for all images..."
-            required
           />
         </div>
         {files.map((file, index) => (
@@ -137,7 +136,7 @@ export default function MetadataFormSection({
                     options={sources}
                     keySelector={(o) => o.s_code}
                     labelSelector={(o) => o.label}
-                    required
+                    placeholder="Please select"
                   />
                 )}
                 <SelectInput
@@ -148,7 +147,7 @@ export default function MetadataFormSection({
                   options={types}
                   keySelector={(o) => o.t_code}
                   labelSelector={(o) => o.label}
-                  required={imageType !== 'drone_image'}
+                  placeholder="Please select"
                 />
                 <SelectInput
                   label="EPSG"
@@ -158,8 +157,7 @@ export default function MetadataFormSection({
                   options={spatialReferences}
                   keySelector={(o) => o.epsg}
                   labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
-                  placeholder="EPSG"
-                  required={imageType !== 'drone_image'}
+                  placeholder="Please select"
                 />
                 <MultiSelectInput
                   label="Countries (optional)"
@@ -289,7 +287,6 @@ export default function MetadataFormSection({
           value={title}
           onChange={onTitleChange}
           placeholder="Enter a title for this map..."
-          required
         />
       </div>
       {imageType !== 'drone_image' && (
@@ -301,7 +298,7 @@ export default function MetadataFormSection({
           options={sources}
           keySelector={(o) => o.s_code}
           labelSelector={(o) => o.label}
-          required
+          placeholder="Please select"
         />
       )}
       <SelectInput
@@ -312,7 +309,7 @@ export default function MetadataFormSection({
         options={types}
         keySelector={(o) => o.t_code}
         labelSelector={(o) => o.label}
-        required={imageType !== 'drone_image'}
+        placeholder="Please select"
       />
       <SelectInput
         label="EPSG"
@@ -322,8 +319,7 @@ export default function MetadataFormSection({
         options={spatialReferences}
         keySelector={(o) => o.epsg}
         labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
-        placeholder="EPSG"
-        required={imageType !== 'drone_image'}
+        placeholder="Please select"
       />
       <SelectInput
         label="Image Type"
@@ -333,7 +329,6 @@ export default function MetadataFormSection({
         options={imageTypes}
         keySelector={(o) => o.image_type}
         labelSelector={(o) => o.label}
-        required
       />
       <MultiSelectInput
         label="Countries (optional)"